import Avatar from '@/Components/shared/Avatar';
import Logo from '@/Components/shared/Logo';
import ThemeToggle from '@/Components/shared/ThemeToggle';
import { PageProps } from '@/types';
import { Menu, MenuButton, MenuItem, MenuItems } from '@headlessui/react';
import { Link, usePage } from '@inertiajs/react';
import SearchCommand from '@/Components/catalog/SearchCommand';
import { useFlash } from '@/hooks/useFlash';
import { ease } from '@/lib/motion';
import { motion } from 'framer-motion';
import { Library, LogOut, MailWarning, Search, Settings, Shield, User } from 'lucide-react';
import { PropsWithChildren, useState } from 'react';

const item = 'flex w-full items-center gap-2 rounded-md px-2.5 py-2 text-sm text-left data-[focus]:bg-accent';

export default function PublicLayout({ children }: PropsWithChildren) {
    const page = usePage<PageProps>();
    const { auth } = page.props;
    const user = auth.user;
    const [searchOpen, setSearchOpen] = useState(false);

    useFlash();

    return (
        <div className="min-h-screen">
            <header className="glass sticky top-0 z-40 border-b border-border">
                <div className="mx-auto flex h-14 max-w-7xl items-center gap-6 px-4 sm:px-6">
                    <Link href={route('home')} aria-label="Aether home"><Logo /></Link>
                    <nav className="flex items-center gap-1 text-sm text-muted-foreground">
                        <Link href={route('catalog')} className="rounded-md px-3 py-1.5 transition hover:bg-accent hover:text-foreground">Browse</Link>
                        <Link href={route('compare')} className="hidden rounded-md px-3 py-1.5 transition hover:bg-accent hover:text-foreground sm:block">Compare</Link>
                        {user && <Link href={route('feed')} className="rounded-md px-3 py-1.5 transition hover:bg-accent hover:text-foreground">Feed</Link>}
                        {user && <Link href={route('library')} className="rounded-md px-3 py-1.5 transition hover:bg-accent hover:text-foreground">Library</Link>}
                    </nav>
                    <div className="ml-auto flex items-center gap-1.5">
                        <button onClick={() => setSearchOpen(true)} aria-label="Search games" className="hidden h-9 items-center gap-2 rounded-lg border border-border bg-card/60 pl-3 pr-2 text-sm text-muted-foreground transition hover:text-foreground sm:flex">
                            <Search className="size-3.5" /> Search
                            <kbd className="ml-6 rounded border border-border px-1.5 py-0.5 text-[10px]">⌘K</kbd>
                        </button>
                        <button onClick={() => setSearchOpen(true)} aria-label="Search games" className="inline-flex size-9 items-center justify-center rounded-lg text-muted-foreground hover:bg-accent hover:text-foreground sm:hidden"><Search className="size-4" /></button>
                        <ThemeToggle />
                        {user ? (
                            <Menu>
                                <MenuButton className="rounded-full ring-offset-background transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-offset-2" aria-label="Account menu">
                                    <Avatar name={user.name} src={user.avatar} />
                                </MenuButton>
                                <MenuItems anchor="bottom end" className="glass z-50 mt-2 w-56 rounded-xl border border-border p-1.5 shadow-xl outline-none [--anchor-gap:4px]">
                                    <div className="px-2.5 py-2">
                                        <p className="truncate text-sm font-medium">{user.name}</p>
                                        <p className="truncate text-xs text-muted-foreground">@{user.username}</p>
                                    </div>
                                    <div className="my-1 h-px bg-border" />
                                    {user.is_admin && <MenuItem><Link href={route('admin.dashboard')} className={item}><Shield className="size-4" /> Admin</Link></MenuItem>}
                                    <MenuItem><Link href={route('library')} className={item}><Library className="size-4" /> My library</Link></MenuItem>
                                    <MenuItem><Link href={route('users.show', user.username ?? '')} className={item}><User className="size-4" /> My profile</Link></MenuItem>
                                    <MenuItem><Link href={route('profile.edit')} className={item}><Settings className="size-4" /> Settings</Link></MenuItem>
                                    <MenuItem><Link href={route('logout')} method="post" as="button" className={item}><LogOut className="size-4" /> Log out</Link></MenuItem>
                                </MenuItems>
                            </Menu>
                        ) : (
                            <>
                                <Link href={route('login')} className="rounded-md px-3 py-1.5 text-sm text-muted-foreground hover:text-foreground">Log in</Link>
                                <Link href={route('register')} className="rounded-lg bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground transition hover:opacity-90">Sign up</Link>
                            </>
                        )}
                    </div>
                </div>
                {user && !user.email_verified_at && (
                    <div className="border-t border-border bg-accent/50">
                        <div className="mx-auto flex max-w-7xl items-center gap-2 px-4 py-1.5 text-xs text-muted-foreground sm:px-6">
                            <MailWarning className="size-3.5" /> Verify your email to write reviews.
                            <Link href={route('verification.send')} method="post" as="button" className="font-medium text-foreground underline-offset-4 hover:underline">Resend link</Link>
                        </div>
                    </div>
                )}
            </header>
            <motion.main
                key={page.url.split('?')[0]}
                initial={{ opacity: 0, y: 8 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.35, ease }}
                className="mx-auto max-w-7xl px-4 py-8 sm:px-6"
            >
                {children}
            </motion.main>
            <SearchCommand open={searchOpen} onOpenChange={setSearchOpen} />
        </div>
    );
}