"use client";

import { useId, useState } from "react";
import { FileTextIcon, Loader2Icon } from "lucide-react";
import { Markdown } from "yt-dlp-transcript-common/components/Markdown";
import type { RetrievedVideo } from "../lib/askRetrieval";
import { CitationSources, linkifyCitations, makeCitationLink } from "./citations";

// The running "report" surface for report mode: a persistent markdown document
// the model maintains via the update_report tool while the user keeps chatting.
// The header carries the on/off toggle (disabled on transports without native
// tools, since there is no tool to write the report), a live "updating…" shimmer
// while a turn is writing, and the rendered report (or an empty-state hint).
// Collapsible like the Context panel so it stays out of the way until wanted.
export function ReportPanel({
  report,
  sources,
  onOpenCitation,
  reportMode,
  setReportMode,
  available,
  updating,
  busy,
  sweeping = false,
}: {
  report: string;
  // The report's source registry — what its `[n]` / `[n @ mm:ss]` citations index
  // into. Drives the clickable citations + the numbered Sources list below.
  sources: RetrievedVideo[];
  // Open the transcript modal seeked to a cited line. Undefined in hub /ask (no
  // player), where citations fall back to scroll-to-source within the list below.
  onOpenCitation?: (slug: string, seconds?: number) => void;
  reportMode: boolean;
  setReportMode: (on: boolean) => void;
  available: boolean;
  updating: boolean;
  busy: boolean;
  // A whole-corpus sweep is folding batches into the report — force the panel
  // open so its document is visibly growing, and keep the "updating" shimmer on.
  sweeping?: boolean;
}) {
  const [open, setOpen] = useState(false);
  // Stable per-panel id so the report's citation anchors don't collide with a
  // chat message's.
  const cid = useId().replace(/:/g, "");
  const CitationLink = makeCitationLink(cid, sources, onOpenCitation);
  const hasReport = report.trim() !== "";
  // While a sweep runs, keep the panel expanded (so its document is visibly
  // growing) regardless of the user's toggle.
  const expanded = open || sweeping;
  const busyWriting = updating || sweeping;

  return (
    <details
      className="rounded-lg border border-border bg-card/40"
      open={expanded}
      onToggle={(e) => setOpen((e.currentTarget as HTMLDetailsElement).open)}
    >
      <summary className="flex cursor-pointer items-center gap-2 px-4 py-2.5 text-sm font-medium text-foreground">
        <FileTextIcon className="size-4 shrink-0 text-brand" />
        Report
        {busyWriting && (
          <span className="inline-flex items-center gap-1 text-xs font-normal text-brand">
            <Loader2Icon className="size-3 animate-spin motion-reduce:animate-none" />
            updating…
          </span>
        )}
        {/* The toggle lives in the header so it's reachable without expanding. */}
        <label
          className="ml-auto flex items-center gap-1.5 text-xs font-normal text-muted-foreground"
          title={
            available
              ? "Maintain a persistent report; the conversation is compacted into it."
              : "Report mode needs a tool-capable provider (switch off Scripted)."
          }
          onClick={(e) => e.stopPropagation()}
        >
          <input
            type="checkbox"
            checked={reportMode && available}
            disabled={!available || busy}
            onChange={(e) => setReportMode(e.target.checked)}
            className="accent-brand"
          />
          Report mode
        </label>
      </summary>

      {expanded && (
        <div className="flex flex-col gap-3 border-t border-border px-4 py-3">
          {!available && (
            <p className="text-xs text-warning">
              Report mode needs a tool-capable provider. Switch the search mode off
              Scripted (Auto or Native tools) to enable it.
            </p>
          )}
          {hasReport ? (
            <div
              aria-live="polite"
              className={
                "flex flex-col gap-3 rounded-md border border-border bg-background px-3 py-2 text-sm text-foreground transition-opacity " +
                (busyWriting ? "opacity-60" : "opacity-100")
              }
            >
              <Markdown className="leading-relaxed" linkComponent={CitationLink}>
                {linkifyCitations(report, sources.length, cid)}
              </Markdown>
              {sources.length > 0 && (
                <div className="border-t border-border pt-2">
                  <p className="mb-1 text-xs font-medium text-muted-foreground">
                    Sources
                  </p>
                  <CitationSources
                    cid={cid}
                    sources={sources}
                    onOpenCitation={onOpenCitation}
                  />
                </div>
              )}
            </div>
          ) : (
            <p className="text-xs text-muted-foreground">
              Turn on report mode and ask a question — the assistant will build a
              report here, keeping it current as the conversation grows.
            </p>
          )}
        </div>
      )}
    </details>
  );
}