"use client";

import type { ClipProvenance } from "yt-dlp-transcript-common/lib/clipWindow";
import { formatBytes, formatDuration } from "yt-dlp-transcript-common/lib/format";

// A window of source media this editor fetched because another tool asked.
export type FetchedWindow = {
  file: string;
  from: number;
  to: number;
  bytes: number;
  provenance: ClipProvenance | null;
};

// WHO ASKED, FOR WHAT, AND WHY — the three things a `clips/` directory has to
// be able to answer months later, when the only other record (the job log) has
// been pruned. Modelled on PersistedSourceVideo (SourceVideoSection.tsx), which answers the same
// question for a whole container.
export function FetchedWindows({ windows }: { windows: FetchedWindow[] }) {
  return (
    <div className="flex flex-col gap-3">
      <p className="text-sm text-muted-foreground">
        Seconds of this video&apos;s source media, fetched through the managed
        download path because a tool asked for them, and kept in{" "}
        <code>clips/</code> so the next tool reuses them instead of paying for
        the same bytes again.
      </p>
      <ul className="flex flex-col gap-2">
        {windows.map((w) => {
          const p = w.provenance;
          const what = [p?.manifest, p?.clipId].filter(Boolean).join("/");
          return (
            <li
              key={w.file}
              className="flex flex-col gap-0.5 text-sm border-t border-border pt-2 first:border-t-0 first:pt-0"
            >
              <span className="font-mono tabular-nums">
                {w.from.toFixed(2)}–{w.to.toFixed(2)}{" "}
                <span className="text-muted-foreground">
                  ({formatDuration(w.to - w.from)}) · {formatBytes(w.bytes)}
                </span>
              </span>
              <span className="text-xs text-muted-foreground">
                {p ? (
                  <>
                    requested by {p.requestedBy}
                    {what ? ` for ${what}` : ""}
                    {p.reason ? ` · \u201c${p.reason}\u201d` : ""}
                    {p.source === "saved-video" ? " · cut from the saved video" : ""}
                    {p.fetchedAt
                      ? ` · ${new Date(p.fetchedAt).toLocaleString()}`
                      : ""}
                  </>
                ) : (
                  "no provenance sidecar — requester unknown"
                )}
              </span>
            </li>
          );
        })}
      </ul>
      {/* A WINDOW IS NOT A DOWNLOAD. Thirty seconds of a stream is not the
          video, and nothing downstream treats it as one: the fetch writes no
          metadata.info.json, so this video stays exactly as undownloaded (and
          as absent from the index) as it was. */}
      <p className="text-xs text-muted-foreground">
        Fetched windows do not make this video downloaded: they carry no
        metadata, so the video&apos;s pipeline state and its place in the index
        are unchanged.
      </p>
      {/* WHAT THEY COST, AND THAT NOTHING RECLAIMS IT. The retention sweep is
          pointer-driven and never sees a window; the cleanup lanes are about
          `audio.*`. The only thing that removes one is Evict fetched windows on
          /storage, and it evicts BY AGE — which surfaces have to say, because a
          window a report still cites looks identical to one nothing wants. */}
      <p aria-label="clip windows total" className="text-xs text-muted-foreground">
        {formatBytes(windows.reduce((n, w) => n + w.bytes, 0))} in total,
        counted in this channel&apos;s media size. Nothing prunes a window on
        its own — Storage evicts them by age.
      </p>
    </div>
  );
}