import { Link, usePage } from '@inertiajs/react';
import { Clock3, ShieldCheck, TicketCheck } 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) {
    const page = usePage();
    const isLoginPage = page.component === 'auth/login';

    if (!isLoginPage) {
        return (
            <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10">
                <div className="w-full max-w-sm">
                    <div className="flex flex-col gap-8">
                        <div className="flex flex-col items-center gap-4">
                            <Link
                                href={home()}
                                className="flex flex-col items-center gap-2 font-medium"
                            >
                                <div className="mb-1 flex h-9 w-9 items-center justify-center rounded-md">
                                    <AppLogoIcon className="size-9 fill-current text-(--foreground) dark:text-white" />
                                </div>
                                <span className="sr-only">{title}</span>
                            </Link>

                            <div className="space-y-2 text-center">
                                <h1 className="text-xl font-medium">{title}</h1>
                                <p className="text-center text-sm text-muted-foreground">
                                    {description}
                                </p>
                            </div>
                        </div>
                        {children}
                    </div>
                </div>
            </div>
        );
    }

    return (
        <div className="relative min-h-svh overflow-hidden bg-[#020617] font-['IBM_Plex_Sans','Segoe_UI','Helvetica_Neue',sans-serif] text-[#E2E8F0]">
            <div className="pointer-events-none absolute -top-24 left-1/2 h-80 w-80 -translate-x-1/2 rounded-full bg-[#1E3A8A]/35 blur-3xl" />
            <div className="pointer-events-none absolute right-0 bottom-0 h-64 w-64 rounded-full bg-[#0F172A] blur-2xl" />

            <div className="relative grid min-h-svh lg:grid-cols-[40%_60%]">
                <aside className="hidden border-r border-[#1E293B] bg-[#0B1220] px-12 py-12 lg:flex lg:flex-col lg:items-center lg:justify-center">
                    <div className="max-w-md space-y-10">
                        <Link
                            href={home()}
                            className="inline-flex items-center gap-3 text-[#E2E8F0]"
                        >
                            <div className="flex h-10 w-10 items-center justify-center rounded-xl border border-[#334155] bg-[#111827] shadow-sm">
                                <AppLogoIcon className="size-7 fill-current text-[#60A5FA]" />
                            </div>
                            <span className="text-sm font-semibold tracking-wide uppercase text-[#94A3B8]">
                                Support Desk
                            </span>
                        </Link>

                        <div className="space-y-4">
                            <h1 className="max-w-[20ch] text-[32px] leading-9.5 font-semibold text-[#F8FAFC]">
                                {title}
                            </h1>
                            <p className="max-w-[48ch] text-[15px] leading-5.5 text-[#94A3B8]">
                                {description}
                            </p>
                        </div>

                        <ul className="space-y-4">
                            <li className="flex items-start gap-3">
                                <ShieldCheck className="mt-0.5 size-5 text-[#60A5FA]" />
                                <div>
                                    <p className="text-sm font-semibold text-[#E2E8F0]">
                                        Reliable access controls
                                    </p>
                                    <p className="text-[13px] leading-4.5 text-[#94A3B8]">
                                        Security-first authentication for agents and admins.
                                    </p>
                                </div>
                            </li>
                            <li className="flex items-start gap-3">
                                <Clock3 className="mt-0.5 size-5 text-[#60A5FA]" />
                                <div>
                                    <p className="text-sm font-semibold text-[#E2E8F0]">
                                        SLA awareness from first click
                                    </p>
                                    <p className="text-[13px] leading-4.5 text-[#94A3B8]">
                                        Jump into queues and prevent breaches without delay.
                                    </p>
                                </div>
                            </li>
                            <li className="flex items-start gap-3">
                                <TicketCheck className="mt-0.5 size-5 text-[#60A5FA]" />
                                <div>
                                    <p className="text-sm font-semibold text-[#E2E8F0]">
                                        Ticket-ready workspace
                                    </p>
                                    <p className="text-[13px] leading-4.5 text-[#94A3B8]">
                                        Access customer updates, assignments, and status changes in one place.
                                    </p>
                                </div>
                            </li>
                        </ul>

                        <p className="text-[13px] leading-4.5 text-[#64748B]">
                            Built for fast-paced support teams handling high-volume ticket workflows.
                        </p>
                    </div>
                </aside>

                <section className="flex items-center justify-center px-6 py-8 sm:px-8 lg:px-12">
                    <div className="w-full max-w-115 rounded-2xl border border-[#334155] bg-[#0F172A] p-6 shadow-[0_25px_45px_-28px_rgba(2,6,23,0.75)] transition-all duration-200 ease-out motion-safe:starting:translate-y-3 motion-safe:starting:opacity-0 sm:p-8">
                        <div className="mb-8 space-y-3 lg:hidden">
                            <Link
                                href={home()}
                                className="inline-flex items-center gap-3 text-[#E2E8F0]"
                            >
                                <div className="flex h-9 w-9 items-center justify-center rounded-lg bg-[#1E293B]">
                                    <AppLogoIcon className="size-6 fill-current text-[#60A5FA]" />
                                </div>
                                <span className="text-sm font-semibold tracking-wide uppercase text-[#94A3B8]">
                                    Support Desk
                                </span>
                            </Link>
                            <div>
                                <h1 className="text-[24px] leading-7.5 font-semibold tracking-[-0.01em] text-[#F8FAFC]">
                                    {title}
                                </h1>
                                <p className="mt-2 text-[15px] leading-5.5 text-[#94A3B8]">
                                    {description}
                                </p>
                            </div>
                        </div>

                        {children}
                    </div>
                </section>
            </div>
        </div>
    );
}