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

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

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

    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" />
                        Begin
                    </p>
                    <p className="font-serif text-[2.4rem] sm:text-[2.9rem] leading-[1.08] tracking-[-0.022em] text-white">
                        Every wedding begins with a <em className="italic text-primary not-italic">composition</em>.
                    </p>
                </div>

                <div className="relative p-10 flex items-center justify-between text-[10px] tracking-[0.28em] uppercase text-white/40">
                    <span>Free to start · No card</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" />
                        Open your atelier
                    </p>
                    <h1 className="font-serif text-[2.4rem] sm:text-[2.9rem] tracking-[-0.022em] leading-[1.04] mb-3">
                        Begin the <em className="italic text-primary">composition</em>.
                    </h1>
                    <p className="text-[14.5px] text-muted-foreground mb-10 leading-[1.65]">
                        Free for couples planning solo. Upgrade once, never again.
                    </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.name')}
                            </label>
                            <input
                                type="text"
                                value={data.name}
                                onChange={(e) => setData('name', e.target.value)}
                                className="input"
                                placeholder="Olivia Hayes"
                                required
                                autoFocus
                            />
                            {errors.name && <p className="text-danger text-xs mt-1.5">{errors.name}</p>}
                        </div>

                        <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
                            />
                            {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
                                />
                                {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.creating') : t('auth.register')}
                        </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.have_account')}{' '}
                        <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>
    );
}