const btn = document.getElementById('btn');
const statusEl = document.getElementById('status');
const resultEl = document.getElementById('result');
const videoEl = document.getElementById('video');
const downloadEl = document.getElementById('download');
const scriptEl = document.getElementById('script');

btn.addEventListener('click', async () => {
  const topic = document.getElementById('topic').value.trim();
  const scenes = parseInt(document.getElementById('scenes').value, 10) || 5;
  const rate = parseInt(document.getElementById('rate').value, 10) || 160;

  if (!topic) {
    statusEl.textContent = '请填写主题';
    return;
  }

  btn.disabled = true;
  resultEl.classList.add('hidden');
  statusEl.textContent = '生成中，请稍候（可能需要 1-3 分钟）...';

  try {
    const res = await fetch('/api/generate', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ topic, scenes, rate }),
    });
    const data = await res.json();
    if (!data.ok) throw new Error(data.error || '生成失败');

    statusEl.textContent = '完成！';
    videoEl.src = '/' + data.video;
    downloadEl.href = '/' + data.video;
    scriptEl.innerHTML = '';
    data.script.forEach((s) => {
      const li = document.createElement('li');
      li.textContent = s.text;
      scriptEl.appendChild(li);
    });
    resultEl.classList.remove('hidden');
  } catch (e) {
    statusEl.textContent = '错误：' + e.message;
  } finally {
    btn.disabled = false;
  }
});