import { useRef, useState, type ChangeEvent } from "react";
import { useNavigate, useParams } from "react-router";
import {
  ArrowRight,
  Check,
  Edit2,
  ImageIcon,
  Loader2,
  MapPin,
  Plus,
  RefreshCw,
  Sparkles,
  Trash2,
  Upload,
  Users,
  X,
  Box,
} from "lucide-react";
import {
  useCharacters,
  useCharacterStates,
  useDeleteCharacter,
  useDeleteCharacterState,
  useExtractCharacters,
  useGenerateCharacterImage,
  useGenerateCharacterStateImage,
  useSaveCharacter,
  useSaveCharacterState,
  useUploadCharacterImage,
} from "../../hooks/useAi";
import type { Character, CharacterState } from "../../lib/api/ai";

type SettingsTab = "characters" | "scenes" | "props";
type CharacterViewType = "front" | "side" | "back";
type ImageState = Record<CharacterViewType, string | null>;
type PendingFiles = Record<CharacterViewType, File | null>;
type CharacterStateDraft = Pick<CharacterState, "name" | "stateType"> & Partial<Pick<CharacterState, "description" | "prompt">>;

const ROLE_TYPES = [
  { value: "female_lead", label: "女主角" },
  { value: "male_lead", label: "男主角" },
  { value: "antagonist", label: "反派" },
  { value: "supporting", label: "配角" },
];

const CHARACTER_VIEWS: Array<{ type: CharacterViewType; label: string; shortLabel: string }> = [
  { type: "front", label: "正面", shortLabel: "正" },
  { type: "side", label: "侧面", shortLabel: "侧" },
  { type: "back", label: "背面", shortLabel: "背" },
];

const emptyForm = (): Partial<Character> => ({
  name: "",
  roleType: "supporting",
  gender: "female",
  age: "",
  personality: "",
  costume: "",
  visualHint: "",
});

const emptyImageState = (): ImageState => ({
  front: null,
  side: null,
  back: null,
});

const emptyPendingFiles = (): PendingFiles => ({
  front: null,
  side: null,
  back: null,
});

const emptyStateDraft = (): CharacterStateDraft => ({
  name: "",
  stateType: "costume",
  description: "",
  prompt: "",
});

function getCharacterViewUrl(character: Partial<Character>, viewType: CharacterViewType) {
  if (viewType === "front") {
    return character.frontImageUrl ?? character.imageUrl ?? null;
  }
  if (viewType === "side") {
    return character.sideImageUrl ?? null;
  }
  return character.backImageUrl ?? null;
}

/** AI 生成的角色三视图是单张拼图，存在 imageUrl 上 */
function getCharacterSheetUrl(character: Partial<Character>): string | null {
  return character.imageUrl ?? null;
}

function hasCharacterImage(character: Partial<Character>) {
  if (getCharacterSheetUrl(character)) return true;
  return CHARACTER_VIEWS.every((view) => !!getCharacterViewUrl(character, view.type));
}

export function CharacterGeneration() {
  const navigate = useNavigate();
  const { projectId } = useParams();
  const pid = projectId ?? "";

  const { data: characters = [], isLoading } = useCharacters(pid);
  const extract = useExtractCharacters(pid);
  const saveCharacter = useSaveCharacter(pid);
  const generateImage = useGenerateCharacterImage(pid);
  const uploadImage = useUploadCharacterImage(pid);
  const deleteChar = useDeleteCharacter(pid);
  const saveState = useSaveCharacterState(pid);
  const generateStateImage = useGenerateCharacterStateImage(pid);
  const deleteState = useDeleteCharacterState(pid);

  const [activeTab] = useState<SettingsTab>("characters");
  const [generatingImageId, setGeneratingImageId] = useState<string | null>(null);
  const [generatingStateId, setGeneratingStateId] = useState<string | null>(null);
  const [showModal, setShowModal] = useState(false);
  const [editingChar, setEditingChar] = useState<Partial<Character>>(emptyForm());
  const [imagePreviews, setImagePreviews] = useState<ImageState>(emptyImageState());
  const [pendingFiles, setPendingFiles] = useState<PendingFiles>(emptyPendingFiles());
  const [stateDraft, setStateDraft] = useState<CharacterStateDraft>(emptyStateDraft());
  const [saving, setSaving] = useState(false);
  const [savingState, setSavingState] = useState(false);

  const editingCharacterId = editingChar.id ? String(editingChar.id) : "";
  const { data: characterStates = [] } = useCharacterStates(pid, editingCharacterId);

  const fileInputRefs = useRef<Record<CharacterViewType, HTMLInputElement | null>>({
    front: null,
    side: null,
    back: null,
  });

  const settingsTabs = [
    { id: "characters" as SettingsTab, label: "角色", icon: Users, path: `/project/${projectId}/characters` },
    { id: "scenes" as SettingsTab, label: "场景", icon: MapPin, path: `/project/${projectId}/scenes` },
    { id: "props" as SettingsTab, label: "道具", icon: Box, path: `/project/${projectId}/props` },
  ];

  const roleTypeLabel: Record<string, string> = {
    female_lead: "女主角",
    male_lead: "男主角",
    antagonist: "反派",
    villain: "反派",
    supporting: "配角",
  };

  const generatedCount = characters.filter((character) => hasCharacterImage(character)).length;
  const generatingCount = characters.filter((character) => character.status === "generating").length;

  const statusBadge = (status: string) => {
    if (status === "ready") {
      return <span className="px-2 py-0.5 rounded text-xs bg-green-500/10 text-green-600">三视图已完成</span>;
    }
    if (status === "generating") {
      return (
        <span className="px-2 py-0.5 rounded text-xs bg-blue-500/10 text-blue-600 flex items-center gap-1">
          <Loader2 className="w-3 h-3 animate-spin" />
          生成中
        </span>
      );
    }
    if (status === "failed") {
      return <span className="px-2 py-0.5 rounded text-xs bg-red-500/10 text-red-600">生成失败</span>;
    }
    return <span className="px-2 py-0.5 rounded text-xs bg-yellow-500/10 text-yellow-700">待生成</span>;
  };

  const handleExtract = () => {
    extract.mutate(undefined, {
      onError: (error) => alert(`提取失败: ${(error as Error).message}`),
    });
  };

  const openCreate = () => {
    setEditingChar(emptyForm());
    setImagePreviews(emptyImageState());
    setPendingFiles(emptyPendingFiles());
    setStateDraft(emptyStateDraft());
    setShowModal(true);
  };

  const openEdit = (character: Character) => {
    setEditingChar({ ...character });
    setImagePreviews({
      front: getCharacterViewUrl(character, "front"),
      side: getCharacterViewUrl(character, "side"),
      back: getCharacterViewUrl(character, "back"),
    });
    setPendingFiles(emptyPendingFiles());
    setStateDraft(emptyStateDraft());
    setShowModal(true);
  };

  const handleFileSelect = (viewType: CharacterViewType, e: ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    setPendingFiles((current) => ({ ...current, [viewType]: file }));
    setImagePreviews((current) => ({ ...current, [viewType]: URL.createObjectURL(file) }));
  };

  const clearImage = (viewType: CharacterViewType) => {
    setPendingFiles((current) => ({ ...current, [viewType]: null }));
    setImagePreviews((current) => ({
      ...current,
      [viewType]: editingChar.id ? getCharacterViewUrl(editingChar, viewType) : null,
    }));
    if (fileInputRefs.current[viewType]) {
      fileInputRefs.current[viewType]!.value = "";
    }
  };

  const handleSave = async () => {
    if (!editingChar.name?.trim()) return;

    setSaving(true);
    try {
      const saved = await saveCharacter.mutateAsync({ ...editingChar, status: editingChar.status ?? "draft" });
      for (const view of CHARACTER_VIEWS) {
        const pendingFile = pendingFiles[view.type];
        if (!pendingFile) continue;
        await uploadImage.mutateAsync({ id: String(saved.id), file: pendingFile, viewType: view.type });
      }
      setShowModal(false);
    } catch (error) {
      alert(`保存失败: ${(error as Error).message}`);
    } finally {
      setSaving(false);
    }
  };

  const handleGenerateImage = async (character: Character) => {
    setGeneratingImageId(character.id);
    generateImage.mutate(character.id, {
      onSettled: () => setGeneratingImageId(null),
      onError: (error) => alert(`三视图生成失败: ${(error as Error).message}`),
    });
  };

  const handleSaveState = async () => {
    if (!editingCharacterId || !stateDraft.name.trim()) return;
    setSavingState(true);
    try {
      const saved = await saveState.mutateAsync({
        characterId: editingCharacterId,
        state: {
          ...stateDraft,
          name: stateDraft.name.trim(),
          description: stateDraft.description?.trim() || null,
          prompt: stateDraft.prompt?.trim() || null,
          status: "draft",
        },
      });
      setStateDraft(emptyStateDraft());
      setGeneratingStateId(saved.id);
      generateStateImage.mutate(
        { characterId: editingCharacterId, stateId: saved.id },
        {
          onSettled: () => setGeneratingStateId(null),
          onError: (error) => alert(`状态图生成失败: ${(error as Error).message}`),
        }
      );
    } catch (error) {
      alert(`保存状态失败: ${(error as Error).message}`);
    } finally {
      setSavingState(false);
    }
  };

  const handleGenerateStateImage = (state: CharacterState) => {
    if (!editingCharacterId) return;
    setGeneratingStateId(state.id);
    generateStateImage.mutate(
      { characterId: editingCharacterId, stateId: state.id },
      {
        onSettled: () => setGeneratingStateId(null),
        onError: (error) => alert(`状态图生成失败: ${(error as Error).message}`),
      }
    );
  };

  const handleDeleteState = (state: CharacterState) => {
    if (!editingCharacterId || !confirm(`确定要删除状态「${state.name}」吗？`)) return;
    deleteState.mutate(
      { characterId: editingCharacterId, stateId: state.id },
      { onError: (error) => alert(`删除状态失败: ${(error as Error).message}`) }
    );
  };

  const handleDelete = (character: Character) => {
    if (!confirm(`确定要删除角色「${character.name}」吗？`)) return;
    deleteChar.mutate(character.id, {
      onError: (error) => alert(`删除失败: ${(error as Error).message}`),
    });
  };

  return (
    <div className="h-full overflow-auto bg-background relative">
      <div className="p-6 pb-24">
        <div className="max-w-7xl mx-auto">
          <div className="mb-6">
            <div className="flex items-center gap-3 mb-2">
              <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-[#5b5ff9] to-[#8b5ff9] flex items-center justify-center">
                <Sparkles className="w-4 h-4 text-white" />
              </div>
              <h1 className="text-2xl font-semibold text-foreground">项目设定</h1>
            </div>
            <p className="text-sm text-muted-foreground">管理角色、场景和道具设定。角色形象已升级为标准三视图。</p>
          </div>

          <div className="flex items-center justify-between mb-6">
            <div className="flex items-center gap-2">
              {settingsTabs.map((tab) => {
                const Icon = tab.icon;
                return (
                  <button
                    key={tab.id}
                    onClick={() => navigate(tab.path)}
                    className={`flex items-center gap-2 px-4 py-2 rounded-lg text-sm transition-all ${
                      activeTab === tab.id
                        ? "bg-accent text-accent-foreground font-medium"
                        : "text-muted-foreground hover:text-foreground hover:bg-muted"
                    }`}
                  >
                    <Icon className="w-4 h-4" />
                    {tab.label}
                  </button>
                );
              })}
            </div>

            <div className="flex items-center gap-2">
              <button
                onClick={openCreate}
                className="px-4 py-2 rounded-lg border border-border bg-card text-foreground hover:bg-muted transition-all flex items-center gap-2 text-sm"
              >
                <Plus className="w-4 h-4" />
                手动添加
              </button>
              <button
                onClick={handleExtract}
                disabled={extract.isPending}
                className="px-4 py-2 rounded-lg bg-gradient-to-r from-[#5b5ff9] to-[#8b5ff9] text-white hover:shadow-md transition-all flex items-center gap-2 disabled:opacity-60"
              >
                {extract.isPending ? <Loader2 className="w-4 h-4 animate-spin" /> : <Sparkles className="w-4 h-4" />}
                AI提取角色
              </button>
            </div>
          </div>

          <div className="flex items-center justify-between mb-6 rounded-lg border border-border bg-card p-4">
            <div className="flex items-center gap-6">
              <div className="flex items-center gap-2">
                <span className="text-sm text-muted-foreground">角色总数</span>
                <span className="text-lg font-semibold text-foreground">{characters.length}</span>
              </div>
              <div className="flex items-center gap-2">
                <span className="text-sm text-muted-foreground">三视图完整</span>
                <span className="text-lg font-semibold text-green-600">{generatedCount}</span>
              </div>
              <div className="flex items-center gap-2">
                <span className="text-sm text-muted-foreground">生成中</span>
                <span className="text-lg font-semibold text-blue-600">{generatingCount}</span>
              </div>
            </div>
          </div>

          {!isLoading && characters.length === 0 && (
            <div className="rounded-xl border border-dashed border-border bg-card p-12 text-center">
              <Users className="w-12 h-12 text-muted-foreground mx-auto mb-4" />
              <h3 className="text-lg font-medium text-foreground mb-2">暂无角色</h3>
              <p className="text-sm text-muted-foreground mb-6">
                角色设定页现在支持三视图展示。你可以手动添加角色，或从大纲和分集里自动提取。
              </p>
              <div className="flex items-center justify-center gap-3">
                <button
                  onClick={openCreate}
                  className="px-5 py-2.5 rounded-lg border border-border bg-card text-foreground hover:bg-muted transition-all flex items-center gap-2"
                >
                  <Plus className="w-4 h-4" />
                  手动添加
                </button>
                <button
                  onClick={handleExtract}
                  disabled={extract.isPending}
                  className="px-6 py-2.5 rounded-lg bg-gradient-to-r from-[#5b5ff9] to-[#8b5ff9] text-white hover:shadow-md transition-all flex items-center gap-2 disabled:opacity-60"
                >
                  {extract.isPending ? <Loader2 className="w-4 h-4 animate-spin" /> : <Sparkles className="w-4 h-4" />}
                  AI提取角色
                </button>
              </div>
            </div>
          )}

          {isLoading && (
            <div className="flex items-center justify-center py-16">
              <Loader2 className="w-8 h-8 animate-spin text-muted-foreground" />
            </div>
          )}

          {characters.length > 0 && (
            <div className="grid grid-cols-2 gap-6">
              {characters.map((character) => {
                const mainImage = getCharacterViewUrl(character, "front")
                  ?? getCharacterViewUrl(character, "side")
                  ?? getCharacterViewUrl(character, "back");
                const isGenerating = generatingImageId === character.id || character.status === "generating";

                return (
                  <div key={character.id} className="rounded-xl border border-border bg-card overflow-hidden">
                    <div className="p-5 border-b border-border">
                      <div className="flex items-start justify-between mb-4">
                        <div className="flex items-start gap-3">
                          <div className="w-14 h-14 rounded-full overflow-hidden bg-muted flex items-center justify-center">
                            {mainImage ? (
                              <img src={mainImage} alt={character.name} className="w-full h-full object-cover" />
                            ) : (
                              <ImageIcon className="w-6 h-6 text-muted-foreground" />
                            )}
                          </div>
                          <div>
                            <h3 className="text-lg font-semibold text-foreground mb-1">{character.name}</h3>
                            <div className="flex items-center gap-2 flex-wrap">
                              <span className="text-xs text-muted-foreground">{roleTypeLabel[character.roleType] ?? character.roleType}</span>
                              {statusBadge(character.status)}
                            </div>
                          </div>
                        </div>

                        <div className="flex items-center gap-1">
                          <button
                            onClick={() => openEdit(character)}
                            className="p-2 rounded-lg border border-border bg-card text-foreground hover:bg-muted transition-colors"
                          >
                            <Edit2 className="w-4 h-4" />
                          </button>
                          <button
                            onClick={() => handleDelete(character)}
                            className="p-2 rounded-lg border border-border bg-card text-destructive hover:bg-destructive/10 transition-colors"
                          >
                            <Trash2 className="w-4 h-4" />
                          </button>
                        </div>
                      </div>

                      <div className="space-y-1.5 text-sm">
                        <div className="flex">
                          <span className="text-muted-foreground w-16">性别</span>
                          <span className="text-foreground">{character.gender === "male" ? "男" : character.gender === "female" ? "女" : character.gender}</span>
                        </div>
                        <div className="flex">
                          <span className="text-muted-foreground w-16">年龄</span>
                          <span className="text-foreground">{character.age || "未填写"}</span>
                        </div>
                        <div className="flex">
                          <span className="text-muted-foreground w-16">性格</span>
                          <span className="text-foreground">{character.personality || "未填写"}</span>
                        </div>
                        <div className="flex">
                          <span className="text-muted-foreground w-16">服装</span>
                          <span className="text-foreground line-clamp-1">{character.costume || "未填写"}</span>
                        </div>
                        <div className="flex">
                          <span className="text-muted-foreground w-16">外貌</span>
                          <span className="text-foreground line-clamp-1">{character.visualHint || "未填写"}</span>
                        </div>
                      </div>
                    </div>

                    <div className="p-5 bg-muted/20">
                      <div className="flex items-center justify-between mb-3">
                        <div>
                          <span className="text-xs text-muted-foreground font-medium">角色三视图</span>
                          <p className="text-[11px] text-muted-foreground mt-0.5">大头像 + 正/侧/背全身拼图，用于角色一致性参考。</p>
                        </div>
                        <button
                          onClick={() => handleGenerateImage(character)}
                          disabled={isGenerating}
                          className="px-3 py-1.5 rounded-md border border-border bg-card text-foreground hover:bg-muted transition-colors text-xs flex items-center gap-1.5 disabled:opacity-50"
                        >
                          {isGenerating ? <Loader2 className="w-3 h-3 animate-spin" /> : <RefreshCw className="w-3 h-3" />}
                          {hasCharacterImage(character) ? "重新生成三视图" : "AI生成三视图"}
                        </button>
                      </div>

                      {(() => {
                        const sheetUrl = getCharacterSheetUrl(character);
                        if (sheetUrl) {
                          return (
                            <div className="rounded-lg overflow-hidden bg-white border border-border">
                              <img
                                src={sheetUrl}
                                alt={`${character.name}-角色三视图`}
                                className="w-full h-auto object-contain"
                              />
                            </div>
                          );
                        }
                        return (
                          <div className="grid grid-cols-3 gap-3">
                            {CHARACTER_VIEWS.map((view) => {
                              const imageUrl = getCharacterViewUrl(character, view.type);
                              return (
                                <div key={view.type}>
                                  <div className="text-[11px] text-muted-foreground mb-1 text-center">{view.label}</div>
                                  <div className="aspect-[3/4] rounded-lg overflow-hidden bg-white border border-border">
                                    {imageUrl ? (
                                      <img src={imageUrl} alt={`${character.name}-${view.label}`} className="w-full h-full object-cover" />
                                    ) : (
                                      <div className="w-full h-full flex flex-col items-center justify-center gap-2">
                                        {isGenerating ? (
                                          <>
                                            <Loader2 className="w-6 h-6 text-primary animate-spin" />
                                            <span className="text-xs text-muted-foreground">生成中</span>
                                          </>
                                        ) : (
                                          <>
                                            <ImageIcon className="w-6 h-6 text-muted-foreground" />
                                            <span className="text-xs text-muted-foreground">待补充</span>
                                          </>
                                        )}
                                      </div>
                                    )}
                                  </div>
                                </div>
                              );
                            })}
                          </div>
                        );
                      })()}

                    </div>
                  </div>
                );
              })}
            </div>
          )}
        </div>
      </div>

      <div className="fixed bottom-0 left-0 right-0 border-t border-border bg-card/95 backdrop-blur-sm px-6 py-3 z-10">
        <div className="max-w-7xl mx-auto flex items-center justify-end gap-3">
          <button
            onClick={() => navigate(`/project/${projectId}/scenes`)}
            className="px-6 py-2 rounded-lg bg-gradient-to-r from-[#5b5ff9] to-[#8b5ff9] text-white hover:shadow-md transition-all flex items-center gap-2 text-sm font-medium"
          >
            <span>继续生成场景设定</span>
            <ArrowRight className="w-5 h-5" />
          </button>
        </div>
      </div>

      {showModal && (
        <div className="fixed inset-0 bg-black/40 backdrop-blur-sm flex items-center justify-center z-50 p-6">
          <div className="bg-card rounded-2xl border border-border w-full max-w-4xl max-h-[90vh] flex flex-col">
            <div className="flex items-center justify-between p-6 border-b border-border flex-shrink-0">
              <div>
                <h2 className="text-lg font-semibold text-foreground">{editingChar.id ? "编辑角色" : "手动添加角色"}</h2>
                <p className="text-sm text-muted-foreground mt-1">支持上传正面、侧面、背面三张标准视角图。</p>
              </div>
              <button onClick={() => setShowModal(false)} className="p-2 hover:bg-muted rounded-lg transition-colors">
                <X className="w-5 h-5 text-muted-foreground" />
              </button>
            </div>

            <div className="overflow-auto p-6 space-y-5 flex-1">
              <div>
                <label className="block text-sm font-medium text-foreground mb-3">角色三视图上传（可选）</label>
                <div className="grid grid-cols-3 gap-4">
                  {CHARACTER_VIEWS.map((view) => (
                    <div key={view.type} className="rounded-xl border border-border bg-muted/20 p-3">
                      <div className="flex items-center justify-between mb-2">
                        <span className="text-sm font-medium text-foreground">{view.label}</span>
                        <span className="text-[11px] text-muted-foreground">{view.shortLabel}视图</span>
                      </div>
                      <div
                        className="aspect-[3/4] rounded-lg border-2 border-dashed border-border bg-background flex items-center justify-center cursor-pointer hover:border-primary transition-colors overflow-hidden"
                        onClick={() => fileInputRefs.current[view.type]?.click()}
                      >
                        {imagePreviews[view.type] ? (
                          <img src={imagePreviews[view.type] ?? ""} alt={`${view.label}预览`} className="w-full h-full object-cover" />
                        ) : (
                          <div className="text-center px-4">
                            <Upload className="w-5 h-5 text-muted-foreground mx-auto mb-2" />
                            <span className="text-xs text-muted-foreground">点击上传{view.label}</span>
                          </div>
                        )}
                      </div>
                      <div className="mt-2 flex items-center justify-between text-xs">
                        <span className="text-muted-foreground">建议全身标准视角</span>
                        {imagePreviews[view.type] && (
                          <button onClick={() => clearImage(view.type)} className="text-destructive hover:underline">
                            移除
                          </button>
                        )}
                      </div>
                      <input
                        ref={(node) => {
                          fileInputRefs.current[view.type] = node;
                        }}
                        type="file"
                        accept="image/*"
                        className="hidden"
                        onChange={(e) => handleFileSelect(view.type, e)}
                      />
                    </div>
                  ))}
                </div>
              </div>

              <div>
                <label className="block text-sm font-medium text-foreground mb-1">
                  角色名称
                  <span className="text-destructive ml-1">*</span>
                </label>
                <input
                  type="text"
                  value={editingChar.name ?? ""}
                  onChange={(e) => setEditingChar({ ...editingChar, name: e.target.value })}
                  placeholder="例如：乔沫"
                  className="w-full px-3 py-2 rounded-lg border border-border bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/20"
                />
              </div>

              <div className="grid grid-cols-2 gap-3">
                <div>
                  <label className="block text-sm font-medium text-foreground mb-1">角色类型</label>
                  <select
                    value={editingChar.roleType ?? "supporting"}
                    onChange={(e) => setEditingChar({ ...editingChar, roleType: e.target.value })}
                    className="w-full px-3 py-2 rounded-lg border border-border bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 cursor-pointer"
                  >
                    {ROLE_TYPES.map((role) => (
                      <option key={role.value} value={role.value}>
                        {role.label}
                      </option>
                    ))}
                  </select>
                </div>
                <div>
                  <label className="block text-sm font-medium text-foreground mb-1">性别</label>
                  <select
                    value={editingChar.gender ?? "female"}
                    onChange={(e) => setEditingChar({ ...editingChar, gender: e.target.value })}
                    className="w-full px-3 py-2 rounded-lg border border-border bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-primary/20 cursor-pointer"
                  >
                    <option value="female">女</option>
                    <option value="male">男</option>
                  </select>
                </div>
              </div>

              <div>
                <label className="block text-sm font-medium text-foreground mb-1">年龄</label>
                <input
                  type="text"
                  value={editingChar.age ?? ""}
                  onChange={(e) => setEditingChar({ ...editingChar, age: e.target.value })}
                  placeholder="例如：28岁"
                  className="w-full px-3 py-2 rounded-lg border border-border bg-background text-foreground placeholder-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary/20"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-foreground mb-1">性格描述</label>
                <textarea
                  value={editingChar.personality ?? ""}
                  onChange={(e) => setEditingChar({ ...editingChar, personality: e.target.value })}
                  placeholder="例如：善良坚韧，外柔内刚，遇事很有主见。"
                  rows={2}
                  className="w-full px-3 py-2 rounded-lg border border-border bg-background text-foreground placeholder-muted-foreground resize-none focus:outline-none focus:ring-2 focus:ring-primary/20"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-foreground mb-1">外貌特征</label>
                <textarea
                  value={editingChar.visualHint ?? ""}
                  onChange={(e) => setEditingChar({ ...editingChar, visualHint: e.target.value })}
                  placeholder="例如：黑长直，杏眼，气质清冷，身形修长。"
                  rows={2}
                  className="w-full px-3 py-2 rounded-lg border border-border bg-background text-foreground placeholder-muted-foreground resize-none focus:outline-none focus:ring-2 focus:ring-primary/20"
                />
              </div>

              <div>
                <label className="block text-sm font-medium text-foreground mb-1">服装描述</label>
                <textarea
                  value={editingChar.costume ?? ""}
                  onChange={(e) => setEditingChar({ ...editingChar, costume: e.target.value })}
                  placeholder="例如：浅色风衣搭配衬衫长裤，整体简洁利落。"
                  rows={2}
                  className="w-full px-3 py-2 rounded-lg border border-border bg-background text-foreground placeholder-muted-foreground resize-none focus:outline-none focus:ring-2 focus:ring-primary/20"
                />
              </div>

              <div className="rounded-xl border border-border bg-muted/20 p-4 space-y-4">
                <div className="flex items-center justify-between gap-3">
                  <div>
                    <h3 className="text-sm font-medium text-foreground">角色状态图</h3>
                    <p className="text-xs text-muted-foreground mt-1">基于角色基准图做图生图，适合换装、受伤、妆容、表情等状态。</p>
                  </div>
                  {!editingCharacterId && (
                    <span className="text-xs text-muted-foreground">保存角色后可添加</span>
                  )}
                </div>

                {editingCharacterId && (
                  <>
                    <div className="grid grid-cols-4 gap-3">
                      <div>
                        <label className="block text-xs text-foreground mb-1">状态名</label>
                        <input
                          type="text"
                          value={stateDraft.name}
                          onChange={(e) => setStateDraft({ ...stateDraft, name: e.target.value })}
                          placeholder="例如：黑裙雨夜"
                          className="w-full px-3 py-2 rounded-lg border border-border bg-background text-sm focus:outline-none focus:ring-2 focus:ring-primary/20"
                        />
                      </div>
                      <div>
                        <label className="block text-xs text-foreground mb-1">类型</label>
                        <select
                          value={stateDraft.stateType}
                          onChange={(e) => setStateDraft({ ...stateDraft, stateType: e.target.value })}
                          className="w-full px-3 py-2 rounded-lg border border-border bg-background text-sm focus:outline-none focus:ring-2 focus:ring-primary/20"
                        >
                          <option value="costume">服装</option>
                          <option value="accessory">饰品</option>
                          <option value="expression">表情</option>
                          <option value="injury">伤痕</option>
                          <option value="makeup">妆容</option>
                          <option value="skin">肤色</option>
                          <option value="hair">发型细节</option>
                          <option value="age">年龄状态</option>
                          <option value="other">其他</option>
                        </select>
                      </div>
                      <div className="col-span-2">
                        <label className="block text-xs text-foreground mb-1">状态描述</label>
                        <input
                          type="text"
                          value={stateDraft.description ?? ""}
                          onChange={(e) => setStateDraft({ ...stateDraft, description: e.target.value })}
                          placeholder="例如：同一张脸，换深色长裙，眼神疲惫"
                          className="w-full px-3 py-2 rounded-lg border border-border bg-background text-sm focus:outline-none focus:ring-2 focus:ring-primary/20"
                        />
                      </div>
                      <div className="col-span-4">
                        <label className="block text-xs text-foreground mb-1">图生图提示词</label>
                        <textarea
                          value={stateDraft.prompt ?? ""}
                          onChange={(e) => setStateDraft({ ...stateDraft, prompt: e.target.value })}
                          rows={2}
                          placeholder="只写需要变化的状态，不要重写成另一个角色。"
                          className="w-full px-3 py-2 rounded-lg border border-border bg-background text-sm resize-none focus:outline-none focus:ring-2 focus:ring-primary/20"
                        />
                      </div>
                    </div>

                    <div className="flex justify-end">
                      <button
                        onClick={handleSaveState}
                        disabled={!stateDraft.name.trim() || savingState}
                        className="px-4 py-2 rounded-lg bg-primary text-primary-foreground text-sm flex items-center gap-2 disabled:opacity-50"
                      >
                        {savingState ? <Loader2 className="w-4 h-4 animate-spin" /> : <Sparkles className="w-4 h-4" />}
                        保存并生成状态图
                      </button>
                    </div>

                    {characterStates.length > 0 && (
                      <div className="grid grid-cols-2 gap-3">
                        {characterStates.map((state) => {
                          const isStateGenerating = generatingStateId === state.id || state.status === "generating";
                          return (
                            <div key={state.id} className="rounded-lg border border-border bg-background overflow-hidden">
                              <div className="aspect-video bg-white flex items-center justify-center border-b border-border">
                                {state.imageUrl ? (
                                  <img src={state.imageUrl} alt={state.name} className="w-full h-full object-contain" />
                                ) : isStateGenerating ? (
                                  <Loader2 className="w-6 h-6 text-primary animate-spin" />
                                ) : (
                                  <ImageIcon className="w-6 h-6 text-muted-foreground" />
                                )}
                              </div>
                              <div className="p-3">
                                <div className="flex items-start justify-between gap-2">
                                  <div className="min-w-0">
                                    <p className="text-sm font-medium text-foreground truncate">{state.name}</p>
                                    <p className="text-xs text-muted-foreground truncate">{state.description || state.stateType}</p>
                                  </div>
                                  <button
                                    onClick={() => handleDeleteState(state)}
                                    className="p-1 rounded text-muted-foreground hover:text-destructive hover:bg-destructive/10"
                                  >
                                    <Trash2 className="w-3.5 h-3.5" />
                                  </button>
                                </div>
                                <button
                                  onClick={() => handleGenerateStateImage(state)}
                                  disabled={isStateGenerating}
                                  className="mt-3 w-full px-3 py-1.5 rounded-md border border-border text-xs text-foreground hover:bg-muted disabled:opacity-50 flex items-center justify-center gap-1.5"
                                >
                                  {isStateGenerating ? <Loader2 className="w-3 h-3 animate-spin" /> : <RefreshCw className="w-3 h-3" />}
                                  {state.imageUrl ? "重生成状态图" : "生成状态图"}
                                </button>
                              </div>
                            </div>
                          );
                        })}
                      </div>
                    )}
                  </>
                )}
              </div>
            </div>

            <div className="flex gap-3 p-6 border-t border-border flex-shrink-0">
              <button
                onClick={() => setShowModal(false)}
                className="flex-1 px-4 py-2.5 rounded-lg border border-border bg-card text-foreground hover:bg-muted transition-colors"
              >
                取消
              </button>
              <button
                onClick={handleSave}
                disabled={!editingChar.name?.trim() || saving}
                className="flex-1 px-4 py-2.5 rounded-lg bg-gradient-to-r from-[#5b5ff9] to-[#8b5ff9] text-white hover:shadow-md transition-all flex items-center justify-center gap-2 disabled:opacity-50"
              >
                {saving ? <Loader2 className="w-4 h-4 animate-spin" /> : <Check className="w-4 h-4" />}
                保存
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
