import { Link, router, usePage } from '@inertiajs/react';
import { Lock, Menu, Search, ShoppingCart, X } from 'lucide-react';
import { useEffect, useRef, useState } from 'react';

import { useLang } from '@/lib/lang';
import { type SharedData } from '@/types';

interface Props {
    activePage?: string;
    searchPath?: string;
    variant?: 'default' | 'checkout' | 'success';
}

function glassStyle(scrolled: boolean): React.CSSProperties {
    return {
        backgroundColor: scrolled ? 'rgba(251,247,239,0.92)' : 'rgba(251,247,239,0.76)',
        backdropFilter: scrolled ? 'blur(24px) saturate(180%)' : 'blur(16px) saturate(160%)',
        borderBottom: `1px solid ${scrolled ? 'rgba(184,137,63,0.22)' : 'rgba(184,137,63,0.10)'}`,
        boxShadow: scrolled ? '0 4px 40px rgba(31,42,48,0.08)' : '0 1px 16px rgba(31,42,48,0.04)',
        transition: 'all 0.25s ease',
    };
}

function LogoMark({ logoPath, siteName }: { logoPath?: string | null; siteName: string }) {
    return (
        <Link href="/" className="flex items-center gap-2.5">
            {logoPath ? (
                <img src={`/storage/${logoPath}`} alt={siteName} className="h-8 w-auto" />
            ) : (
                <span className="font-display text-xl font-semibold" style={{ color: 'var(--brand-slate)' }}>
                    {siteName}
                </span>
            )}
        </Link>
    );
}

export default function SiteHeader({ activePage, searchPath = '/products', variant = 'default' }: Props) {
    const { cartCount = 0, siteSettings } = usePage<SharedData>().props;
    const { t } = useLang();
    const [scrolled, setScrolled] = useState(false);
    const [menuOpen, setMenuOpen] = useState(false);
    const [searchOpen, setSearchOpen] = useState(false);
    const [searchQ, setSearchQ] = useState('');
    const searchRef = useRef<HTMLInputElement>(null);

    const siteName = siteSettings?.site_name ?? 'Kapor Bikreta';
    const logoPath = siteSettings?.logo_path;
    const showAbout = siteSettings?.show_about ?? true;
    const showBlog = siteSettings?.show_blog ?? true;

    useEffect(() => {
        const fn = () => setScrolled(window.scrollY > 20);
        window.addEventListener('scroll', fn, { passive: true });
        return () => window.removeEventListener('scroll', fn);
    }, []);

    useEffect(() => {
        if (searchOpen) setTimeout(() => searchRef.current?.focus(), 80);
    }, [searchOpen]);

    const navItems = [
        { label: t.common?.home ?? 'Home', href: '/', key: 'home' },
        { label: t.nav?.allProducts ?? 'All Products', href: '/products', key: 'products' },
        { label: 'Fragrance', href: '/fragrance', key: 'fragrance' },
        { label: 'Track Order', href: '/track-order', key: 'track-order' },
        ...(showAbout ? [{ label: t.nav?.about ?? 'About', href: '/about', key: 'about' }] : []),
        ...(showBlog ? [{ label: t.nav?.blog ?? 'Blog', href: '/blog', key: 'blog' }] : []),
    ];

    /* ── Checkout / Success variant ─────────────────────────────────────── */
    if (variant === 'checkout' || variant === 'success') {
        return (
            <header className="sticky top-0 z-50" style={glassStyle(scrolled)}>
                <div className="mx-auto flex h-[64px] max-w-[1500px] items-center justify-between px-5 lg:px-10">
                    <LogoMark logoPath={logoPath} siteName={siteName} />
                    <span className="hidden items-center gap-1.5 text-xs sm:flex" style={{ color: 'var(--brand-muted)' }}>
                        {variant === 'success' ? (
                            <>
                                <svg viewBox="0 0 20 20" fill="currentColor" className="h-3.5 w-3.5 text-[var(--brand-gold)]">
                                    <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clipRule="evenodd" />
                                </svg>
                                Order confirmed
                            </>
                        ) : (
                            <>
                                <Lock size={12} className="text-[var(--brand-gold)]" />
                                Secure checkout
                            </>
                        )}
                    </span>
                    {variant === 'success' ? (
                        <Link href="/products" className="text-xs tracking-wide" style={{ color: 'var(--brand-gold-dim)' }}>
                            Continue shopping →
                        </Link>
                    ) : (
                        <Link href="/cart" className="text-xs tracking-wide" style={{ color: 'var(--brand-gold-dim)' }}>
                            ← Return to cart
                        </Link>
                    )}
                </div>
            </header>
        );
    }

    /* ── Default full header ────────────────────────────────────────────── */
    return (
        <>
            <header className="sticky top-0 z-50" style={glassStyle(scrolled)}>
                <div className="mx-auto max-w-[1500px] px-5 lg:px-10">
                    <div className="flex h-[70px] items-center justify-between">
                        {/* Left: hamburger + logo */}
                        <div className="flex items-center gap-3 lg:flex-1">
                            <button className="-ml-2 p-2 lg:hidden" onClick={() => setMenuOpen(true)} aria-label="Open menu">
                                <Menu size={20} style={{ color: 'var(--brand-slate)' }} />
                            </button>
                            <LogoMark logoPath={logoPath} siteName={siteName} />
                        </div>

                        {/* Center: desktop nav */}
                        <nav className="hidden items-center gap-7 lg:flex">
                            {navItems.map((n) => (
                                <Link
                                    key={n.key}
                                    href={n.href}
                                    className="eyebrow pb-0.5 text-[13px] tracking-wide transition hover:opacity-70"
                                    style={{ color: activePage === n.key ? 'var(--brand-gold)' : 'var(--brand-slate)' }}
                                >
                                    {n.label}
                                </Link>
                            ))}
                        </nav>

                        {/* Right: search + cart */}
                        <div className="flex items-center gap-0.5 lg:flex-1 lg:justify-end">
                            <button
                                onClick={() => setSearchOpen(true)}
                                className="p-2.5 transition hover:opacity-70"
                                aria-label="Search"
                                style={{ color: 'var(--brand-slate)' }}
                            >
                                <Search size={18} />
                            </button>
                            <Link
                                href="/cart"
                                className="relative p-2.5 transition hover:opacity-70"
                                aria-label="Cart"
                                style={{ color: 'var(--brand-slate)' }}
                            >
                                <ShoppingCart size={18} />
                                {cartCount > 0 && (
                                    <span
                                        className="absolute right-1 top-1 flex h-4 w-4 items-center justify-center rounded-full text-[10px] font-bold text-white"
                                        style={{ backgroundColor: 'var(--brand-gold)' }}
                                    >
                                        {cartCount}
                                    </span>
                                )}
                            </Link>
                        </div>
                    </div>
                </div>
            </header>

            {/* ── Mobile drawer ─────────────────────────────────────────────── */}
            {menuOpen && (
                <div className="fixed inset-0 z-50 lg:hidden" onClick={() => setMenuOpen(false)}>
                    <div className="absolute inset-0 bg-black/40" style={{ backdropFilter: 'blur(4px)' }} />
                    <div
                        className="absolute bottom-0 left-0 top-0 flex w-[82%] max-w-[360px] flex-col p-6"
                        style={{
                            backgroundColor: 'rgba(251,247,239,0.96)',
                            backdropFilter: 'blur(24px) saturate(160%)',
                            borderRight: '1px solid rgba(184,137,63,0.15)',
                        }}
                        onClick={(e) => e.stopPropagation()}
                    >
                        <div className="mb-8 flex items-center justify-between">
                            <LogoMark logoPath={logoPath} siteName={siteName} />
                            <button onClick={() => setMenuOpen(false)} className="p-2" aria-label="Close menu">
                                <X size={18} style={{ color: 'var(--brand-slate)' }} />
                            </button>
                        </div>

                        <nav className="flex flex-col">
                            {navItems.map((n) => (
                                <Link
                                    key={n.key}
                                    href={n.href}
                                    onClick={() => setMenuOpen(false)}
                                    className="font-display border-b py-4 text-xl"
                                    style={{
                                        color: activePage === n.key ? 'var(--brand-gold)' : 'var(--brand-ink)',
                                        borderColor: 'var(--brand-line)',
                                    }}
                                >
                                    {n.label}
                                </Link>
                            ))}
                        </nav>

                        <div className="mt-auto flex items-center justify-between pt-8">
                            <span className="eyebrow text-[11px]" style={{ color: 'var(--brand-muted)' }}>
                                Quality is our Pride
                            </span>
                            <Link
                                href="/cart"
                                onClick={() => setMenuOpen(false)}
                                className="relative flex items-center gap-2 px-4 py-2 text-sm font-medium text-white"
                                style={{ backgroundColor: 'var(--brand-gold)' }}
                            >
                                <ShoppingCart size={14} />
                                Cart
                                {cartCount > 0 && (
                                    <span className="ml-0.5 rounded-full bg-white/30 px-1.5 text-[10px] font-bold">
                                        {cartCount}
                                    </span>
                                )}
                            </Link>
                        </div>
                    </div>
                </div>
            )}

            {/* ── Search overlay ────────────────────────────────────────────── */}
            {searchOpen && (
                <div className="fixed inset-0 z-50">
                    <div
                        className="absolute inset-0"
                        style={{ backgroundColor: 'rgba(31,42,48,0.55)', backdropFilter: 'blur(4px)' }}
                        onClick={() => setSearchOpen(false)}
                    />
                    <div
                        className="absolute left-0 right-0 top-0"
                        style={{
                            backgroundColor: 'rgba(251,247,239,0.94)',
                            backdropFilter: 'blur(24px) saturate(180%)',
                            borderBottom: '1px solid rgba(184,137,63,0.18)',
                        }}
                    >
                        <div className="mx-auto max-w-[1100px] px-6 py-8 lg:px-10">
                            <form
                                onSubmit={(e) => {
                                    e.preventDefault();
                                    if (searchQ.trim()) {
                                        router.visit(searchPath, { data: { search: searchQ.trim() } });
                                        setSearchOpen(false);
                                        setSearchQ('');
                                    }
                                }}
                                className="flex items-center gap-4 border-b pb-6"
                                style={{ borderColor: 'var(--brand-line)' }}
                            >
                                <Search size={22} style={{ color: 'var(--brand-gold)' }} />
                                <input
                                    ref={searchRef}
                                    value={searchQ}
                                    onChange={(e) => setSearchQ(e.target.value)}
                                    placeholder="Search products…"
                                    className="font-display flex-1 bg-transparent text-2xl outline-none lg:text-3xl"
                                    style={{ color: 'var(--brand-ink)' }}
                                />
                                <button
                                    type="button"
                                    onClick={() => { setSearchOpen(false); setSearchQ(''); }}
                                    className="eyebrow flex items-center gap-2 text-sm transition hover:opacity-70"
                                    style={{ color: 'var(--brand-muted)' }}
                                >
                                    Close <X size={12} />
                                </button>
                            </form>
                        </div>
                    </div>
                </div>
            )}
        </>
    );
}