import { Link } from "@inertiajs/react";
import {
    BarChart3,
    CheckCircle2,
    ShieldCheck,
    TrendingUp,
    Users,
} from "lucide-react";

import AppLogoIcon from "@/components/app-logo-icon";
import { home } from "@/routes";
import type { AuthLayoutProps } from "@/types";

export default function AuthSimpleLayout({
    children,
    title,
    description,
}: AuthLayoutProps) {
    return (
        <div className="min-h-svh bg-slate-50 text-slate-950 dark:bg-slate-950 dark:text-white">
            <div className="grid min-h-svh lg:grid-cols-[1.08fr_0.92fr]">
                {/* LEFT BRAND PANEL */}
                <aside className="relative hidden overflow-hidden bg-[#102c4d] text-white lg:flex lg:flex-col ">
                    {/* Decorative background */}
                    <div className="absolute -right-32 -top-32 size-120 rounded-full bg-blue-400/10 blur-3xl" />
                    <div className="absolute -bottom-48 -left-32 size-136 rounded-full bg-cyan-400/10 blur-3xl" />

                    <div className="absolute inset-0 bg-[radial-gradient(circle_at_20%_20%,rgba(59,130,246,0.12),transparent_30%),radial-gradient(circle_at_80%_80%,rgba(34,211,238,0.08),transparent_30%)]" />

                    {/* Logo */}
                    <div className="relative px-10 pt-10 xl:px-14 xl:pt-12">
                        <Link
                            href={home()}
                            className="inline-flex items-center gap-3"
                        >
                            <div className="flex size-11 items-center justify-center rounded-2xl bg-blue-500 shadow-xl shadow-black/20">
                                <AppLogoIcon className="size-6 fill-current text-white" />
                            </div>

                            <div>
                                <div className="text-lg font-bold tracking-tight">
                                    SALES PRO
                                </div>
                                <div className="text-xs text-slate-300">
                                    Sales & Distribution Platform
                                </div>
                            </div>
                        </Link>
                    </div>

                    {/* Hero */}
                    <div className="relative max-w-2xl px-10 py-12 xl:px-14">
                        <div className="mb-6 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-3.5 py-1.5 text-xs font-medium text-blue-100 backdrop-blur-sm">
                            <span className="size-1.5 rounded-full bg-emerald-400" />
                            Business Management Platform
                        </div>

                        <h2 className="max-w-2xl text-4xl font-bold leading-[1.08] tracking-tight xl:text-5xl">
                            Kelola sales dan distribusi bisnis Anda dalam satu
                            platform.
                        </h2>

                        <p className="mt-6 max-w-xl text-base leading-7 text-slate-300">
                            Pantau customer, aktivitas sales, kunjungan, order,
                            invoice, pembayaran, hingga pengiriman dengan data
                            yang terhubung dan mudah dipantau.
                        </p>

                        {/* Feature cards */}
                        <div className="mt-9 grid max-w-xl grid-cols-3 gap-3">
                            <Feature
                                icon={Users}
                                label="Customer"
                                description="Kelola pelanggan"
                            />

                            <Feature
                                icon={BarChart3}
                                label="Analytics"
                                description="Pantau performa"
                            />

                            <Feature
                                icon={ShieldCheck}
                                label="Secure"
                                description="Data terlindungi"
                            />
                        </div>

                        {/* Mini stats */}
                        <div className="mt-6 flex max-w-xl items-center gap-4 rounded-2xl border border-white/10 bg-white/5 p-4 backdrop-blur-sm">
                            <div className="flex size-10 shrink-0 items-center justify-center rounded-xl bg-emerald-400/10 text-emerald-300">
                                <TrendingUp className="size-5" />
                            </div>

                            <div className="min-w-0">
                                <div className="text-sm font-semibold">
                                    Semua aktivitas bisnis terhubung
                                </div>
                                <div className="mt-0.5 text-xs text-slate-400">
                                    Dari kunjungan hingga pembayaran.
                                </div>
                            </div>

                            <CheckCircle2 className="ml-auto size-5 shrink-0 text-emerald-400" />
                        </div>
                    </div>

                    {/* Footer */}
                    <div className="relative px-10 pb-8 xl:px-14">
                        <p className="text-xs text-slate-500">
                            © {new Date().getFullYear()} Sales Pro. All rights
                            reserved.
                        </p>
                    </div>
                </aside>

                {/* RIGHT FORM */}
                <main className="relative flex min-h-svh items-center justify-center overflow-hidden px-5 py-10 sm:px-8">
                    {/* Mobile background decoration */}
                    <div className="pointer-events-none absolute -right-32 -top-32 size-72 rounded-full bg-blue-100/70 blur-3xl dark:bg-blue-900/20 lg:hidden" />

                    <div className="relative w-full max-w-lg">
                        {/* Mobile logo */}
                        <div className="mb-8 flex items-center justify-center lg:hidden">
                            <Link
                                href={home()}
                                className="flex items-center gap-3"
                            >
                                <div className="flex size-11 items-center justify-center rounded-2xl bg-[#102c4d] text-white shadow-lg">
                                    <AppLogoIcon className="size-6 fill-current" />
                                </div>

                                <div className="text-left">
                                    <div className="font-bold tracking-tight">
                                        SALES PRO
                                    </div>

                                    <div className="text-[11px] text-muted-foreground">
                                        Sales & Distribution Platform
                                    </div>
                                </div>
                            </Link>
                        </div>

                        {/* Form Card */}
                        <div className="rounded-[1.75rem] border border-slate-200/80 bg-white p-6 shadow-[0_20px_60px_-20px_rgba(15,23,42,0.18)] sm:p-8 dark:border-slate-800 dark:bg-slate-900 dark:shadow-black/30">
                            <div className="mb-8 space-y-3">
                                <div className="inline-flex items-center gap-2 rounded-full border border-blue-100 bg-blue-50 px-3 py-1.5 text-xs font-semibold text-blue-700 dark:border-blue-900/40 dark:bg-blue-950/40 dark:text-blue-300">
                                    <span className="size-1.5 rounded-full bg-emerald-500" />
                                    Secure business workspace
                                </div>

                                <h1 className="text-2xl font-bold tracking-tight">
                                    {title}
                                </h1>

                                <p className="text-sm leading-6 text-muted-foreground">
                                    {description}
                                </p>
                            </div>

                            {children}
                        </div>

                        {/* Security note */}
                        <div className="mt-5 flex items-center justify-center gap-2 text-center text-[11px] text-muted-foreground">
                            <ShieldCheck className="size-3.5" />
                            <span>
                                Koneksi dan data akun Anda dilindungi dengan
                                aman.
                            </span>
                        </div>
                    </div>
                </main>
            </div>
        </div>
    );
}

function Feature({
    icon: Icon,
    label,
    description,
}: {
    icon: typeof Users;
    label: string;
    description: string;
}) {
    return (
        <div className="rounded-2xl border border-white/10 bg-white/5 p-4 backdrop-blur-sm transition-colors hover:bg-white/8">
            <div className="mb-3 flex size-9 items-center justify-center rounded-xl bg-white/10">
                <Icon className="size-4 text-blue-200" />
            </div>

            <div className="text-sm font-semibold">{label}</div>

            <div className="mt-1 text-[11px] text-slate-400">{description}</div>
        </div>
    );
}