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

export default function ForgotPassword() {
    const t = useTranslator();
    const { data, setData, post, processing, errors, wasSuccessful } = useForm({ email: '' });

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

    return (
        <div className="atelier-light min-h-screen grid lg:grid-cols-[1fr_1fr] bg-background">
            {/* Left editorial panel */}
            <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" />

                <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" />
                        A small reset
                    </p>
                    <p className="font-serif text-[2.4rem] sm:text-[2.9rem] leading-[1.08] tracking-[-0.022em] text-white">
                        Everything still <em className="italic text-primary not-italic">in its place</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">
                    <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>

                    {wasSuccessful ? (
                        <div>
                            <div className="w-14 h-14 border border-border flex items-center justify-center mb-7 rounded-none">
                                <svg className="w-6 h-6 text-primary" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
                                    <rect x="3" y="5" width="18" height="14" rx="1" />
                                    <path d="m3 7 9 7 9-7" />
                                </svg>
                            </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" />
                                Email sent
                            </p>
                            <h1 className="font-serif text-[2.4rem] sm:text-[2.9rem] tracking-[-0.022em] leading-[1.04] mb-4">
                                Check your <em className="italic text-primary">inbox</em>.
                            </h1>
                            <p className="text-[15px] text-muted-foreground leading-[1.7] mb-10">
                                We've sent a reset link to your email. Click the link to set a new password — the link expires in 60 minutes.
                            </p>
                            <Link
                                href="/login"
                                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"
                            >
                                ← Back to sign in
                            </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" />
                                Reset
                            </p>
                            <h1 className="font-serif text-[2.4rem] sm:text-[2.9rem] tracking-[-0.022em] leading-[1.04] mb-3">
                                Forgot your <em className="italic text-primary">password</em>?
                            </h1>
                            <p className="text-[14.5px] text-muted-foreground mb-10 leading-[1.65]">
                                Enter your email and we'll send a link to set a new one.
                            </p>

                            <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>

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

                            <p className="text-center text-[13px] text-muted-foreground mt-10">
                                Remembered it?{' '}
                                <Link
                                    href="/login"
                                    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.sign_in')}
                                </Link>
                            </p>
                        </>
                    )}
                </div>
            </main>
        </div>
    );
}