import { Form, Head, Link, router } from '@inertiajs/react';
import { useEffect, useState } from 'react';
import AuthHeading from '@/components/auth/auth-heading';
import OtpCodeInput from '@/components/auth/otp-code-input';
import InputError from '@/components/input-error';
import { Spinner } from '@/components/ui/spinner';
import { logout } from '@/routes';
import { otp, send } from '@/routes/verification';

type Props = {
    email: string;
    codeLength: number;
    resendAvailableIn: number;
    status?: string;
};

export default function VerifyOtp({
    email,
    codeLength,
    resendAvailableIn,
    status,
}: Props) {
    const [code, setCode] = useState('');
    const [secondsLeft, setSecondsLeft] = useState(resendAvailableIn);
    const [resending, setResending] = useState(false);

    useEffect(() => {
        if (secondsLeft <= 0) {
            return;
        }

        const timer = setTimeout(() => setSecondsLeft(secondsLeft - 1), 1000);

        return () => clearTimeout(timer);
    }, [secondsLeft]);

    const handleResend = () => {
        router.post(
            send.url(),
            {},
            {
                preserveScroll: true,
                onStart: () => setResending(true),
                onFinish: () => setResending(false),
                onSuccess: (page) => {
                    setCode('');
                    setSecondsLeft(page.props.resendAvailableIn as number);
                },
            },
        );
    };

    return (
        <>
            <Head title="Verify Account" />

            <AuthHeading
                title="Verify Account with OTP"
                description={
                    <>
                        Enter {codeLength} digit one time password sent to{' '}
                        <span className="font-medium text-navy dark:text-white">
                            {email}
                        </span>
                    </>
                }
            />

            {status === 'verification-link-sent' && (
                <div className="mt-6 rounded-lg bg-green-50 px-4 py-3 text-center text-sm font-medium text-green-700 dark:bg-green-500/10 dark:text-green-400">
                    A new code has been sent to your email address.
                </div>
            )}

            <Form {...otp.form()} className="mt-6" onError={() => setCode('')}>
                {({ processing, errors }) => (
                    <>
                        <OtpCodeInput
                            value={code}
                            onChange={setCode}
                            length={codeLength}
                        />
                        <InputError
                            message={errors.code}
                            className="mt-3 text-center"
                        />

                        <div className="mt-6 text-center text-sm">
                            {secondsLeft > 0 && (
                                <p>
                                    you can resend this code in {secondsLeft}{' '}
                                    seconds
                                </p>
                            )}
                            <button
                                type="button"
                                onClick={handleResend}
                                disabled={secondsLeft > 0 || resending}
                                className="mt-1 inline-flex items-center gap-2 font-semibold transition-colors hover:text-gold-dark disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:text-current"
                            >
                                {resending && <Spinner />}
                                {resending ? 'Sending…' : 'Resend'}
                            </button>
                        </div>

                        <button
                            type="submit"
                            disabled={code.length < codeLength || processing}
                            className="mt-6 flex h-11 w-full items-center justify-center gap-2 rounded-lg bg-gold text-base font-semibold text-white transition-colors hover:bg-gold-dark disabled:opacity-70"
                        >
                            {processing && <Spinner />}
                            Verify
                        </button>
                    </>
                )}
            </Form>

            <p className="mt-6 text-center text-sm text-gray-500 dark:text-white/60">
                Wrong email address?{' '}
                <Link
                    href={logout()}
                    as="button"
                    className="font-semibold text-navy hover:text-gold-dark dark:text-white"
                >
                    Log out
                </Link>
            </p>
        </>
    );
}