import { Link, usePage } from '@inertiajs/react';
import { Layers, CheckCircle2, Star } from 'lucide-react';
import AppLogoIcon from '@/components/app-logo-icon';
import { home } from '@/routes';
import type { AuthLayoutProps } from '@/types';

export default function AuthSplitLayout({
    children,
    title,
    description,
}: AuthLayoutProps) {
    const { name } = usePage().props;

    return (
        <div className="relative grid h-dvh flex-col items-center justify-center bg-background lg:max-w-none lg:grid-cols-2 lg:px-0">
            {/* Left Column - Graphic/Illustration Side */}
            <div className="relative hidden h-full flex-col overflow-hidden border-r border-zinc-800 bg-zinc-950 p-10 text-white lg:flex dark:border-zinc-800">
                {/* Background Image */}
                <div className="absolute inset-0 select-none">
                    <img
                        src={`${(window as any).assetUrl || '/'}images/project_mgmt_banner.jpg`}
                        alt="Project Management Illustration"
                        className="h-full w-full scale-105 object-cover opacity-85 transition-transform duration-[10000ms] hover:scale-100"
                    />
                    <div className="absolute inset-0 bg-gradient-to-b from-zinc-950/80 via-zinc-950/40 to-zinc-950/90" />
                </div>

                {/* Top Logo and App Name */}
                <Link
                    href={home()}
                    className="relative z-20 flex items-center gap-2.5 text-lg font-semibold tracking-wide transition-opacity hover:opacity-90"
                >
                    <div className="flex h-10 w-10 items-center justify-center rounded-xl border border-indigo-400/30 bg-indigo-600/90 shadow-lg backdrop-blur-md">
                        <AppLogoIcon className="size-6 fill-current text-white" />
                    </div>
                    <span className="bg-gradient-to-r from-white to-indigo-100 bg-clip-text font-extrabold text-transparent">
                        {name}
                    </span>
                </Link>

                {/* Middle / Bottom Content & Glassmorphic Floating Stats */}
                <div className="relative z-20 mt-auto max-w-lg">
                    {/* Testimonial / Tagline */}
                    <div className="mb-8 space-y-4">
                        <div className="inline-flex items-center gap-1.5 rounded-full border border-indigo-400/20 bg-indigo-500/10 px-3 py-1 text-xs font-semibold tracking-wider text-indigo-300 uppercase backdrop-blur-sm">
                            <Star className="size-3 fill-indigo-400 text-indigo-400" />
                            Next-gen Workspace
                        </div>
                        <h2 className="text-3xl leading-tight font-extrabold tracking-tight text-white sm:text-4xl">
                            Empower your team. <br />
                            Streamline your projects.
                        </h2>
                        <p className="max-w-md text-sm leading-relaxed text-zinc-300">
                            Manage sprints, track real-time tasks, and
                            collaborate effortlessly. Bring alignment to your
                            projects in a single, high-performance workspace.
                        </p>
                    </div>

                    {/* Floating Glassmorphic Activity Card */}
                    <div className="flex max-w-sm flex-col gap-3 rounded-2xl border border-zinc-700/50 bg-zinc-900/60 p-5 shadow-2xl backdrop-blur-xl transition-all duration-300 hover:border-indigo-500/30">
                        <div className="flex items-center justify-between border-b border-zinc-800/80 pb-2">
                            <div className="flex items-center gap-2">
                                <div className="rounded-lg bg-indigo-600/20 p-1.5 text-indigo-400">
                                    <Layers className="size-4" />
                                </div>
                                <span className="text-xs font-bold tracking-wide text-zinc-400 uppercase">
                                    Active Board
                                </span>
                            </div>
                            <span className="rounded-full border border-emerald-400/20 bg-emerald-400/10 px-2 py-0.5 text-[10px] font-medium text-emerald-400">
                                Live
                            </span>
                        </div>
                        <div className="flex items-center gap-3">
                            <div className="flex-1 space-y-1">
                                <h4 className="text-sm font-semibold text-white">
                                    Sprint 4.0 Launch
                                </h4>
                                <div className="h-1.5 w-full overflow-hidden rounded-full bg-zinc-800">
                                    <div className="h-full w-[84%] rounded-full bg-gradient-to-r from-indigo-500 to-purple-500" />
                                </div>
                            </div>
                            <span className="text-xs font-bold text-zinc-300">
                                84%
                            </span>
                        </div>
                        <div className="flex items-center justify-between pt-1 text-[11px] text-zinc-400">
                            <div className="flex items-center gap-1">
                                <CheckCircle2 className="size-3.5 text-emerald-400" />
                                <span>12 / 15 tasks completed</span>
                            </div>
                            <div className="flex items-center -space-x-1.5">
                                <div className="flex size-5 items-center justify-center rounded-full bg-indigo-500 text-[9px] font-bold ring-2 ring-zinc-900">
                                    A
                                </div>
                                <div className="flex size-5 items-center justify-center rounded-full bg-purple-500 text-[9px] font-bold ring-2 ring-zinc-900">
                                    B
                                </div>
                                <div className="flex size-5 items-center justify-center rounded-full bg-zinc-800 text-[9px] font-bold text-zinc-300 ring-2 ring-zinc-900">
                                    +3
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            {/* Right Column - Auth Forms */}
            <div className="flex w-full items-center justify-center lg:p-8">
                <div className="mx-auto flex w-full flex-col justify-center space-y-6 px-6 sm:w-[360px]">
                    {/* Small Screen Logo */}
                    <Link
                        href={home()}
                        className="relative z-20 flex items-center justify-center lg:hidden"
                    >
                        <div className="flex h-11 w-11 items-center justify-center rounded-xl bg-indigo-600 shadow-md">
                            <AppLogoIcon className="size-6 fill-current text-white" />
                        </div>
                    </Link>

                    <div className="flex flex-col items-start gap-2 text-left sm:items-center sm:text-center">
                        <h1 className="text-2xl font-bold tracking-tight text-zinc-900 dark:text-zinc-50">
                            {title}
                        </h1>
                        <p className="text-sm text-zinc-500 dark:text-zinc-400">
                            {description}
                        </p>
                    </div>
                    {children}
                </div>
            </div>
        </div>
    );
}