<!-- Estilos CSS (UI/UX Inspirado no Amaretto) -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">
<style>
  .campanha-bloco { 
    border: 1px solid #e2e8f0; 
    border-radius: 12px; 
    margin-bottom: 30px; 
    overflow: hidden; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
  }
  .campanha-capa {
    height: 160px;
    background-color: #f1f5f9;
    background-size: cover;
    background-position: center;
  }
  .campanha-header { 
    background: #FF8A00;
    color: white;
    padding: 15px 25px; 
    cursor: pointer; 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 0.5px;
  }
  .campanha-conteudo { background: #fafafa; padding: 25px; display: none; }
  
  .status-btn { 
    padding: 8px 16px; 
    border-radius: 30px; 
    color: white; 
    font-weight: 700; 
    font-size: 12px; 
    border: none; 
    cursor: pointer; 
    margin-right: 8px; 
    margin-bottom: 10px; 
    text-transform: uppercase;
  }
  /* Cores de Status */
  .status-padrao { background-color: #1F2937; } 
  .status-amarelo { background-color: #F59E0B; } 
  .status-verde { background-color: #10B981; } 
  .status-vermelho { background-color: #EF4444; } 
  .status-pulsante { background-color: #10B981; animation: pulse 1.5s infinite; }
  
  @keyframes pulse {
    0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7); }
    70% { box-shadow: 0 0 0 10px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
  }
  .secao-titulo { font-size: 14px; font-weight: bold; color: #64748b; margin-bottom: 10px; margin-top: 20px; text-transform: uppercase; letter-spacing: 1px;}
</style>

<!-- Container Principal (Vazio, o JS vai preencher) -->
<div id="app-portal-clientes">
  <div style="text-align: center; padding: 40px; font-family: sans-serif; color: #64748b;">
    Carregando campanhas do banco de dados...
  </div>
</div>

<!-- Scripts de Integração (Quill e Supabase) -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
<script>
  // 1. CREDENCIAIS SUPABASE (Corrigidas)
  const supabaseUrl = 'https://vambtiueahvzxdtsrcpth.supabase.co';
  const supabaseKey = 'sb_publishable_ju7WyEfCaXeW-oqIcAFU2A_DWBImvQ0';
  const supabase = supabase.createClient(supabaseUrl, supabaseKey);

  // Variável para guardar os editores de texto
  const editoresQuill = {};

  // 2. FUNÇÃO PRINCIPAL: Buscar dados reais e montar a tela
  async function carregarCampanhas() {
    const container = document.getElementById('app-portal-clientes');
    
    // Busca todas as linhas da tabela
    const { data, error } = await supabase.from('campanhas_amaretto').select('*');

    if (error) {
      container.innerHTML = `<p style="color: red;">Erro ao carregar dados: ${error.message}</p>`;
      return;
    }

    if (!data || data.length === 0) {
      container.innerHTML = `<p>Nenhuma campanha encontrada no banco de dados.</p>`;
      return;
    }

    // Limpa o "Carregando..."
    container.innerHTML = '';
    let htmlCompleto = '';

    // Monta o HTML para CADA linha do banco
    data.forEach(item => {
      // Usa os dados do banco ou textos padrão se estiver vazio
      const titulo = item.campanha || 'Campanha Sem Título';
      const status = item.status || 'Pendente';
      const capaUrl = item.capa_url || '';
      const corHeader = item.cor_hex || '#FF8A00';
      const observacao = item.observacao || '';

      htmlCompleto += `
        <div class="campanha-bloco" id="bloco-${item.id}">
          
          <!-- Imagem de Capa Dinâmica -->
          <div class="campanha-capa" style="background-image: url('${capaUrl}');"></div>
          
          <!-- Cabeçalho Dinâmico -->
          <div class="campanha-header" style="background-color: ${corHeader};" onclick="toggleCampanha('${item.id}')">
            <span>🍕 ${titulo}</span>
            <span class="status-btn status-padrao" id="badge-status-${item.id}">${status}</span>
          </div>
          
          <!-- Conteúdo Interno -->
          <div class="campanha-conteudo" id="conteudo-${item.id}">
            
            <div class="secao-titulo">Ações de Status</div>
            <div style="margin-bottom: 25px;">
              <button class="status-btn status-verde" onclick="atualizarStatus('${item.id}', 'Aprovado')">Aprovar Ações</button>
              <button class="status-btn status-vermelho" onclick="atualizarStatus('${item.id}', 'Não aprovado')">Reprovar</button>
              <button class="status-btn status-amarelo" onclick="atualizarStatus('${item.id}', 'Aguardando Retorno')">Aguardar Retorno</button>
              <button class="status-btn status-pulsante" onclick="atualizarStatus('${item.id}', 'Trabalhando agora')">Trabalhando Agora</button>
            </div>

            <div class="secao-titulo">Briefing / Observações da Gestão</div>
            <div id="editor-descricao-${item.id}" style="height: 200px; background: white; margin-bottom: 15px;">
              ${observacao}
            </div>
            <button class="status-btn status-padrao" style="background-color: #333;" onclick="salvarDescricao('${item.id}')">💾 Salvar Observações</button>
            
          </div>
        </div>
      `;
    });

    // Injeta tudo na tela
    container.innerHTML = htmlCompleto;

    // Inicializa o Editor de Texto Rico para CADA campanha gerada
    data.forEach(item => {
      editoresQuill[item.id] = new Quill(`#editor-descricao-${item.id}`, {
        theme: 'snow',
        modules: {
          toolbar: [
            [{ 'header': [1, 2, 3, false] }],
            ['bold', 'italic', 'underline', 'strike'],
            [{ 'list': 'ordered'}, { 'list': 'bullet' }],
            [{ 'color': [] }, { 'background': [] }],
            ['clean']
          ]
        }
      });
    });
  }

  // 3. Expande/Recolhe blocos
  window.toggleCampanha = function(id) {
    const conteudo = document.getElementById('conteudo-' + id);
    conteudo.style.display = (conteudo.style.display === "block") ? "none" : "block";
  }

  // 4. Atualiza o Status no Supabase
  window.atualizarStatus = async function(idCampanha, novoStatus) {
    const { data, error } = await supabase
      .from('campanhas_amaretto')
      .update({ status: novoStatus })
      .eq('id', idCampanha);

    if (error) {
      alert("Erro ao atualizar status: " + error.message);
    } else {
      document.getElementById('badge-status-' + idCampanha).innerText = novoStatus;
    }
  }

  // 5. Salva o texto formatado no Supabase
  window.salvarDescricao = async function(idCampanha) {
    const editor = editoresQuill[idCampanha];
    const conteudoHtml = editor.root.innerHTML; 
    
    const { data, error } = await supabase
      .from('campanhas_amaretto')
      .update({ observacao: conteudoHtml })
      .eq('id', idCampanha);

    if (error) {
      alert("Erro ao salvar: " + error.message);
    } else {
      alert("Observações salvas com sucesso no banco de dados!");
    }
  }

  // Dispara o carregamento assim que a página abre
  carregarCampanhas();
</script>