import React from 'react';
import { Link, usePage } from '@inertiajs/react';

export default function GuestLayout({ children }: { children: React.ReactNode }) {
    const props = usePage().props as any;
    const { system_settings } = props;
    const appName = system_settings?.app_name || 'biiproject kit v2';
    const appLogo = system_settings?.app_logo;
    const appLogoText = system_settings?.app_logo_text || 'BK';

    return (
        <div className="min-h-screen flex font-sans">

            {/* ── Left brand panel ─────────────────────────────────────────── */}
            <div className="hidden lg:flex lg:w-[44%] bg-[#3D4E4B] flex-col justify-between p-14 relative overflow-hidden shrink-0">

                {/* Dot-grid texture */}
                <svg className="absolute inset-0 w-full h-full pointer-events-none" xmlns="http://www.w3.org/2000/svg">
                    <defs>
                        <pattern id="dots" x="0" y="0" width="28" height="28" patternUnits="userSpaceOnUse">
                            <circle cx="1.5" cy="1.5" r="1.5" fill="white" fillOpacity="0.07" />
                        </pattern>
                    </defs>
                    <rect width="100%" height="100%" fill="url(#dots)" />
                </svg>

                {/* Decorative rings */}
                <div className="absolute -bottom-40 -right-40 w-[480px] h-[480px] rounded-full border border-white/[0.06] pointer-events-none" />
                <div className="absolute -bottom-64 -right-64 w-[700px] h-[700px] rounded-full border border-white/[0.04] pointer-events-none" />
                <div className="absolute top-[-60px] left-[-60px] w-[300px] h-[300px] rounded-full border border-white/[0.04] pointer-events-none" />

                {/* Logo */}
                <div className="relative z-10 anim-fade">
                    <Link href="/" className="inline-flex items-center gap-3 group">
                        <div className={`w-10 h-10 rounded-[0.75rem] flex items-center justify-center overflow-hidden text-sm font-bold text-white shrink-0 ${!appLogo ? 'bg-[#D4A017]' : 'bg-white/10'}`}>
                            {appLogo
                                ? <img src={appLogo} alt={appName} className="w-full h-full object-contain" />
                                : appLogoText
                            }
                        </div>
                        <span className="text-white font-bold text-base tracking-tight">{appName}</span>
                    </Link>
                </div>

                {/* Main copy */}
                <div className="relative z-10 anim-up" style={{ animationDelay: '0.1s' }}>
                    <p className="text-[#D4A017] text-xs font-bold uppercase tracking-[0.18em] mb-5">Enterprise Platform</p>
                    <h2 className="text-white text-[2rem] font-bold leading-[1.2] tracking-tight">
                        Manage your<br />organization<br />with precision.
                    </h2>
                    <p className="mt-5 text-[#E3EBE8]/45 text-sm leading-relaxed max-w-xs">
                        Access control, user management, and system configuration — unified in one secure interface.
                    </p>

                    {/* Feature pills */}
                    <div className="mt-9 flex flex-col gap-3">
                        {[
                            'Role-based access control',
                            'Real-time audit logs',
                            'Multi-level permissions',
                        ].map((feat) => (
                            <div key={feat} className="flex items-center gap-3">
                                <div className="w-1.5 h-1.5 rounded-full bg-[#D4A017] shrink-0" />
                                <span className="text-[#E3EBE8]/55 text-sm font-medium">{feat}</span>
                            </div>
                        ))}
                    </div>
                </div>

                {/* Footer */}
                <div className="relative z-10 anim-fade" style={{ animationDelay: '0.2s' }}>
                    <p className="text-[#E3EBE8]/25 text-xs">© {new Date().getFullYear()} {appName}. All rights reserved.</p>
                </div>
            </div>

            {/* ── Right form panel ─────────────────────────────────────────── */}
            <div className="flex-1 flex flex-col items-center justify-center bg-white px-8 py-12 min-h-screen">

                {/* Mobile-only logo */}
                <div className="lg:hidden mb-10 flex items-center gap-3 anim-down">
                    <div className={`w-9 h-9 rounded-[0.6rem] flex items-center justify-center text-sm font-bold overflow-hidden ${!appLogo ? 'bg-[#3D4E4B] text-white' : ''}`}>
                        {appLogo
                            ? <img src={appLogo} alt={appName} className="w-full h-full object-contain" />
                            : appLogoText
                        }
                    </div>
                    <span className="text-[#3D4E4B] font-bold text-base tracking-tight">{appName}</span>
                </div>

                {/* Form slot */}
                <div className="w-full max-w-[360px]">
                    {children}
                </div>

                {/* Back link */}
                <div className="mt-10 anim-fade" style={{ animationDelay: '0.35s' }}>
                    <Link
                        href="/"
                        className="inline-flex items-center gap-1.5 text-xs font-semibold text-gray-300 hover:text-[#3D4E4B] transition-colors duration-200 tracking-tight"
                    >
                        <svg className="w-3.5 h-3.5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2.5}>
                            <path strokeLinecap="round" strokeLinejoin="round" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
                        </svg>
                        Back to home
                    </Link>
                </div>
            </div>
        </div>
    );
}