"use client";

import { useState } from "react";
import {
  runMediaScanAction,
  type RunMediaScanResult,
} from "../actions";

type Status =
  | { kind: "idle" }
  | { kind: "running" }
  | { kind: "done"; result: RunMediaScanResult }
  | { kind: "error"; message: string };

// The depth choice is the whole reason this has a select rather than one button.
// The container read costs milliseconds per file; the full decode is a real
// transcode of every suspect file, so it has to be asked for rather than
// happening because someone clicked the obvious thing.
type Depth = "quick" | "deep";

export function RunMediaScanButton({ slug }: { slug?: string }) {
  const [depth, setDepth] = useState<Depth>("quick");
  const [status, setStatus] = useState<Status>({ kind: "idle" });

  async function handleClick() {
    setStatus({ kind: "running" });
    try {
      const result = await runMediaScanAction({
        ...(slug ? { channels: [slug] } : {}),
        deepProbe: depth === "deep",
      });
      setStatus({ kind: "done", result });
    } catch (e) {
      setStatus({ kind: "error", message: (e as Error).message });
    }
  }

  const running = status.kind === "running";
  return (
    <div className="flex items-center gap-2 flex-wrap">
      <label className="sr-only" htmlFor={`media-scan-depth-${slug ?? "all"}`}>
        Scan depth
      </label>
      <select
        id={`media-scan-depth-${slug ?? "all"}`}
        aria-label="media scan depth"
        value={depth}
        onChange={(e) => setDepth(e.target.value as Depth)}
        disabled={running}
        className="text-sm rounded-md border border-border bg-transparent px-2 py-2"
      >
        <option value="quick">Quick (read containers)</option>
        <option value="deep">Deep (decode suspect files)</option>
      </select>
      <button
        type="button"
        onClick={handleClick}
        disabled={running}
        aria-label={slug ? "scan channel media" : "scan media for corruption"}
        className="px-3 py-2 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:opacity-90 disabled:opacity-50"
      >
        {running ? "Scanning…" : slug ? "Scan this channel" : "Scan media"}
      </button>
      {status.kind === "done" && status.result.ok && (
        <span
          aria-label="media scan result"
          className="text-xs text-muted-foreground"
        >
          {status.result.filesScanned.toLocaleString()} file(s) checked ·{" "}
          {status.result.findings.toLocaleString()} finding(s)
        </span>
      )}
      {status.kind === "done" && !status.result.ok && (
        <span
          role="alert"
          aria-label="media scan error"
          className="text-xs text-destructive"
        >
          {status.result.error}
        </span>
      )}
      {status.kind === "error" && (
        <span
          role="alert"
          aria-label="media scan error"
          className="text-xs text-destructive"
        >
          {status.message}
        </span>
      )}
    </div>
  );
}