"use client";

import Link from "next/link";
import { useState, useTransition } from "react";
import { Button } from "yt-dlp-transcript-common/components/ui/button";
import {
  fetchMissingEvidenceAction,
  type FetchMissingEvidenceResult,
} from "../../channels/[slug]/videos/fetchWindowsAction";

// "Fetch missing evidence": every window the site's published reports cite and
// the disk does not hold, fetched as one paced job per platform
// (fetch-windows). Preview answers the same question without starting
// anything. It is not a streamed log because a run can start two jobs (YouTube
// and Rumble side by side); each is linked, and its log is on /jobs.
export function FetchMissingEvidenceButton({ siteId }: { siteId: string }) {
  const [pending, start] = useTransition();
  const [result, setResult] = useState<FetchMissingEvidenceResult | null>(null);
  const run = (dryRun: boolean) => {
    start(async () => {
      setResult(await fetchMissingEvidenceAction(siteId, { dryRun }));
    });
  };
  return (
    <div className="flex flex-col gap-2">
      <div className="flex flex-wrap items-center gap-2">
        <Button type="button" variant="outline" disabled={pending} onClick={() => run(true)}>
          Preview missing evidence
        </Button>
        <Button type="button" disabled={pending} onClick={() => run(false)}>
          {pending ? "Working…" : "Fetch missing evidence"}
        </Button>
      </div>
      {result && <FetchSummary result={result} />}
    </div>
  );
}

function FetchSummary({ result }: { result: FetchMissingEvidenceResult }) {
  if (!result.ok) {
    return (
      <p role="alert" className="text-sm text-destructive">
        {result.error}
      </p>
    );
  }
  const toFetch = result.groups.reduce((n, g) => n + g.items.length, 0);
  return (
    <div className="flex flex-col gap-1 text-sm" aria-label="Missing evidence">
      <p>
        {result.onDisk} cited span(s) on disk · {toFetch} window(s) to fetch
        {result.cached.length > 0 && <> · {result.cached.length} already fetched</>}
        {result.unfetchable.length > 0 && <> · {result.unfetchable.length} cannot be fetched</>}
      </p>
      {result.dryRun
        ? result.groups.map((g) => (
            <p key={g.queueKey} className="text-muted-foreground">
              {g.platform}: {g.items.length} window(s) on {g.queueKey}
            </p>
          ))
        : result.jobs.map((j) => (
            <p key={j.jobId}>
              {j.platform}: {j.items} window(s) —{" "}
              <Link href={`/jobs/${j.jobId}`} className="font-mono underline">
                {j.jobId}
              </Link>
            </p>
          ))}
      {!result.dryRun &&
        result.refused.map((r) => (
          <p key={r.platform} role="alert" className="text-destructive">
            {r.platform}: {r.items} window(s) not started — {r.error}
          </p>
        ))}
      {result.unresolved.map((u) => (
        <p key={`${u.item.slug}/${u.item.id}/${u.item.from}`} className="text-destructive">
          {u.item.clipId ?? `${u.item.slug}/${u.item.id}`}: {u.error}
        </p>
      ))}
      {result.unfetchable.length > 0 && (
        <ul className="list-disc pl-5 text-muted-foreground">
          {result.unfetchable.map((u) => (
            <li key={u.clipId}>
              {u.clipId} ({u.slug}/{u.id}): {u.message}
            </li>
          ))}
        </ul>
      )}
    </div>
  );
}