import { Link, usePage } from '@inertiajs/react';
import { Menu, X } from 'lucide-react';
import { useState } from 'react';
import { cn } from '@/lib/utils';
import { dashboard, login, logout, register } from '@/routes';
import { navLinks } from './data';
import ZozTripLogo from './zoztrip-logo';

type Props = {
    variant?: 'overlay' | 'solid';
};

export default function SiteHeader({ variant = 'overlay' }: Props) {
    const { auth } = usePage().props;
    const [open, setOpen] = useState(false);

    return (
        <header
            className={cn(
                'inset-x-0 top-0 z-30',
                variant === 'overlay'
                    ? 'absolute'
                    : 'sticky bg-white shadow-[0_1px_0_rgba(11,31,51,0.06)]',
            )}
        >
            <div className="mx-auto flex max-w-7xl items-center justify-between px-4 py-5 sm:px-6 lg:px-10">
                <ZozTripLogo />

                <nav className="hidden items-center gap-10 text-sm text-navy lg:flex">
                    {navLinks.map((link) => (
                        <a
                            key={link.label}
                            href={link.href}
                            className="transition-colors hover:text-gold-dark"
                        >
                            {link.label}
                        </a>
                    ))}
                </nav>

                <div className="hidden items-center gap-5 text-sm text-navy lg:flex">
                    {auth.user ? (
                        <>
                            <Link
                                href={logout()}
                                as="button"
                                className="font-medium hover:text-gold-dark"
                            >
                                Log out
                            </Link>
                            <Link
                                href={dashboard()}
                                className="rounded-md bg-gold px-5 py-2.5 font-medium text-white transition-colors hover:bg-gold-dark"
                            >
                                Dashboard
                            </Link>
                        </>
                    ) : (
                        <>
                            <Link
                                href={register()}
                                className="font-medium hover:text-gold-dark"
                            >
                                Register
                            </Link>
                            <Link
                                href={login()}
                                className="rounded-md bg-gold px-5 py-2.5 font-medium text-white transition-colors hover:bg-gold-dark"
                            >
                                Sign In
                            </Link>
                        </>
                    )}
                </div>

                <button
                    type="button"
                    onClick={() => setOpen(!open)}
                    className="rounded-md p-2 text-navy lg:hidden"
                    aria-label="Toggle menu"
                >
                    {open ? (
                        <X className="size-6" />
                    ) : (
                        <Menu className="size-6" />
                    )}
                </button>
            </div>

            {open && (
                <div className="mx-4 rounded-xl bg-white p-5 shadow-xl lg:hidden">
                    <nav className="flex flex-col gap-4 text-sm text-navy">
                        {navLinks.map((link) => (
                            <a
                                key={link.label}
                                href={link.href}
                                onClick={() => setOpen(false)}
                            >
                                {link.label}
                            </a>
                        ))}
                    </nav>
                    <div className="mt-5 flex items-center gap-3 border-t pt-5 text-sm">
                        {auth.user ? (
                            <>
                                <Link
                                    href={logout()}
                                    as="button"
                                    className="flex-1 rounded-md border border-navy/15 py-2.5 text-center font-medium text-navy"
                                >
                                    Log out
                                </Link>
                                <Link
                                    href={dashboard()}
                                    className="flex-1 rounded-md bg-gold py-2.5 text-center font-medium text-white"
                                >
                                    Dashboard
                                </Link>
                            </>
                        ) : (
                            <>
                                <Link
                                    href={register()}
                                    className="flex-1 rounded-md border border-navy/15 py-2.5 text-center font-medium text-navy"
                                >
                                    Register
                                </Link>
                                <Link
                                    href={login()}
                                    className="flex-1 rounded-md bg-gold py-2.5 text-center font-medium text-white"
                                >
                                    Sign In
                                </Link>
                            </>
                        )}
                    </div>
                </div>
            )}
        </header>
    );
}