/* ============================================================
   studio-image.jsx — Генерация изображений
   ============================================================ */

const { useState, useRef, useEffect } = React;

const BANANA_MODEL_IDS = ['gemini-2-5-flash', 'gemini-3-1-flash'];

/* Стоимость генерации (копия lib/image/models.ts → getModelCost) */
function getImageModelCost(m, resolution, quality) {
  if (!m) return 1;
  if (m.qualityOptions && quality) {
    const o = m.qualityOptions.find(q => q.id === quality);
    if (o) return o.credit;
  }
  if (m.resolutionOptions && resolution) {
    const o = m.resolutionOptions.find(r => r.id === resolution);
    if (o) return o.credit;
  }
  return m.credit;
}

/* Нормализация fallback-моделей из data.jsx (если API недоступен) */
function normalizeFallbackModel(m) {
  const base = parseInt(m.price) || 2;
  const toOpts = arr => arr ? arr.map(x => ({ id: x, label: x, credit: base })) : null;
  return {
    id: m.id,
    emoji: m.emoji,
    name: m.name,
    note: m.note,
    tier: m.tier,
    credit: base,
    resolutionOptions: toOpts(m.resolutionOptions),
    qualityOptions: toOpts(m.qualityOptions),
    supportedRatios: null,
  };
}

/* Слияние API-моделей с метаданными data.jsx (emoji/note/tier) */
function mergeImageModels(apiModels, bananaCost, bananaCost2) {
  if (!apiModels || !apiModels.length) {
    return IMAGE_MODELS.map(normalizeFallbackModel);
  }
  return apiModels.map(am => {
    const d = IMAGE_MODELS.find(x => x.id === am.id) || {};
    return {
      id: am.id,
      emoji: d.emoji || am.badge || '🎨',
      name: d.name || am.title || am.id,
      note: d.note || am.subtitle || '',
      tier: d.tier || 'pro',
      credit: am.credit,
      resolutionOptions: am.resolutionOptions || null,
      qualityOptions: am.qualityOptions || null,
      supportedRatios: am.supportedRatios || null,
    };
  });
}

function ImagePage() {
  const { API_BASE, user, updateUser } = useAuth();
  const toast = useToast();

  const [model, setModel] = useState('gemini-2-5-flash');
  const [ratio, setRatio] = useState('auto');
  const [resolution, setResolution] = useState('1K');
  const [quality, setQuality] = useState('medium');
  const [prompt, setPrompt] = useState('');

  /* Динамические модели и цены из API (как в Mini App) */
  const [models, setModels] = useState(() => IMAGE_MODELS.map(normalizeFallbackModel));
  const [bananaCost, setBananaCost] = useState(2);
  const [bananaCost2, setBananaCost2] = useState(2);

  useEffect(() => {
    fetch(`${API_BASE}/api/tg/models`, { credentials: 'include' })
      .then(r => r.ok ? r.json() : null)
      .then(data => {
        if (!data) return;
        setModels(mergeImageModels(data.models, data.bananaCost, data.bananaCost2));
        if (data.bananaCost != null) setBananaCost(data.bananaCost);
        if (data.bananaCost2 != null) setBananaCost2(data.bananaCost2);
      })
      .catch(() => {});
  }, []);

  /* Промпт шаблона хранится СКРЫТО (не показываем пользователю) */
  const [templatePrompt, setTemplatePrompt] = useState('');
  const [templateTitle, setTemplateTitle] = useState('');

  /* Подхватываем шаблон (Тренды → студия): промпт в скрытое состояние, не в поле */
  useEffect(() => {
    if (typeof sessionStorage === 'undefined') return;
    const tplPrompt = sessionStorage.getItem('tpl_prompt');
    const tplModel  = sessionStorage.getItem('tpl_model');
    const tplTitle  = sessionStorage.getItem('tpl_title');
    if (tplPrompt) {
      setTemplatePrompt(tplPrompt);
      setTemplateTitle(tplTitle || 'Шаблон');
      sessionStorage.removeItem('tpl_prompt');
    }
    if (tplModel && models.find(m => m.id === tplModel)) {
      setModel(tplModel);
      sessionStorage.removeItem('tpl_model');
    }
    sessionStorage.removeItem('tpl_title');
  }, [models]);
  const [file, setFile] = useState(null);
  const [loading, setLoading] = useState(false);
  const [enhancing, setEnhancing] = useState(false);
  const [result, setResult] = useState(null);

  const selectedModel = models.find(m => m.id === model) || models[0];

  /* Цена в 💎 + суффикс 🍌 для banana-моделей */
  function modelPriceLabel(m, res, qual) {
    const cost = getImageModelCost(m, res, qual);
    const isBanana = BANANA_MODEL_IDS.includes(m.id);
    const banana = m.id === 'gemini-3-1-flash' ? bananaCost2 : bananaCost;
    return `${cost} 💎${isBanana ? ` / ${banana} 🍌` : ''}`;
  }

  /* Список доступных соотношений сторон для выбранной модели */
  const ratios = (selectedModel?.supportedRatios && selectedModel.supportedRatios.length)
    ? selectedModel.supportedRatios
    : ['auto', '1:1', '16:9', '9:16', '4:3', '3:4'];

  /* Смена модели: сброс параметров + валидация ratio */
  function selectModel(id) {
    setModel(id);
    setResolution('1K');
    setQuality('medium');
    const m = models.find(x => x.id === id);
    if (m?.supportedRatios && m.supportedRatios.length && !m.supportedRatios.includes(ratio)) {
      setRatio(m.supportedRatios.includes('auto') ? 'auto' : m.supportedRatios[0]);
    }
  }

  async function enhance() {
    if (!prompt.trim()) return;
    setEnhancing(true);
    try {
      const r = await fetch(`${API_BASE}/api/tg/enhance-prompt`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ prompt, type: 'image' }),
        credentials: 'include',
      });
      const data = await r.json();
      if (data.enhanced) { setPrompt(data.enhanced); toast('Промпт улучшен ✨', 'ok'); }
    } catch { toast('Ошибка улучшения', 'warn'); }
    finally { setEnhancing(false); }
  }

  async function generate() {
    const effectivePrompt = templatePrompt || prompt.trim();
    if (!effectivePrompt) { toast('Введи промпт', 'warn'); return; }
    setLoading(true);
    setResult(null);
    try {
      const form = new FormData();
      form.append('prompt', effectivePrompt);
      form.append('model', model);
      form.append('aspectRatio', ratio);
      if (resolution && selectedModel?.resolutionOptions) form.append('resolution', resolution);
      if (quality && selectedModel?.qualityOptions) form.append('quality', quality);
      if (file) form.append('image', file);

      const r = await fetch(`${API_BASE}/api/edit-image`, {
        method: 'POST',
        body: form,
        credentials: 'include',
      });
      const data = await r.json();
      if (!r.ok) { toast(data.error || 'Ошибка генерации', 'warn'); return; }
      setResult(data);
      if (data.newBalance != null) updateUser({ diamonds: data.newBalance });
      toast('Изображение готово!', 'ok');
    } catch { toast('Ошибка сети', 'warn'); }
    finally { setLoading(false); }
  }

  function download() {
    if (!result?.imageDataUrl && !result?.imageUrl) return;
    const url = result.imageDataUrl || result.imageUrl;
    const a = document.createElement('a');
    a.href = url;
    a.download = `ai-image-${model}-${Date.now()}.jpg`;
    a.click();
  }

  return (
    <div>
      <div className="page-head">
        <div className="page-head-text">
          <h1 className="page-title h-display">🎨 Изображения</h1>
          <p className="page-sub muted">Создай или отредактируй фото с помощью AI</p>
        </div>
      </div>

      <div className="gen-layout">
        {/* ─── Настройки ─── */}
        <div className="gen-settings">

          {/* Выбор модели */}
          <div className="field-block">
            <div className="block-label">Модель</div>
            <div className="model-picker">
              {models.map(m => {
                const isSel = model === m.id;
                return (
                  <button
                    key={m.id}
                    className={`mp-btn${isSel ? ' on' : ''}`}
                    onClick={() => selectModel(m.id)}
                  >
                    <span className="mp-emoji">{m.emoji}</span>
                    <div className="mp-info">
                      <span className="mp-name">{m.name}</span>
                      <span className="mp-note muted">{m.note}</span>
                    </div>
                    <div className="mp-meta">
                      <span className="mp-price">{modelPriceLabel(m, isSel ? resolution : '1K', isSel ? quality : 'medium')}</span>
                      <TierBadge tier={m.tier} />
                    </div>
                  </button>
                );
              })}
            </div>
          </div>

          {/* Разрешение */}
          {selectedModel?.resolutionOptions && (
            <div className="field-block">
              <div className="block-label">Разрешение</div>
              <Seg
                items={selectedModel.resolutionOptions.map(r => ({ value: r.id, label: `${r.label || r.id} · ${r.credit}💎` }))}
                value={resolution}
                onChange={setResolution}
              />
            </div>
          )}

          {/* Качество (GPT Image) */}
          {selectedModel?.qualityOptions && (
            <div className="field-block">
              <div className="block-label">Качество</div>
              <Seg
                items={selectedModel.qualityOptions.map(q => ({ value: q.id, label: `${q.id === 'medium' ? 'Стандарт' : 'Максимум'} · ${q.credit}💎` }))}
                value={quality}
                onChange={setQuality}
              />
            </div>
          )}

          {/* Соотношение сторон */}
          <div className="field-block">
            <div className="block-label">Соотношение сторон</div>
            <Seg
              items={ratios.map(r => ({ value: r, label: r === 'auto' ? 'Авто' : r }))}
              value={ratio}
              onChange={setRatio}
            />
          </div>

          {/* Загрузка фото */}
          <div className="field-block">
            <div className="block-label-row">
              <div className="block-label">Исходное фото <span className="muted" style={{ fontWeight: 400 }}>(необязательно)</span></div>
            </div>
            <UploadZone
              label="Загрузи JPG, PNG, WEBP до 12 MB"
              accept="image/jpeg,image/png,image/webp"
              file={file}
              onFile={setFile}
              onClear={() => setFile(null)}
            />
          </div>

          {/* Промпт — скрыт в режиме шаблона */}
          {templatePrompt ? (
            <div className="field-block">
              <div className="block-label">Промпт</div>
              <div className="glass" style={{ padding: '14px 16px', display: 'flex', alignItems: 'center', gap: 12 }}>
                <span style={{ fontSize: 22 }}>✨</span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontWeight: 700 }}>Шаблон «{templateTitle}»</div>
                  <div className="muted" style={{ fontSize: 12 }}>Промпт скрыт — нажми «Сгенерировать»</div>
                </div>
                <button className="btn btn-ghost btn-sm" onClick={() => { setTemplatePrompt(''); setTemplateTitle(''); }}>✕ Сбросить</button>
              </div>
            </div>
          ) : (
            <div className="field-block">
              <div className="block-label-row">
                <div className="block-label">Промпт</div>
                <button
                  className="btn btn-ghost enhance-btn"
                  onClick={enhance}
                  disabled={enhancing || !prompt.trim()}
                >
                  {enhancing ? <Spinner sm /> : '✨ Улучшить'}
                </button>
              </div>
              <textarea
                className="prompt-area"
                rows={4}
                placeholder="Опиши что хочешь создать или как изменить фото..."
                value={prompt}
                onChange={e => setPrompt(e.target.value)}
              />
              <PromptIdeas ideas={IMAGE_PROMPT_IDEAS} onPick={setPrompt} />
            </div>
          )}

          <button
            className="btn btn-accent btn-block btn-lg"
            onClick={generate}
            disabled={loading || (!templatePrompt && !prompt.trim())}
          >
            {loading ? <><Spinner sm /> Генерирую...</> : templatePrompt ? '✨ Сгенерировать по шаблону' : (file ? '🖼 Редактировать' : '✨ Сгенерировать')}
          </button>
        </div>

        {/* ─── Результат ─── */}
        <div className="glass gen-result result-pad">
          {!result && !loading && (
            <EmptyState
              icon="🖼"
              title="Результат появится здесь"
              sub={templatePrompt ? `Шаблон: ${templateTitle}` : `Модель: ${selectedModel?.name ?? model}`}
            />
          )}

          {loading && (
            <div className="result-loading">
              <div className="loading-row">
                <Spinner />
                <span className="muted">Генерирую изображение...</span>
              </div>
              <div className="shimmer" style={{ height: 240, borderRadius: 12 }} />
            </div>
          )}

          {result && !loading && (
            <div className="result-done">
              <img
                src={result.imageDataUrl || result.imageUrl}
                alt="Результат"
                className="result-art"
                style={{ borderRadius: 12 }}
              />
              <div className="result-actions">
                <div className="result-info">
                  <span className="result-model">{selectedModel?.name ?? result.model}</span>
                  {prompt && <span className="result-prompt muted">{prompt.slice(0, 80)}{prompt.length > 80 ? '…' : ''}</span>}
                </div>
                <div className="result-actions-btns">
                  <button className="btn btn-accent btn-sm" onClick={download}>⬇ Скачать</button>
                  <button className="btn btn-ghost btn-sm" onClick={() => setResult(null)}>✕</button>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}