import Link from "next/link";
import { InlineActionButton } from "../../../components/actions/InlineActionButton";

// Banner shown at the top of a channel page that has no generated report.
//
// This page used to GENERATE the snapshot inline when one was missing — a full
// channel analysis, walking every video directory, inside a GET. On the largest
// channel here that is a multi-minute page load triggered by nothing more than
// clicking a link, with no progress and no way to cancel. Worse, it made the
// expensive path the invisible one: the page looked slow rather than looking
// like it was doing a job.
//
// So the page now asks. Deliberately a BANNER rather than a replacement for the
// page: the video list is read from the data directory, not the report, and the
// pipeline controls are exactly what you want on a channel you haven't analysed
// yet. Only the derived buckets and counts are empty, which is what this says.
export function NoReportYet({ slug }: { slug: string }) {
  return (
    <div
      data-testid="no-report-banner"
      className="rounded-lg border border-dashed border-warning/40 bg-warning-soft/40 p-4 flex flex-col gap-2 items-start"
    >
      <h2 className="text-sm font-medium">No report yet</h2>
      <p className="text-sm text-muted-foreground max-w-prose">
        This channel hasn&rsquo;t been analysed, so every bucket and count below
        reads zero. Generating a report reads every video directory in the
        channel — on a large channel that takes a while, so it runs as a
        background job rather than holding this page open.
      </p>
      <div className="flex items-center gap-3">
        <InlineActionButton variant={{ kind: "refreshReport", slug }} />
        <span className="text-xs text-muted-foreground">
          Follow it on the{" "}
          <Link href="/jobs" className="underline">
            Jobs
          </Link>{" "}
          page, then reload.
        </span>
      </div>
    </div>
  );
}