"use client";

import { ThinkingIndicator } from "@/components/ThinkingIndicator";
import { Button } from "@/components/ui/Button";
import type { IngestConflicts } from "@/lib/generation/cards";

interface ConflictAdjudicationProps {
  conflicts: IngestConflicts;
  busy: boolean;
  // 作者已查看冲突，确认带 acknowledge 重发入库。
  onAcknowledge: () => void;
  onCancel: () => void;
}

// 入库 409 CONFLICT_UNRESOLVED 裁决面板（UX §7 / 不变量#3）：
// 展示 continuity 预检冲突 → 作者裁决（确认入库 = acknowledge 重发 / 取消回去改卡）。
export function ConflictAdjudication({
  conflicts,
  busy,
  onAcknowledge,
  onCancel,
}: ConflictAdjudicationProps) {
  return (
    <div
      role="alertdialog"
      aria-label="continuity 冲突裁决"
      className="rounded border border-conflict bg-panel p-4"
    >
      <h3 className="mb-1 font-serif text-base text-conflict">
        发现 {conflicts.conflictCount} 处一致性冲突
      </h3>
      <p className="mb-3 text-xs text-ink-soft">
        预检发现生成角色与既有真相源冲突。确认无碍可强制入库，或取消后调整角色卡。
      </p>
      <ul className="mb-3 flex flex-col gap-2">
        {conflicts.conflicts.map((c, i) => (
          <li
            key={`${c.type}-${c.where}-${i}`}
            className="rounded border border-line bg-bg p-2 text-sm"
          >
            <div className="mb-1 flex items-center gap-2">
              <span className="rounded bg-conflict/10 px-2 py-0.5 text-xs text-conflict">
                {c.type}
              </span>
              {c.where ? (
                <span className="text-xs text-ink-soft">{c.where}</span>
              ) : null}
            </div>
            {c.refs.length > 0 ? (
              <p className="mb-1 text-xs text-ink-soft">
                涉及：{c.refs.join("、")}
              </p>
            ) : null}
            {c.suggestion ? (
              <p className="text-ink">建议：{c.suggestion}</p>
            ) : null}
          </li>
        ))}
      </ul>
      <div className="flex gap-2">
        <Button
          type="button"
          variant="danger"
          onClick={onAcknowledge}
          disabled={busy}
        >
          已知悉，强制入库
        </Button>
        <Button
          type="button"
          variant="secondary"
          onClick={onCancel}
          disabled={busy}
        >
          取消，回去改卡
        </Button>
      </div>
      {busy ? (
        <div className="mt-3 text-cinnabar">
          <ThinkingIndicator label="入库中" />
        </div>
      ) : null}
    </div>
  );
}
