import { useState, useEffect } from "react";
import { useNavigate, Link, useParams } from "react-router-dom";
import ReactMarkdown from "react-markdown";
import { useAuth } from "../contexts/AuthContext";
import {
  createStory,
  getStory,
  updateStory,
  getNPCCharacters,
} from "../services/api";
import { generateAvatarUrl } from "../services/imageGen";
import type {
  Character,
  CharacterAge,
  CharacterGender,
  NPCCharacter,
} from "../types";
import "./CreateStoryPage.css";

const GENRES = [
  "Фэнтези",
  "Магия",
  "Приключения",
  "Романтика",
  "Экшн",
  "Комедия",
  "Драма",
  "Тёмное фэнтези",
  "LitRPG",
  "Хорроры",
  "Sci-Fi",
  "Повседневность",
];

const SETTINGS = [
  "Средневековье",
  "Восточное фэнтези",
  "Стимпанк",
  "Магическая академия",
  "Королевство демонов",
  "Мир мечей и магии",
  "Постапокалипсис",
  "Параллельный мир",
  "Современность",
  "Космос",
  "Подземелья",
  "Королевский двор",
];

const LANGUAGES = [
  { code: "ru", name: "🇷🇺 Русский" },
  { code: "en", name: "🇺🇸 English" },
  { code: "ja", name: "🇯🇵 日本語" },
  { code: "zh", name: "🇨🇳 中文" },
  { code: "ko", name: "🇰🇷 한국어" },
  { code: "es", name: "🇪🇸 Español" },
  { code: "de", name: "🇩🇪 Deutsch" },
  { code: "fr", name: "🇫🇷 Français" },
];

const CHARACTER_ROLES = [
  "Союзник",
  "Злодей",
  "Наставник",
  "Романс",
  "Нейтральный NPC",
  "Антагонист",
  "Комик",
];

const CHARACTER_AGES: { value: CharacterAge; label: string }[] = [
  { value: "child", label: "Ребёнок" },
  { value: "teenager", label: "Подросток" },
  { value: "adult", label: "Взрослый" },
  { value: "elderly", label: "Пожилой" },
];

const CHARACTER_GENDERS: { value: CharacterGender; label: string }[] = [
  { value: "female", label: "Женский" },
  { value: "male", label: "Мужской" },
];

export default function CreateStoryPage() {
  const { id } = useParams<{ id: string }>();
  const isEditMode = Boolean(id);
  const navigate = useNavigate();
  const { isAuthenticated } = useAuth();
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isLoading, setIsLoading] = useState(isEditMode);
  const [generatingAvatarIndex, setGeneratingAvatarIndex] = useState<
    number | null
  >(null);
  const [savedNPCs, setSavedNPCs] = useState<NPCCharacter[]>([]);
  const [showNPCSelector, setShowNPCSelector] = useState(false);

  const [form, setForm] = useState({
    title: "",
    description: "",
    language: "ru",
    genres: [] as string[],
    customGenre: "",
    settings: [] as string[],
    customSetting: "",
    summary: "",
    plot: "",
    firstMessage: "",
    isNsfw: false,
    temperature: 0.9, // Креативность ИИ
    narrativeRules: "", // Правила повествования для ИИ
    // NPC персонажи мира
    characters: [
      {
        name: "",
        description: "",
        role: "Союзник",
        age: "adult" as CharacterAge,
        gender: "female" as CharacterGender,
      },
    ] as Character[],
    // Мир
    worldName: "",
    worldDescription: "",
    worldRules: [""],
  });

  useEffect(() => {
    if (!isAuthenticated) {
      navigate("/");
    }
  }, [isAuthenticated, navigate]);

  // Загрузка сохранённых NPC
  useEffect(() => {
    const loadSavedNPCs = async () => {
      if (isAuthenticated) {
        const npcs = await getNPCCharacters();
        setSavedNPCs(npcs);
      }
    };
    loadSavedNPCs();
  }, [isAuthenticated]);

  // Загрузка истории для редактирования
  useEffect(() => {
    const loadStory = async () => {
      if (!id || !isAuthenticated) return;

      setIsLoading(true);
      const story = await getStory(id);

      if (story) {
        setForm({
          title: story.title,
          description: story.description || "",
          language: story.language || "ru",
          genres: story.genre || [],
          customGenre: "",
          settings: Array.isArray(story.setting)
            ? story.setting
            : [story.setting],
          customSetting: "",
          summary: story.summary || "",
          plot: story.plot || "",
          firstMessage: story.firstMessage || "",
          isNsfw: story.isNsfw || false,
          temperature: story.temperature || 0.9,
          narrativeRules: story.narrativeRules || "",
          characters:
            story.characters?.length > 0
              ? story.characters
              : [
                  {
                    name: "",
                    description: "",
                    role: "Союзник",
                    age: "adult" as CharacterAge,
                    gender: "female" as CharacterGender,
                  },
                ],
          worldName: story.world?.name || "",
          worldDescription: story.world?.description || "",
          worldRules: story.world?.rules?.length > 0 ? story.world.rules : [""],
        });
      } else {
        navigate("/");
      }

      setIsLoading(false);
    };

    loadStory();
  }, [id, isAuthenticated, navigate]);

  // Жанры
  const handleGenreToggle = (genre: string) => {
    setForm((prev) => ({
      ...prev,
      genres: prev.genres.includes(genre)
        ? prev.genres.filter((g) => g !== genre)
        : [...prev.genres, genre],
    }));
  };

  const removeGenre = (genre: string) => {
    setForm((prev) => ({
      ...prev,
      genres: prev.genres.filter((g) => g !== genre),
    }));
  };

  const addCustomGenre = () => {
    if (
      form.customGenre.trim() &&
      !form.genres.includes(form.customGenre.trim())
    ) {
      setForm((prev) => ({
        ...prev,
        genres: [...prev.genres, prev.customGenre.trim()],
        customGenre: "",
      }));
    }
  };

  const handleCustomGenreKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Enter") {
      e.preventDefault();
      addCustomGenre();
    }
  };

  // Сеттинги (теги как жанры)
  const handleSettingToggle = (setting: string) => {
    setForm((prev) => ({
      ...prev,
      settings: prev.settings.includes(setting)
        ? prev.settings.filter((s) => s !== setting)
        : [...prev.settings, setting],
    }));
  };

  const removeSetting = (setting: string) => {
    setForm((prev) => ({
      ...prev,
      settings: prev.settings.filter((s) => s !== setting),
    }));
  };

  const addCustomSetting = () => {
    if (
      form.customSetting.trim() &&
      !form.settings.includes(form.customSetting.trim())
    ) {
      setForm((prev) => ({
        ...prev,
        settings: [...prev.settings, prev.customSetting.trim()],
        customSetting: "",
      }));
    }
  };

  const handleCustomSettingKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === "Enter") {
      e.preventDefault();
      addCustomSetting();
    }
  };

  // NPC Персонажи
  const handleCharacterChange = (
    index: number,
    field: keyof Character,
    value: string,
  ) => {
    const newCharacters = [...form.characters];
    newCharacters[index] = { ...newCharacters[index], [field]: value };
    setForm((prev) => ({ ...prev, characters: newCharacters }));
  };

  const addCharacter = () => {
    setForm((prev) => ({
      ...prev,
      characters: [
        ...prev.characters,
        {
          name: "",
          description: "",
          role: "Союзник",
          age: "adult" as CharacterAge,
          gender: "female" as CharacterGender,
        },
      ],
    }));
  };

  const selectSavedNPC = (npc: NPCCharacter) => {
    setForm((prev) => ({
      ...prev,
      characters: [
        ...prev.characters,
        {
          name: npc.name,
          description: npc.description,
          role: npc.role,
          age: npc.age,
          gender: npc.gender || "female",
          avatarUrl: npc.avatarUrl,
        },
      ],
    }));
    setShowNPCSelector(false);
  };

  const removeCharacter = (index: number) => {
    setForm((prev) => ({
      ...prev,
      characters: prev.characters.filter((_, i) => i !== index),
    }));
  };

  const handleGenerateAvatar = async (index: number) => {
    const char = form.characters[index];
    if (!char.name && !char.description) {
      alert("Заполните имя или описание персонажа для генерации аватара");
      return;
    }

    setGeneratingAvatarIndex(index);
    try {
      const avatarUrl = await generateAvatarUrl({
        description: char.description || char.role,
        name: char.name,
        age: char.age,
        gender: char.gender,
      });

      const newCharacters = [...form.characters];
      newCharacters[index] = { ...newCharacters[index], avatarUrl };
      setForm((prev) => ({ ...prev, characters: newCharacters }));
    } catch (error) {
      console.error("Ошибка генерации аватара:", error);
      alert("Ошибка при генерации аватара");
    } finally {
      setGeneratingAvatarIndex(null);
    }
  };

  // Правила мира
  const handleRuleChange = (index: number, value: string) => {
    const newRules = [...form.worldRules];
    newRules[index] = value;
    setForm((prev) => ({ ...prev, worldRules: newRules }));
  };

  const addRule = () => {
    setForm((prev) => ({ ...prev, worldRules: [...prev.worldRules, ""] }));
  };

  const removeRule = (index: number) => {
    setForm((prev) => ({
      ...prev,
      worldRules: prev.worldRules.filter((_, i) => i !== index),
    }));
  };

  // Подсчёт слов
  const countWords = (text: string) => {
    return text
      .trim()
      .split(/\s+/)
      .filter((w) => w.length > 0).length;
  };

  const summaryWordCount = countWords(form.summary);

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsSubmitting(true);

    try {
      const allGenres = [...form.genres];
      if (form.customGenre.trim()) {
        allGenres.push(form.customGenre.trim());
      }

      const allSettings = [...form.settings];
      if (form.customSetting.trim()) {
        allSettings.push(form.customSetting.trim());
      }

      const storyData = {
        title: form.title,
        description: form.description || `Исекай история: ${form.title}`,
        coverImage: "",
        language:
          LANGUAGES.find((l) => l.code === form.language)?.name.split(" ")[1] ||
          "Русский",
        genre: allGenres,
        setting: allSettings,
        summary: form.summary,
        plot: form.plot,
        firstMessage: form.firstMessage,
        characters: form.characters.filter((c) => c.name.trim()),
        isNsfw: form.isNsfw,
        temperature: form.temperature,
        narrativeRules: form.narrativeRules.trim() || undefined,
        world: {
          name: form.worldName,
          description: form.worldDescription,
          rules: form.worldRules.filter((r) => r.trim()),
        },
      };

      if (isEditMode && id) {
        const success = await updateStory(id, storyData);
        if (success) {
          navigate(`/story/${id}`);
        }
      } else {
        const story = await createStory(storyData);
        if (story) {
          navigate(`/story/${story.id}`);
        }
      }
    } catch (error) {
      console.error("Error saving story:", error);
    } finally {
      setIsSubmitting(false);
    }
  };

  if (isLoading) {
    return (
      <div className="create-story-page">
        <div className="loading-state">
          <p>Загрузка...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="create-story-page">
      <Link to={isEditMode ? `/story/${id}` : "/"} className="back-link">
        ← {isEditMode ? "Назад к истории" : "Назад к историям"}
      </Link>

      <header className="create-header">
        <h1>
          {isEditMode ? "✏️ Редактировать историю" : "✨ Создать новую историю"}
        </h1>
        <p>
          {isEditMode
            ? "Измени свою исекай историю"
            : "Настрой свой уникальный исекай мир"}
        </p>
      </header>

      <form onSubmit={handleSubmit} className="create-form">
        {/* Основная информация */}
        <section className="form-section">
          <h2>📖 Основная информация</h2>

          <div className="form-group">
            <label htmlFor="title">Название истории *</label>
            <p className="field-hint">
              Только для отображения. Не используется ИИ.
            </p>
            <input
              type="text"
              id="title"
              value={form.title}
              onChange={(e) =>
                setForm((prev) => ({ ...prev, title: e.target.value }))
              }
              placeholder="Например: Перерождение в мире магии"
              required
            />
          </div>

          <div className="form-group">
            <label htmlFor="language">
              Язык истории * <span className="ai-tag">🤖 ИИ</span>
            </label>
            <p className="field-hint">ИИ будет отвечать на выбранном языке.</p>
            <div className="language-grid">
              {LANGUAGES.map((lang) => (
                <button
                  key={lang.code}
                  type="button"
                  className={`language-btn ${form.language === lang.code ? "active" : ""}`}
                  onClick={() =>
                    setForm((prev) => ({ ...prev, language: lang.code }))
                  }
                >
                  {lang.name}
                </button>
              ))}
            </div>
          </div>

          <div className="form-group">
            <label>
              Краткое содержание *{" "}
              <span
                className={`word-count ${summaryWordCount > 20 ? "over" : ""}`}
              >
                ({summaryWordCount}/20 слов)
              </span>
            </label>
            <p className="field-hint">
              Краткое описание для привлечения внимания. Не используется ИИ.
            </p>
            <textarea
              value={form.summary}
              onChange={(e) =>
                setForm((prev) => ({ ...prev, summary: e.target.value }))
              }
              placeholder="Захватывающее описание в 1-2 предложениях..."
              rows={2}
              required
            />
          </div>

          <div className="form-group">
            <div className="nsfw-toggle">
              <label className="toggle-switch">
                <input
                  type="checkbox"
                  checked={form.isNsfw}
                  onChange={(e) =>
                    setForm((prev) => ({ ...prev, isNsfw: e.target.checked }))
                  }
                />
                <span className="toggle-slider"></span>
              </label>
              <div className="nsfw-info">
                <span className={`nsfw-label ${form.isNsfw ? "active" : ""}`}>
                  🔞 NSFW контент <span className="ai-tag">🤖 ИИ</span>
                </span>
                <span className="nsfw-hint">
                  Снимает ограничения ИИ на контент 18+
                </span>
              </div>
            </div>
          </div>

          <div className="form-group">
            <label htmlFor="temperature">
              🎲 Креативность ИИ <span className="ai-tag">🤖 ИИ</span>
            </label>
            <p className="field-hint">
              Управляет креативностью ответов ИИ. Низкая = сосредоточенный,
              Высокая = креативный
            </p>
            <div className="temperature-selector">
              {[
                { value: 0.9, label: "⚖️ Сбалансированный", desc: "0.9" },
                { value: 0.95, label: "✨ Живой", desc: "0.95" },
                { value: 1.05, label: "🎨 Креативный", desc: "1.05" },
              ].map((opt) => (
                <button
                  key={opt.value}
                  type="button"
                  className={`temp-btn ${form.temperature === opt.value ? "active" : ""}`}
                  onClick={() =>
                    setForm((prev) => ({ ...prev, temperature: opt.value }))
                  }
                >
                  <span className="temp-label">{opt.label}</span>
                  <span className="temp-value">{opt.desc}</span>
                </button>
              ))}
            </div>
          </div>
        </section>

        {/* Жанры */}
        <section className="form-section">
          <h2>
            🎭 Жанры <span className="ai-tag">🤖 ИИ</span>
          </h2>
          <p className="section-hint">
            Влияет на стиль и атмосферу генерации ИИ.
          </p>

          {form.genres.length > 0 && (
            <div className="selected-tags">
              {form.genres.map((genre) => (
                <span key={genre} className="selected-tag">
                  {genre}
                  <button
                    type="button"
                    className="remove-tag"
                    onClick={() => removeGenre(genre)}
                  >
                    ×
                  </button>
                </span>
              ))}
            </div>
          )}

          <div className="tags-grid">
            {GENRES.map((genre) => (
              <button
                key={genre}
                type="button"
                className={`tag-btn ${form.genres.includes(genre) ? "active" : ""}`}
                onClick={() => handleGenreToggle(genre)}
              >
                {genre}
              </button>
            ))}
          </div>

          <div className="custom-tag-input">
            <input
              type="text"
              value={form.customGenre}
              onChange={(e) =>
                setForm((prev) => ({ ...prev, customGenre: e.target.value }))
              }
              onKeyDown={handleCustomGenreKeyDown}
              placeholder="Свой жанр..."
            />
            <button
              type="button"
              onClick={addCustomGenre}
              disabled={!form.customGenre.trim()}
            >
              +
            </button>
          </div>
        </section>

        {/* Сеттинги */}
        <section className="form-section">
          <h2>
            🏰 Сеттинг <span className="ai-tag">🤖 ИИ</span>
          </h2>
          <p className="section-hint">Определяет мир и эпоху для ИИ.</p>

          {form.settings.length > 0 && (
            <div className="selected-tags">
              {form.settings.map((setting) => (
                <span key={setting} className="selected-tag setting-tag">
                  {setting}
                  <button
                    type="button"
                    className="remove-tag"
                    onClick={() => removeSetting(setting)}
                  >
                    ×
                  </button>
                </span>
              ))}
            </div>
          )}

          <div className="tags-grid">
            {SETTINGS.map((setting) => (
              <button
                key={setting}
                type="button"
                className={`tag-btn setting ${form.settings.includes(setting) ? "active" : ""}`}
                onClick={() => handleSettingToggle(setting)}
              >
                {setting}
              </button>
            ))}
          </div>

          <div className="custom-tag-input">
            <input
              type="text"
              value={form.customSetting}
              onChange={(e) =>
                setForm((prev) => ({ ...prev, customSetting: e.target.value }))
              }
              onKeyDown={handleCustomSettingKeyDown}
              placeholder="Свой сеттинг..."
            />
            <button
              type="button"
              onClick={addCustomSetting}
              disabled={!form.customSetting.trim()}
            >
              +
            </button>
          </div>
        </section>

        {/* Сюжет */}
        <section className="form-section">
          <h2>
            📜 Сюжет <span className="ai-tag">🤖 ИИ</span>
          </h2>

          <div className="form-group">
            <label htmlFor="plot">Полный сюжет *</label>
            <p className="field-hint">
              Основа для ИИ — подробное описание сюжета и ключевых событий.
              Поддерживается Markdown.
            </p>
            <textarea
              id="plot"
              value={form.plot}
              onChange={(e) =>
                setForm((prev) => ({ ...prev, plot: e.target.value }))
              }
              placeholder={`# Завязка
Главный герой попадает в новый мир...

# Развитие
Он встречает союзников и врагов...

# Ключевые события
- Первая встреча с антагонистом
- Получение уникальной способности
- ...`}
              rows={12}
              className="markdown-input"
              required
            />
          </div>
        </section>

        {/* Первое сообщение */}
        <section className="form-section">
          <h2>
            💬 Первое сообщение <span className="ai-tag">🤖 ИИ</span>
          </h2>

          <div className="form-group">
            <label htmlFor="firstMessage">Начало истории</label>
            <p className="field-hint">
              Первое сообщение, которое увидит игрок. Если пусто — ИИ
              сгенерирует автоматически.
            </p>
            <textarea
              id="firstMessage"
              value={form.firstMessage}
              onChange={(e) =>
                setForm((prev) => ({ ...prev, firstMessage: e.target.value }))
              }
              placeholder="Ты открываешь глаза и видишь перед собой незнакомый потолок..."
              rows={6}
            />
          </div>
        </section>

        {/* Правила повествования */}
        <section className="form-section">
          <h2>
            📝 Правила повествования <span className="ai-tag">🤖 ИИ</span>
          </h2>

          <div className="form-group">
            <label htmlFor="narrativeRules">Инструкции для ИИ</label>
            <p className="field-hint">
              Кастомные правила поведения ИИ. Если пусто — используются
              стандартные правила. Поддерживается Markdown.
            </p>
            <textarea
              id="narrativeRules"
              value={form.narrativeRules}
              onChange={(e) =>
                setForm((prev) => ({ ...prev, narrativeRules: e.target.value }))
              }
              placeholder={`Пример:

Ты — РассказчикGPT, ведущий интерактивную исекай-историю.

ПРАВИЛА:
— Я сам пишу свои действия и реплики
— Ты описываешь мир, реакции персонажей и последствия
— НИКОГДА не принимай решений за меня
— НИКОГДА не задавай мне вопросы
— НИКОГДА не предлагай варианты действий

ФОРМАТ ДИАЛОГОВ:
Все реплики персонажей оформляй **ЖИРНЫМ ШРИФТОМ**.
Описание действий — обычным текстом.`}
              rows={14}
              className="markdown-input"
            />
            {form.narrativeRules.trim() && (
              <div className="markdown-preview">
                <div className="preview-header">👁️ Превью</div>
                <div className="preview-content">
                  <ReactMarkdown>{form.narrativeRules}</ReactMarkdown>
                </div>
              </div>
            )}
          </div>
        </section>

        {/* Мир */}
        <section className="form-section">
          <h2>
            🌍 Мир <span className="ai-tag">🤖 ИИ</span>
          </h2>
          <p className="section-hint">
            Весь раздел используется ИИ для построения контекста мира.
          </p>

          <div className="form-group">
            <label htmlFor="worldName">Название мира *</label>
            <input
              type="text"
              id="worldName"
              value={form.worldName}
              onChange={(e) =>
                setForm((prev) => ({ ...prev, worldName: e.target.value }))
              }
              placeholder="Например: Эльдория"
              required
            />
          </div>

          <div className="form-group">
            <label htmlFor="worldDescription">Описание мира *</label>
            <textarea
              id="worldDescription"
              value={form.worldDescription}
              onChange={(e) =>
                setForm((prev) => ({
                  ...prev,
                  worldDescription: e.target.value,
                }))
              }
              placeholder="Опишите мир: его историю, географию, магическую систему..."
              rows={4}
              required
            />
          </div>

          <div className="form-group">
            <label>Правила мира</label>
            <p className="field-hint">
              Особые законы и ограничения, действующие в этом мире.
            </p>
            {form.worldRules.map((rule, index) => (
              <div key={index} className="array-input">
                <input
                  type="text"
                  value={rule}
                  onChange={(e) => handleRuleChange(index, e.target.value)}
                  placeholder={`Правило ${index + 1}`}
                />
                {form.worldRules.length > 1 && (
                  <button
                    type="button"
                    onClick={() => removeRule(index)}
                    className="remove-btn"
                  >
                    ×
                  </button>
                )}
              </div>
            ))}
            <button type="button" onClick={addRule} className="add-btn">
              + Добавить правило
            </button>
          </div>
        </section>

        {/* NPC Персонажи */}
        <section className="form-section">
          <h2>
            👥 NPC Персонажи мира <span className="ai-tag">🤖 ИИ</span>
          </h2>
          <p className="section-hint">
            Персонажи, которых ИИ будет использовать в истории.
          </p>

          {form.characters.map((char, index) => (
            <div key={index} className="character-card">
              <div className="character-header">
                <span>Персонаж {index + 1}</span>
                {form.characters.length > 1 && (
                  <button
                    type="button"
                    onClick={() => removeCharacter(index)}
                    className="remove-btn"
                  >
                    ×
                  </button>
                )}
              </div>

              <div className="character-content">
                {/* Avatar section */}
                <div className="character-avatar-section">
                  {char.avatarUrl ? (
                    <img
                      src={char.avatarUrl}
                      alt={char.name || "Персонаж"}
                      className="character-avatar-preview"
                    />
                  ) : (
                    <div className="character-avatar-placeholder">👤</div>
                  )}
                  <button
                    type="button"
                    onClick={() => handleGenerateAvatar(index)}
                    className="btn-generate-avatar"
                    disabled={generatingAvatarIndex === index}
                  >
                    {generatingAvatarIndex === index ? "⏳" : "🎨"}
                  </button>
                </div>

                {/* Fields section */}
                <div className="character-fields">
                  <input
                    type="text"
                    value={char.name}
                    onChange={(e) =>
                      handleCharacterChange(index, "name", e.target.value)
                    }
                    placeholder="Имя"
                  />
                  <div className="character-row">
                    <select
                      value={char.role}
                      onChange={(e) =>
                        handleCharacterChange(index, "role", e.target.value)
                      }
                    >
                      {CHARACTER_ROLES.map((role) => (
                        <option key={role} value={role}>
                          {role}
                        </option>
                      ))}
                    </select>
                    <select
                      value={char.age || "adult"}
                      onChange={(e) =>
                        handleCharacterChange(index, "age", e.target.value)
                      }
                    >
                      {CHARACTER_AGES.map((age) => (
                        <option key={age.value} value={age.value}>
                          {age.label}
                        </option>
                      ))}
                    </select>
                    <select
                      value={char.gender || "female"}
                      onChange={(e) =>
                        handleCharacterChange(index, "gender", e.target.value)
                      }
                    >
                      {CHARACTER_GENDERS.map((g) => (
                        <option key={g.value} value={g.value}>
                          {g.label}
                        </option>
                      ))}
                    </select>
                  </div>
                  <textarea
                    value={char.description}
                    onChange={(e) =>
                      handleCharacterChange(
                        index,
                        "description",
                        e.target.value,
                      )
                    }
                    placeholder="Описание персонажа..."
                    rows={2}
                  />
                </div>
              </div>
            </div>
          ))}

          <div className="character-buttons">
            <button type="button" onClick={addCharacter} className="add-btn">
              + Добавить персонажа
            </button>
            {savedNPCs.length > 0 && (
              <button
                type="button"
                onClick={() => setShowNPCSelector(true)}
                className="add-btn secondary"
              >
                📚 Выбрать из библиотеки ({savedNPCs.length})
              </button>
            )}
          </div>

          {/* NPC Selector Modal */}
          {showNPCSelector && (
            <div
              className="npc-selector-overlay"
              onClick={() => setShowNPCSelector(false)}
            >
              <div
                className="npc-selector-modal"
                onClick={(e) => e.stopPropagation()}
              >
                <h3>Выберите NPC из библиотеки</h3>
                <div className="npc-selector-grid">
                  {savedNPCs.map((npc) => (
                    <div
                      key={npc.id}
                      className="npc-selector-item"
                      onClick={() => selectSavedNPC(npc)}
                    >
                      {npc.avatarUrl ? (
                        <img src={npc.avatarUrl} alt={npc.name} />
                      ) : (
                        <div className="npc-placeholder">👤</div>
                      )}
                      <div className="npc-selector-info">
                        <strong>{npc.name}</strong>
                        <span>{npc.role}</span>
                      </div>
                    </div>
                  ))}
                </div>
                <button
                  type="button"
                  className="cancel-btn"
                  onClick={() => setShowNPCSelector(false)}
                >
                  Закрыть
                </button>
              </div>
            </div>
          )}
        </section>

        {/* Submit */}
        <div className="form-actions">
          <Link to={isEditMode ? `/story/${id}` : "/"} className="cancel-btn">
            Отмена
          </Link>
          <button type="submit" className="submit-btn" disabled={isSubmitting}>
            {isSubmitting
              ? isEditMode
                ? "Сохранение..."
                : "Создание..."
              : isEditMode
                ? "💾 Сохранить изменения"
                : "✨ Создать историю"}
          </button>
        </div>
      </form>
    </div>
  );
}