// screens/command-palette.jsx — ⌘K palette, ported from /D menus.jsx
// Self-contained: nav + create + apartments + tenants + settings groups.

function CommandPalette({ ctx, open, onClose }) {
  const { data, nav, openAddTenant, showToast, tt } = ctx;
  const t = ctx.t || {};
  const setTweak = ctx.setTweak || (() => {});
  const [query, setQuery] = React.useState("");
  const [cursor, setCursor] = React.useState(0);
  const inputRef = React.useRef();

  React.useEffect(() => {
    if (open) { setQuery(""); setCursor(0); setTimeout(() => inputRef.current?.focus(), 50); }
  }, [open]);

  const commands = React.useMemo(() => {
    const gGoTo = tt("cmdk.goto") || "Ir a";
    const gCreate = tt("cmdk.create") || "Crear";
    const gApts = tt("cmdk.apartments") || "Pisos";
    const gTenants = tt("cmdk.tenants") || "Inquilinos";
    const gSettings = tt("cmdk.settings") || "Ajustes";
    const out = [];
    out.push({ group: gGoTo, icon: "dashboard",  label: tt("nav.dashboard"),   hint: "G P", action: () => nav("dashboard") });
    out.push({ group: gGoTo, icon: "building",   label: tt("nav.apartments"),  hint: "G A", action: () => nav("apartments") });
    out.push({ group: gGoTo, icon: "users",      label: tt("nav.tenants"),     hint: "G I", action: () => nav("tenants") });
    out.push({ group: gGoTo, icon: "trendUp",    label: tt("nav.income"),      hint: "G N", action: () => nav("income") });
    out.push({ group: gGoTo, icon: "receipt",    label: tt("nav.expenses"),    hint: "G G", action: () => nav("expenses") });
    out.push({ group: gGoTo, icon: "wrench",     label: tt("nav.maintenance"), hint: "G M", action: () => nav("maintenance") });
    out.push({ group: gGoTo, icon: "chat",       label: tt("nav.messages"),    hint: "G C", action: () => nav("messages") });
    out.push({ group: gGoTo, icon: "sun",        label: tt("nav.summer"),      hint: "G V", action: () => nav("summer") });
    out.push({ group: gGoTo, icon: "settings",   label: tt("ui.settings") || "Ajustes",  hint: "G ,", action: () => nav("settings") });

    out.push({ group: gCreate, icon: "plus", label: tt("btn.addTenant") || "Añadir inquilino", hint: "N I", action: () => openAddTenant && openAddTenant() });
    out.push({ group: gCreate, icon: "plus", label: tt("nav.recordExpense") || "Registrar gasto", action: () => showToast && showToast("Nuevo gasto (mock)") });
    out.push({ group: gCreate, icon: "plus", label: tt("btn.newApt") || "Nuevo piso", action: () => showToast && showToast("Nuevo piso (mock)") });
    out.push({ group: gCreate, icon: "plus", label: tt("btn.newTicket") || "Nueva incidencia", action: () => showToast && showToast("Nueva incidencia (mock)") });

    for (const a of data.apartments) {
      out.push({ group: gApts, icon: "building", label: a.name, hint: a.neighborhood, action: () => nav("apartment", a.id) });
    }
    for (const tn of data.tenants.filter((x) => x.status === "active")) {
      const apt = data.byId?.apt ? data.byId.apt(tn.aptId) : data.apartments.find((a) => a.id === tn.aptId);
      out.push({ group: gTenants, icon: "users", label: tn.name, hint: apt?.name, action: () => nav("tenant", tn.id) });
    }

    out.push({ group: gSettings, icon: "sun",
               label: t.theme === "dark" ? (tt("cmdk.toLight") || "Cambiar a modo claro") : (tt("cmdk.toDark") || "Cambiar a modo oscuro"),
               action: () => setTweak("theme", t.theme === "dark" ? "light" : "dark") });
    out.push({ group: gSettings, icon: "spark",
               label: tt("cmdk.density") || "Alternar densidad compacta",
               action: () => setTweak("density", t.density === "compact" ? "comfortable" : "compact") });
    return out;
  }, [data, t, nav, openAddTenant, showToast, setTweak, tt]);

  const filtered = React.useMemo(() => {
    const q = query.toLowerCase().trim();
    if (!q) return commands;
    return commands.filter((c) =>
      c.label.toLowerCase().includes(q) ||
      (c.hint && String(c.hint).toLowerCase().includes(q)) ||
      c.group.toLowerCase().includes(q)
    );
  }, [commands, query]);

  React.useEffect(() => { setCursor(0); }, [query, open]);

  const grouped = React.useMemo(() => {
    const map = new Map();
    for (const c of filtered) {
      if (!map.has(c.group)) map.set(c.group, []);
      map.get(c.group).push(c);
    }
    return [...map.entries()];
  }, [filtered]);

  React.useEffect(() => {
    if (!open) return;
    const handler = (e) => {
      if (e.key === "ArrowDown") { e.preventDefault(); setCursor((c) => Math.min(filtered.length - 1, c + 1)); }
      else if (e.key === "ArrowUp") { e.preventDefault(); setCursor((c) => Math.max(0, c - 1)); }
      else if (e.key === "Enter") {
        e.preventDefault();
        const c = filtered[cursor];
        if (c) { c.action(); onClose(); }
      } else if (e.key === "Escape") { onClose(); }
    };
    window.addEventListener("keydown", handler);
    return () => window.removeEventListener("keydown", handler);
  }, [open, filtered, cursor, onClose]);

  if (!open) return null;

  let runningIndex = -1;
  return (
    <div className="cmdk-scrim" onClick={(e) => e.target === e.currentTarget && onClose()}>
      <div className="cmdk-shell">
        <div className="cmdk-input">
          <Icon name="search" size={16} />
          <input ref={inputRef} placeholder={tt("cmdk.placeholder") || "Buscar pisos, inquilinos, acciones…"}
                 value={query} onChange={(e) => setQuery(e.target.value)} />
          <span className="kbd">esc</span>
        </div>
        <div className="cmdk-list">
          {grouped.length === 0 && (
            <div className="cmdk-empty">
              {tt("cmdk.noMatches") ? tt("cmdk.noMatches", { q: query }) : `Sin resultados para "${query}"`}
            </div>
          )}
          {grouped.map(([group, items]) => {
            // Only show keyboard hint badges for the Ir a / Crear groups.
            const isShortcutGroup = group === (tt("cmdk.goto") || "Ir a") || group === (tt("cmdk.create") || "Crear");
            const isReferenceGroup = group === (tt("cmdk.apartments") || "Pisos") || group === (tt("cmdk.tenants") || "Inquilinos");
            return (
              <div key={group}>
                <div className="cmdk-group-h">{group}</div>
                {items.map((c) => {
                  runningIndex++;
                  const isActive = runningIndex === cursor;
                  const myIndex = runningIndex;
                  return (
                    <button key={`${group}:${c.label}`} className="cmdk-item" data-active={isActive}
                            onMouseEnter={() => setCursor(myIndex)}
                            onClick={() => { c.action(); onClose(); }}>
                      <span className="ic"><Icon name={c.icon} size={15} /></span>
                      <span style={{ flex: 1, minWidth: 0 }}>
                        <div>{c.label}</div>
                        {c.hint && isReferenceGroup && (
                          <div style={{ fontSize: 11, color: "var(--ef-muted)" }}>{c.hint}</div>
                        )}
                      </span>
                      {c.hint && isShortcutGroup && (
                        <span className="hint">{c.hint}</span>
                      )}
                    </button>
                  );
                })}
              </div>
            );
          })}
        </div>
        <div className="cmdk-foot">
          <span className="kbd">↑</span><span className="kbd">↓</span> {tt("cmdk.navigate") || "navegar"}
          <span className="kbd">↵</span> {tt("cmdk.open") || "abrir"}
          <span className="kbd">esc</span> {tt("cmdk.close") || "cerrar"}
          <span style={{ marginLeft: "auto" }}>
            {filtered.length} {filtered.length === 1 ? (tt("cmdk.result") || "resultado") : (tt("cmdk.results") || "resultados")}
          </span>
        </div>
      </div>
    </div>
  );
}

window.CommandPalette = CommandPalette;