CommandPalette.tsx

"use client";

import { useEffect, useMemo, useState } from "react";
import { useRouter } from "next/navigation";
import { api } from "@/server/trpc/react";
import { FEATURE_FLAGS, isFlagEnabled } from "@/utils/flags";

interface CommandPaletteProps {
  onClose: () => void;
}

type Item = {
  id: string;
  label: string;
  href: string;
  group: string;
  sub?: string;
  glyph: string;
};

type QuickAction = { label: string; href: string };

// Jobs is flag-gated until launch (auto-on in dev), so the jobs quick action is
// only included when the flag is enabled.
const buildQuickActions = (jobsEnabled: boolean): QuickAction[] => [
  { label: "Go to Feed", href: "/" },
  { label: "Browse Discussions", href: "/discussions" },
  ...(jobsEnabled ? [{ label: "Find a job", href: "/jobs" }] : []),
  { label: "Write a post", href: "/create" },
  { label: "Saved", href: "/saved" },
  { label: "Notifications", href: "/notifications" },
  { label: "Settings", href: "/settings" },
];

/**
 * ⌘K command palette: site-wide search + quick nav. With a query it shows live
 * results from `api.search.everything` — Posts, People, Tags — debounced ~300ms;
 * with an empty query it falls back to Quick actions. Arrow-key navigation and
 * Enter-to-select run over the combined flat list. Mounted only while open (by
 * AppShell), which keeps state fresh without a reset effect; AppShell restores
 * focus to the trigger on close. Mirrors ui_kits/app/AppShell.jsx → CommandPalette.
 */
export function CommandPalette({ onClose }: CommandPaletteProps) {
  const router = useRouter();
  const [q, setQ] = useState("");
  const [debounced, setDebounced] = useState("");
  const [active, setActive] = useState(0);

  // Debounce input ~300ms; setState in the timeout satisfies set-state-in-effect.
  useEffect(() => {
    const t = setTimeout(() => setDebounced(q.trim()), 300);
    return () => clearTimeout(t);
  }, [q]);

  const hasQuery = debounced.length >= 2;
  const { data: results, isFetching } = api.search.everything.useQuery(
    { query: debounced, limit: 5 },
    { enabled: hasQuery },
  );

  const items = useMemo<Item[]>(() => {
    if (hasQuery) {
      const postItems: Item[] = (results?.posts ?? []).map((p) => ({
        id: `p:${p.id}`,
        label: p.title,
        href: p.href,
        group: "Posts",
        sub: `${p.upvotes ?? 0} upvotes`,
        glyph: "▲",
      }));
      const peopleItems: Item[] = (results?.people ?? []).map((u) => ({
        id: `u:${u.username}`,
        label: u.name ?? u.username,
        href: `/${u.username}`,
        group: "People",
        sub: `@${u.username}`,
        glyph: "@",
      }));
      const tagItems: Item[] = (results?.tags ?? []).map((t) => ({
        id: `t:${t.slug}`,
        label: t.title,
        href: `/?tag=${t.slug}`,
        group: "Tags",
        sub: `${t.postCount ?? 0} posts`,
        glyph: "#",
      }));
      return [...postItems, ...peopleItems, ...tagItems];
    }
    return buildQuickActions(!!isFlagEnabled(FEATURE_FLAGS.JOBS)).map((a) => ({
      id: `a:${a.href}`,
      label: a.label,
      href: a.href,
      group: "Quick actions",
      glyph: "›",
    }));
  }, [hasQuery, results]);

  const activeIndex = items.length ? Math.min(active, items.length - 1) : 0;

  const go = (href: string) => {
    router.push(href);
    onClose();
  };

  const onKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "ArrowDown") {
      e.preventDefault();
      setActive(items.length ? (activeIndex + 1) % items.length : 0);
    } else if (e.key === "ArrowUp") {
      e.preventDefault();
      setActive(
        items.length ? (activeIndex - 1 + items.length) % items.length : 0,
      );
    } else if (e.key === "Enter") {
      e.preventDefault();
      const item = items[activeIndex];
      if (item) go(item.href);
    }
  };

  const groups: { label: string; items: Item[] }[] = [];
  for (const item of items) {
    const last = groups[groups.length - 1];
    if (last && last.label === item.group) last.items.push(item);
    else groups.push({ label: item.group, items: [item] });
  }
  let flatIndex = -1;

  return (
    <div
      onClick={onClose}
      className="fixed inset-0 z-[70] flex items-start justify-center px-6 pb-6 pt-[11vh]"
      style={{ background: "rgba(4,5,7,0.62)", backdropFilter: "blur(6px)" }}
    >
      <div
        onClick={(e) => e.stopPropagation()}
        onKeyDown={onKeyDown}
        role="dialog"
        aria-modal="true"
        aria-label="Search Codú"
        className="w-full max-w-[600px] overflow-hidden rounded-xl border border-strong bg-elevated shadow-lg"
      >
        {/* A subtle thin accent line marks the active field — no focus ring. */}
        <div className="flex items-center gap-3 border-b border-hairline px-5 py-4 transition-colors focus-within:border-accent">
          <span className="text-lg leading-none text-faint">⌕</span>
          <input
            autoFocus
            value={q}
            onChange={(e) => {
              setQ(e.target.value);
              setActive(0);
            }}
            placeholder="Search posts, people, tags…"
            aria-label="Search"
            role="combobox"
            aria-expanded="true"
            aria-controls="cmdk-list"
            // The global focus-visible ring resolves to blue here; opt out and
            // let the parent's focus-within accent underline mark the field.
            className="flex-1 bg-transparent text-lg text-fg outline-none ring-0 ring-offset-0 placeholder:text-faint focus-visible:ring-0 focus-visible:ring-offset-0"
          />
          {/* Desktop closes with the Esc key; mobile gets a tap target. */}
          <kbd className="hidden rounded-sm border border-hairline px-1.5 py-0.5 font-mono text-[11px] text-faint sm:inline-flex">
            Esc
          </kbd>
          <button
            type="button"
            onClick={onClose}
            aria-label="Close search"
            className="-mr-1 flex h-8 w-8 items-center justify-center rounded-md text-faint transition-colors hover:bg-surface hover:text-fg sm:hidden"
          >
            <svg
              className="h-5 w-5"
              viewBox="0 0 24 24"
              fill="none"
              stroke="currentColor"
              strokeWidth="1.8"
              strokeLinecap="round"
              aria-hidden="true"
            >
              <path d="M6 6l12 12M18 6L6 18" />
            </svg>
          </button>
        </div>

        <div
          id="cmdk-list"
          role="listbox"
          className="max-h-[54vh] overflow-y-auto p-3"
        >
          {items.length === 0 &&
            (hasQuery && isFetching ? (
              <div className="p-8 text-center font-mono text-sm text-faint">
                {"// "}searching…
              </div>
            ) : (
              <div className="p-8 text-center font-mono text-sm text-faint">
                {"// "}no matches for “{debounced}”
              </div>
            ))}

          {groups.map((group) => (
            <div key={group.label} className="mb-2">
              <p className="mb-1 px-2.5 font-mono text-[10px] uppercase tracking-[0.18em] text-faint">
                {group.label}
              </p>
              {group.items.map((item) => {
                flatIndex += 1;
                const isActive = flatIndex === activeIndex;
                const idx = flatIndex;
                return (
                  <button
                    key={item.id}
                    role="option"
                    aria-selected={isActive}
                    onMouseEnter={() => setActive(idx)}
                    onClick={() => go(item.href)}
                    className={`flex w-full items-center gap-3 rounded-md px-2.5 py-2 text-left transition-colors ${
                      isActive ? "bg-surface" : ""
                    }`}
                  >
                    <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-sm border border-hairline font-mono text-[13px] text-faint">
                      {item.glyph}
                    </span>
                    <span className="min-w-0 flex-1">
                      <span className="block truncate text-sm font-medium text-fg">
                        {item.label}
                      </span>
                      {item.sub && (
                        <span className="block font-mono text-xs text-faint">
                          {item.sub}
                        </span>
                      )}
                    </span>
                  </button>
                );
              })}
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}