import { Link, usePage } from '@inertiajs/react';
import { CheckCircle2, Languages, ShieldCheck } from 'lucide-react';
import ThemeToggle from '@/components/frontend/theme-toggle';
import SiteLogo from '@/components/site-logo';
import { useSettings } from '@/hooks/useSettings';
import { home } from '@/routes';
import type { AuthLayoutProps } from '@/types';

/**
 * Layout auth — split: panel brand profesional di kiri, form di kanan.
 * Mendukung dark/light mode pada panel kiri.
 */
export default function AuthSplitLayout({
    children,
    title,
    description,
}: AuthLayoutProps) {
    const { name, locale } = usePage().props;
    const settings = useSettings();
    const brand = settings.site_name ?? name;

    const features = [
        {
            icon: CheckCircle2,
            title: 'Manajemen konten lengkap',
            description: 'Kelola layanan, proyek, artikel, dan testimoni dalam satu dashboard.',
        },
        {
            icon: ShieldCheck,
            title: 'Aman dan terkendali',
            description: 'Akses berbasis peran dengan autentikasi dua faktor.',
        },
        {
            icon: Languages,
            title: 'Dukungan multi-bahasa',
            description: 'Kelola konten dalam Bahasa Indonesia dan Inggris dengan mudah.',
        },
    ];

    return (
        <div className="relative grid min-h-svh lg:grid-cols-2">
            {/* Toggle tema — pojok kanan atas */}
            <div className="absolute right-4 top-4 z-50">
                <ThemeToggle />
            </div>

            {/* Panel brand — kiri (hidden di mobile) */}
            <div className="relative hidden overflow-hidden border-r border-border bg-muted/30 lg:block dark:border-white/10 dark:bg-zinc-950">
                {/* Latar dekoratif */}
                <div aria-hidden="true" className="absolute inset-0">
                    <div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top_left,rgba(120,119,198,0.15),transparent_60%)] dark:bg-[radial-gradient(ellipse_at_top_left,rgba(255,255,255,0.08),transparent_60%)]" />
                    <div className="absolute inset-0 bg-[linear-gradient(rgba(0,0,0,0.03)_1px,transparent_1px),linear-gradient(90deg,rgba(0,0,0,0.03)_1px,transparent_1px)] bg-[size:56px_56px] dark:bg-[linear-gradient(rgba(255,255,255,0.045)_1px,transparent_1px),linear-gradient(90deg,rgba(255,255,255,0.045)_1px,transparent_1px)]" />
                    <div className="absolute -right-32 -top-32 size-96 rounded-full bg-primary/5 blur-3xl dark:bg-white/15" />
                    <div className="absolute -bottom-40 -left-24 size-[28rem] rounded-full bg-primary/3 blur-3xl dark:bg-white/5" />
                </div>

                <div className="relative z-10 flex h-full flex-col justify-between p-10 xl:p-14">
                    {/* Brand */}
                    <Link href={home(locale)} className="flex items-center gap-3">
                        <SiteLogo
                            lightSrc={settings.site_logo_color}
                            darkSrc={settings.site_logo_white}
                            alt={brand}
                            className="h-14 w-auto max-w-[260px] object-contain"
                        />
                    </Link>

                    {/* Value proposition + features */}
                    <div className="space-y-10">
                        <div className="space-y-3">
                            <h2 className="max-w-md text-3xl font-bold tracking-tight xl:text-4xl">
                                Kelola konten dalam satu tempat.
                            </h2>
                            <p className="max-w-md text-muted-foreground">
                                Dashboard modern untuk mengelola konten Anda — lengkap dengan dukungan multi-bahasa.
                            </p>
                        </div>

                        <ul className="space-y-4">
                            {features.map(({ icon: Icon, title: featureTitle, description: featureDescription }) => (
                                <li key={featureTitle} className="flex items-start gap-3">
                                    <div className="mt-0.5 flex size-8 shrink-0 items-center justify-center rounded-lg bg-primary/10 text-primary">
                                        <Icon className="size-4" />
                                    </div>
                                    <div>
                                        <p className="text-sm font-medium">{featureTitle}</p>
                                        <p className="mt-0.5 text-sm leading-relaxed text-muted-foreground">
                                            {featureDescription}
                                        </p>
                                    </div>
                                </li>
                            ))}
                        </ul>
                    </div>

                    {/* Footer */}
                    <p className="text-xs text-muted-foreground">
                        © {new Date().getFullYear()} {brand}. Seluruh hak dilindungi.
                    </p>
                </div>
            </div>

            {/* Form — kanan */}
            <div className="flex flex-col gap-4 p-6 md:p-10">
                <div className="flex flex-1 items-center justify-center">
                    <div className="w-full max-w-sm">
                        <div className="flex flex-col gap-6">
                            {/* Mobile brand — tampil hanya di layar kecil */}
                            <div className="flex flex-col items-center gap-2 text-center lg:hidden">
                                <Link href={home(locale)} className="flex items-center">
                                    <SiteLogo
                                        lightSrc={settings.site_logo_color}
                                        darkSrc={settings.site_logo_white}
                                        alt={brand}
                                        className="h-12 w-auto max-w-[220px] object-contain"
                                    />
                                </Link>
                            </div>

                            <div className="flex flex-col items-center gap-2 text-center">
                                <h1 className="text-2xl font-semibold tracking-tight">
                                    {title}
                                </h1>
                                <p className="text-sm text-balance text-muted-foreground">
                                    {description}
                                </p>
                            </div>
                            {children}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    );
}