"use client";

import { useEffect, useState } from "react";
import {
  reviewDuplicateClusterAction,
  type DuplicateClusterDecision,
  type ReviewDuplicateClusterResult,
} from "../actions";
import type { DuplicateClusterOverride } from "yt-dlp-transcript-common/lib/duplicates";

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

// NOTE ON THE aria-labels BELOW: none of them may contain the substring
// "duplicate cluster <id>". That is the CARD's own label, and Playwright's
// getByLabel matches by SUBSTRING, so a button labelled "confirm duplicate
// cluster <id>" makes the card's own locator resolve to three elements and
// every existing assertion on it dies with a strict-mode violation. That is
// exactly what happened here, and this repo has now hit the same collision
// three times (deploy-page's "Build & deploy" vs "Build & deploy all sites",
// the settings placeholder collision, and this).
export function DuplicateClusterReview({
  clusterId,
  override,
}: {
  clusterId: string;
  override: DuplicateClusterOverride | undefined;
}) {
  const [status, setStatus] = useState<Status>({ kind: "idle" });
  // Disabled until mounted, deliberately. A server-rendered button has no
  // handler until React hydrates, so a click before then fires NOTHING — no
  // request, no error, nothing to debug. That is the exact failure that made
  // the digest pilot's job look "un-created", and /review renders a page
  // heavy enough to hit the same window. See StreamActionLog.
  const [mounted, setMounted] = useState(false);
  useEffect(() => setMounted(true), []);

  async function decide(decision: DuplicateClusterDecision) {
    setStatus({ kind: "running", decision });
    try {
      setStatus({
        kind: "done",
        result: await reviewDuplicateClusterAction(clusterId, decision),
      });
    } catch (e) {
      setStatus({ kind: "error", message: (e as Error).message });
    }
  }

  const busy = status.kind === "running";
  const disabled = busy || !mounted;
  const confirmed = override?.confirmed === true;
  const rejected = override?.notDuplicate === true;

  return (
    <div className="flex items-center gap-2 flex-wrap">
      <button
        type="button"
        onClick={() => decide("confirmed")}
        disabled={disabled || confirmed}
        aria-label={`confirm cluster ${clusterId}`}
        className="px-2 py-1 rounded-md border border-border text-xs font-medium hover:bg-muted disabled:opacity-50"
      >
        {busy && status.decision === "confirmed" ? "Confirming…" : "Confirm"}
      </button>
      <button
        type="button"
        onClick={() => decide("not-duplicate")}
        disabled={disabled || rejected}
        aria-label={`reject cluster ${clusterId}`}
        className="px-2 py-1 rounded-md border border-border text-xs font-medium hover:bg-muted disabled:opacity-50"
      >
        {busy && status.decision === "not-duplicate" ? "Rejecting…" : "Not a duplicate"}
      </button>
      {(confirmed || rejected) && (
        <button
          type="button"
          onClick={() => decide("clear")}
          disabled={disabled}
          aria-label={`clear cluster decision ${clusterId}`}
          className="px-2 py-1 rounded-md text-xs text-muted-foreground underline hover:text-foreground disabled:opacity-50"
        >
          {busy && status.decision === "clear" ? "Clearing…" : "Undo"}
        </button>
      )}
      {status.kind === "done" && status.result.ok && (
        <span
          aria-label={`cluster review result ${clusterId}`}
          className="text-xs text-muted-foreground"
        >
          {status.result.shared > 0 || status.result.misaligned > 0
            ? `${status.result.shared} digest(s) shared` +
              (status.result.misaligned > 0
                ? `, ${status.result.misaligned} misaligned`
                : "")
            : "Saved."}
        </span>
      )}
      {status.kind === "done" && !status.result.ok && (
        <span
          role="alert"
          aria-label={`cluster review error ${clusterId}`}
          className="text-xs text-destructive"
        >
          {status.result.error}
        </span>
      )}
      {status.kind === "error" && (
        <span
          role="alert"
          aria-label={`cluster review error ${clusterId}`}
          className="text-xs text-destructive"
        >
          {status.message}
        </span>
      )}
    </div>
  );
}