"use client";

import { useState, useTransition } from "react";
import Link from "next/link";
import { formatBytes } from "yt-dlp-transcript-common/lib/format";
import {
  mediaScanKey,
  type MediaScanFinding,
} from "yt-dlp-transcript-common/lib/mediaScan";
import { reviewMediaFindingAction } from "../actions";

const VERDICT_LABEL: Record<MediaScanFinding["verdict"], string> = {
  ok: "ok",
  unreadable: "unreadable",
  truncated: "truncated",
  stray: "stray file",
  unknown: "could not tell",
};

const VERDICT_HELP: Record<MediaScanFinding["verdict"], string> = {
  ok: "",
  unreadable:
    "ffprobe could not parse the container at all. This file cannot be transcribed or diarized from.",
  truncated:
    "Decodes, but is materially shorter than the metadata says — the download was cut off.",
  stray:
    "Readable media that is not one of the app's own outputs: a leftover scratch or temp file taking up disk.",
  unknown:
    "The scan could not reach a conclusion. Nothing is claimed about this file.",
};

export function MediaScanFindingRow({
  finding,
  reviewed,
}: {
  finding: MediaScanFinding;
  reviewed: boolean;
}) {
  const [pending, startTransition] = useTransition();
  const [error, setError] = useState<string | null>(null);
  const key = mediaScanKey(finding);

  function toggle() {
    setError(null);
    startTransition(async () => {
      const r = await reviewMediaFindingAction(key, !reviewed);
      if (!r.ok) setError(r.error);
    });
  }

  return (
    <li
      aria-label={`media finding ${key}`}
      data-verdict={finding.verdict}
      className="border border-border rounded-md p-3 flex flex-col gap-1"
    >
      <div className="flex items-center gap-2 flex-wrap text-xs">
        <span className="rounded px-2 py-0.5 border border-border font-medium">
          {VERDICT_LABEL[finding.verdict]}
        </span>
        <span className="text-muted-foreground">
          tier {finding.tier} · {formatBytes(finding.bytes)}
        </span>
        {reviewed && (
          <span className="text-muted-foreground">· marked reviewed</span>
        )}
      </div>
      <p className="text-sm">
        <Link
          href={`/channels/${encodeURIComponent(finding.channelSlug)}/videos/${encodeURIComponent(finding.videoId)}`}
          className="underline underline-offset-2"
        >
          {finding.slug}
        </Link>{" "}
        <code className="text-xs">{finding.file}</code>
      </p>
      <p className="text-xs text-muted-foreground">
        {VERDICT_HELP[finding.verdict]}
      </p>
      {(finding.containerSeconds !== null ||
        finding.metadataSeconds !== null) && (
        <p className="text-xs text-muted-foreground">
          container{" "}
          {finding.containerSeconds === null
            ? "unreadable"
            : `${Math.round(finding.containerSeconds)}s`}{" "}
          · metadata{" "}
          {finding.metadataSeconds === null
            ? "unknown"
            : `${Math.round(finding.metadataSeconds)}s`}
        </p>
      )}
      {finding.detail && (
        <p className="text-xs text-muted-foreground font-mono break-all">
          {finding.detail}
        </p>
      )}
      <div className="flex items-center gap-2">
        {/* Deletion is deliberately NOT here. The convention in this app is
            report first, delete second: the per-file delete already exists on
            the video page, behind its own confirm, and a scan that could delete
            what it flagged would be a very different and much more dangerous
            thing than a scan. */}
        <button
          type="button"
          onClick={toggle}
          disabled={pending}
          aria-label={`${reviewed ? "unreview" : "review"} ${key}`}
          className="px-2 py-1 rounded border border-border text-xs hover:bg-muted disabled:opacity-50"
        >
          {reviewed ? "Un-review" : "Mark reviewed"}
        </button>
        {error && (
          <span role="alert" className="text-xs text-destructive">
            {error}
          </span>
        )}
      </div>
    </li>
  );
}