"use client";

// The grounding palette — the connective tissue between the search results and
// the chat. It always states WHAT the AI is looking at and turns that target
// into an action. This is the one deliberately-bold control in the workspace:
//
//   • a first-class segmented MODE TOGGLE (Whole search ⇄ Selection), and
//   • a cluster of ACTION buttons operating on the active target — Ask, Sweep,
//     and a couple of preset directives that pre-fill the composer/sweep box.
//
// Everything else stays quiet (semantic theme tokens, lucide icons); the palette
// carries the emphasis.

import {
  GlobeIcon,
  ListChecksIcon,
  SendIcon,
  TelescopeIcon,
  XIcon,
} from "lucide-react";
import type { SearchHandoff } from "yt-dlp-transcript-common/lib/aiHandoff";
import type { GroundingMode } from "yt-dlp-transcript-common/components/SearchSessionContext";

// Preset directives — one click pre-fills the composer (which is also the sweep
// directive), so a common report focus is a keystroke away.
const PRESETS: { label: string; directive: string }[] = [
  { label: "Summary", directive: "a concise summary of the key points" },
  { label: "Contradictions", directive: "the major contradictions between these" },
  { label: "Timeline", directive: "a chronological timeline of what happened" },
];

export function GroundingPalette({
  pinned,
  effectiveMode,
  setMode,
  selectedCount,
  onDeselect,
  onClearSelection,
  canSweep,
  sweeping,
  hasReport,
  busy,
  hasKey,
  onAsk,
  onSweep,
  onPreset,
}: {
  // The active grounding (for the selection chips + counts). Never null here —
  // AskChat only renders the palette when there's a grounding to act on.
  pinned: SearchHandoff;
  // The mode after the empty-selection guard (what's actually in effect).
  effectiveMode: GroundingMode;
  setMode: (m: GroundingMode) => void;
  selectedCount: number;
  onDeselect: (key: string) => void;
  onClearSelection: () => void;
  canSweep: boolean;
  sweeping: boolean;
  hasReport: boolean;
  busy: boolean;
  hasKey: boolean;
  // Submit the composer as a normal grounded question.
  onAsk: () => void;
  // Start (or extend) a whole-target sweep.
  onSweep: (mode: "fresh" | "extend") => void;
  // Pre-fill the composer / sweep directive.
  onPreset: (directive: string) => void;
}) {
  const hasSelection = selectedCount > 0;
  const n = pinned.videos.length;

  return (
    <div
      data-testid="grounding-palette"
      className="flex flex-col gap-3 rounded-lg border border-brand/50 bg-brand-soft/40 p-3"
    >
      {/* ── Mode toggle: the signature segmented switch ── */}
      <div className="flex flex-wrap items-center gap-2">
        <div
          role="tablist"
          aria-label="What the AI is grounded in"
          data-testid="grounding-mode"
          className="inline-flex overflow-hidden rounded-lg border border-brand/60 bg-card p-0.5 text-xs font-medium shadow-sm"
        >
          <button
            type="button"
            role="tab"
            aria-selected={effectiveMode === "search"}
            onClick={() => setMode("search")}
            className={`inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 transition-colors ${
              effectiveMode === "search"
                ? "bg-brand text-brand-ink"
                : "text-muted-foreground hover:text-foreground"
            }`}
          >
            <GlobeIcon className="size-3.5" /> Whole search
          </button>
          <button
            type="button"
            role="tab"
            aria-selected={effectiveMode === "selection"}
            aria-disabled={!hasSelection}
            onClick={() => hasSelection && setMode("selection")}
            title={
              hasSelection
                ? "Ground in the videos you selected"
                : "Select videos in the results to enable this"
            }
            className={`inline-flex items-center gap-1.5 rounded-md px-3 py-1.5 transition-colors ${
              effectiveMode === "selection"
                ? "bg-brand text-brand-ink"
                : hasSelection
                  ? "text-muted-foreground hover:text-foreground"
                  : "cursor-not-allowed text-muted-foreground/40"
            }`}
          >
            <ListChecksIcon className="size-3.5" /> Selection
            {hasSelection ? (
              <span
                className={`rounded-full px-1.5 text-[10px] tabular-nums ${
                  effectiveMode === "selection"
                    ? "bg-brand-ink/20"
                    : "bg-brand/15 text-foreground"
                }`}
              >
                {selectedCount}
              </span>
            ) : null}
          </button>
        </div>
        <span className="text-xs text-muted-foreground">
          {effectiveMode === "selection"
            ? `Grounded in ${n} selected video${n === 1 ? "" : "s"}`
            : "Grounded in the whole search"}
        </span>
      </div>

      {/* ── Selection chips (dismissible → deselect) ── */}
      {effectiveMode === "selection" && (
        <div className="flex flex-wrap items-center gap-1.5" data-testid="selection-chips">
          {pinned.videos.map((v) => (
            <span
              key={v.key}
              className="inline-flex max-w-[16rem] items-center gap-1 rounded-full border border-border bg-card px-2 py-0.5 text-xs text-foreground"
            >
              <span className="truncate">{v.title}</span>
              <button
                type="button"
                onClick={() => onDeselect(v.key)}
                aria-label={`Remove ${v.title} from the selection`}
                className="shrink-0 text-muted-foreground transition-colors hover:text-destructive"
              >
                <XIcon className="size-3" />
              </button>
            </span>
          ))}
          <button
            type="button"
            onClick={onClearSelection}
            className="text-xs text-muted-foreground transition-colors hover:text-foreground"
          >
            Clear all
          </button>
        </div>
      )}

      {/* ── Action cluster: Ask · Sweep · presets ── */}
      <div className="flex flex-wrap items-center gap-2">
        <button
          type="button"
          onClick={onAsk}
          disabled={busy || !hasKey}
          aria-label="Ask about this grounding"
          className="inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground transition-colors hover:bg-brand-strong disabled:opacity-50"
        >
          <SendIcon className="size-3.5" /> Ask
        </button>
        <button
          type="button"
          onClick={() => onSweep(hasReport ? "extend" : "fresh")}
          disabled={!canSweep || busy || sweeping || !hasKey}
          title={
            canSweep
              ? "Read the whole target in batches into one running report"
              : "Needs a tool-capable provider (switch off Scripted)"
          }
          className="inline-flex items-center gap-1.5 rounded-md border border-brand/60 bg-card px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:border-brand disabled:opacity-50"
        >
          <TelescopeIcon className="size-3.5" /> Sweep
        </button>
        <span className="mx-0.5 h-4 w-px bg-border" aria-hidden="true" />
        {PRESETS.map((p) => (
          <button
            key={p.label}
            type="button"
            onClick={() => onPreset(p.directive)}
            disabled={busy}
            className="rounded-full border border-border bg-card/60 px-2.5 py-1 text-xs text-muted-foreground transition-colors hover:border-brand hover:text-foreground disabled:opacity-50"
          >
            {p.label}
          </button>
        ))}
      </div>
    </div>
  );
}