{% extends "base.html" %}
{% block title %}🤖 IA no PABX{% endblock %}
{% set active = "pbx-ai" %}
{% block content %}
<style>
.preview-box { background:#f4f4f4; border:1px solid #ddd; padding:15px; border-radius:6px; max-height:300px; overflow-y:auto; }
</style>

<h4 class="mb-3">🤖 IA no PABX — Assistente Virtual</h4>

<div class="row">
  <div class="col-md-8">
    <div class="card mb-3">
      <div class="card-header d-flex justify-content-between">
        <span>⚙️ Configurações</span>
        <span id="statusBadge" class="badge bg-secondary">Verificando...</span>
      </div>
      <div class="card-body">
        <form id="aiForm" onsubmit="return salvarSettings(event)">
          <div class="form-check form-switch mb-3">
            <input class="form-check-input" type="checkbox" name="enabled" id="chkEnabled"
              {% if settings and settings.enabled %}checked{% endif %}>
            <label class="form-check-label" for="chkEnabled">🟢 Ativar IA nas chamadas</label>
          </div>

          <div class="row">
            <div class="col-md-6 mb-3">
              <label class="form-label">📞 Prefixo de roteamento</label>
              <input type="text" name="routing_prefix" class="form-control"
                value="{{ settings.routing_prefix if settings else '*8' }}">
              <small class="text-muted">Ex: *87777 — discar *8 + ramal ativa a IA no atendimento</small>
            </div>
            <div class="col-md-6 mb-3">
              <label class="form-label">🌐 Idioma STT</label>
              <select name="stt_language" class="form-select">
                <option value="pt-BR" {% if settings and settings.stt_language == 'pt-BR' %}selected{% endif %}>Português (Brasil)</option>
                <option value="en-US" {% if settings and settings.stt_language == 'en-US' %}selected{% endif %}>Inglês (US)</option>
                <option value="es" {% if settings and settings.stt_language == 'es' %}selected{% endif %}>Espanhol</option>
              </select>
            </div>
          </div>

          <hr>
          <h6>🧠 Provedor LLM (Cérebro)</h6>
          <div class="row">
            <div class="col-md-4 mb-3">
              <label class="form-label">Provedor</label>
              <select name="llm_provider" class="form-select" onchange="toggleProvider()">
                <option value="deepseek" {% if settings and settings.llm_provider == 'deepseek' %}selected{% endif %}>DeepSeek</option>
                <option value="groq" {% if settings and settings.llm_provider == 'groq' %}selected{% endif %}>Groq (Llama)</option>
              </select>
            </div>
            <div class="col-md-4 mb-3">
              <label class="form-label">Modelo</label>
              <select name="llm_model" class="form-select" id="selModel">
                <option value="deepseek-chat" data-provider="deepseek" {% if settings and settings.llm_model == 'deepseek-chat' %}selected{% endif %}>DeepSeek Chat (V3)</option>
                <option value="deepseek-reasoner" data-provider="deepseek" {% if settings and settings.llm_model == 'deepseek-reasoner' %}selected{% endif %}>DeepSeek Reasoner (R1)</option>
                <option value="llama-3.3-70b-versatile" data-provider="groq" {% if settings and settings.llm_model == 'llama-3.3-70b-versatile' %}selected{% endif %}>Llama 3.3 70B</option>
                <option value="llama-3.1-8b-instant" data-provider="groq" {% if settings and settings.llm_model == 'llama-3.1-8b-instant' %}selected{% endif %}>Llama 3.1 8B (rápido)</option>
                <option value="mixtral-8x7b-32768" data-provider="groq" {% if settings and settings.llm_model == 'mixtral-8x7b-32768' %}selected{% endif %}>Mixtral 8x7B</option>
              </select>
            </div>
            <div class="col-md-4 mb-3">
              <label class="form-label">🔑 Chave da API *</label>
              <input type="password" name="llm_api_key" class="form-control"
                value="{{ settings.llm_api_key if settings else '' }}"
                placeholder="sk-... ou gsk_...">
            </div>
          </div>

          <hr>
          <h6>🎤 Deepgram (STT — Transcrição)</h6>
          <div class="mb-3">
            <label class="form-label">🔑 Chave Deepgram</label>
            <input type="password" name="deepgram_api_key" class="form-control"
              value="{{ settings.deepgram_api_key if settings else '' }}"
              placeholder="Cole sua chave Deepgram STT">
          </div>

          <hr>
          <h6>🗣️ Voz (TTS)</h6>
          <div class="row">
            <div class="col-md-6 mb-3">
              <label class="form-label">Provedor TTS</label>
              <select class="form-select" id="ttsProvider" onchange="toggleTTS()">
                <option value="google">Google Cloud TTS (Chirp3 HD)</option>
                <option value="edge">Edge TTS (gratuito)</option>
              </select>
            </div>
            <div class="col-md-6 mb-3">
              <label class="form-label">Voz</label>
              <select name="tts_voice" class="form-select">
                <optgroup label="Google Chirp3 HD (mais natural)">
                  <option value="pt-BR-Chirp3-HD-Aoede" {% if settings and settings.tts_voice == 'pt-BR-Chirp3-HD-Aoede' %}selected{% endif %}>Aoede (fem, recomendada)</option>
                  <option value="pt-BR-Chirp3-HD-Charon" {% if settings and settings.tts_voice == 'pt-BR-Chirp3-HD-Charon' %}selected{% endif %}>Charon (masc)</option>
                </optgroup>
                <optgroup label="Edge TTS (gratuito, rápido)">
                  <option value="pt-BR-FranciscaNeural" {% if settings and settings.tts_voice == 'pt-BR-FranciscaNeural' %}selected{% endif %}>Francisca (fem, padrão)</option>
                  <option value="pt-BR-AntonioNeural" {% if settings and settings.tts_voice == 'pt-BR-AntonioNeural' %}selected{% endif %}>Antonio (masc)</option>
                </optgroup>
              </select>
            </div>
          </div>

          <hr>
          <h6>💬 Personalidade (System Prompt)</h6>
          <div class="mb-3">
            <textarea name="system_prompt" class="form-control" rows="8"
              placeholder="Digite o prompt do sistema...">{{ settings.system_prompt if settings else '' }}</textarea>
            <small class="text-muted">Instruções que a IA segue. Tags disponíveis: [ENCERRAR_CHAMADA], [TRANSFERIR:ramal], [ASSISTIDA:ramal:resumo]</small>
          </div>

          <div class="d-flex gap-2">
            <button type="submit" class="btn btn-primary">💾 Salvar Configurações</button>
            <button type="button" class="btn btn-outline-secondary" onclick="restartService()">🔄 Reiniciar Serviço IA</button>
          </div>
        </form>
        <div id="saveResult" class="mt-3" style="display:none"></div>
      </div>
    </div>
  </div>

  <div class="col-md-4">
    <div class="card mb-3">
      <div class="card-header">📋 Sobre</div>
      <div class="card-body">
        <p>O assistente virtual da Sisnetsul atende chamadas usando:</p>
        <ul class="small">
          <li><strong>STT</strong> → Deepgram (transcrição fala→texto)</li>
          <li><strong>LLM</strong> → DeepSeek ou Groq (entende e responde)</li>
          <li><strong>TTS</strong> → Google Chirp3 HD ou Edge (texto→fala)</li>
          <li><strong>ARI</strong> → controle do Asterisk via REST</li>
        </ul>
        <p class="small text-muted mt-2">🔑 Cada cliente cadastra as próprias chaves de API.</p>
      </div>
    </div>

    <div class="card">
      <div class="card-header">🔧 Conexão Asterisk</div>
      <div class="card-body small">
        <dl class="mb-0">
          <dt>ARI:</dt>
          <dd><code>{{ settings.ari_host if settings else '127.0.0.1' }}:{{ settings.ari_port if settings else '8088' }}</code></dd>
          <dt>Usuário:</dt>
          <dd><code>{{ settings.ari_user if settings else 'asterisk' }}</code></dd>
          <dt>Aplicação:</dt>
          <dd><code>ia-gateway</code></dd>
        </dl>
      </div>
    </div>
  </div>
</div>

<script>
function toggleProvider() {
  const prov = document.querySelector('select[name="llm_provider"]').value;
  document.querySelectorAll('#selModel option').forEach(opt => {
    opt.style.display = (opt.dataset.provider === prov || !opt.dataset.provider) ? '' : 'none';
  });
}

function toggleTTS() {
  const prov = document.getElementById('ttsProvider').value;
  const sel = document.querySelector('select[name="tts_voice"]');
  sel.querySelectorAll('optgroup').forEach(g => {
    g.style.display = (g.label.toLowerCase().includes(prov) || g.label === 'Edge TTS (gratuito, rápido)' && prov === 'edge') ? '' : 'none';
  });
}

// Check service status
fetch('/app/pbx/ai/status')
  .then(r => r.json())
  .then(d => {
    const badge = document.getElementById('statusBadge');
    if (d.running) {
      badge.className = 'badge bg-success';
      badge.textContent = '✅ Rodando';
    } else {
      badge.className = 'badge bg-secondary';
      badge.textContent = '⏸️ Parado';
    }
  })
  .catch(() => {});

async function salvarSettings(e) {
  e.preventDefault();
  const result = document.getElementById('saveResult');
  result.style.display = 'none';
  try {
    const resp = await fetch('/app/pbx/ai/save', {
      method: 'POST',
      body: new FormData(document.getElementById('aiForm'))
    });
    const data = await resp.json();
    result.style.display = 'block';
    if (data.ok) {
      result.innerHTML = '<div class="alert alert-success">✅ ' + data.msg + '</div>';
      setTimeout(() => location.reload(), 1500);
    } else {
      result.innerHTML = '<div class="alert alert-danger">❌ ' + (data.error || 'Erro') + '</div>';
    }
  } catch(err) {
    result.style.display = 'block';
    result.innerHTML = '<div class="alert alert-danger">❌ ' + err.message + '</div>';
  }
}

async function restartService() {
  if (!confirm('Reiniciar o serviço de IA?')) return;
  try {
    const resp = await fetch('/app/pbx/ai/restart');
    const data = await resp.json();
    alert(data.ok ? '✅ Serviço reiniciado' : '❌ ' + (data.detail || data.error));
    location.reload();
  } catch(err) {
    alert('Erro: ' + err.message);
  }
}

// Init on load
setTimeout(() => { toggleProvider(); toggleTTS(); }, 100);
</script>
{% endblock %}