import { Link, usePage } from '@inertiajs/react';
import { Menu, X } from 'lucide-react';
import { useState } from 'react';
import { useFlashToast } from '@/hooks/use-flash-toast';
import { dashboard, login, register } from '@/routes';
import type { Auth } from '@/types';

const navLinks = [
    { label: 'Beranda', href: '/' },
    { label: 'Kelas', href: '/courses' },
    { label: 'Paket Belajar', href: '/learning-paths' },
    { label: 'Mentor', href: '/#mentors' },
    { label: 'Tentang', href: '/#tentang' },
    { label: 'Testimoni', href: '/#testimonials' },
];

export default function GuestLayout({ children }: { children: React.ReactNode }) {
    useFlashToast();
    const { auth } = usePage<{ auth: Auth }>().props;
    const [menuOpen, setMenuOpen] = useState(false);

    return (
        <div className="min-h-screen" style={{ backgroundColor: '#FFFDF8', color: '#1A1A1A' }}>
            {/* Navbar — always solid for inner pages */}
            <header
                className="sticky top-0 z-50"
                style={{
                    backgroundColor: 'rgba(255,253,248,0.97)',
                    boxShadow: '0 1px 24px rgba(0,0,0,0.07)',
                    backdropFilter: 'blur(12px)',
                }}
            >
                <div className="mx-auto flex h-[68px] max-w-7xl items-center justify-between px-5 md:px-8">
                    {/* Logo */}
                    <Link href="/" className="flex items-center gap-2">
                        <img src="/logo.png" alt="Natagara LMS" className="h-9 w-auto" />
                        <span className="text-lg font-bold tracking-tight" style={{ color: '#1A1A1A' }}>
                            Natagara LMS
                        </span>
                    </Link>

                    {/* Desktop nav */}
                    <nav className="hidden items-center gap-7 text-sm font-medium lg:flex" style={{ color: '#555555' }}>
                        {navLinks.map((l) => (
                            <Link
                                key={l.label}
                                href={l.href}
                                className="transition-colors hover:text-[#118AB2]"
                            >
                                {l.label}
                            </Link>
                        ))}
                    </nav>

                    {/* Desktop auth buttons */}
                    <div className="hidden items-center gap-3 lg:flex">
                        {auth.user ? (
                            <Link
                                href={dashboard()}
                                className="rounded-xl px-5 py-2.5 text-sm font-semibold text-white transition-all hover:-translate-y-0.5 active:translate-y-0"
                                style={{ backgroundColor: '#118AB2' }}
                            >
                                Dashboard
                            </Link>
                        ) : (
                            <>
                                <Link
                                    href={login()}
                                    className="rounded-xl px-5 py-2.5 text-sm font-medium transition-colors hover:bg-black/5"
                                    style={{ color: '#1A1A1A' }}
                                >
                                    Masuk
                                </Link>
                                <Link
                                    href={register()}
                                    className="rounded-xl px-5 py-2.5 text-sm font-semibold text-white shadow-sm transition-all hover:-translate-y-0.5 active:translate-y-0"
                                    style={{ backgroundColor: '#118AB2' }}
                                >
                                    Daftar Gratis
                                </Link>
                            </>
                        )}
                    </div>

                    {/* Mobile menu button */}
                    <button
                        className="flex h-9 w-9 items-center justify-center rounded-lg transition-colors hover:bg-black/5 lg:hidden"
                        style={{ color: '#1A1A1A' }}
                        onClick={() => setMenuOpen((v) => !v)}
                        aria-label={menuOpen ? 'Tutup menu' : 'Buka menu'}
                    >
                        {menuOpen ? <X className="h-5 w-5" /> : <Menu className="h-5 w-5" />}
                    </button>
                </div>

                {/* Mobile menu */}
                {menuOpen && (
                    <div
                        className="absolute top-full right-0 left-0 border-b border-black/5 px-5 py-4 shadow-xl backdrop-blur-xl lg:hidden"
                        style={{ backgroundColor: 'rgba(255,253,248,0.98)' }}
                    >
                        <div className="flex flex-col gap-1">
                            {navLinks.map((l) => (
                                <Link
                                    key={l.label}
                                    href={l.href}
                                    className="rounded-xl px-4 py-2.5 text-sm font-medium transition-colors hover:bg-black/5"
                                    style={{ color: '#555555' }}
                                    onClick={() => setMenuOpen(false)}
                                >
                                    {l.label}
                                </Link>
                            ))}
                            <div className="mt-3 flex flex-col gap-2 border-t border-black/5 pt-3">
                                <Link
                                    href={login()}
                                    className="rounded-xl border px-4 py-2.5 text-center text-sm font-medium"
                                    style={{ borderColor: '#118AB2', color: '#118AB2' }}
                                >
                                    Masuk
                                </Link>
                                <Link
                                    href={register()}
                                    className="rounded-xl px-4 py-2.5 text-center text-sm font-semibold text-white"
                                    style={{ backgroundColor: '#118AB2' }}
                                >
                                    Daftar Gratis
                                </Link>
                            </div>
                        </div>
                    </div>
                )}
            </header>

            {/* Page content — no wrapper so each page controls its own layout */}
            {children}
        </div>
    );
}