"use client";

import { useEffect, useMemo, useState } from "react";
import { ChevronDown, FileText, Image as ImageIcon, Sparkles, FolderCog, Moon, Search, Sun, Menu, ArrowRight } from "lucide-react";
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "@/components/ui/dropdown-menu";
import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from "@/components/ui/command";
import { useApp } from "@/components/app-context";
import { categories, tools } from "@/data/tools";
import { catById } from "@/data/tools";

export function Logo({ className = "" }: { className?: string }) {
  return (
    <span className={`inline-flex items-center gap-2 ${className}`}>
      <span className="flex h-8 w-8 items-center justify-center rounded-[10px] bg-[#0b8a47] shadow-sm">
        <FileText className="h-4.5 w-4.5 text-white" strokeWidth={2.2} />
      </span>
      <Wordmark />
    </span>
  );
}

export function Wordmark() {
  const { T } = useApp();
  return (
    <span className="text-[19px] font-extrabold tracking-tight">
      <span className="text-zinc-900 dark:text-zinc-50">{T("brand")}</span>
      <span className="text-[#0b8a47] dark:text-emerald-400">{T("brand2")}</span>
    </span>
  );
}

const catIcons = {
  pdf: FileText,
  image: ImageIcon,
  ai: Sparkles,
  file: FolderCog,
} as const;

export function SiteHeader({ onNavigate }: { onNavigate: (id: string) => void }) {
  const { T, lang, setLang } = useApp();
  const { resolvedTheme, setTheme } = useThemeSafe();
  const [searchOpen, setSearchOpen] = useState(false);
  const [mobileOpen, setMobileOpen] = useState(false);

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      const target = e.target as HTMLElement;
      const typing = ["INPUT", "TEXTAREA"].includes(target.tagName) || target.isContentEditable;
      if (!typing && (e.key === "/" || (e.key === "k" && (e.metaKey || e.ctrlKey)))) {
        e.preventDefault();
        setSearchOpen(true);
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  const grouped = useMemo(() => {
    return categories.map((c) => ({ cat: c, items: tools.filter((t) => t.cat === c.id) }));
  }, []);

  return (
    <header className="sticky top-0 z-40 w-full border-b border-zinc-200/70 bg-white/85 backdrop-blur-md dark:border-white/10 dark:bg-[#0c1512]/85">
      <div className="mx-auto flex h-[62px] max-w-7xl items-center gap-2 px-4 sm:px-6">
        <a href="#" className="mr-2 flex items-center" aria-label="FileDeck home">
          <Logo />
        </a>

        <nav className="hidden items-center gap-1 lg:flex" aria-label="Tool categories">
          {grouped.map(({ cat, items }) => {
            const Icon = catIcons[cat.id];
            return (
              <DropdownMenu key={cat.id}>
                <DropdownMenuTrigger className="flex items-center gap-1.5 rounded-lg px-3 py-2 text-[14.5px] font-semibold text-zinc-700 outline-none transition-colors hover:bg-zinc-100 focus-visible:ring-2 focus-visible:ring-emerald-600/40 dark:text-zinc-200 dark:hover:bg-white/10">
                  <Icon className="h-4 w-4" />
                  {cat.name[lang]}
                  <ChevronDown className="h-3.5 w-3.5 opacity-60" />
                </DropdownMenuTrigger>
                <DropdownMenuContent align="start" className="max-h-[420px] w-72 overflow-y-auto rounded-xl border-zinc-200 p-1.5 dark:border-white/10">
                  {items.map((tool) => (
                    <DropdownMenuItem
                      key={tool.id}
                      onClick={() => onNavigate(tool.id)}
                      className="cursor-pointer rounded-lg px-3 py-2 text-[13.5px] focus:bg-emerald-50 dark:focus:bg-emerald-500/10"
                    >
                      <span className="truncate">{tool.name[lang]}</span>
                    </DropdownMenuItem>
                  ))}
                </DropdownMenuContent>
              </DropdownMenu>
            );
          })}
        </nav>

        <div className="ml-auto flex items-center gap-1.5 sm:gap-2">
          <button
            onClick={() => setSearchOpen(true)}
            className="flex h-9 items-center gap-2 rounded-full border border-zinc-200 bg-white px-3 text-[13.5px] text-zinc-500 transition-colors hover:border-zinc-300 hover:bg-zinc-50 dark:border-white/15 dark:bg-transparent dark:text-zinc-400 dark:hover:bg-white/5 sm:w-40"
            aria-label={T("search")}
          >
            <Search className="h-4 w-4" />
            <span className="hidden sm:inline">{T("search")}</span>
            <kbd className="ml-auto hidden rounded border border-zinc-200 px-1.5 text-[11px] text-zinc-400 dark:border-white/15 sm:inline">/</kbd>
          </button>

          <button
            onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
            className="flex h-9 w-9 items-center justify-center rounded-full text-zinc-600 transition-colors hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-white/10"
            aria-label="Toggle dark mode"
          >
            {resolvedTheme === "dark" ? <Sun className="h-[18px] w-[18px]" /> : <Moon className="h-[18px] w-[18px]" />}
          </button>

          <button
            onClick={() => setLang(lang === "en" ? "bn" : "en")}
            className="flex h-9 items-center gap-2 rounded-full pl-3 pr-1 transition-colors hover:bg-zinc-100 dark:hover:bg-white/10"
            aria-label="Switch language"
          >
            <span className="text-[14px] font-bold text-zinc-700 dark:text-zinc-200">{T("switchLang")}</span>
            <span className="flex h-7 min-w-9 items-center justify-center rounded-full bg-[#0b8a47] px-2 text-[12px] font-extrabold text-white">
              {lang === "en" ? "EN" : "বাং"}
            </span>
          </button>

          <button
            onClick={() => setMobileOpen((v) => !v)}
            className="flex h-9 w-9 items-center justify-center rounded-full text-zinc-600 transition-colors hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-white/10 lg:hidden"
            aria-label="Menu"
            aria-expanded={mobileOpen}
          >
            <Menu className="h-5 w-5" />
          </button>
        </div>
      </div>

      {mobileOpen && (
        <div className="border-t border-zinc-200 bg-white px-4 pb-5 pt-2 dark:border-white/10 dark:bg-[#0c1512] lg:hidden">
          <div className="grid grid-cols-2 gap-3">
            {categories.map((c) => (
              <div key={c.id}>
                <div className={`mb-1.5 inline-flex items-center gap-1.5 rounded-lg px-2 py-1 text-[12.5px] font-bold ${c.chip}`}>
                  {c.name[lang]}
                </div>
                <ul className="max-h-44 space-y-0.5 overflow-y-auto pr-1">
                  {tools.filter((t) => t.cat === c.id).slice(0, 8).map((tool) => (
                    <li key={tool.id}>
                      <button
                        onClick={() => { setMobileOpen(false); onNavigate(tool.id); }}
                        className="w-full truncate rounded-md px-2 py-1.5 text-left text-[13px] text-zinc-600 hover:bg-zinc-100 dark:text-zinc-300 dark:hover:bg-white/5"
                      >
                        {tool.name[lang]}
                      </button>
                    </li>
                  ))}
                </ul>
              </div>
            ))}
          </div>
        </div>
      )}

      <Dialog open={searchOpen} onOpenChange={setSearchOpen}>
        <DialogContent className="top-[18%] max-w-lg translate-y-0 gap-0 rounded-2xl p-0 [&>button]:hidden">
          <DialogTitle className="sr-only">{T("search")}</DialogTitle>
          <Command className="rounded-2xl">
            <CommandInput placeholder={T("searchPlaceholder")} />
            <CommandList className="max-h-[46vh]">
              <CommandEmpty>{T("noResults")}</CommandEmpty>
              {grouped.map(({ cat, items }) => (
                <CommandGroup key={cat.id} heading={cat.name[lang]}>
                  {items.map((tool) => (
                    <CommandItem
                      key={tool.id}
                      value={`${tool.name.en} ${tool.name.bn} ${tool.id}`}
                      onSelect={() => {
                        setSearchOpen(false);
                        onNavigate(tool.id);
                      }}
                      className="cursor-pointer"
                    >
                      <ArrowRight className="mr-1 h-3.5 w-3.5 text-emerald-600" />
                      <span className="flex-1 truncate">{tool.name[lang]}</span>
                      <span className="text-[11px] text-zinc-400">{catById[tool.cat].name[lang]}</span>
                    </CommandItem>
                  ))}
                </CommandGroup>
              ))}
            </CommandList>
          </Command>
        </DialogContent>
      </Dialog>
    </header>
  );
}

import { useTheme } from "next-themes";
function useThemeSafe() {
  const { resolvedTheme, setTheme } = useTheme();
  return { resolvedTheme, setTheme };
}