import { X } from 'lucide-react';

type CustomWorldAgentLauncherModalProps = {
  isOpen: boolean;
  seedText: string;
  isBusy: boolean;
  error: string | null;
  onClose: () => void;
  onSeedTextChange: (value: string) => void;
  onConfirm: () => void;
};

export function CustomWorldAgentLauncherModal({
  isOpen,
  seedText,
  isBusy,
  error,
  onClose,
  onSeedTextChange,
  onConfirm,
}: CustomWorldAgentLauncherModalProps) {
  if (!isOpen) {
    return null;
  }

  return (
    <div className="fixed inset-0 z-[90] flex items-center justify-center bg-black/72 p-4 backdrop-blur-sm">
      <div className="flex max-h-[92vh] w-full max-w-2xl flex-col overflow-hidden rounded-[2rem] border border-white/10 bg-[#11161f] shadow-[0_30px_90px_rgba(0,0,0,0.6)]">
        <div className="flex items-center justify-between border-b border-white/10 px-5 py-4">
          <div>
            <div className="text-base font-semibold text-white">
              开始和 Agent 共创
            </div>
            <div className="mt-1 text-xs text-zinc-400">
              输入一段种子灵感，先进入新的工作区。
            </div>
          </div>
          <button
            type="button"
            onClick={onClose}
            disabled={isBusy}
            className="rounded-full border border-white/10 bg-white/5 p-2 text-zinc-300 transition hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
          >
            <X className="h-4 w-4" />
          </button>
        </div>

        <div className="min-h-0 flex-1 overflow-y-auto px-5 py-5">
          <label className="block">
            <div className="mb-2 text-sm font-medium text-zinc-200">
              Seed Text
            </div>
            <textarea
              value={seedText}
              onChange={(event) => onSeedTextChange(event.target.value)}
              rows={7}
              placeholder="例：一个被潮雾切碎的列岛世界，灯塔守望者、沉船秘术与旧盟约残片正在重新苏醒。"
              className="w-full rounded-3xl border border-white/10 bg-black/30 px-4 py-3 text-sm leading-7 text-white outline-none transition focus:border-sky-400/40"
            />
          </label>

          {error ? (
            <div className="mt-4 rounded-3xl border border-rose-400/25 bg-rose-500/10 px-4 py-3 text-sm leading-6 text-rose-100">
              {error}
            </div>
          ) : null}
        </div>

        <div className="flex flex-wrap items-center justify-end gap-3 border-t border-white/10 px-5 py-4">
          <button
            type="button"
            onClick={onClose}
            disabled={isBusy}
            className="rounded-2xl border border-white/10 bg-white/5 px-4 py-2 text-sm text-zinc-300 transition hover:bg-white/10 hover:text-white disabled:cursor-not-allowed disabled:opacity-45"
          >
            取消
          </button>
          <button
            type="button"
            onClick={onConfirm}
            disabled={isBusy}
            className="rounded-2xl bg-sky-400 px-4 py-2 text-sm font-semibold text-slate-950 transition hover:bg-sky-300 disabled:cursor-not-allowed disabled:opacity-45"
          >
            {isBusy ? '处理中...' : '开始共创'}
          </button>
        </div>
      </div>
    </div>
  );
}