"use client";

import { useState } from "react";
import {
  ChevronDownIcon,
  Loader2Icon,
  PauseIcon,
  PinIcon,
  PlusIcon,
  SquareIcon,
  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";

// Shows the search results handed off from the search page as the chat's pinned
// grounding: what they are, whether the assistant may look beyond them (the
// strict/expand toggle), a way to read more transcript around any hit, and a way
// to detach them.
export function PinnedResultsPanel({
  pinned,
  groundingMode,
  strictGrounding,
  busy,
  expanding,
  expandError,
  onSetStrict,
  onClear,
  onExpandVideo,
  // ── Whole-corpus sweep ──
  canSweep,
  sweeping,
  sweepProgress,
  rateLimitNotice,
  totalGroundingVideos,
  sweepCapped,
  hasReport,
  hasKey,
  directive,
  defaultDirective,
  onSweep,
  onStopSweep,
  onPauseSweep,
}: {
  pinned: SearchHandoff;
  // Whole search vs. hand-picked selection — drives the header copy.
  groundingMode: GroundingMode;
  strictGrounding: boolean;
  busy: boolean;
  expanding: Record<string, boolean>;
  expandError: Record<string, boolean>;
  onSetStrict: (on: boolean) => void;
  onClear: () => void;
  onExpandVideo: (key: string, aroundSeconds?: number) => void;
  // The sweep can run at all (native-tool-capable provider).
  canSweep: boolean;
  // A sweep is in flight.
  sweeping: boolean;
  // Per-batch progress while sweeping.
  sweepProgress: { done: number; total: number; sections: number };
  // A rate-limiter pacing/backoff notice ("Rate limited — retrying in Ns"), or
  // null when nothing is waiting. Shown in the sweep strip so a paced run's waits
  // are visible instead of looking frozen.
  rateLimitNotice: string | null;
  // Full matched-set size (before caps) + whether the search itself was capped.
  totalGroundingVideos: number;
  sweepCapped: boolean;
  // A report already exists (→ fresh-vs-extend split instead of one button).
  hasReport: boolean;
  // An API key is set (else the sweep button is disabled).
  hasKey: boolean;
  // The composer text used as the report directive, and the empty-box fallback.
  directive: string;
  defaultDirective: string;
  onSweep: (mode: "fresh" | "extend") => void;
  onStopSweep: () => void;
  // Courtesy pause: checkpoint + stop at the next batch boundary (resumable).
  onPauseSweep: () => void;
}) {
  const [showList, setShowList] = useState(false);
  const n = pinned.videos.length;
  // The sweep reads the WHOLE matched set (which can exceed the ~100 pinned here).
  const sweepN = totalGroundingVideos || n;
  const focus = directive.trim();
  const pct =
    sweepProgress.total > 0
      ? Math.round((sweepProgress.done / sweepProgress.total) * 100)
      : 0;

  return (
    <div className="flex flex-col gap-3 rounded-lg border border-brand/40 bg-brand-soft/40 px-4 py-3">
      <div className="flex items-start gap-2">
        <PinIcon className="mt-0.5 size-4 shrink-0 text-brand" />
        <div className="flex min-w-0 flex-col gap-0.5">
          <span className="text-sm font-medium text-foreground">
            {groundingMode === "selection"
              ? `Grounded in ${n} selected video${n === 1 ? "" : "s"}`
              : `Grounded in ${n} result${n === 1 ? "" : "s"} from your current search`}
          </span>
          <span className="truncate font-mono text-xs text-muted-foreground">
            {pinned.label}
            {pinned.truncated ? ` · showing first ${n}` : ""}
          </span>
        </div>
        <button
          type="button"
          onClick={onClear}
          disabled={busy}
          title="Answer freely, without grounding in the current search"
          className="ml-auto inline-flex items-center gap-1 rounded-md border border-border px-2 py-1 text-xs text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50"
        >
          <XIcon className="size-3.5" /> Detach
        </button>
      </div>

      <label className="flex cursor-pointer items-start gap-2 text-xs text-muted-foreground">
        <input
          type="checkbox"
          checked={strictGrounding}
          onChange={(e) => onSetStrict(e.target.checked)}
          disabled={busy}
          className="mt-0.5 accent-brand"
        />
        <span>
          <span className="font-medium text-foreground">
            Answer only from these results
          </span>
          <br />
          {strictGrounding
            ? "The assistant won't run its own searches."
            : "The assistant may also search the archive for more."}
        </span>
      </label>

      <div>
        <button
          type="button"
          onClick={() => setShowList((v) => !v)}
          className="inline-flex items-center gap-1 text-xs text-muted-foreground transition-colors hover:text-foreground"
        >
          <ChevronDownIcon
            className={`size-3.5 transition-transform ${showList ? "rotate-180" : ""}`}
          />
          {showList ? "Hide" : "Show"} the {n} video{n === 1 ? "" : "s"}
        </button>
        {showList && (
          <ul className="mt-2 flex flex-col gap-3 border-t border-border pt-2">
            {pinned.videos.map((v) => {
              const loading = !!expanding[v.key];
              const failed = !!expandError[v.key];
              return (
                <li key={v.key} className="flex flex-col gap-1 text-xs">
                  <div className="flex items-start gap-2">
                    <div className="min-w-0 flex-1 truncate text-muted-foreground">
                      <span className="text-foreground">{v.title}</span>
                      {v.channel ? ` — ${v.channel}` : ""}
                      <span className="text-muted-foreground/60">
                        {" "}
                        · {v.snippets.length} excerpt
                        {v.snippets.length === 1 ? "" : "s"}
                      </span>
                    </div>
                    <button
                      type="button"
                      onClick={() => onExpandVideo(v.key)}
                      disabled={busy || loading}
                      title="Read the transcript around the top hit and add it to what the assistant reads"
                      className="inline-flex shrink-0 items-center gap-1 rounded-md border border-border px-1.5 py-0.5 text-muted-foreground transition-colors hover:text-foreground disabled:opacity-50"
                    >
                      {loading ? (
                        <Loader2Icon className="size-3 animate-spin motion-reduce:animate-none" />
                      ) : (
                        <PlusIcon className="size-3" />
                      )}
                      context
                    </button>
                  </div>
                  {failed && (
                    <span className="text-warning/90">
                      Couldn&apos;t load this transcript — try again.
                    </span>
                  )}
                  {v.snippets.length > 0 && (
                    <ul className="flex flex-col gap-0.5 border-l border-border pl-2 font-mono text-muted-foreground/80">
                      {v.snippets.map((sn) => (
                        <li key={sn.seconds} className="flex gap-2">
                          <button
                            type="button"
                            onClick={() => onExpandVideo(v.key, sn.seconds)}
                            disabled={busy || loading}
                            title="Read the transcript around this moment"
                            className="shrink-0 text-brand transition-colors hover:underline disabled:opacity-50"
                          >
                            {sn.clock}
                          </button>
                          <span className="truncate">{sn.text}</span>
                        </li>
                      ))}
                    </ul>
                  )}
                </li>
              );
            })}
          </ul>
        )}
        <p className="mt-2 text-xs text-muted-foreground/70">
          Click a timestamp (or “context”) to add the surrounding transcript to
          what the assistant reads.
        </p>
      </div>

      {/* ── Whole-corpus report (sweep) — a heavier, corpus-scale action than a
          normal turn: it reads EVERY match in batches, folding findings into one
          persistent report. Its own labeled zone at the panel's foot. ── */}
      <div className="flex flex-col gap-2 border-t border-border pt-3">
        {sweeping ? (
          // Signature moment: a determinate batch-progress strip. As the driver
          // setReport()s each batch, the Report panel's document grows below while
          // this bar climbs — chunked reduction made legible.
          <>
            <div className="flex items-center gap-2">
              <TelescopeIcon className="size-4 shrink-0 text-brand" />
              <span className="text-sm font-medium text-foreground">
                Sweeping {sweepN} result{sweepN === 1 ? "" : "s"}…
              </span>
              <div className="ml-auto flex items-center gap-1.5">
                <button
                  type="button"
                  onClick={onPauseSweep}
                  aria-label="Pause the sweep"
                  title="Pause after the current batch — you can resume later"
                  className="inline-flex items-center gap-1 rounded-md border border-border px-2 py-1 text-xs text-muted-foreground transition-colors hover:text-foreground"
                >
                  <PauseIcon className="size-3" /> Pause
                </button>
                <button
                  type="button"
                  onClick={onStopSweep}
                  aria-label="Stop the sweep"
                  className="inline-flex items-center gap-1 rounded-md border border-border px-2 py-1 text-xs text-muted-foreground transition-colors hover:text-foreground"
                >
                  <SquareIcon className="size-3" /> Stop
                </button>
              </div>
            </div>
            <div
              className="h-1.5 w-full overflow-hidden rounded-full bg-border"
              role="progressbar"
              aria-valuenow={sweepProgress.done}
              aria-valuemin={0}
              aria-valuemax={sweepProgress.total}
            >
              <div
                className="h-full rounded-full bg-brand transition-[width] duration-500 ease-out motion-reduce:transition-none"
                style={{ width: `${pct}%` }}
              />
            </div>
            <span className="flex items-center gap-1.5 text-xs text-muted-foreground">
              <Loader2Icon className="size-3 animate-spin motion-reduce:animate-none" />
              Reading batch {Math.min(sweepProgress.done + 1, sweepProgress.total)}{" "}
              of {sweepProgress.total}
              {sweepProgress.sections > 0
                ? ` · ${sweepProgress.sections} section${sweepProgress.sections === 1 ? "" : "s"} written`
                : ""}
            </span>
            {rateLimitNotice && (
              <span
                data-testid="rate-limit-notice"
                className="text-xs font-medium text-warning"
              >
                {rateLimitNotice}
              </span>
            )}
          </>
        ) : (
          <>
            <div className="flex items-start gap-2">
              <TelescopeIcon className="mt-0.5 size-4 shrink-0 text-brand" />
              <div className="flex min-w-0 flex-col gap-0.5">
                <span className="text-[11px] font-semibold uppercase tracking-wide text-muted-foreground">
                  Whole-corpus report
                </span>
                {!hasReport && (
                  <span className="text-xs text-muted-foreground">
                    Reads all {sweepN} match{sweepN === 1 ? "" : "es"} in batches,
                    folding findings into one report.
                  </span>
                )}
              </div>
            </div>

            {/* Directive = the composer text, shown inline so the scope is visible. */}
            <p className="text-xs text-muted-foreground">
              Report on:{" "}
              {focus ? (
                <span className="text-foreground">{focus}</span>
              ) : (
                <>
                  <span className="text-foreground">{defaultDirective}</span>
                  <span className="text-muted-foreground/70">
                    {" "}
                    — type in the box below to focus it.
                  </span>
                </>
              )}
            </p>

            {!canSweep ? (
              <>
                <button
                  type="button"
                  disabled
                  className="inline-flex w-fit items-center gap-1.5 rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground opacity-50"
                >
                  <TelescopeIcon className="size-3.5" /> Build report from all{" "}
                  {sweepN} result{sweepN === 1 ? "" : "s"}
                </button>
                <p className="text-xs text-warning">
                  Needs a tool-capable provider — switch the search mode off
                  Scripted.
                </p>
              </>
            ) : !hasReport ? (
              // Nothing to overwrite → a single primary button.
              <button
                type="button"
                onClick={() => onSweep("fresh")}
                disabled={busy || !hasKey}
                className="inline-flex w-fit 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"
              >
                <TelescopeIcon className="size-3.5" />
                {sweepCapped
                  ? `Sweep the first ${sweepN} results`
                  : `Build report from all ${sweepN} result${sweepN === 1 ? "" : "s"}`}
              </button>
            ) : (
              // A report exists → split into two weighted actions, each captioned
              // so replacement is never implicit.
              <div className="flex flex-wrap gap-x-4 gap-y-2">
                <div className="flex flex-col gap-0.5">
                  <button
                    type="button"
                    onClick={() => onSweep("fresh")}
                    disabled={busy || !hasKey}
                    className="inline-flex w-fit 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"
                  >
                    <TelescopeIcon className="size-3.5" /> Start new report
                  </button>
                  <span className="text-xs text-muted-foreground/70">
                    Replaces the current report.
                  </span>
                </div>
                <div className="flex flex-col gap-0.5">
                  <button
                    type="button"
                    onClick={() => onSweep("extend")}
                    disabled={busy || !hasKey}
                    className="inline-flex w-fit items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-xs font-medium text-foreground transition-colors hover:border-brand disabled:opacity-50"
                  >
                    <PlusIcon className="size-3.5" /> Add to report
                  </button>
                  <span className="text-xs text-muted-foreground/70">
                    Keeps it and folds these in.
                  </span>
                </div>
              </div>
            )}

            {canSweep && sweepCapped && (
              <p className="text-xs text-muted-foreground/70">
                The search matched more than we can sweep — narrow it for full
                coverage.
              </p>
            )}
          </>
        )}
      </div>
    </div>
  );
}