{% extends "base.html" %}
{% block title %}🔊 Gerenciador de Áudio{% endblock %}
{% set active = "pbx-audio" %}
{% block content %}
<style>
.audio-player audio { width: 100%; max-width: 300px; height: 32px; }
</style>

<h4 class="mb-3">🔊 Gerenciador de Áudio</h4>

<ul class="nav nav-tabs mb-3" id="audioTabs">
  <li class="nav-item"><a class="nav-link active" href="#tabLibrary" data-bs-toggle="tab">📂 Biblioteca</a></li>
  <li class="nav-item"><a class="nav-link" href="#tabTTS" data-bs-toggle="tab">🔊 Gerar com TTS</a></li>
  <li class="nav-item"><a class="nav-link" href="#tabUpload" data-bs-toggle="tab">📤 Upload</a></li>
  <li class="nav-item"><a class="nav-link" href="#tabMOH" data-bs-toggle="tab">🎵 MOH</a></li>
  <li class="nav-item"><a class="nav-link" href="#tabSettings" data-bs-toggle="tab">⚙️ Chave Google</a></li>
</ul>

<div class="tab-content">

<!-- TAB: BIBLIOTECA -->
<div class="tab-pane active" id="tabLibrary">
  <div class="card">
    <div class="card-header d-flex justify-content-between">
      <span>📂 Áudios disponíveis</span>
      <span class="badge bg-secondary">{{ audios|length }}</span>
    </div>
    <div class="card-body p-0">
      <table class="table table-sm mb-0">
        <thead><tr>
          <th>Arquivo</th><th>Tipo</th><th>Duração</th><th>Tamanho</th><th>Criado</th><th>Player</th><th>Ações</th>
        </tr></thead>
        <tbody>
          {% for a in audios %}
          <tr>
            <td><code>{{ a.filename }}</code></td>
            <td>
              {% if a.type == 'upload' %}
                <span class="badge bg-info">📤 Upload</span>
              {% elif a.type %}
                <span class="badge bg-success">🔊 TTS</span>
              {% else %}
                <span class="badge bg-secondary">—</span>
              {% endif %}
            </td>
            <td>{% if a.duration > 0 %}{{ a.duration }}s{% else %}—{% endif %}</td>
            <td><small>{% if a.size > 0 %}{{ (a.size / 1024)|round(1) }}KB{% else %}—{% endif %}</small></td>
            <td><small>{{ a.created_at }}</small></td>
            <td>
              {% if a.has_file %}
              <audio controls preload="none" class="audio-player">
                <source src="/app/pbx/audio/play/{{ a.filename }}.wav" type="audio/wav">
              </audio>
              {% else %}
              <span class="text-danger">Arquivo não encontrado</span>
              {% endif %}
            </td>
            <td>
              {% if a.has_file %}
              <form method="post" action="/app/pbx/audio/to-moh" style="display:inline" class="moh-form">
                <input type="hidden" name="filename" value="{{ a.filename }}">
                <input type="hidden" name="moh_class" value="custom">
                <button type="submit" class="btn btn-sm btn-outline-primary" title="Copiar para MOH">🎵 MOH</button>
              </form>
              {% endif %}
              <form method="post" action="/app/pbx/audio/delete" style="display:inline"
                    onsubmit="return confirm('Excluir {{ a.filename }}?')">
                <input type="hidden" name="filename" value="{{ a.filename }}">
                <button type="submit" class="btn btn-sm btn-outline-danger">🗑️</button>
              </form>
            </td>
          </tr>
          {% else %}
          <tr><td colspan="7" class="text-center text-muted py-4">Nenhum áudio encontrado em {{ audio_dir }}</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
</div>

<!-- TAB: TTS -->
<div class="tab-pane" id="tabTTS">
  <div class="card">
    <div class="card-body">
      {% if not chave_ok %}
      <div class="alert alert-warning">⚠️ Chave Google TTS não configurada. Vá em "Chave Google" e cole sua chave.</div>
      {% endif %}
      <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="3"
            placeholder="Digite o texto que a URA vai falar..."></textarea>
        </div>
        <div class="row">
          <div class="col-md-4 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="🤖 Neural2 / Wavenet / Standard">
                <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-4 mb-3">
            <label class="form-label">📛 Nome do arquivo</label>
            <input type="text" id="txtFile" name="filename" class="form-control"
              placeholder="ex: saudacao" value="">
            <small class="text-muted">Sem extensão. Se vazio, gera automático.</small>
          </div>
          <div class="col-md-4 mb-3">
            <label class="form-label">&nbsp;</label>
            <div class="form-check mt-2">
              <input type="checkbox" class="form-check-input" id="chkMohTTS" checked value="on">
              <label class="form-check-label" for="chkMohTTS">🎵 Copiar para MOH</label>
            </div>
          </div>
        </div>
        <button type="submit" class="btn btn-primary" id="btnGerar">🔊 Gerar Áudio</button>
      </form>
      <div id="resultArea" class="mt-3" style="display:none"></div>
    </div>
  </div>
</div>

<!-- TAB: UPLOAD -->
<div class="tab-pane" id="tabUpload">
  <div class="card">
    <div class="card-body">
      <p class="text-muted">Faça upload de qualquer arquivo de áudio. O sistema converte automaticamente para WAV 8kHz (formato Asterisk).</p>
      <p class="text-muted small">Formatos aceitos: MP3, WAV, OGG, FLAC, AAC, M4A, WMA, OPUS, GSM</p>
      <form id="uploadForm" onsubmit="return uploadAudio(event)" enctype="multipart/form-data">
        <div class="mb-3">
          <label class="form-label">📁 Arquivo de áudio *</label>
          <input type="file" id="fileInput" name="file" class="form-control" accept=".mp3,.wav,.ogg,.flac,.aac,.m4a,.wma,.opus,.gsm" required>
        </div>
        <div class="mb-3">
          <label class="form-label">📛 Nome (opcional)</label>
          <input type="text" name="name" class="form-control" placeholder="Deixe vazio para usar o nome do arquivo">
        </div>
        <button type="submit" class="btn btn-primary" id="btnUpload">📤 Fazer Upload</button>
      </form>
      <div id="uploadResult" class="mt-3" style="display:none"></div>
    </div>
  </div>
</div>

<!-- TAB: MOH -->
<div class="tab-pane" id="tabMOH">
  <div class="card">
    <div class="card-header">🎵 Music on Hold (MOH)</div>
    <div class="card-body">
      <p>Para usar um áudio como Música de Espera (MOH):</p>
      <ol>
        <li>Na aba <strong>Biblioteca</strong>, clique em <strong>🎵 MOH</strong> no áudio desejado</li>
        <li>Isso copia o arquivo para <code>/var/lib/asterisk/moh/custom/</code> e cria a classe MOH</li>
        <li>Na <strong>Fila</strong>, selecione <code>custom</code> no campo "MOH"</li>
      </ol>
      <p>Classes MOH configuradas:</p>
      <div id="mohClassesList" class="mb-3">
        <span class="text-muted">Carregando...</span>
      </div>
      <hr>
      <h6>🎵 Criar nova classe MOH</h6>
      <form id="mohCreateForm" onsubmit="return criarMOH(event)">
        <div class="row">
          <div class="col-md-4">
            <label class="form-label">Nome da classe</label>
            <input type="text" name="moh_class" class="form-control" value="custom" placeholder="ex: corporativo">
          </div>
          <div class="col-md-4">
            <label class="form-label">Áudio existente</label>
            <select name="filename" class="form-select">
              <option value="">— Selecione —</option>
              {% for a in audios %}
              {% if a.has_file %}
              <option value="{{ a.filename }}">{{ a.filename }}</option>
              {% endif %}
              {% endfor %}
            </select>
          </div>
          <div class="col-md-4">
            <label class="form-label">&nbsp;</label>
            <button type="submit" class="btn btn-primary w-100">➕ Criar Classe</button>
          </div>
        </div>
      </form>
      <div id="mohResult" class="mt-3" style="display:none"></div>
    </div>
  </div>
</div>

<!-- TAB: CHAVE GOOGLE -->
<div class="tab-pane" id="tabSettings">
  <div class="card">
    <div class="card-header d-flex justify-content-between">
      <span>⚙️ Configuração da Chave Google TTS</span>
      <span class="badge {% if chave_ok %}bg-success{% else %}bg-danger{% endif %}">
        {% if chave_ok %}✅ Configurada{% else %}❌ Não configurada{% endif %}
      </span>
    </div>
    <div class="card-body">
      <p class="text-muted">Cada instalação precisa da própria chave de API do Google Cloud (Text-to-Speech).</p>
      <form method="post" action="/app/pbx/audio/settings" class="row g-2">
        <div class="col-12">
          <textarea name="google_json_key" class="form-control" rows="6"
            placeholder="Cole aqui o conteudo do arquivo JSON da conta de servico do Google Cloud...">{{ settings.google_json_key if settings and settings.google_json_key else '' }}</textarea>
        </div>
        <div class="col-12">
          <button type="submit" class="btn btn-warning">💾 Salvar Chave</button>
          <a href="/app/pbx/audio/manual" class="btn btn-outline-info">📖 Como criar a chave?</a>
        </div>
      </form>
    </div>
  </div>
</div>

</div><!-- /tab-content -->

<script>
function switchTab(name) {
  // Bootstrap tabs
}

// Load MOH classes on page load
fetch('/app/pbx/audio/moh-classes')
  .then(r => r.json())
  .then(d => {
    const el = document.getElementById('mohClassesList');
    if (d.classes && d.classes.length) {
      el.innerHTML = d.classes.map(c => '<span class="badge bg-secondary me-1">' + c + '</span>').join('');
    } else {
      el.innerHTML = '<span class="text-muted">Nenhuma classe MOH alem da default.</span>';
    }
  })
  .catch(() => {});

// TTS Generator
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 = new FormData(document.getElementById('ttsForm'));
  const filename = form.get('filename') || 'audio_' + Math.floor(1000+Math.random()*9000);
  form.set('filename', filename);

  try {
    const resp = await fetch('/app/pbx/tts/generate', {
      method: 'POST', body: form
    });
    const data = await resp.json();
    if (data.ok) {
      result.style.display = 'block';
      result.innerHTML = '<div class="alert alert-success">✅ Audio gerado: <strong>' + data.filename + '.wav</strong></div>';
      // Copy to MOH if checked
      if (document.getElementById('chkMohTTS').checked) {
        await fetch('/app/pbx/audio/to-moh', {
          method: 'POST',
          headers: {'Content-Type': 'application/x-www-form-urlencoded'},
          body: 'filename=' + data.filename + '&moh_class=custom'
        });
        result.innerHTML += '<div class="alert alert-info">🎵 Copiado para MOH (classe: custom)</div>';
      }
      setTimeout(() => location.reload(), 2000);
    } else {
      result.style.display = 'block';
      result.innerHTML = '<div class="alert alert-danger">❌ ' + (data.error || 'Erro ao gerar') + '</div>';
    }
  } catch(err) {
    result.style.display = 'block';
    result.innerHTML = '<div class="alert alert-danger">❌ Erro: ' + err.message + '</div>';
  } finally {
    btn.disabled = false; btn.innerHTML = '🔊 Gerar Audio';
  }
}

// Upload
async function uploadAudio(e) {
  e.preventDefault();
  const btn = document.getElementById('btnUpload');
  const result = document.getElementById('uploadResult');
  btn.disabled = true; btn.innerHTML = '⏳ Enviando...';
  result.style.display = 'none';

  const form = new FormData(document.getElementById('uploadForm'));
  try {
    const resp = await fetch('/app/pbx/audio/upload', {
      method: 'POST', body: form
    });
    const data = await resp.json();
    if (data.ok) {
      result.style.display = 'block';
      result.innerHTML = '<div class="alert alert-success">✅ Upload e conversao OK: <strong>' + data.filename + '.wav</strong></div>';
      setTimeout(() => location.reload(), 2000);
    } else {
      result.style.display = 'block';
      result.innerHTML = '<div class="alert alert-danger">❌ ' + (data.error || 'Erro') + '</div>';
    }
  } catch(err) {
    result.style.display = 'block';
    result.innerHTML = '<div class="alert alert-danger">❌ Erro: ' + err.message + '</div>';
  } finally {
    btn.disabled = false; btn.innerHTML = '📤 Fazer Upload';
  }
}

// Create MOH
async function criarMOH(e) {
  e.preventDefault();
  const result = document.getElementById('mohResult');
  result.style.display = 'none';
  const form = new FormData(document.getElementById('mohCreateForm'));
  const filename = form.get('filename');
  if (!filename) { alert('Selecione um audio'); return; }
  try {
    const resp = await fetch('/app/pbx/audio/to-moh', {
      method: 'POST',
      headers: {'Content-Type': 'application/x-www-form-urlencoded'},
      body: 'filename=' + form.get('filename') + '&moh_class=' + form.get('moh_class')
    });
    const data = await resp.json();
    result.style.display = 'block';
    result.innerHTML = '<div class="alert alert-success">✅ ' + (data.note || 'OK') + '</div>';
  } catch(err) {
    result.style.display = 'block';
    result.innerHTML = '<div class="alert alert-danger">❌ ' + err.message + '</div>';
  }
}
</script>
{% endblock %}