"use client";

import { useState } from "react";
import {
  runDuplicateDetectionAction,
  type DuplicateScope,
  type RunDuplicateDetectionResult,
} from "../actions";

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

export function RunDuplicateDetectionButton() {
  const [scope, setScope] = useState<DuplicateScope>("shorts");
  const [status, setStatus] = useState<Status>({ kind: "idle" });

  async function handleClick() {
    setStatus({ kind: "running" });
    try {
      const result = await runDuplicateDetectionAction(scope);
      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">
      <label className="sr-only" htmlFor="duplicate-scope">
        Detection scope
      </label>
      <select
        id="duplicate-scope"
        aria-label="duplicate detection scope"
        value={scope}
        onChange={(e) => setScope(e.target.value as DuplicateScope)}
        disabled={running}
        className="text-sm rounded-md border border-border bg-transparent px-2 py-2"
      >
        <option value="shorts">Shorts only</option>
        <option value="all">All durations</option>
      </select>
      <button
        type="button"
        onClick={handleClick}
        disabled={running}
        aria-label="detect duplicate shorts"
        className="px-3 py-2 rounded-md bg-primary text-primary-foreground text-sm font-medium hover:opacity-90 disabled:opacity-50"
      >
        {running ? "Detecting…" : "Detect duplicates"}
      </button>
      {status.kind === "done" && status.result.ok && (
        <span
          aria-label="detect duplicate shorts result"
          className="text-xs text-muted-foreground"
        >
          {status.result.clusters} cluster(s) ·{" "}
          {status.result.videosInClusters} video(s)
        </span>
      )}
      {status.kind === "done" && !status.result.ok && (
        <span
          role="alert"
          aria-label="detect duplicate shorts error"
          className="text-xs text-destructive"
        >
          {status.result.error}
        </span>
      )}
      {status.kind === "error" && (
        <span
          role="alert"
          aria-label="detect duplicate shorts error"
          className="text-xs text-destructive"
        >
          {status.message}
        </span>
      )}
    </div>
  );
}