import { Link } from '@inertiajs/react';
import AppLogoIcon from '@/components/app-logo-icon';
import { home } from '@/routes';

export default function AuthLayout({
    title = '',
    description = '',
    children,
}: {
    title?: string;
    description?: string;
    children: React.ReactNode;
}) {
    return (
        <div className="flex min-h-dvh" style={{ backgroundColor: '#FFFDF8' }}>
            {/* ── Left panel (hidden on mobile) ── */}
            <div
                className="relative hidden w-[45%] shrink-0 overflow-hidden lg:flex lg:flex-col"
                style={{ backgroundColor: '#0D0F12' }}
            >
                {/* Gradient blobs */}
                <div
                    className="pointer-events-none absolute -top-32 -left-32 h-[480px] w-[480px] rounded-full opacity-20"
                    style={{ background: 'radial-gradient(circle, #118AB2, transparent 70%)' }}
                />
                <div
                    className="pointer-events-none absolute -right-24 bottom-1/3 h-[360px] w-[360px] rounded-full opacity-10"
                    style={{ background: 'radial-gradient(circle, #06D6A0, transparent 70%)' }}
                />
                <div
                    className="pointer-events-none absolute bottom-0 left-1/4 h-[280px] w-[280px] rounded-full opacity-10"
                    style={{ background: 'radial-gradient(circle, #E63946, transparent 70%)' }}
                />

                {/* Content */}
                <div className="relative z-10 flex flex-1 flex-col px-10 py-10">
                    {/* Logo */}
                    <Link href={home()} className="flex items-center gap-3">
                        <div
                            className="flex h-10 w-10 items-center justify-center rounded-xl"
                            style={{ backgroundColor: '#118AB2' }}
                        >
                            <AppLogoIcon className="h-5 w-5 fill-white" />
                        </div>
                        <span className="text-xl font-bold text-white">Pakandi</span>
                    </Link>

                    {/* Headline */}
                    <div className="mt-auto">
                        <div
                            className="mb-5 inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-medium"
                            style={{
                                backgroundColor: 'rgba(17,138,178,0.18)',
                                border: '1px solid rgba(17,138,178,0.35)',
                                color: '#118AB2',
                            }}
                        >
                            Platform Pelatihan Online Terpercaya
                        </div>

                        <h2 className="text-3xl font-bold leading-tight tracking-tight text-white xl:text-4xl">
                            Belajar Lebih Cerdas,
                            <br />
                            <span style={{ color: '#118AB2' }}>Berkembang Lebih Cepat</span>
                        </h2>

                        <p className="mt-4 max-w-xs text-sm leading-relaxed" style={{ color: 'rgba(255,255,255,0.55)' }}>
                            Platform pelatihan online untuk UMKM, koperasi, dan profesional yang
                            ingin naik level tanpa harus meninggalkan kesibukan sehari-hari.
                        </p>
                    </div>

                    <p className="mt-12 text-[11px]" style={{ color: 'rgba(255,255,255,0.25)' }}>
                        &copy; {new Date().getFullYear()} Pakandi · Platform Pelatihan Online Indonesia
                    </p>
                </div>
            </div>

            {/* ── Right panel ── */}
            <div
                data-scheme="light"
                className="flex flex-1 flex-col items-center justify-center px-6 py-10 md:px-12"
                style={{ colorScheme: 'light' }}
            >
                {/* Mobile logo */}
                <Link href={home()} className="mb-8 flex items-center gap-2.5 lg:hidden">
                    <div
                        className="flex h-9 w-9 items-center justify-center rounded-xl"
                        style={{ backgroundColor: '#118AB2' }}
                    >
                        <AppLogoIcon className="h-5 w-5 fill-white" />
                    </div>
                    <span className="text-lg font-bold" style={{ color: '#1A1A1A' }}>Pakandi</span>
                </Link>

                <div className="w-full max-w-[400px]">
                    {/* Heading */}
                    {(title || description) && (
                        <div className="mb-8">
                            {title && (
                                <h1 className="text-2xl font-bold tracking-tight" style={{ color: '#1A1A1A' }}>
                                    {title}
                                </h1>
                            )}
                            {description && (
                                <p className="mt-1.5 text-sm" style={{ color: '#555555' }}>
                                    {description}
                                </p>
                            )}
                        </div>
                    )}

                    {/* Form */}
                    <div
                        className="rounded-2xl border bg-white p-7 shadow-sm"
                        style={{ borderColor: 'rgba(0,0,0,0.08)' }}
                    >
                        {children}
                    </div>
                </div>
            </div>
        </div>
    );
}