"use client";

import { usePathname } from "next/navigation";
import {
    Search,
    Bell,
    Sun,
    Moon,
    ChevronRight,
    Command,
    X,
    LogOut,
    Settings,
    User,
    Menu,
} from "lucide-react";
import { useState, useEffect, useRef } from "react";
import { useSidebar } from "./SidebarContext";

const breadcrumbLabels: Record<string, string> = {
    admin: "Inicio",
    edificios: "Edificios",
    demandas: "Demandas",
    propietarios: "Propietarios",
    catastro: "Catastro",
    inversores: "Inversores",
    operaciones: "Operaciones",
    marketing: "Marketing",
    portal: "Portal Web",
    usuarios: "Usuarios",
};

export function Header() {
    const pathname = usePathname();
    const [isDark, setIsDark] = useState(false);
    const [searchOpen, setSearchOpen] = useState(false);
    const [searchQuery, setSearchQuery] = useState("");
    const [userMenuOpen, setUserMenuOpen] = useState(false);
    const userMenuRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        const saved = localStorage.getItem("theme");
        if (saved === "dark") {
            setIsDark(true);
            document.documentElement.setAttribute("data-theme", "dark");
        }
        const handleKeyDown = (e: KeyboardEvent) => {
            if ((e.metaKey || e.ctrlKey) && e.key === "k") {
                e.preventDefault();
                setSearchOpen((prev) => !prev);
            }
            if (e.key === "Escape") setSearchOpen(false);
        };
        window.addEventListener("keydown", handleKeyDown);
        const handleClickOutside = (e: MouseEvent) => {
            if (userMenuRef.current && !userMenuRef.current.contains(e.target as Node)) {
                setUserMenuOpen(false);
            }
        };
        document.addEventListener("mousedown", handleClickOutside);
        return () => {
            window.removeEventListener("keydown", handleKeyDown);
            document.removeEventListener("mousedown", handleClickOutside);
        };
    }, []);

    const toggleTheme = () => {
        const next = !isDark;
        setIsDark(next);
        document.documentElement.setAttribute("data-theme", next ? "dark" : "");
        localStorage.setItem("theme", next ? "dark" : "light");
    };

    const segments = pathname.split("/").filter(Boolean);
    const breadcrumbs = segments.map((seg, i) => ({
        label: breadcrumbLabels[seg] || seg,
        href: "/" + segments.slice(0, i + 1).join("/"),
        isLast: i === segments.length - 1,
    }));

    const { isMobile, setCollapsed, collapsed } = useSidebar();

    return (
        <>
            <header
                className="sticky top-0 z-30 flex items-center justify-between backdrop-blur-xl transition-colors duration-300"
                style={{
                    padding: isMobile ? "6px 8px" : "10px",
                    backgroundColor: "var(--header-bg)",
                    borderBottom: "1px solid var(--border)",
                }}
            >
                {/* Left — hamburger on mobile */}
                <div className="flex items-center gap-2">
                    {isMobile && (
                        <button
                            onClick={() => setCollapsed(!collapsed)}
                            className="p-1.5 rounded-md transition-colors"
                            style={{ color: "var(--foreground)" }}
                        >
                            <Menu className="w-5 h-5" />
                        </button>
                    )}
                </div>

                {/* Right actions */}
                <div className="flex items-center gap-2">
                    {/* Search trigger */}
                    <button
                        onClick={() => setSearchOpen(true)}
                        className="group flex items-center gap-3 h-9 rounded-lg transition-all duration-200 hover:shadow-sm"
                        style={{
                            minWidth: isMobile ? "120px" : "280px",
                            padding: isMobile ? "6px 10px" : "8px 14px",
                            backgroundColor: "var(--muted)",
                            border: "1px solid var(--border)",
                        }}
                        onMouseEnter={(e) => {
                            (e.currentTarget as HTMLElement).style.borderColor = "var(--color-accent-400)";
                        }}
                        onMouseLeave={(e) => {
                            (e.currentTarget as HTMLElement).style.borderColor = "var(--border)";
                        }}
                    >
                        <Search className="w-3.5 h-3.5" style={{ color: "var(--muted-foreground)" }} />
                        <span className="text-xs hidden sm:inline" style={{ color: "var(--muted-foreground)" }}>
                            Buscar...
                        </span>
                    </button>

                    {/* Notifications */}
                    <button
                        className="relative p-2 rounded-xl transition-all duration-200 hover:scale-105 active:scale-95"
                        style={{ backgroundColor: "transparent" }}
                        onMouseEnter={(e) => {
                            (e.currentTarget as HTMLElement).style.backgroundColor = "var(--muted)";
                        }}
                        onMouseLeave={(e) => {
                            (e.currentTarget as HTMLElement).style.backgroundColor = "transparent";
                        }}
                    >
                        <Bell className="w-[18px] h-[18px]" style={{ color: "var(--muted-foreground)" }} />
                        <span
                            className="absolute top-1 right-1 w-2.5 h-2.5 rounded-full ring-2"
                            style={{
                                backgroundColor: "var(--color-error)",
                                boxShadow: "0 0 0 2px var(--header-bg)",
                            }}
                        />
                    </button>

                    {/* Theme */}
                    <button
                        onClick={toggleTheme}
                        className="p-2 rounded-xl transition-all duration-200 hover:scale-105 active:scale-95"
                        style={{ backgroundColor: "transparent" }}
                        onMouseEnter={(e) => {
                            (e.currentTarget as HTMLElement).style.backgroundColor = "var(--muted)";
                        }}
                        onMouseLeave={(e) => {
                            (e.currentTarget as HTMLElement).style.backgroundColor = "transparent";
                        }}
                    >
                        {isDark ? (
                            <Sun className="w-[18px] h-[18px]" style={{ color: "var(--color-accent-400)" }} />
                        ) : (
                            <Moon className="w-[18px] h-[18px]" style={{ color: "var(--muted-foreground)" }} />
                        )}
                    </button>

                    {/* Divider */}
                    <div className="w-px h-5 mx-1" style={{ backgroundColor: "var(--border)" }} />

                    {/* User with context menu */}
                    <div className="relative" ref={userMenuRef}>
                        <button
                            onClick={() => setUserMenuOpen(!userMenuOpen)}
                            className="flex items-center gap-2.5 px-2 py-1.5 rounded-lg transition-all duration-200"
                            style={{ backgroundColor: userMenuOpen ? "var(--muted)" : "transparent" }}
                            onMouseEnter={(e) => {
                                if (!userMenuOpen) (e.currentTarget as HTMLElement).style.backgroundColor = "var(--muted)";
                            }}
                            onMouseLeave={(e) => {
                                if (!userMenuOpen) (e.currentTarget as HTMLElement).style.backgroundColor = "transparent";
                            }}
                        >
                            <div className="text-right hidden sm:block">
                                <p className="text-[12px] font-semibold leading-tight" style={{ color: "var(--foreground)" }}>
                                    Admin
                                </p>
                                <p className="text-[10px] leading-tight" style={{ color: "var(--muted-foreground)" }}>
                                    Administrador
                                </p>
                            </div>
                            <div
                                className="w-9 h-9 rounded-lg flex items-center justify-center text-[11px] font-bold text-white shadow-md"
                                style={{
                                    background: "linear-gradient(135deg, #D4A934, #A67A1A)",
                                }}
                            >
                                AD
                            </div>
                        </button>

                        {/* Dropdown menu */}
                        {userMenuOpen && (
                            <div
                                className="absolute right-0 top-full mt-2 w-56 rounded-lg overflow-hidden animate-scale-in z-50"
                                style={{
                                    backgroundColor: "var(--card)",
                                    border: "1px solid var(--border)",
                                    boxShadow: "var(--shadow-lg)",
                                }}
                            >
                                <div className="p-3" style={{ borderBottom: "1px solid var(--border)" }}>
                                    <p className="text-[12px] font-semibold" style={{ color: "var(--foreground)" }}>Admin</p>
                                    <p className="text-[10px]" style={{ color: "var(--muted-foreground)" }}>admin@inmospace.es</p>
                                </div>
                                <div className="py-1">
                                    <button
                                        className="w-full flex items-center gap-2.5 px-3 py-2 text-[12px] transition-colors duration-150"
                                        style={{ color: "var(--foreground)" }}
                                        onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.backgroundColor = "var(--muted)"; }}
                                        onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.backgroundColor = "transparent"; }}
                                    >
                                        <User className="w-3.5 h-3.5" style={{ color: "var(--muted-foreground)" }} />
                                        Mi perfil
                                    </button>
                                    <button
                                        className="w-full flex items-center gap-2.5 px-3 py-2 text-[12px] transition-colors duration-150"
                                        style={{ color: "var(--foreground)" }}
                                        onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.backgroundColor = "var(--muted)"; }}
                                        onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.backgroundColor = "transparent"; }}
                                    >
                                        <Settings className="w-3.5 h-3.5" style={{ color: "var(--muted-foreground)" }} />
                                        Configuración
                                    </button>
                                </div>
                                <div style={{ borderTop: "1px solid var(--border)" }}>
                                    <button
                                        className="w-full flex items-center gap-2.5 px-3 py-2.5 text-[12px] transition-colors duration-150"
                                        style={{ color: "#EF4444" }}
                                        onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.backgroundColor = "var(--muted)"; }}
                                        onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.backgroundColor = "transparent"; }}
                                    >
                                        <LogOut className="w-3.5 h-3.5" />
                                        Cerrar sesión
                                    </button>
                                </div>
                            </div>
                        )}
                    </div>
                </div>
            </header>

            {/* ── Search Overlay ── */}
            {searchOpen && (
                <div
                    className="fixed inset-0 z-50 flex items-start justify-center pt-[10vh] px-4"
                    onClick={() => setSearchOpen(false)}
                >
                    <div className="absolute inset-0 bg-black/50 backdrop-blur-md" />
                    <div
                        className="relative w-full max-w-2xl rounded-2xl overflow-hidden animate-scale-in"
                        style={{
                            backgroundColor: "var(--card)",
                            boxShadow: "var(--shadow-2xl)",
                            border: "1px solid var(--border)",
                        }}
                        onClick={(e) => e.stopPropagation()}
                    >
                        {/* Search input */}
                        <div className="flex items-center gap-3 px-5 py-4" style={{ borderBottom: "1px solid var(--border)" }}>
                            <Search className="w-5 h-5 flex-shrink-0" style={{ color: "var(--color-accent-400)" }} />
                            <input
                                autoFocus
                                type="text"
                                value={searchQuery}
                                onChange={(e) => setSearchQuery(e.target.value)}
                                placeholder="Buscar edificios, demandas, inversores..."
                                className="flex-1 bg-transparent outline-none text-[15px] font-medium"
                                style={{ color: "var(--foreground)" }}
                            />
                            {searchQuery && (
                                <button onClick={() => setSearchQuery("")} className="p-1 rounded-md hover:bg-[var(--muted)] transition-colors">
                                    <X className="w-3.5 h-3.5" style={{ color: "var(--muted-foreground)" }} />
                                </button>
                            )}
                            <kbd
                                className="px-2 py-1 text-[10px] font-mono font-semibold rounded-lg flex-shrink-0"
                                style={{ color: "var(--muted-foreground)", backgroundColor: "var(--muted)", border: "1px solid var(--border)" }}
                            >
                                ESC
                            </kbd>
                        </div>

                        {/* Quick suggestions */}
                        <div className="p-4">
                            <p className="text-[10px] font-bold uppercase tracking-[0.15em] mb-3 px-2" style={{ color: "var(--muted-foreground)" }}>
                                Búsquedas populares
                            </p>
                            <div className="space-y-0.5">
                                {[
                                    "Edificios activos en Zona Centro",
                                    "Demandas > 500 m² oficinas",
                                    "Inversores sin tabular",
                                    "Propietarios zona Salamanca",
                                ].map((q) => (
                                    <button
                                        key={q}
                                        className="w-full text-left flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm transition-all duration-150"
                                        style={{ color: "var(--foreground)" }}
                                        onMouseEnter={(e) => {
                                            (e.currentTarget as HTMLElement).style.backgroundColor = "var(--muted)";
                                        }}
                                        onMouseLeave={(e) => {
                                            (e.currentTarget as HTMLElement).style.backgroundColor = "transparent";
                                        }}
                                    >
                                        <Search className="w-3.5 h-3.5 flex-shrink-0" style={{ color: "var(--muted-foreground)" }} />
                                        <span>{q}</span>
                                        <ChevronRight className="w-3 h-3 ml-auto opacity-0 group-hover:opacity-100" style={{ color: "var(--muted-foreground)" }} />
                                    </button>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            )}
        </>
    );
}