"use client";

import { useState } from "react";
import { CheckCircle2, Loader2 } from "lucide-react";
import { acknowledgeValidationIssueAction } from "@/app/actions/curricula";
import { buttonClass, EmptyState } from "@/components/ui";
import { useToast } from "@/components/toast";
import { formatDateTime, SeverityBadge } from "@/components/status";

/**
 * Curriculum source validation report (SPEC 51, 53).
 *
 * Acknowledging an issue records who accepted it and when — it never deletes
 * the finding.
 */
export interface ValidationIssueView {
  id: string;
  code: string;
  severity: "ERROR" | "WARNING" | "INFO";
  message: string;
  acknowledged: boolean;
  acknowledgedAt: string | null;
}

export function ValidationReport({
  issues,
  canAcknowledge,
}: {
  issues: ValidationIssueView[];
  canAcknowledge: boolean;
}) {
  const { toast } = useToast();
  const [state, setState] = useState(issues);
  const [pending, setPending] = useState<string | null>(null);

  if (state.length === 0) {
    return (
      <EmptyState
        title="No validation notes"
        description="No source discrepancies were recorded for this curriculum."
      />
    );
  }

  const acknowledge = async (id: string) => {
    setPending(id);
    const formData = new FormData();
    formData.set("issue_id", id);
    const result = await acknowledgeValidationIssueAction({ ok: false, message: null }, formData);
    setPending(null);
    if (result.ok) {
      setState((current) =>
        current.map((issue) =>
          issue.id === id ? { ...issue, acknowledged: true, acknowledgedAt: new Date().toISOString() } : issue,
        ),
      );
      toast({ tone: "success", title: result.message ?? "Acknowledged." });
    } else {
      toast({ tone: "error", title: result.message ?? "Could not acknowledge this note." });
    }
  };

  return (
    <ul className="divide-y divide-ink-100">
      {state.map((issue) => (
        <li key={issue.id} className="flex flex-wrap items-start gap-3 px-5 py-3">
          <span className="shrink-0 pt-0.5">
            <SeverityBadge severity={issue.severity} />
          </span>
          <div className="min-w-0 flex-1">
            <p className="font-mono text-[11px] font-semibold uppercase tracking-wide text-ink-500">{issue.code}</p>
            <p className="mt-0.5 text-[13px] leading-relaxed text-ink-700">{issue.message}</p>
            {issue.acknowledged ? (
              <p className="mt-1 flex items-center gap-1 text-[11px] text-teal-700">
                <CheckCircle2 className="h-3 w-3" aria-hidden />
                Acknowledged {formatDateTime(issue.acknowledgedAt)}
              </p>
            ) : null}
          </div>
          {!issue.acknowledged && canAcknowledge && issue.severity !== "INFO" ? (
            <button
              type="button"
              onClick={() => void acknowledge(issue.id)}
              className={buttonClass("secondary", "sm")}
              disabled={pending === issue.id}
            >
              {pending === issue.id ? <Loader2 className="h-3.5 w-3.5 animate-spin" aria-hidden /> : null}
              Acknowledge
            </button>
          ) : null}
        </li>
      ))}
    </ul>
  );
}