import type { Metadata } from "next";
import Link from "next/link";
import { getPaths } from "yt-dlp-transcript-common/lib/paths";
import {
  mediaScanKey,
  mediaScanTotals,
  unreviewedFindings,
  type MediaScanOverrides,
  type MediaScanReport,
} from "yt-dlp-transcript-common/lib/mediaScan";
import type {
  DuplicateCluster,
  DuplicateOverrides,
  DuplicateReport,
} from "yt-dlp-transcript-common/lib/duplicates";
import type { AutoPausedRow } from "yt-dlp-transcript-common/views/review";
import { loadReviewSummary } from "./lib/loadReview";
import { ResumeAutoPausedButton } from "./components/ResumeAutoPausedButton";
import { RunDuplicateDetectionButton } from "./components/RunDuplicateDetectionButton";
import { RunMediaScanButton } from "./components/RunMediaScanButton";
import { MediaScanFindingRow } from "./components/MediaScanFindingRow";
import { DuplicateClusterReview } from "./components/DuplicateClusterReview";

export const dynamic = "force-dynamic";

export const metadata: Metadata = { title: "Review" };

// CORPUS REVIEW: the two findings a PERSON decides about. Duplicate clusters
// and media-integrity findings are both flag-only, both carry a reviewed state,
// and neither is an operation or a pile of reclaimable bytes — which is why
// they are here rather than on an operation page or on /cleanup.
export default async function ReviewPage() {
  const review = await loadReviewSummary(getPaths());
  return (
    <div className="flex flex-col gap-6">
      <h1 className="text-2xl font-semibold">Review</h1>
      <AutoPausedSection rows={review.autoPaused} />
      <DuplicatesSection
        report={review.duplicates}
        overrides={review.duplicateOverrides}
      />
      <MediaScanSection
        report={review.mediaScan}
        overrides={review.mediaScanOverrides}
      />
    </div>
  );
}

// CHANNELS THE MACHINE PAUSED WHILE NOBODY WAS LOOKING.
//
// The storage watch forces a channel to `paused` when the drive its media is on
// stops being there, and restores it when the drive comes back. Both halves are
// right; what was missing was anywhere that said it had happened. Until this,
// the record surfaced as one chip beside one channel's tier on /channels — so
// the way you found out a platter had gone away was by noticing that a channel
// had quietly stopped doing anything.
//
// IT IS A REVIEW FINDING, not a storage row: the decision is about a CHANNEL,
// and what to do about it is a judgement — resume it and accept that a lane
// will keep skipping it, or go plug the drive in. /storage is where the second
// one happens, so the section links there rather than duplicating its controls.
//
// RENDERED ONLY WHEN THERE IS SOMETHING TO SAY. Unlike the two sections below
// it, an empty state here would be a permanent all-clear about a condition that
// is normally absent — noise on every render of a page whose whole job is to be
// worth reading.
function AutoPausedSection({ rows }: { rows: AutoPausedRow[] }) {
  if (rows.length === 0) return null;
  return (
    <section aria-label="auto-paused channels" className="flex flex-col gap-2">
      <div className="flex items-center justify-between flex-wrap gap-2">
        <h2 className="text-lg font-semibold">
          Auto-paused channels ({rows.length})
        </h2>
        <Link
          href="/storage"
          className="text-sm underline hover:text-foreground"
        >
          Storage
        </Link>
      </div>
      <p className="text-sm text-muted-foreground">
        The storage watch paused these because the drive holding their media
        stopped answering. Each returns to its previous tier on its own when the
        drive is back — resume one only to override that, which is a decision
        the watch will then respect until the next time the drive goes away.
      </p>
      <ul className="flex flex-col gap-2">
        {rows.map((row) => (
          <li
            key={row.slug}
            aria-label={`auto-paused ${row.slug}`}
            className="border border-border rounded-md p-3 flex flex-col gap-2"
          >
            <div className="flex items-center gap-2 flex-wrap text-sm">
              <Link
                href={`/channels/${row.slug}`}
                className="underline hover:text-foreground"
              >
                {row.slug}
              </Link>
              <Badge>{row.reason}</Badge>
              {row.since && (
                <span className="text-xs text-muted-foreground">
                  since{" "}
                  <time dateTime={row.since}>{row.since.slice(0, 10)}</time>
                </span>
              )}
              <span className="ml-auto flex items-center gap-2">
                <ResumeAutoPausedButton
                  slug={row.slug}
                  previousTier={row.previousTier}
                />
              </span>
            </div>
            <p
              aria-label={`auto-paused reason for ${row.slug}`}
              className="text-xs text-muted-foreground"
            >
              {row.detail}
            </p>
          </li>
        ))}
      </ul>
    </section>
  );
}

// Corrupt media already on disk. Flag-only, exactly like the duplicates section
// above it — the probes have existed since the audio-checked download landed;
// what was missing was ever running them against files that are already here.
function MediaScanSection({
  report,
  overrides,
}: {
  report: MediaScanReport | null;
  overrides: MediaScanOverrides;
}) {
  const findings = report?.findings ?? [];
  const outstanding = unreviewedFindings(report, overrides);
  const totals = report ? mediaScanTotals(report) : null;
  return (
    <section aria-label="media scan" className="flex flex-col gap-2">
      <div className="flex items-center justify-between flex-wrap gap-2">
        <h2 className="text-lg font-semibold">
          Media integrity{outstanding.length > 0 ? ` (${outstanding.length})` : ""}
        </h2>
        <RunMediaScanButton />
      </div>
      <p className="text-sm text-muted-foreground">
        Checks the audio and video files still on disk for corruption or
        truncation. Flag-only — nothing here deletes anything.
        {totals && totals.scannedAt ? (
          <>
            {" "}
            Last scan{" "}
            <time dateTime={totals.scannedAt}>
              {new Date(totals.scannedAt).toLocaleString()}
            </time>{" "}
            · {totals.filesScanned.toLocaleString()} file(s) across{" "}
            {totals.videosScanned.toLocaleString()} video dir(s)
            {totals.deepProbed > 0
              ? `, ${totals.deepProbed.toLocaleString()} fully decoded`
              : ""}
            .
          </>
        ) : (
          " Never run."
        )}
      </p>
      {findings.length === 0 ? (
        <p
          aria-label="media scan empty"
          className="text-sm text-muted-foreground border border-dashed border-border rounded p-4"
        >
          {/* "Never run" is NOT "all clear", and saying so would be the one way
              this section could actively mislead. */}
          {report
            ? "Every file the scan read was intact."
            : "Run a scan to check the media on disk."}
        </p>
      ) : (
        <ul className="flex flex-col gap-3">
          {findings.map((f) => (
            <MediaScanFindingRow
              key={mediaScanKey(f)}
              finding={f}
              reviewed={Boolean(overrides.reviewed[mediaScanKey(f)])}
            />
          ))}
        </ul>
      )}
    </section>
  );
}

function DuplicatesSection({
  report,
  overrides,
}: {
  report: DuplicateReport | null;
  overrides: DuplicateOverrides;
}) {
  const clusters = report?.clusters ?? [];
  return (
    <section aria-label="duplicate-shorts" className="flex flex-col gap-2">
      <div className="flex items-center justify-between flex-wrap gap-2">
        <h2 className="text-lg font-semibold">Duplicate shorts</h2>
        <RunDuplicateDetectionButton />
      </div>
      <p className="text-sm text-muted-foreground">
        Cross-platform, cross-channel duplicate detection (metadata pre-cluster →
        transcript comparison). Flag-only — review and act manually.
        {report ? (
          <>
            {" "}
            Last run{" "}
            <time dateTime={report.generatedAt}>
              {new Date(report.generatedAt).toLocaleString()}
            </time>{" "}
            ·{" "}
            {report.runConfig.thresholdSeconds === null
              ? "all durations"
              : `≤ ${report.runConfig.thresholdSeconds}s`}
            .
          </>
        ) : (
          " Never run."
        )}
      </p>
      {clusters.length === 0 ? (
        <p
          aria-label="duplicate-shorts empty"
          className="text-sm text-muted-foreground border border-dashed border-border rounded p-4"
        >
          {report ? "No duplicate clusters found." : "Run detection to scan."}
        </p>
      ) : (
        <ul className="flex flex-col gap-3">
          {clusters.map((cluster) => (
            <DuplicateClusterCard
              key={cluster.clusterId}
              cluster={cluster}
              override={overrides.clusters[cluster.clusterId]}
            />
          ))}
        </ul>
      )}
    </section>
  );
}

function DuplicateClusterCard({
  cluster,
  override,
}: {
  cluster: DuplicateCluster;
  override: DuplicateOverrides["clusters"][string] | undefined;
}) {
  const matchLabel: Record<DuplicateCluster["matchKind"], string> = {
    "transcript-exact": "exact transcript",
    "transcript-near": "near transcript",
    "title-duration": "title + runtime",
  };
  return (
    <li
      aria-label={`duplicate cluster ${cluster.clusterId}`}
      className="border border-border rounded-md p-3 flex flex-col gap-2"
    >
      <div className="flex items-center gap-2 flex-wrap text-xs">
        <Badge>{matchLabel[cluster.matchKind]}</Badge>
        {/* Nothing compared these videos' content — one side has no transcript.
            The cluster is a suspect for a human, stays out of the built site,
            and shares no derived work until someone confirms it. */}
        {cluster.needsReview && !override?.confirmed && !override?.notDuplicate && (
          <Badge>needs review</Badge>
        )}
        {override?.confirmed && <Badge>confirmed</Badge>}
        {override?.notDuplicate && <Badge>not a duplicate</Badge>}
        {cluster.score !== null && (
          <Badge>score {cluster.score.toFixed(2)}</Badge>
        )}
        {cluster.contained && <Badge>clip-of-longer</Badge>}
        {cluster.crossPlatform && <Badge>cross-platform</Badge>}
        {cluster.crossChannel && <Badge>cross-channel</Badge>}
        <span className="text-muted-foreground">
          {cluster.videoRefs.length} videos · ~{cluster.durationBucket}s
        </span>
        {/* The confirm path exists precisely for `needsReview` clusters:
            clusterMaySharePartial fails closed, so until a human says
            "confirmed" these share no digest and never reach a built site.
            Content-confirmed clusters need no confirmation — but they can still
            be rejected, which is the only way to un-assert a wrong one. */}
        <span className="ml-auto">
          <DuplicateClusterReview
            clusterId={cluster.clusterId}
            override={override}
          />
        </span>
      </div>
      <ul className="flex flex-col gap-1">
        {cluster.videoRefs.map((ref) => (
          <li key={ref.slug} className="text-sm flex items-baseline gap-2 flex-wrap">
            <Link
              href={`/channels/${ref.channelSlug}/videos/${ref.id}`}
              className="underline hover:text-foreground"
            >
              {ref.title || ref.slug}
            </Link>
            <span className="text-xs text-muted-foreground font-mono">
              {ref.platform} · {ref.channelSlug} · {ref.uploadDate}
              {ref.hasTranscript ? "" : " · no transcript"}
            </span>
          </li>
        ))}
      </ul>
    </li>
  );
}

function Badge({ children }: { children: React.ReactNode }) {
  return (
    <span className="inline-flex items-center rounded-full bg-muted px-2 py-0.5 text-muted-foreground">
      {children}
    </span>
  );
}