import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { Eye, EyeOff, Keyboard, Moon, PiggyBank, Search, Sun } from "lucide-react";
import { PAGES, OPEN_PALETTE_EVENT } from "./commandPaletteConfig";
import { Dialog, DialogContent, DialogDescription, DialogTitle } from "@/components/ui/dialog";
import { Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "@/components/ui/command";
import { useFinanceData } from "@/context/FinanceDataContext";
import { useTheme } from "@/context/ThemeContext";
import { CATEGORIES } from "@/lib/categories";
import { toggleAmountsHidden, usePrivacy } from "@/lib/privacy";
import { useHotkeys, MOD_LABEL } from "@/hooks/useHotkeys";
import { CategoryIcon } from "@/components/elements/CategoryIcon";
import { accountDisplayName, canHoldTransactions } from "@/lib/accounts";


function paletteFilter(value: string, search: string) {
  const v = value.toLowerCase();
  const q = search.trim().toLowerCase();
  if (!q) return 1;
  if (v.split(/[\s&/-]+/).some((w) => w.startsWith(q))) return 2;
  return v.includes(q) ? 1 : 0;
}

const keyLabel = (keys: string) => keys.split(" ").map((k) => k.toUpperCase()).join(" ");

/**
 * ⌘K palette plus the app-wide shortcuts: jump to a page, an account's or a
 * category's transactions, search transactions, hide amounts, switch theme.
 * Mounted once per app page by Layout.
 */
export function CommandPalette() {
  const navigate = useNavigate();
  const { accounts: allAccounts } = useFinanceData();
  const accounts = allAccounts.filter((a) => canHoldTransactions(a.type));
  const { theme, toggleTheme } = useTheme();
  const hidden = usePrivacy();
  const [open, setOpen] = useState(false);
  const [helpOpen, setHelpOpen] = useState(false);
  const [query, setQuery] = useState("");

  useEffect(() => {
    const onOpen = () => setOpen(true);
    window.addEventListener(OPEN_PALETTE_EVENT, onOpen);
    return () => window.removeEventListener(OPEN_PALETTE_EVENT, onOpen);
  }, []);

  useHotkeys({
    "mod+k": () => setOpen((o) => !o),
    "shift+h": () => toggleAmountsHidden(),
    "?": () => setHelpOpen(true),
    ...Object.fromEntries(PAGES.map((p) => [p.keys, () => navigate(p.to)])),
  });

  const run = (fn: () => void) => {
    setOpen(false);
    setQuery("");
    fn();
  };
  const q = query.trim();

  return (
    <>
      <Dialog open={open} onOpenChange={(o) => { setOpen(o); if (!o) setQuery(""); }}>
        <DialogContent className="overflow-hidden p-0 shadow-lg max-w-lg">
          <DialogTitle className="sr-only">Command palette</DialogTitle>
          <DialogDescription className="sr-only">Jump to a page, account or category, or run an action.</DialogDescription>
          <Command
            // Word-start matches rank above other substring matches; nothing
            // else shows. cmdk's default fuzzy scorer listed "Personal Care"
            // and "Fees & Charges" for "groc".
            filter={paletteFilter}
            className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-2.5">
            <CommandInput placeholder="Search pages, accounts, categories…" value={query} onValueChange={setQuery} />
            <CommandList className="max-h-[380px]">
              <CommandEmpty>Nothing matches.</CommandEmpty>
              <CommandGroup heading="Go to">
                {PAGES.map((p) => (
                  <CommandItem key={p.to} value={`page ${p.label}`} onSelect={() => run(() => navigate(p.to))} className="gap-2">
                    <p.icon className="h-4 w-4 text-muted-foreground" />
                    <span>{p.label}</span>
                    <CommandShortcut>{keyLabel(p.keys)}</CommandShortcut>
                  </CommandItem>
                ))}
              </CommandGroup>
              <CommandGroup heading="Actions">
                <CommandItem value="action hide show amounts privacy" onSelect={() => run(toggleAmountsHidden)} className="gap-2">
                  {hidden ? <Eye className="h-4 w-4 text-muted-foreground" /> : <EyeOff className="h-4 w-4 text-muted-foreground" />}
                  <span>{hidden ? "Show amounts" : "Hide amounts"}</span>
                  <CommandShortcut>⇧H</CommandShortcut>
                </CommandItem>
                <CommandItem value="action theme dark light mode" onSelect={() => run(toggleTheme)} className="gap-2">
                  {theme === "dark" ? <Sun className="h-4 w-4 text-muted-foreground" /> : <Moon className="h-4 w-4 text-muted-foreground" />}
                  <span>Switch to {theme === "dark" ? "light" : "dark"} theme</span>
                </CommandItem>
                <CommandItem value="action keyboard shortcuts help" onSelect={() => run(() => setHelpOpen(true))} className="gap-2">
                  <Keyboard className="h-4 w-4 text-muted-foreground" />
                  <span>Keyboard shortcuts</span>
                  <CommandShortcut>?</CommandShortcut>
                </CommandItem>
              </CommandGroup>
              {accounts.length > 0 && (
                <>
                  <CommandSeparator />
                  <CommandGroup heading="Accounts">
                    {accounts.map((a) => (
                      <CommandItem key={a.id} value={`account ${accountDisplayName(a)} ${a.institution}`} onSelect={() => run(() => navigate(`/transactions?account=${encodeURIComponent(a.id)}`))} className="gap-2">
                        <PiggyBank className="h-4 w-4 text-muted-foreground" />
                        <span className="truncate">{accountDisplayName(a)}</span>
                        <span className="text-xs text-muted-foreground truncate">{a.institution}</span>
                      </CommandItem>
                    ))}
                  </CommandGroup>
                </>
              )}
              <CommandSeparator />
              <CommandGroup heading="Categories">
                {CATEGORIES.map((c) => (
                  <CommandItem key={c} value={`category ${c}`} onSelect={() => run(() => navigate(`/transactions?category=${encodeURIComponent(c)}`))} className="gap-2">
                    <CategoryIcon category={c} size="xs" />
                    <span>{c}</span>
                  </CommandItem>
                ))}
              </CommandGroup>
              {/* Always offered, but its value doesn't contain the query, so it ranks
                  below any real match: "groceries" + Enter opens the category, while a
                  merchant name with no other match searches for it. */}
              {q && (
                <CommandGroup heading="Transactions">
                  <CommandItem forceMount value="search transactions" onSelect={() => run(() => navigate(`/transactions?q=${encodeURIComponent(q)}`))} className="gap-2">
                    <Search className="h-4 w-4 text-muted-foreground" />
                    <span>Search transactions for “{q}”</span>
                  </CommandItem>
                </CommandGroup>
              )}
            </CommandList>
          </Command>
        </DialogContent>
      </Dialog>
      <ShortcutsHelp open={helpOpen} onOpenChange={setHelpOpen} />
    </>
  );
}

const SHORTCUTS: { group: string; items: [string, string][] }[] = [
  { group: "Anywhere", items: [[`${MOD_LABEL} K`, "Command palette"], ["⇧ H", "Hide or show amounts"], ["?", "This list"]] },
  { group: "Go to", items: PAGES.map((p) => [keyLabel(p.keys), p.label] as [string, string]) },
  { group: "Transactions", items: [["/", "Search"], ["J / K", "Next / previous row"], ["Enter", "Open row"], ["X", "Select row"], ["Esc", "Clear search"]] },
];

function ShortcutsHelp({ open, onOpenChange }: { open: boolean; onOpenChange: (o: boolean) => void }) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-md">
        <DialogTitle>Keyboard shortcuts</DialogTitle>
        <DialogDescription className="sr-only">Every keyboard shortcut in the app.</DialogDescription>
        <div className="space-y-4">
          {SHORTCUTS.map((g) => (
            <section key={g.group} className="space-y-1.5">
              <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">{g.group}</h3>
              <dl className="space-y-1">
                {g.items.map(([keys, what]) => (
                  <div key={keys} className="flex items-center justify-between text-sm">
                    <dt className="text-foreground">{what}</dt>
                    <dd className="flex gap-1">
                      {keys.split(" / ").map((k) => (
                        <kbd key={k} className="rounded border border-border bg-muted px-1.5 font-mono text-[11px] leading-5 text-muted-foreground">{k}</kbd>
                      ))}
                    </dd>
                  </div>
                ))}
              </dl>
            </section>
          ))}
        </div>
      </DialogContent>
    </Dialog>
  );
}