Genarrative/src/components/custom-world-agent/CustomWorldGenerateEntityModal.tsx

import { useEffect, useState } from 'react';

type CustomWorldGenerateEntityModalProps = {
  open: boolean;
  mode: 'character' | 'landmark';
  anchorCardTitle?: string | null;
  disabled?: boolean;
  onClose: () => void;
  onSubmit: (payload: {
    count: number;
    promptText: string;
  }) => void;
};

export function CustomWorldGenerateEntityModal({
  open,
  mode,
  anchorCardTitle,
  disabled = false,
  onClose,
  onSubmit,
}: CustomWorldGenerateEntityModalProps) {
  const [count, setCount] = useState(2);
  const [promptText, setPromptText] = useState('');

  useEffect(() => {
    if (!open) {
      return;
    }

    setCount(2);
    setPromptText('');
  }, [open, mode]);

  if (!open) {
    return null;
  }

  const title = mode === 'character' ? '新增角色' : '新增场景';
  const submitLabel = mode === 'character' ? '生成角色' : '生成场景';

  return (
    <div className="fixed inset-0 z-[96] flex items-end justify-center bg-black/72 p-3 backdrop-blur-sm sm:items-center">
      <button
        type="button"
        aria-label="关闭新增弹窗"
        onClick={onClose}
        className="absolute inset-0 cursor-default"
      />
      <div className="relative z-10 w-full max-w-xl rounded-[1.8rem] border border-white/10 bg-[linear-gradient(180deg,rgba(10,12,18,0.96),rgba(8,10,14,0.96))] px-4 py-4 shadow-[0_18px_60px_rgba(0,0,0,0.35)] sm:px-5 sm:py-5">
        <div className="flex items-start justify-between gap-3">
          <div>
            <div className="text-[11px] font-bold tracking-[0.2em] text-zinc-400">
              AI 扩写
            </div>
            <div className="mt-2 text-lg font-semibold text-white">{title}</div>
          </div>
          <button
            type="button"
            onClick={onClose}
            disabled={disabled}
            className="rounded-full border border-white/10 bg-black/20 px-3 py-1 text-[11px] text-zinc-300 transition hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
          >
            关闭
          </button>
        </div>

        <div className="mt-4 space-y-4">
          {anchorCardTitle ? (
            <div className="rounded-[1.1rem] border border-white/8 bg-white/5 px-3 py-3">
              <div className="text-[11px] tracking-[0.16em] text-zinc-400">
                当前参考卡
              </div>
              <div className="mt-2 text-sm text-zinc-100">{anchorCardTitle}</div>
            </div>
          ) : null}

          <div className="rounded-[1.1rem] border border-white/8 bg-white/5 px-3 py-3">
            <div className="text-[11px] tracking-[0.16em] text-zinc-400">数量</div>
            <div className="mt-3 flex gap-2">
              {[1, 2, 3].map((value) => (
                <button
                  key={value}
                  type="button"
                  onClick={() => setCount(value)}
                  disabled={disabled}
                  className={`rounded-full border px-4 py-2 text-sm transition ${
                    count === value
                      ? 'border-sky-300/20 bg-sky-500/10 text-sky-100'
                      : 'border-white/10 bg-black/20 text-zinc-300 hover:text-white'
                  } disabled:cursor-not-allowed disabled:opacity-45`}
                >
                  {value}
                </button>
              ))}
            </div>
          </div>

          <label className="block rounded-[1.1rem] border border-white/8 bg-white/5 px-3 py-3">
            <div className="text-[11px] tracking-[0.16em] text-zinc-400">
              补充要求
            </div>
            <textarea
              value={promptText}
              onChange={(event) => setPromptText(event.target.value)}
              rows={5}
              disabled={disabled}
              className="mt-2 w-full resize-none rounded-[0.9rem] border border-white/10 bg-black/26 px-3 py-3 text-sm leading-7 text-white outline-none transition focus:border-sky-400/40 disabled:cursor-not-allowed disabled:opacity-60"
            />
          </label>
        </div>

        <div className="mt-4 flex items-center justify-end gap-3">
          <button
            type="button"
            onClick={onClose}
            disabled={disabled}
            className="rounded-full border border-white/10 bg-black/20 px-4 py-2 text-sm text-zinc-200 transition hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
          >
            取消
          </button>
          <button
            type="button"
            onClick={() => {
              onSubmit({
                count,
                promptText: promptText.trim(),
              });
            }}
            disabled={disabled}
            className="rounded-full border border-sky-300/20 bg-sky-500/10 px-4 py-2 text-sm font-medium text-sky-100 transition hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
          >
            {submitLabel}
          </button>
        </div>
      </div>
    </div>
  );
}