import { useForm } from '@inertiajs/react';
import { KeyRound, Loader2 } from 'lucide-react';
import { PasswordField } from './fields';
import SectionCard from './SectionCard';

function ChangePasswordForm() {
    const passwordForm = useForm({
        current_password: '',
        password: '',
        password_confirmation: '',
    });

    function submit(e: React.FormEvent) {
        e.preventDefault();
        passwordForm.put(route('password.update'), {
            preserveScroll: true,
            onSuccess: () => passwordForm.reset(),
        });
    }

    return (
        <form onSubmit={submit} className="space-y-4">
            <PasswordField
                label="Current password"
                value={passwordForm.data.current_password}
                onChange={(v) => passwordForm.setData('current_password', v)}
                error={passwordForm.errors.current_password}
                autoComplete="current-password"
            />
            <div className="grid gap-4 sm:grid-cols-2">
                <PasswordField
                    label="New password"
                    value={passwordForm.data.password}
                    onChange={(v) => passwordForm.setData('password', v)}
                    error={passwordForm.errors.password}
                    autoComplete="new-password"
                />
                <PasswordField
                    label="Confirm new password"
                    value={passwordForm.data.password_confirmation}
                    onChange={(v) =>
                        passwordForm.setData('password_confirmation', v)
                    }
                    error={passwordForm.errors.password_confirmation}
                    autoComplete="new-password"
                />
            </div>

            {passwordForm.recentlySuccessful && (
                <p className="text-xs text-emerald-600 dark:text-emerald-400">
                    Password updated.
                </p>
            )}

            <div className="border-border flex items-center justify-end border-t pt-4">
                <button
                    type="submit"
                    disabled={passwordForm.processing}
                    className="pf-btn flex items-center gap-2 px-5 py-2 text-sm disabled:cursor-not-allowed disabled:opacity-50"
                >
                    {passwordForm.processing ? (
                        <Loader2 className="h-3.5 w-3.5 animate-spin" />
                    ) : (
                        <KeyRound className="h-3.5 w-3.5" />
                    )}
                    Update password
                </button>
            </div>
        </form>
    );
}

function SetPasswordForm() {
    const setPasswordForm = useForm({
        password: '',
        password_confirmation: '',
    });

    function submit(e: React.FormEvent) {
        e.preventDefault();
        setPasswordForm.put(route('profile.password.set'), {
            preserveScroll: true,
            onSuccess: () => setPasswordForm.reset(),
        });
    }

    return (
        <form onSubmit={submit} className="space-y-4">
            <p className="text-muted-foreground text-sm">
                You signed in with a social account. Add a password to enable
                email sign-in.
            </p>
            <div className="grid gap-4 sm:grid-cols-2">
                <PasswordField
                    label="New password"
                    value={setPasswordForm.data.password}
                    onChange={(v) => setPasswordForm.setData('password', v)}
                    error={setPasswordForm.errors.password}
                    autoComplete="new-password"
                />
                <PasswordField
                    label="Confirm password"
                    value={setPasswordForm.data.password_confirmation}
                    onChange={(v) =>
                        setPasswordForm.setData('password_confirmation', v)
                    }
                    error={setPasswordForm.errors.password_confirmation}
                    autoComplete="new-password"
                />
            </div>

            {setPasswordForm.recentlySuccessful && (
                <p className="text-xs text-emerald-600 dark:text-emerald-400">
                    Password set.
                </p>
            )}

            <div className="border-border flex items-center justify-end border-t pt-4">
                <button
                    type="submit"
                    disabled={setPasswordForm.processing}
                    className="pf-btn flex items-center gap-2 px-5 py-2 text-sm disabled:cursor-not-allowed disabled:opacity-50"
                >
                    {setPasswordForm.processing ? (
                        <Loader2 className="h-3.5 w-3.5 animate-spin" />
                    ) : (
                        <KeyRound className="h-3.5 w-3.5" />
                    )}
                    Set password
                </button>
            </div>
        </form>
    );
}

export default function SecuritySection({
    hasPassword,
}: {
    hasPassword: boolean;
}) {
    return (
        <SectionCard
            id="security"
            title={hasPassword ? 'Security' : 'Security — Set a password'}
        >
            {hasPassword ? <ChangePasswordForm /> : <SetPasswordForm />}
        </SectionCard>
    );
}