import { router } from '@inertiajs/react';
import { KeyRound } from 'lucide-react';
import { destroy } from '@/actions/Laravel/Passkeys/Http/Controllers/PasskeyRegistrationController';
import { EmptyState, SectionCard } from '@/components/crm/page-header';
import PasskeyItem from '@/components/passkey-item';
import PasskeyRegistration from '@/components/passkey-register';
import type { Passkey } from '@/types/auth';

export type Props = {
    canManagePasskeys?: boolean;
    passkeys?: Passkey[];
};

export default function ManagePasskeys(props: Props) {
    const passkeys = props.passkeys ?? [];

    const handleDelete = (id: number, onError: () => void) => {
        router.delete(destroy.url(id), {
            preserveScroll: true,
            onError,
        });
    };

    const handleRegisterSuccess = () => {
        router.reload();
    };

    if (!(props.canManagePasskeys ?? false)) {
        return null;
    }

    return (
        <SectionCard
            icon={KeyRound}
            tone="info"
            title="Passkeys"
            description="Sign in without a password using Face ID, Touch ID or a security key."
            flush={true}
            bodyClassName="divide-hairline divide-y"
        >
            {passkeys.length > 0 ? (
                passkeys.map((passkey) => (
                    <PasskeyItem
                        key={passkey.id}
                        passkey={passkey}
                        onDelete={handleDelete}
                    />
                ))
            ) : (
                <EmptyState
                    icon={KeyRound}
                    title="No passkeys yet"
                    description="Add a passkey to sign in without a password."
                    className="py-8"
                />
            )}

            <div className="px-5 py-4">
                <PasskeyRegistration onSuccess={handleRegisterSuccess} />
            </div>
        </SectionCard>
    );
}