/* ============================================================
   studio-music.jsx — Генерация музыки (3 модели)
   ============================================================ */

const { useState, useEffect, useRef } = React;

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

  const [model, setModel] = useState(MUSIC_MODELS[0]);
  const [duration, setDuration] = useState(60);
  const [prompt, setPrompt] = useState('');
  const [refFile, setRefFile] = useState(null);
  const [enhancing, setEnhancing] = useState(false);
  const [loading, setLoading] = useState(false);
  const [genId, setGenId] = useState(null);
  const [status, setStatus] = useState(null); // null | processing | done | failed
  const [audioUrl, setAudioUrl] = useState(null);
  const [pollPct, setPollPct] = useState(0);
  const pollRef = useRef(null);

  const coins = user?.musicCredits ?? 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: 'music' }),
        credentials: 'include',
      });
      const data = await r.json();
      if (data.enhanced) { setPrompt(data.enhanced); toast('Промпт улучшен ✨', 'ok'); }
    } catch { toast('Ошибка', 'warn'); }
    finally { setEnhancing(false); }
  }

  async function create() {
    if (!prompt.trim()) { toast('Введи промпт', 'warn'); return; }
    if (coins < 1) { toast('Нет монет. Купи в профиле.', 'warn'); return; }
    setLoading(true);
    setStatus(null);
    try {
      let refAudioUrl = null;
      if (refFile && model.id === 'minimax') {
        const form = new FormData();
        form.append('file', refFile);
        const up = await fetch(`${API_BASE}/api/tg/admin/upload`, { method: 'POST', body: form, credentials: 'include' });
        const upData = await up.json();
        refAudioUrl = upData.url || null;
      }

      const r = await fetch(`${API_BASE}/api/tg/music/create`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ model: model.id, prompt, duration, referenceAudioUrl: refAudioUrl }),
        credentials: 'include',
      });
      const data = await r.json();
      if (!r.ok) { toast(data.error || 'Ошибка создания', 'warn'); return; }
      setGenId(data.id);
      setStatus('processing');
      updateUser({ musicCredits: coins - 1 });
      toast('Генерирую музыку... 🎵', 'ok');
      startPolling(data.id);
    } catch { toast('Ошибка сети', 'warn'); }
    finally { setLoading(false); }
  }

  async function buyCoins(pack) {
    try {
      const r = await fetch(`${API_BASE}/api/payment/music-invoice-link`, {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ coins: pack.coins }),
        credentials: 'include',
      });
      const data = await r.json();
      if (data.confirmationUrl) {
        window.open(data.confirmationUrl, '_blank');
        toast('Откройте ссылку для оплаты', 'pay');
      } else if (!r.ok) {
        toast(data.error || 'Ошибка', 'warn');
      }
    } catch { toast('Ошибка сети', 'warn'); }
  }

  function startPolling(id) {
    let pct = 5;
    pollRef.current = setInterval(async () => {
      try {
        const r = await fetch(`${API_BASE}/api/music-status/${id}`, { credentials: 'include' });
        const data = await r.json();
        pct = Math.min(92, pct + 5);
        setPollPct(pct);
        if (data.status === 'done' && (data.audioUrl || data.audioUrl2)) {
          clearInterval(pollRef.current);
          setAudioUrl(data.audioUrl2 || data.audioUrl);
          setStatus('done');
          setPollPct(100);
          toast('Музыка готова! 🎵', 'ok');
        } else if (data.status === 'failed') {
          clearInterval(pollRef.current);
          setStatus('failed');
          toast('Генерация не удалась', 'warn');
        }
      } catch {}
    }, 4000);
  }

  useEffect(() => () => clearInterval(pollRef.current), []);

  function reset() {
    clearInterval(pollRef.current);
    setGenId(null);
    setStatus(null);
    setAudioUrl(null);
    setPollPct(0);
  }

  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 style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
          <span className="badge">🎵 {coins} монет</span>
        </div>
      </div>

      {/* Модели */}
      <div className="music-models" style={{ marginBottom: 24 }}>
        {MUSIC_MODELS.map(m => (
          <button
            key={m.id}
            className={`glass hov-lift music-card${model.id === m.id ? ' on' : ''}`}
            onClick={() => { setModel(m); setRefFile(null); }}
          >
            <span style={{ fontSize: 28, flexShrink: 0 }}>{m.emoji}</span>
            <div className="music-card-body">
              <span className="music-name">{m.name}</span>
              <span className="music-note muted">{m.note}</span>
              {m.hasReference && <span className="tag" style={{ marginTop: 6, display: 'inline-block' }}>🎙 Аудио-референс</span>}
            </div>
            {model.id === m.id && <span className="music-check">✓</span>}
          </button>
        ))}
      </div>

      <div className="gen-layout">
        <div className="gen-settings">

          {/* Длительность */}
          <div className="field-block">
            <div className="block-label">Длительность</div>
            <Seg
              items={model.durations.map(d => ({ value: d, label: d >= 60 ? `${d/60} мин` : `${d}с` }))}
              value={duration}
              onChange={setDuration}
            />
          </div>

          {/* Аудио-референс (только MiniMax) */}
          {model.hasReference && (
            <div className="field-block">
              <div className="block-label">Аудио-референс <span className="muted" style={{ fontWeight: 400 }}>(необязательно)</span></div>
              <UploadZone
                label="Загрузи MP3 или WAV как образец стиля"
                accept="audio/*"
                file={refFile}
                onFile={setRefFile}
                onClear={() => setRefFile(null)}
              />
            </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={MUSIC_PROMPT_IDEAS} onPick={setPrompt} />
          </div>

          {/* Монеты */}
          {coins < 1 ? (
            <div className="glass" style={{ padding: 20 }}>
              <div className="coins-row" style={{ marginBottom: 14 }}>
                <span style={{ fontWeight: 700 }}>🎵 Купить монеты</span>
                <span className="muted" style={{ fontSize: 13 }}>У тебя 0 монет</span>
              </div>
              <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 10 }}>
                {MUSIC_PACKS.map(p => (
                  <button key={p.coins} className="pack" onClick={() => buyCoins(p)}>
                    <span className="pack-amt">🎵 {p.coins}</span>
                    <span className="pack-price">{p.price}₽</span>
                    <span className="pack-note muted">монет</span>
                  </button>
                ))}
              </div>
            </div>
          ) : (
            <button
              className="btn btn-accent btn-block btn-lg"
              onClick={create}
              disabled={loading || !prompt.trim() || status === 'processing'}
            >
              {loading || status === 'processing' ? <><Spinner sm /> Генерирую...</> : '🎵 Создать музыку'}
            </button>
          )}
        </div>

        {/* Результат */}
        <div className="glass gen-result result-pad" style={{ flexDirection: 'column', gap: 20 }}>
          {!status && (
            <EmptyState icon="🎵" title="Результат появится здесь" sub={`${model.name} · ${duration >= 60 ? duration/60 + ' мин' : duration + 'с'}`} />
          )}

          {status === 'processing' && (
            <div className="music-loading" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 20, padding: 20 }}>
              <div className="eq">
                {[1,2,3,4,5].map(i => (
                  <span key={i} style={{ animationDelay: `${i * 0.12}s` }} />
                ))}
              </div>
              <div style={{ textAlign: 'center' }}>
                <div style={{ fontWeight: 700, marginBottom: 6 }}>Генерирую музыку...</div>
                <div className="muted" style={{ fontSize: 13 }}>{model.name} · {pollPct}%</div>
              </div>
              <ProgressBar pct={pollPct} />
            </div>
          )}

          {status === 'done' && audioUrl && (
            <div style={{ width: '100%' }}>
              <PlaceholderArt type="mus" style={{ height: 120, marginBottom: 16 }} />
              <AudioPlayer src={audioUrl} />
              <div style={{ display: 'flex', gap: 10, marginTop: 14 }}>
                <a href={audioUrl} download className="btn btn-accent btn-sm">⬇ Скачать</a>
                <button className="btn btn-ghost btn-sm" onClick={reset}>Новый трек</button>
              </div>
            </div>
          )}

          {status === 'failed' && (
            <div style={{ textAlign: 'center' }}>
              <div style={{ fontSize: 40, marginBottom: 12 }}>❌</div>
              <div style={{ fontWeight: 700 }}>Не удалось</div>
              <button className="btn btn-accent btn-sm" style={{ marginTop: 12 }} onClick={reset}>Попробовать снова</button>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}