"use client";
import { useState } from "react";
import type { CanvasConflictChoice } from "@/lib/video-canvas/merge-snapshot";
export function VideoCanvasConflictNotice({
  fields,
  onResolve,
  onDownload,
}: {
  fields: string[];
  onResolve: (choice: CanvasConflictChoice) => Promise<void> | undefined;
  onDownload: () => void;
}) {
  const [busy, setBusy] = useState(false);
  if (!fields.length) return null;
  const resolve = async (choice: CanvasConflictChoice) => {
    setBusy(true);
    try {
      await onResolve(choice);
    } finally {
      setBusy(false);
    }
  };
  return (
    <div
      role="alert"
      className="absolute left-1/2 top-20 z-[200] w-[min(680px,90vw)] -translate-x-1/2 rounded-xl border border-amber-400/40 bg-[#29251b] p-4 text-sm text-white shadow-xl"
    >
      <p className="font-semibold">其他页面修改了相同内容，当前草稿已保留</p>
      <p className="mt-2 text-white/70">
        共有 {fields.length} 处冲突。不同位置的修改会自动合并；以下选择仅处理冲突部分。
      </p>
      <ul className="my-2 max-h-32 overflow-auto text-xs text-white/60">
        {fields.map((field, index) => (
          <li key={`${field}-${index}`}>{field}</li>
        ))}
      </ul>
      <div className="flex flex-wrap gap-3">
        <button
          disabled={busy}
          className="rounded bg-white/10 px-3 py-2 disabled:opacity-40"
          onClick={() => void resolve("local")}
        >
          冲突处保留本页
        </button>
        <button
          disabled={busy}
          className="rounded bg-white/10 px-3 py-2 disabled:opacity-40"
          onClick={() => void resolve("remote")}
        >
          冲突处采用服务器版
        </button>
        <button className="rounded bg-white/10 px-3 py-2" onClick={onDownload}>
          下载当前草稿
        </button>
      </div>
    </div>
  );
}