import { useForm, Link, usePage, router } from '@inertiajs/react';
import { useTranslator } from '@/lib/i18n';

interface PageProps {
    flash?: {
        success?: string;
        error?: string;
        verification_sent?: string;
        unverified_email?: string;
    };
}

export default function Login() {
    const t = useTranslator();
    const { flash } = usePage<PageProps>().props;
    const verificationSentTo = flash?.verification_sent;
    const unverifiedEmail   = flash?.unverified_email;
    const successFlash      = flash?.success;

    const { data, setData, post, processing, errors } = useForm({
        email: unverifiedEmail ?? '',
        password: '',
        remember: false,
    });

    function handleSubmit(e: React.FormEvent) {
        e.preventDefault();
        post('/login');
    }

    function resendVerification(email: string) {
        router.post('/verify-email/resend', { email }, { preserveScroll: true });
    }

    return (
        <div className="atelier-light min-h-screen grid lg:grid-cols-[1fr_1fr] bg-background">
            {/* Left editorial panel — cinematic photo, atelier overlay */}
            <aside className="relative hidden lg:flex flex-col justify-between overflow-hidden">
                <img
                    src="/images/home/hero-bg.jpg"
                    alt=""
                    className="absolute inset-0 w-full h-full object-cover"
                />
                <div className="absolute inset-0 bg-gradient-to-b from-[#0E0C0A]/85 via-[#0E0C0A]/55 to-[#0E0C0A]/95" />

                {/* Hairline frame */}
                <div className="absolute inset-10 border border-white/[0.08] pointer-events-none" />

                <div className="relative p-10">
                    <Link href="/" className="flex items-baseline gap-2 text-white">
                        <span className="font-serif italic text-[1.7rem] leading-none tracking-tight">WedFlow</span>
                        <span className="text-[10px] tracking-[0.32em] uppercase text-white/55 translate-y-[-2px]">Atelier</span>
                    </Link>
                </div>

                <div className="relative p-10 max-w-md">
                    <p className="text-[10.5px] tracking-[0.34em] uppercase text-primary mb-6 flex items-center gap-3">
                        <span className="inline-block w-14 h-px bg-primary" />
                        Welcome back
                    </p>
                    <p className="font-serif text-[2.4rem] sm:text-[2.9rem] leading-[1.08] tracking-[-0.022em] text-white">
                        Pick up where you left <em className="italic text-primary not-italic">off</em>.
                    </p>
                </div>

                <div className="relative p-10 flex items-center justify-between text-[10px] tracking-[0.28em] uppercase text-white/40">
                    <span>WedFlow</span>
                    <span>Vol. I · No. 001</span>
                </div>
            </aside>

            {/* Right form panel */}
            <main className="flex items-center justify-center p-6 sm:p-10">
                <div className="w-full max-w-md">
                    {/* Mobile brand */}
                    <div className="lg:hidden mb-10">
                        <Link href="/" className="flex items-baseline gap-2 text-foreground">
                            <span className="font-serif italic text-[1.55rem] leading-none tracking-tight">WedFlow</span>
                            <span className="text-[10px] tracking-[0.32em] uppercase text-muted-foreground translate-y-[-2px]">Atelier</span>
                        </Link>
                    </div>

                    <p className="text-[10.5px] tracking-[0.34em] uppercase text-primary mb-5 flex items-center gap-3">
                        <span className="inline-block w-14 h-px bg-primary" />
                        Sign in
                    </p>
                    <h1 className="font-serif text-[2.4rem] sm:text-[2.9rem] tracking-[-0.022em] leading-[1.04] mb-3">
                        Welcome <em className="italic text-primary">back</em>.
                    </h1>
                    <p className="text-[14.5px] text-muted-foreground mb-10 leading-[1.65]">
                        Sign in to the atelier.
                    </p>

                    {/* Verification-sent banner — shown right after registration */}
                    {verificationSentTo && (
                        <div className="mb-6 border border-primary/35 bg-primary/[0.06] rounded-sm p-4">
                            <p className="text-[10px] tracking-[0.3em] uppercase text-primary mb-1.5 flex items-center gap-2">
                                <span className="inline-block w-8 h-px bg-primary" />
                                Check your inbox
                            </p>
                            <p className="text-[13.5px] text-foreground/85 leading-[1.6]">
                                We've sent a verification link to <span className="font-medium">{verificationSentTo}</span>. Click it to activate your account, then sign in below.
                            </p>
                            <button
                                type="button"
                                onClick={() => resendVerification(verificationSentTo)}
                                className="mt-3 text-[10.5px] tracking-[0.22em] uppercase font-medium text-primary border-b border-primary/40 hover:border-primary transition-colors pb-0.5"
                            >
                                Resend email
                            </button>
                        </div>
                    )}

                    {/* Login attempted with an unverified email */}
                    {unverifiedEmail && !verificationSentTo && (
                        <div className="mb-6 border border-foreground/20 rounded-sm p-4">
                            <p className="text-[10px] tracking-[0.3em] uppercase text-foreground/70 mb-1.5 flex items-center gap-2">
                                <span className="inline-block w-8 h-px bg-foreground/40" />
                                Verification required
                            </p>
                            <p className="text-[13.5px] text-foreground/85 leading-[1.6] mb-3">
                                Your account at <span className="font-medium">{unverifiedEmail}</span> hasn't been verified yet. Click the link we sent to your inbox, or resend it below.
                            </p>
                            <button
                                type="button"
                                onClick={() => resendVerification(unverifiedEmail)}
                                className="btn-gold !py-2 !px-4 !text-[10.5px]"
                            >
                                {t('auth.resend_verification')}
                            </button>
                        </div>
                    )}

                    {/* Generic success flash (e.g. after clicking the verify link, password reset, etc.) */}
                    {successFlash && !verificationSentTo && !unverifiedEmail && (
                        <div className="mb-6 border border-primary/35 bg-primary/[0.06] rounded-sm p-4">
                            <p className="text-[13.5px] text-foreground/85 leading-[1.6]">{successFlash}</p>
                        </div>
                    )}

                    <form onSubmit={handleSubmit} className="space-y-5">
                        <div>
                            <label className="block text-[10px] tracking-[0.28em] uppercase text-muted-foreground mb-2">
                                {t('auth.email')}
                            </label>
                            <input
                                type="email"
                                value={data.email}
                                onChange={(e) => setData('email', e.target.value)}
                                className="input"
                                placeholder="you@example.com"
                                required
                                autoFocus
                            />
                            {errors.email && <p className="text-danger text-xs mt-1.5">{errors.email}</p>}
                        </div>

                        <div>
                            <div className="flex items-center justify-between mb-2">
                                <label className="block text-[10px] tracking-[0.28em] uppercase text-muted-foreground">
                                    {t('auth.password')}
                                </label>
                                <Link
                                    href="/forgot-password"
                                    className="text-[10.5px] tracking-[0.22em] uppercase text-foreground/65 hover:text-primary transition-colors"
                                >
                                    {t('auth.forgot_short')}
                                </Link>
                            </div>
                            <input
                                type="password"
                                value={data.password}
                                onChange={(e) => setData('password', e.target.value)}
                                className="input"
                                placeholder="••••••••"
                                required
                            />
                            {errors.password && <p className="text-danger text-xs mt-1.5">{errors.password}</p>}
                        </div>

                        <label className="flex items-center gap-2.5 cursor-pointer select-none pt-1">
                            <input
                                type="checkbox"
                                checked={data.remember}
                                onChange={(e) => setData('remember', e.target.checked)}
                                className="w-4 h-4 rounded-none border-border accent-primary"
                            />
                            <span className="text-[13px] text-muted-foreground">{t('auth.remember')}</span>
                        </label>

                        <button
                            type="submit"
                            disabled={processing}
                            className="w-full btn-gold mt-3"
                        >
                            {processing ? t('auth.entering_studio') : t('auth.enter_studio')}
                        </button>
                    </form>

                    <div className="flex items-center gap-3 my-7">
                        <div className="flex-1 h-px bg-border" />
                        <span className="text-[10px] text-muted-foreground tracking-[0.28em] uppercase">{t('auth.or')}</span>
                        <div className="flex-1 h-px bg-border" />
                    </div>

                    <a
                        href="/auth/google"
                        className="w-full flex items-center justify-center gap-2.5 border border-border rounded-none py-3.5 text-[12.5px] tracking-[0.18em] uppercase font-medium hover:bg-foreground/[0.04] hover:border-foreground/30 transition-colors"
                    >
                        <svg className="w-4 h-4" viewBox="0 0 24 24">
                            <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" />
                            <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
                            <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
                            <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
                        </svg>
                        {t('auth.continue_google')}
                    </a>

                    <p className="text-center text-[13px] text-muted-foreground mt-10">
                        {t('auth.no_account')}{' '}
                        <Link
                            href="/register"
                            className="text-primary tracking-[0.18em] uppercase text-[11.5px] font-medium border-b border-primary/40 hover:border-primary transition-colors pb-0.5 ml-1"
                        >
                            {t('auth.register')}
                        </Link>
                    </p>
                </div>
            </main>
        </div>
    );
}