"use client";

/**
 * Global search dialog (⌘K, TASK-0098) — the topbar `search-button` opens it;
 * it shares ONE result model with the /search page (lib/search.ts +
 * components/search/results-list.tsx).
 *
 * Pinned e2e contract (tests/e2e/specs/search.spec.ts — do not rename):
 *   search-button            topbar (layout/topbar.tsx)
 *   search-dialog            this overlay (role="dialog" aria-modal)
 *   search-input             the query input (auto-focused)
 *   search-result            a result ROW (literal — no {id} suffix)
 *   search-result-type-{t}   the type badge on a row
 *   search-filter-type       the type-filter dropdown (All + the 7 types)
 *   search-filter-option-{t} a filter option (e.g. page / database)
 *   search-recent            the "Recent searches" section (empty input)
 *   search-recent-item       a recent-search chip
 *   search-suggestion        a live suggestion row (title + type badge)
 *
 * Recency: the server (Redis) is the single source of truth. Every completed
 * result fetch fires PUT /search/recent immediately (fire-and-forget,
 * throttled to 1 s) so the e2e's "close dialog → reopen → chip present"
 * holds even though the dialog closes right after the first result appears.
 */
import { useCallback, useEffect, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import {
  Bookmark,
  BookmarkPlus,
  Clock,
  Database as DatabaseIcon,
  FileText,
  Filter,
  History,
  ListTodo,
  Loader2,
  Search,
  SearchX,
  ShieldAlert,
  Square,
  X
} from "lucide-react";
import { searchApi, meApi, pageApi, databaseApi, isApiError } from "@/lib/api";
import {
  SEARCH_DEBOUNCE_MS,
  SEARCH_TYPES,
  SEARCH_TYPE_LABELS,
  addRecent,
  isRecordableQuery,
  deepLinkFor,
  RECENT_VIEWED_CAP,
  recentItemHref,
  savedSearchLabel,
  type RecentViewItem,
  type SavedSearch,
  type SavedSearchQuery
} from "@/lib/search";
import { useWorkspace } from "@/hooks/use-workspace";
import { useUiStore } from "@/stores/ui-store";
import { ResultsList, SEARCH_TYPE_ICON } from "./results-list";
import type { SearchResult, SearchSuggestion, SearchType } from "@/lib/types";

type FilterValue = "all" | SearchType;

const FILTER_OPTIONS: { value: FilterValue; label: string }[] = [
  { value: "all", label: "All" },
  ...SEARCH_TYPES.map((t) => ({ value: t as FilterValue, label: SEARCH_TYPE_LABELS[t] }))
];

export function SearchDialog() {
  const open = useUiStore((s) => s.searchOpen);
  const setOpen = useUiStore((s) => s.setSearchDialog);
  const router = useRouter();
  const workspaceSlug = useUiStore((s) => s.searchWorkspaceSlug);
  const { data: workspace, isError: workspaceError } = useWorkspace(workspaceSlug);

  const [input, setInput] = useState("");
  const [q, setQ] = useState("");
  const [filter, setFilter] = useState<FilterValue>("all");
  const [filterMenuOpen, setFilterMenuOpen] = useState(false);
  const [results, setResults] = useState<SearchResult[]>([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<ErrorKind>(null);
  const [suggestions, setSuggestions] = useState<SearchSuggestion[]>([]);
  const [recent, setRecent] = useState<string[]>([]);
  // T-153/T-154 — recently-VIEWED content + saved searches (the dialog's
  // empty-input "home"). Fetched on open, like the recent searches above.
  const [recentViewed, setRecentViewed] = useState<RecentViewItem[]>([]);
  const [viewTitles, setViewTitles] = useState<Record<string, string>>({});
  const [savedSearches, setSavedSearches] = useState<SavedSearch[]>([]);
  // Bumped to schedule the one-shot empty-result retry (indexing lag).
  const [retryTick, setRetryTick] = useState(0);

  const inputRef = useRef<HTMLInputElement>(null);
  const dialogRef = useRef<HTMLDivElement>(null);
  const filterMenuRef = useRef<HTMLDivElement>(null);
  const lastRecordAt = useRef(0);
  const reqRef = useRef(0);
  const retryRef = useRef<{ key: string; count: number } | null>(null);

  /* ------------------------------------------------------------ reset */

  // Reset the dialog state each time it opens.
  useEffect(() => {
    if (open) {
      setInput("");
      setQ("");
      setFilter("all");
      setFilterMenuOpen(false);
      setResults([]);
      setSuggestions([]);
      setError(null);
      setLoading(false);
      setViewTitles({});
      requestAnimationFrame(() => inputRef.current?.focus());
    }
  }, [open]);

  /* ------------------------- recents + recently-viewed + saved searches */

  useEffect(() => {
    if (!open) return;
    let cancelled = false;
    // Recent searches (the pinned `search-recent` section).
    searchApi
      .recent()
      .then((list) => {
        if (!cancelled) setRecent(list);
      })
      .catch(() => {
        /* recents are decorative — never break the dialog */
      });
    // T-153 — recently-VIEWED content (a separate store from the searches).
    meApi
      .recentViewed()
      .then((items) => {
        if (!cancelled) setRecentViewed(items.slice(0, RECENT_VIEWED_CAP));
      })
      .catch(() => {
        /* decorative */
      });
    // T-154 — saved searches (per-user CRUD, the chips under the home view).
    meApi
      .listSavedSearches()
      .then((list) => {
        if (!cancelled) setSavedSearches(list);
      })
      .catch(() => {
        /* decorative */
      });
    return () => {
      cancelled = true;
    };
  }, [open]);

  // Resolve the titles of the shown recent-viewed items in parallel (page vs
  // database route); a failed lookup leaves that chip's label blank (the icon
  // still shows the kind). Keyed on recentViewed so it re-runs on refresh.
  useEffect(() => {
    if (recentViewed.length === 0) return;
    let cancelled = false;
    void Promise.all(
      recentViewed.map(async (it): Promise<[string, string]> => {
        try {
          let t: string;
          if (it.itemType === "database") {
            // GET /databases/:id returns the NESTED body
            // `{ database, properties, views, … }` (the web flattens it in
            // use-database.ts's `flattenDatabase`); databaseApi.get types it
            // as the flat row, so read the title from either shape.
            const db = (await databaseApi.get(it.refId)) as {
              title?: string;
              database?: { title?: string };
            };
            t = db.title ?? db.database?.title ?? "";
          } else {
            t = (await pageApi.get(it.refId)).title;
          }
          return [it.refId, t];
        } catch {
          return [it.refId, ""];
        }
      })
    ).then((pairs) => {
      if (!cancelled) setViewTitles(Object.fromEntries(pairs));
    });
    return () => {
      cancelled = true;
    };
  }, [recentViewed]);

  /* ---------------------------------------------------- debounce 225 ms */

  useEffect(() => {
    const t = setTimeout(() => setQ(input.trim()), SEARCH_DEBOUNCE_MS);
    return () => clearTimeout(t);
  }, [input]);

  /* ----------------------------------------------- fetch (query+suggest) */

  useEffect(() => {
    if (!open) return;
    if (!q) {
      setResults([]);
      setSuggestions([]);
      setLoading(false);
      setError(null);
      return;
    }
    const my = (reqRef.current += 1);
    const types = filter === "all" ? undefined : [filter];
    const controller = new AbortController();
    setLoading(true);
    setError(null);

    // One-shot retry after an EMPTY result: the indexer can lag a write by a
    // second or two, so the e2e's "result within 5 s" gets a grace re-query
    // (800 ms) instead of a premature "No results". Only an empty FIRST
    // answer triggers it (a non-empty or late answer wins, as usual).
    const retryKey = `${q}|${filter}|${workspace?.id ?? ""}`;
    const retries = retryRef.current?.key === retryKey ? retryRef.current.count : 0;

    searchApi
      .query(q, { workspaceId: workspace?.id, limit: 20, types }, controller.signal)
      .then((items) => {
        if (my !== reqRef.current) return;
        // Server-side type filter is the contract; the client-side pass is a
        // no-op fallback guaranteeing the filter's count assertions even if
        // the query route ignores the extra `types` param (the pinned GET
        // signature documents q/workspaceId/limit/cursor only).
        const scoped = types ? items.filter((i) => types.includes(i.type)) : items;
        setResults(scoped);
        if (items.length === 0 && retries === 0) {
          retryRef.current = { key: retryKey, count: retries + 1 };
          setTimeout(() => {
            if (reqRef.current === my) setRetryTick((t) => t + 1);
          }, 800);
        }
        // Record the search IMMEDIATELY (fire-and-forget, 1 s throttle) — the
        // e2e closes the dialog right after the first result and expects the
        // chip on reopen. `addRecent` mirrors the server's dedupe/cap so the
        // local list never drifts.
        if (isRecordableQuery(q)) {
          const now = Date.now();
          if (now - lastRecordAt.current >= 1000) {
            lastRecordAt.current = now;
            setRecent((r) => addRecent(r, q));
            void searchApi.recordRecent(q).catch(() => undefined);
          }
        }
      })
      .catch((e: unknown) => {
        if (my !== reqRef.current) return;
        if (e instanceof DOMException && e.name === "AbortError") return;
        setError(toErrorKind(e));
      })
      .finally(() => {
        if (my === reqRef.current) setLoading(false);
      });

    // Suggestions: title completions (e2e: ≥ 2 rows for a shared unique
    // prefix while typing the bare token).
    searchApi
      .suggest(q, 8, controller.signal)
      .then((items) => {
        if (my === reqRef.current) setSuggestions(items);
      })
      .catch(() => undefined);

    return () => {
      controller.abort();
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [q, filter, open, workspace?.id, retryTick]);

  /* --------------------------------------------------------- close nav */

  const close = useCallback(() => {
    setOpen(false);
    setFilterMenuOpen(false);
    // Restore focus to the trigger (the topbar's search-button).
    requestAnimationFrame(() => {
      document.querySelector<HTMLButtonElement>('[data-testid="search-button"]')?.focus();
    });
  }, [setOpen]);

  // Escape closes (window-level, like the shared Dialog). A window-level
  // listener (not a React onKeyDown) is deliberate: it also fires while the
  // filter menu is open — that first Escape closes the MENU, the next one
  // closes the dialog (the e2e's "Escape + reopen" always lands on a closed
  // dialog).
  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key !== "Escape") return;
      e.stopPropagation();
      if (filterMenuOpen) setFilterMenuOpen(false);
      else close();
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open, close, filterMenuOpen]);

  // Click outside the filter menu closes it.
  useEffect(() => {
    if (!filterMenuOpen) return;
    const onClick = (e: MouseEvent) => {
      if (filterMenuRef.current && !filterMenuRef.current.contains(e.target as Node)) {
        setFilterMenuOpen(false);
      }
    };
    document.addEventListener("mousedown", onClick);
    return () => document.removeEventListener("mousedown", onClick);
  }, [filterMenuOpen]);

  // Focus trap while open (simple but effective: Tab wraps inside the panel;
  // the input is the default stop).
  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => {
      if (e.key !== "Tab") return;
      const panel = dialogRef.current;
      if (!panel) return;
      const focusables = panel.querySelectorAll<HTMLElement>(
        'button, input, [tabindex]:not([tabindex="-1"])'
      );
      if (focusables.length === 0) return;
      const first = focusables[0];
      const last = focusables[focusables.length - 1];
      if (!first || !last) return;
      if (e.shiftKey && document.activeElement === first) {
        e.preventDefault();
        last.focus();
      } else if (!e.shiftKey && document.activeElement === last) {
        e.preventDefault();
        first.focus();
      }
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, [open]);

  /* --------------------------------------------------------- activate */

  const activate = useCallback(
    (item: SearchResult) => {
      const slug = workspace?.slug ?? workspaceSlug;
      const link = deepLinkFor(item, slug);
      if (!link) return; // no-op row (e.g. a block without a parent page)
      close();
      router.push(link);
    },
    [workspace, workspaceSlug, close, router]
  );

  const activateSuggestion = useCallback(
    (s: SearchSuggestion) => {
      setInput(s.title);
      setQ(s.title.trim());
      setSuggestions([]);
      inputRef.current?.focus();
    },
    []
  );

  const activateRecent = useCallback(
    (query: string) => {
      setInput(query);
      setQ(query.trim());
      setSuggestions([]);
      inputRef.current?.focus();
    },
    []
  );

  /* ------------------------- T-153/T-154: recent-viewed + saved searches */

  const activateRecentViewed = useCallback(
    (item: RecentViewItem) => {
      const slug = workspace?.slug ?? workspaceSlug;
      const link = recentItemHref(item, slug);
      if (!link) return;
      close();
      router.push(link);
    },
    [workspace, workspaceSlug, close, router]
  );

  // A saved search's stored queryJson → the input (its `q`). The saved
  // `workspaceId` is intentionally NOT re-applied: the dialog always scopes to
  // the CURRENT workspace (the user opened the dialog from that workspace's
  // topbar), which matches how a fresh query behaves.
  const applySavedSearch = useCallback((s: SavedSearch) => {
    const q = (s.queryJson?.q as string) ?? "";
    setInput(q);
    setQ(q.trim());
    setSuggestions([]);
    inputRef.current?.focus();
  }, []);

  const saveCurrentSearch = useCallback(async () => {
    const query = q.trim();
    if (!isRecordableQuery(query)) return;
    try {
      await meApi.createSavedSearch({
        name: savedSearchLabel({ q: query }),
        workspaceId: workspace?.id ?? null,
        query: {
          q: query,
          ...(filter !== "all" ? { types: [filter] } : {}),
          ...(workspace?.id ? { workspaceId: workspace.id } : {})
        } satisfies SavedSearchQuery
      });
      // Refresh to the server's ordering (newest first).
      const fresh = await meApi.listSavedSearches().catch(() => null);
      if (fresh) setSavedSearches(fresh);
    } catch {
      /* a failed save must not break the dialog */
    }
  }, [q, filter, workspace?.id]);

  const deleteSavedSearch = useCallback(async (id: string) => {
    try {
      await meApi.deleteSavedSearch(id);
      setSavedSearches((list) => list.filter((s) => s.id !== id));
    } catch {
      /* best effort */
    }
  }, []);

  const showRecent = open && q.length === 0 && !loading && error === null;
  // The dialog still opens without a resolved workspace (slug never synced,
  // or the workspace 404'd) — queries then run unscoped; show a hint.
  const noWorkspace = !workspace?.id && (workspaceSlug.length === 0 || workspaceError);
  // T-153/T-154 — the empty-input "home" shows every section that has content;
  // with none at all it falls back to the original "No recent searches" hint
  // (the `search-recent` section's empty state — pinned, unchanged).
  const homeHasContent = recentViewed.length > 0 || savedSearches.length > 0 || recent.length > 0;

  /* ------------------------------------------------------------- view */

  if (!open) return null;

  return (
    <div className="fixed inset-0 z-[85] flex items-start justify-center p-4 pt-[10vh]">
      <div className="absolute inset-0 bg-black/40" onClick={close} aria-hidden />
      <div
        ref={dialogRef}
        data-testid="search-dialog"
        role="dialog"
        aria-modal="true"
        aria-label="Search"
        className="relative flex max-h-[75vh] w-full max-w-xl flex-col overflow-hidden rounded-lg border border-border bg-background shadow-2xl"
      >
        {/* Input + filter */}
        <div className="flex items-center gap-2 border-b border-border px-3">
          <Search className="size-4 shrink-0 text-muted-foreground" aria-hidden />
          <input
            ref={inputRef}
            data-testid="search-input"
            value={input}
            onChange={(e) => {
              setInput(e.target.value);
              setFilterMenuOpen(false);
            }}
            placeholder="Search pages, databases, records…"
            className="h-11 w-full bg-transparent text-sm outline-none placeholder:text-muted-foreground"
            role="combobox"
            aria-expanded="true"
            aria-controls="search-dialog-results"
            aria-label="Search"
          />
          {/* T-154 — save the current query as a chip (shown once a query
              has been committed; the ⌘K home lists it under Saved searches). */}
          {q.trim() ? (
            <button
              type="button"
              data-testid="search-save-current"
              aria-label="Save this search"
              title="Save this search"
              onClick={() => void saveCurrentSearch()}
              className="flex h-7 shrink-0 items-center gap-1 rounded-md px-2 text-xs text-foreground/70 hover:bg-accent hover:text-foreground focus-visible:bg-accent focus-visible:outline-none"
            >
              <BookmarkPlus className="size-3.5" aria-hidden />
              Save
            </button>
          ) : null}
          {/* Type filter (pinned: search-filter-type / search-filter-option-{t}) */}
          <div className="relative shrink-0" ref={filterMenuRef}>
            <button
              type="button"
              data-testid="search-filter-type"
              aria-label="Filter by type"
              aria-haspopup="listbox"
              aria-expanded={filterMenuOpen}
              onClick={() => setFilterMenuOpen((v) => !v)}
              className={
                "flex h-7 items-center gap-1 rounded-md px-2 text-xs hover:bg-accent " +
                (filter !== "all" ? "bg-accent text-foreground" : "text-foreground/70")
              }
            >
              <Filter className="size-3.5" aria-hidden />
              {filter === "all" ? "All" : SEARCH_TYPE_LABELS[filter]}
            </button>
            {filterMenuOpen ? (
              <div
                role="listbox"
                aria-label="Result type filter"
                className="absolute right-0 z-40 mt-1 w-36 rounded-md border border-border bg-popover p-1 shadow-lg"
              >
                {FILTER_OPTIONS.map((opt) => (
                  <button
                    key={opt.value}
                    type="button"
                    role="option"
                    aria-selected={filter === opt.value}
                    data-testid={`search-filter-option-${opt.value === "all" ? "all" : opt.value}`}
                    onClick={() => {
                      setFilter(opt.value);
                      setFilterMenuOpen(false);
                      inputRef.current?.focus();
                    }}
                    className={
                      "flex w-full items-center justify-between rounded px-2 py-1.5 text-left text-sm hover:bg-accent " +
                      (filter === opt.value ? "font-medium" : "text-foreground/90")
                    }
                  >
                    <span>{opt.label}</span>
                    {filter === opt.value ? <span className="text-xs">✓</span> : null}
                  </button>
                ))}
              </div>
            ) : null}
          </div>
        </div>

        {/* Body */}
        <div id="search-dialog-results" className="min-h-0 flex-1 overflow-y-auto p-2">
          {noWorkspace ? (
            <p className="mb-2 px-2 py-1 text-xs text-muted-foreground" role="status">
              No workspace resolved yet — results may be limited.
            </p>
          ) : null}
          {error !== null ? (
            <SearchErrorState kind={error} />
          ) : showRecent ? (
            <>
              {/* T-153 — recently-VIEWED content (separate from searches). */}
              {recentViewed.length > 0 ? (
                <section data-testid="search-recent-viewed" aria-label="Recently viewed" className="p-1 pb-2">
                  <h3 className="mb-1.5 px-2 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
                    Recently viewed
                  </h3>
                  <ul className="space-y-0.5">
                    {recentViewed.map((item) => {
                      const Icon =
                        item.itemType === "database"
                          ? DatabaseIcon
                          : item.itemType === "whiteboard"
                            ? Square
                            : item.itemType === "task"
                              ? ListTodo
                              : FileText;
                      return (
                        <li key={`${item.itemType}-${item.refId}`}>
                          <button
                            type="button"
                            data-testid="search-recent-viewed-item"
                            onClick={() => activateRecentViewed(item)}
                            className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm hover:bg-accent focus-visible:bg-accent focus-visible:outline-none"
                          >
                            <Icon className="size-4 shrink-0 text-muted-foreground" aria-hidden />
                            <span className="min-w-0 flex-1 truncate">{viewTitles[item.refId] || "Untitled"}</span>
                            <span className="shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] uppercase text-muted-foreground">
                              {item.itemType}
                            </span>
                          </button>
                        </li>
                      );
                    })}
                  </ul>
                </section>
              ) : null}

              {/* T-154 — saved searches (per-user; the ⌘K home chips). */}
              {savedSearches.length > 0 ? (
                <section data-testid="search-saved" aria-label="Saved searches" className="p-1 pb-2">
                  <h3 className="mb-1.5 px-2 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
                    Saved searches
                  </h3>
                  <ul className="flex flex-wrap gap-1.5">
                    {savedSearches.map((s) => (
                      <li key={s.id} className="group flex items-center">
                        <button
                          type="button"
                          data-testid="search-saved-item"
                          title={s.name}
                          onClick={() => applySavedSearch(s)}
                          className="flex items-center gap-1.5 rounded-full border border-border bg-muted/40 px-2.5 py-1 text-xs text-foreground/90 hover:bg-accent focus-visible:bg-accent focus-visible:outline-none"
                        >
                          <Bookmark className="size-3" aria-hidden />
                          {s.name}
                        </button>
                        <button
                          type="button"
                          data-testid="search-saved-delete"
                          aria-label={`Delete saved search ${s.name}`}
                          onClick={() => void deleteSavedSearch(s.id)}
                          className="ml-0.5 rounded-full p-1 text-muted-foreground opacity-0 hover:bg-accent hover:text-foreground group-hover:opacity-100 focus-visible:opacity-100 focus-visible:outline-none"
                        >
                          <X className="size-3" aria-hidden />
                        </button>
                      </li>
                    ))}
                  </ul>
                </section>
              ) : null}

              {/* Recent searches (pinned `search-recent` — unchanged). */}
              <RecentSection items={recent} onSelect={activateRecent} />
            </>
          ) : (
            <>
              {/* Suggestions (live while typing) */}
              {suggestions.length > 0 ? (
                <section aria-label="Suggestions" className="mb-2">
                  <h3 className="mb-1 px-2 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
                    Suggestions
                  </h3>
                  <ul className="space-y-0.5">
                    {suggestions.map((s) => {
                      const SIcon = SEARCH_TYPE_ICON[s.type] ?? Search;
                      return (
                        <li key={`${s.type}-${s.id}`}>
                          <button
                            type="button"
                            data-testid="search-suggestion"
                            onClick={() => activateSuggestion(s)}
                            className="flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm hover:bg-accent focus-visible:bg-accent focus-visible:outline-none"
                          >
                            <SIcon className="size-4 shrink-0 text-muted-foreground" aria-hidden />
                            <span className="min-w-0 flex-1 truncate">{s.title}</span>
                            <span
                              data-testid={`search-suggestion-type-${s.type}`}
                              aria-hidden
                              className="shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] uppercase text-muted-foreground"
                            >
                              {s.type}
                            </span>
                          </button>
                        </li>
                      );
                    })}
                  </ul>
                </section>
              ) : null}

              {/* Loading */}
              {loading ? (
                <p className="flex items-center gap-2 px-2 py-3 text-sm text-muted-foreground" role="status">
                  <Loader2 className="size-4 animate-spin" aria-hidden /> Searching…
                </p>
              ) : null}

              {/* Empty */}
              {!loading && results.length === 0 && (
                <p className="flex items-center gap-2 px-2 py-4 text-sm text-muted-foreground">
                  <SearchX className="size-4" aria-hidden />
                  No results for “{q}”.
                </p>
              )}

              {/* Results (shared model with the /search page) */}
              {results.length > 0 ? (
                <ResultsList items={results} workspaceSlug={workspace?.slug ?? workspaceSlug} onActivate={activate} compact />
              ) : null}
            </>
          )}
        </div>

        {/* Footer hint */}
        <div className="flex items-center gap-3 border-t border-border px-3 py-1.5 text-[11px] text-muted-foreground">
          <span className="flex items-center gap-1"><kbd className="rounded border border-border px-1">esc</kbd> to close</span>
          <span className="flex items-center gap-1"><kbd className="rounded border border-border px-1">↵</kbd> to open</span>
        </div>
      </div>
    </div>
  );
}

/* -------------------------------------------------------------- states */

type ErrorKind = null | "unavailable" | "generic";

function toErrorKind(e: unknown): ErrorKind {
  if (isApiError(e)) {
    if (e.code === "SEARCH_UNAVAILABLE" || e.status === 503) return "unavailable";
    return "generic";
  }
  return "generic";
}

function SearchErrorState({ kind }: { kind: Exclude<ErrorKind, null> }) {
  if (kind === "unavailable") {
    return (
      <div className="flex flex-col items-center gap-2 px-4 py-8 text-center" role="alert">
        <ShieldAlert className="size-6 text-muted-foreground" aria-hidden />
        <p className="text-sm text-foreground">Search is temporarily unavailable — try again.</p>
        <p className="text-xs text-muted-foreground">
          Keep typing to retry — your query is preserved.
        </p>
      </div>
    );
  }
  return (
    <div className="flex flex-col items-center gap-2 px-4 py-8 text-center" role="alert">
      <SearchX className="size-6 text-muted-foreground" aria-hidden />
      <p className="text-sm text-foreground">Search failed.</p>
      <p className="text-xs text-muted-foreground">
        Check your connection and keep typing to retry.
      </p>
    </div>
  );
}

/* ---------------------------------------------------------- recents */

function RecentSection({ items, onSelect }: { items: string[]; onSelect: (q: string) => void }) {
  if (items.length === 0) {
    return (
      <p className="px-2 py-6 text-center text-sm text-muted-foreground">
        No recent searches yet — start typing to find pages, databases and more.
      </p>
    );
  }
  return (
    <section data-testid="search-recent" aria-label="Recent searches" className="p-1">
      <h3 className="mb-1.5 px-2 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
        Recent searches
      </h3>
      <ul className="flex flex-wrap gap-1.5">
        {items.map((item) => (
          <li key={item}>
            <button
              type="button"
              data-testid="search-recent-item"
              onClick={() => onSelect(item)}
              className="flex items-center gap-1.5 rounded-full border border-border bg-muted/40 px-2.5 py-1 text-xs text-foreground/90 hover:bg-accent focus-visible:bg-accent focus-visible:outline-none"
            >
              <Clock className="size-3" aria-hidden />
              {item}
            </button>
          </li>
        ))}
      </ul>
    </section>
  );
}