import { router, usePage } from '@inertiajs/react';
import { Mail, ShieldCheck } from 'lucide-react';
import Heading from '@/components/heading';
import { Button } from '@/components/ui/button';

/**
 * Email one-time-passcode toggle. Complements the authenticator-app 2FA above it —
 * a user can enable either or both.
 */
export default function ManageEmailOtp() {
    const page = usePage().props as unknown as {
        auth?: { user?: { email_otp_enabled?: boolean } };
    };
    const enabled = page.auth?.user?.email_otp_enabled ?? false;

    return (
        <div className="space-y-4">
            <Heading
                variant="small"
                title="Email verification codes"
                description="Receive a 6-digit code by email each time you sign in"
            />

            <div className="flex items-start justify-between gap-4 rounded-xl border border-border bg-card p-4">
                <div className="flex gap-3">
                    <span className={`mt-0.5 flex size-9 shrink-0 items-center justify-center rounded-lg ${enabled ? 'bg-emerald-500/10 text-emerald-600' : 'bg-muted text-muted-foreground'}`}>
                        {enabled ? <ShieldCheck className="size-5" /> : <Mail className="size-5" />}
                    </span>
                    <div>
                        <p className="text-sm font-medium text-foreground">
                            {enabled ? 'Enabled' : 'Not enabled'}
                        </p>
                        <p className="mt-0.5 text-sm text-muted-foreground">
                            {enabled
                                ? "We'll email you a code to enter after your password."
                                : 'Add a second step to sign-in using a code sent to your email.'}
                        </p>
                    </div>
                </div>

                <Button
                    variant={enabled ? 'outline' : 'default'}
                    onClick={() => router.post('/otp/toggle', {}, { preserveScroll: true })}
                >
                    {enabled ? 'Disable' : 'Enable'}
                </Button>
            </div>
        </div>
    );
}