{% extends "base.html" %}
{% block title %}🔊 Gerador de Áudio TTS{% endblock %}
{% set active = "pbx-tts" %}
{% block content %}
<style>
.tts-preview audio { width: 100%; max-width: 400px; }
</style>

<h4 class="mb-3">🔊 Gerador de Áudio (Text-to-Speech)</h4>

<div class="row">
  <!-- Form -->
  <div class="col-md-5">
    <div class="card">
      <div class="card-body">
        <form id="ttsForm" onsubmit="return gerarAudio(event)">
          <div class="mb-3">
            <label class="form-label">📝 Texto para falar *</label>
            <textarea id="txtTexto" name="text" class="form-control" rows="4"
              placeholder="Digite o texto que a URA vai falar..."></textarea>
          </div>
          <div class="row">
            <div class="col-md-6 mb-3">
              <label class="form-label">🎙️ Voz</label>
              <select id="selVoz" name="voice" class="form-select">
                <optgroup label="👩 Feminino (Chirp3 HD)">
                  <option value="pt-BR-Chirp3-HD-Aoede">Aoede (recomendado)</option>
                  <option value="pt-BR-Chirp3-HD-Callirrhoe">Callirrhoe</option>
                  <option value="pt-BR-Chirp3-HD-Despina">Despina</option>
                  <option value="pt-BR-Chirp3-HD-Kore">Kore</option>
                  <option value="pt-BR-Chirp3-HD-Leda">Leda</option>
                  <option value="pt-BR-Chirp3-HD-Zephyr">Zephyr</option>
                </optgroup>
                <optgroup label="👨 Masculino (Chirp3 HD)">
                  <option value="pt-BR-Chirp3-HD-Charon">Charon (recomendado)</option>
                  <option value="pt-BR-Chirp3-HD-Enceladus">Enceladus</option>
                  <option value="pt-BR-Chirp3-HD-Fenrir">Fenrir</option>
                  <option value="pt-BR-Chirp3-HD-Puck">Puck</option>
                  <option value="pt-BR-Chirp3-HD-Umbriel">Umbriel</option>
                </optgroup>
                <optgroup label="🤖 Standard / Neural2 / Wavenet">
                  <option value="pt-BR-Neural2-A">Neural2-A (fem)</option>
                  <option value="pt-BR-Neural2-B">Neural2-B (masc)</option>
                  <option value="pt-BR-Wavenet-A">Wavenet-A (fem)</option>
                  <option value="pt-BR-Wavenet-B">Wavenet-B (masc)</option>
                  <option value="pt-BR-Standard-A">Standard-A (fem)</option>
                  <option value="pt-BR-Standard-B">Standard-B (masc)</option>
                </optgroup>
              </select>
            </div>
            <div class="col-md-6 mb-3">
              <label class="form-label">📛 Nome do arquivo</label>
              <input type="text" id="txtFile" name="filename" class="form-control"
                placeholder="ex: saudacao" value="audio_{{ range(1000,9999) | random }}">
              <small class="text-muted">Sem extensão. Será salvo como .wav</small>
            </div>
          </div>
          <button type="submit" class="btn btn-primary w-100" id="btnGerar">
            🔊 Gerar Áudio
          </button>
        </form>
        <div id="resultArea" class="mt-3" style="display:none"></div>
      </div>
    </div>
  </div>

  <!-- Áudios existentes -->
  <div class="col-md-7">
    <div class="card">
      <div class="card-header d-flex justify-content-between">
        <span>📂 Áudios gerados</span>
        <span class="badge bg-secondary">{{ audios|length }}</span>
      </div>
      <div class="card-body p-0">
        <div class="table-responsive">
          <table class="table table-sm mb-0">
            <thead><tr>
              <th>Arquivo</th>
              <th>Texto</th>
              <th>Voz</th>
              <th>Data</th>
              <th>Player</th>
            </tr></thead>
            <tbody>
              {% for a in audios %}
              <tr>
                <td><code>{{ a.filename }}</code></td>
                <td class="text-truncate" style="max-width:150px">{{ a.text[:40] }}{% if a.text and a.text|length > 40 %}…{% endif %}</td>
                <td><small>{{ a.voice.split('-')[-1] if a.voice else '—' }}</small></td>
                <td><small>{{ a.created_at[:10] if a.created_at else '—' }}</small></td>
                <td>
                  <audio controls preload="none" style="width:120px;height:32px">
                    <source src="/app/pbx/tts/audio/{{ a.filename }}.wav" type="audio/wav">
                  </audio>
                </td>
              </tr>
              {% else %}
              <tr><td colspan="5" class="text-center text-muted py-3">Nenhum áudio gerado ainda.</td></tr>
              {% endfor %}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- Settings card -->
<div class="card mt-3">
  <div class="card-header">⚙️ Configuração da Chave Google TTS</div>
  <div class="card-body">
    <p class="text-muted mb-2">Cada instalação precisa da própria chave de API do Google Cloud (Text-to-Speech).</p>
    <form method="post" action="/app/pbx/tts/settings" class="row g-2">
      <div class="col-md-8">
        <textarea name="google_json_key" class="form-control" rows="4"
          placeholder="Cole aqui o conteúdo do arquivo JSON da conta de serviço do Google Cloud...">{{ settings.google_json_key if settings and settings.google_json_key else '' }}</textarea>
      </div>
      <div class="col-md-4">
        <button type="submit" class="btn btn-warning w-100">💾 Salvar Chave</button>
        <a href="/app/pbx/tts/manual" class="btn btn-outline-info btn-sm w-100 mt-2">📖 Como criar a chave?</a>
      </div>
    </form>
    <div class="mt-2">
      <span class="badge {% if chave_ok %}bg-success{% else %}bg-danger{% endif %}">
        {% if chave_ok %}✅ Chave configurada{% else %}❌ Chave não configurada{% endif %}
      </span>
    </div>
  </div>
</div>

<script>
async function gerarAudio(e) {
  e.preventDefault();
  const btn = document.getElementById('btnGerar');
  const result = document.getElementById('resultArea');
  btn.disabled = true; btn.innerHTML = '⏳ Gerando...';
  result.style.display = 'none';

  const form = document.getElementById('ttsForm');
  const formData = new FormData(form);

  try {
    const resp = await fetch('/app/pbx/tts/generate', {
      method: 'POST',
      body: formData
    });
    const data = await resp.json();
    if (data.ok) {
      result.style.display = 'block';
      result.innerHTML = '<div class="alert alert-success mb-0">✅ Áudio gerado: <strong>' + data.filename + '.wav</strong></div>';
      setTimeout(() => location.reload(), 1500);
    } else {
      result.style.display = 'block';
      result.innerHTML = '<div class="alert alert-danger mb-0">❌ ' + (data.error || 'Erro ao gerar') + '</div>';
    }
  } catch(err) {
    result.style.display = 'block';
    result.innerHTML = '<div class="alert alert-danger mb-0">❌ Erro de conexão: ' + err.message + '</div>';
  } finally {
    btn.disabled = false; btn.innerHTML = '🔊 Gerar Áudio';
  }
}
</script>
{% endblock %}