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

interface Props {
    token: string;
    email?: string;
}

export default function ResetPassword({ token, email }: Props) {
    const t = useTranslator();
    const { data, setData, post, processing, errors } = useForm({
        token,
        email: email ?? '',
        password: '',
        password_confirmation: '',
    });

    function handleSubmit(e: React.FormEvent) {
        e.preventDefault();
        post('/reset-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" />
                        Set a new password
                    </p>
                    <p className="font-serif text-[2.4rem] sm:text-[2.9rem] leading-[1.08] tracking-[-0.022em] text-white">
                        Pick up <em className="italic text-primary not-italic">right where you left off</em>.
                    </p>
                </div>

                <div className="relative p-10 flex items-center justify-between text-[10px] tracking-[0.28em] uppercase text-white/40">
                    <span>Strong · simple · secure</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>

                    <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" />
                        New password
                    </p>
                    <h1 className="font-serif text-[2.4rem] sm:text-[2.9rem] tracking-[-0.022em] leading-[1.04] mb-3">
                        Set a new <em className="italic text-primary">password</em>.
                    </h1>
                    <p className="text-[14.5px] text-muted-foreground mb-10 leading-[1.65]">
                        Choose something memorable but strong.
                    </p>

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

                        <div className="grid grid-cols-2 gap-3">
                            <div>
                                <label className="block text-[10px] tracking-[0.28em] uppercase text-muted-foreground mb-2">
                                    {t('auth.password')}
                                </label>
                                <input
                                    type="password"
                                    value={data.password}
                                    onChange={(e) => setData('password', e.target.value)}
                                    className="input"
                                    placeholder="••••••••"
                                    required
                                    autoFocus
                                />
                                {errors.password && <p className="text-danger text-xs mt-1.5">{errors.password}</p>}
                            </div>
                            <div>
                                <label className="block text-[10px] tracking-[0.28em] uppercase text-muted-foreground mb-2">
                                    {t('auth.confirm_password')}
                                </label>
                                <input
                                    type="password"
                                    value={data.password_confirmation}
                                    onChange={(e) => setData('password_confirmation', e.target.value)}
                                    className="input"
                                    placeholder="••••••••"
                                    required
                                />
                            </div>
                        </div>

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

                    <p className="text-center text-[13px] text-muted-foreground mt-10">
                        <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>
                    </p>
                </div>
            </main>
        </div>
    );
}