"use client";

/**
 * Shared search result rendering (TASK-0098) — ONE result model for both
 * surfaces: the ⌘K dialog and the /w/:workspace/search page.
 *
 * The e2e contract (tests/e2e/specs/search.spec.ts, PINNED — do not rename):
 *   row          data-testid="search-result"          (the <button> row)
 *   type badge   data-testid="search-result-type-{type}"
 * Groups render in the fixed `SEARCH_TYPES` order (lib/search.ts).
 */
import { FileText, Database, Rows3, Square, MessageSquare, File, User, type LucideIcon } from "lucide-react";
import { deepLinkFor, groupResultsByType, SEARCH_TYPE_LABELS } from "@/lib/search";
import { formatRelativeTime } from "@/lib/utils";
import type { SearchResult, SearchType } from "@/lib/types";
import type { SearchGroup } from "@/lib/search";

export const SEARCH_TYPE_ICON: Record<SearchType, LucideIcon> = {
  page: FileText,
  database: Database,
  record: Rows3,
  block: Square,
  comment: MessageSquare,
  file: File,
  user: User
};

const BADGE_LABEL: Record<SearchType, string> = {
  page: "page",
  database: "database",
  record: "record",
  block: "block",
  comment: "comment",
  file: "file",
  user: "user"
};

/**
 * One result row. `deepLink === null` (a block without a parent page, or an
 * item with no derivable target) → the row is a no-op button with a tooltip
 * instead of a disabled control (stays keyboard-reachable, matches the
 * dialog's "Enter activates" contract for everything else).
 */
export function ResultRow({
  item,
  workspaceSlug,
  onActivate,
  compact = false
}: {
  item: SearchResult;
  /** The workspace slug to build the deep link from (null = unresolved). */
  workspaceSlug: string | null;
  /** Row click / Enter. The dialog records the search here; the page doesn't. */
  onActivate?: (item: SearchResult) => void;
  /** Smaller density for the ⌘K dialog. */
  compact?: boolean;
}) {
  const link = deepLinkFor(item, workspaceSlug);
  const Icon = SEARCH_TYPE_ICON[item.type];
  return (
    <button
      type="button"
      data-testid="search-result"
      title={link ? item.title : "No deep link for this result"}
      aria-label={`${SEARCH_TYPE_LABELS[item.type]}: ${item.title}`}
      onClick={() => onActivate?.(item)}
      className={cnRow(compact)}
    >
      <Icon className="size-4 shrink-0 text-muted-foreground" aria-hidden />
      <span
        data-testid={`search-result-type-${item.type}`}
        aria-hidden
        className="shrink-0 rounded bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground"
      >
        {BADGE_LABEL[item.type]}
      </span>
      <span className="min-w-0 flex-1 text-left">
        <span className="block truncate text-sm text-foreground">{item.title || "Untitled"}</span>
        {item.snippet ? (
          <span className="mt-0.5 block truncate text-xs text-muted-foreground">{item.snippet}</span>
        ) : null}
        {!compact && (item.createdByName || item.updatedAt) ? (
          <span className="mt-0.5 block truncate text-[11px] text-muted-foreground">
            {item.createdByName ? `${item.createdByName} · ` : ""}
            {formatRelativeTime(item.updatedAt) || "—"}
          </span>
        ) : null}
      </span>
    </button>
  );
}

function cnRow(compact: boolean): string {
  return compact
    ? "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left hover:bg-accent focus-visible:bg-accent focus-visible:outline-none"
    : "flex w-full items-start gap-2.5 px-3 py-2.5 text-left hover:bg-muted/50 focus-visible:bg-muted/50 focus-visible:outline-none";
}

/**
 * Grouped results (fixed type order) — the dialog's results section and the
 * search page's body both render through this.
 */
export function ResultsList({
  items,
  workspaceSlug,
  onActivate,
  compact = false
}: {
  items: readonly SearchResult[];
  workspaceSlug: string | null;
  onActivate?: (item: SearchResult) => void;
  compact?: boolean;
}) {
  const groups: SearchGroup[] = groupResultsByType(items);
  if (groups.length === 0) return null;
  return (
    <div aria-label="Search results" className="space-y-3">
      {groups.map((group) => (
        <section key={group.type} aria-label={`${group.label} results`}>
          <h3 className="mb-1 px-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">
            {group.label} <span className="text-muted-foreground/60">({group.items.length})</span>
          </h3>
          <ul className={compact ? "space-y-0.5" : "divide-y divide-border rounded-md border border-border"}>
            {group.items.map((item) => (
              <li key={`${item.type}-${item.id}-${item.docId}`}>
                <ResultRow item={item} workspaceSlug={workspaceSlug} onActivate={onActivate} compact={compact} />
              </li>
            ))}
          </ul>
        </section>
      ))}
    </div>
  );
}