import ToasterContainer from '@/Components/Toaster';
import Link from '@/Components/Link';
import { usePage } from '@inertiajs/react';
import { Wallet } from 'lucide-react';
import { PropsWithChildren } from 'react';

interface Markalama {
    ad?: string;
    kisa_ad?: string;
    slogan?: string;
    logo_url?: string | null;
    giris_url?: string | null;
}

export default function Guest({
    children,
    title,
    subtitle,
}: PropsWithChildren<{ title?: string; subtitle?: string }>) {
    const markalama = (usePage().props as any).sistem_markalama as Markalama | undefined;
    const ad      = markalama?.ad      ?? 'Cari Takip';
    const kisaAd  = markalama?.kisa_ad ?? 'Cari Takip';
    const slogan  = markalama?.slogan  ?? 'Muhasebe Sistemi';
    // giris_url öncelikli (büyük login logosu için özel yüklenmiş), yoksa logo_url
    const logoUrl = markalama?.giris_url ?? markalama?.logo_url ?? null;

    return (
        <div className="relative flex min-h-screen items-center justify-center overflow-hidden bg-gradient-to-br from-slate-50 via-blue-50/30 to-emerald-50/30 p-4">
            <ToasterContainer />

            {/* Arka plan dekorasyon — blur orb'lar */}
            <div className="absolute inset-0 overflow-hidden">
                <div className="absolute -left-40 -top-40 h-[28rem] w-[28rem] rounded-full bg-blue-300/30 blur-3xl" />
                <div className="absolute -bottom-40 -right-40 h-[28rem] w-[28rem] rounded-full bg-emerald-300/30 blur-3xl" />
                <div className="absolute left-1/3 top-1/2 h-72 w-72 rounded-full bg-violet-200/20 blur-3xl" />
            </div>

            {/* Dekoratif grid */}
            <div
                className="absolute inset-0 opacity-[0.03]"
                style={{
                    backgroundImage: 'linear-gradient(#0f172a 1px, transparent 1px), linear-gradient(90deg, #0f172a 1px, transparent 1px)',
                    backgroundSize: '40px 40px',
                }}
            />

            <div className="relative z-10 w-full max-w-md">
                {/* Logo + sistem adı */}
                <div className="mb-8 flex flex-col items-center gap-3 text-center">
                    <Link href="/" className="group inline-flex flex-col items-center gap-3">
                        {logoUrl ? (
                            <img
                                src={logoUrl}
                                alt={ad}
                                className="max-h-24 w-auto max-w-[260px] object-contain transition group-hover:scale-105"
                            />
                        ) : (
                            <div className="flex h-16 w-16 items-center justify-center rounded-2xl bg-gradient-to-br from-blue-500 to-blue-700 shadow-xl shadow-blue-500/30">
                                <Wallet className="h-9 w-9 text-white" />
                            </div>
                        )}
                        <div>
                            <div className="text-2xl font-bold tracking-tight text-slate-900">{kisaAd}</div>
                            <div className="mt-0.5 text-sm text-slate-500">{slogan}</div>
                        </div>
                    </Link>
                </div>

                {/* Kart */}
                <div className="rounded-2xl border border-slate-200/80 bg-white/95 p-8 shadow-2xl shadow-slate-300/40 backdrop-blur-sm">
                    {(title || subtitle) && (
                        <div className="mb-6 text-center">
                            {title && (
                                <h2 className="text-xl font-semibold text-slate-900">{title}</h2>
                            )}
                            {subtitle && (
                                <p className="mt-1.5 text-sm text-slate-500">{subtitle}</p>
                            )}
                        </div>
                    )}
                    {children}
                </div>

                {/* Footer */}
                <div className="mt-6 flex flex-col items-center gap-1.5 text-xs text-slate-500">
                    <div>© {new Date().getFullYear()} <span className="font-medium text-slate-600">{ad}</span></div>
                    <Link href="/kvkk/" className="text-slate-500 underline-offset-2 hover:text-slate-700 hover:underline">
                        KVKK Aydınlatma Metni
                    </Link>
                </div>
            </div>
        </div>
    );
}