<?php /* views/pages/atualizacoes.php — clean/light + sugestão por email (mail()) */ ?>
<?php
// ========= Config =========
$SUPPORT_EMAIL = '';

// ========= MOCK RELEASES (pode mover para DB depois) =========
$RELEASES = [
    
    
    
    [
  'version'   => '1.2.0',
  'date'      => '2026-03-01',
  'channel'   => 'stable',
  'title'     => 'WhatsApp mais estável + API Oficial no Prospect + Extrator de Grupos (Premium)',
  'highlights'=> 'Atualização grande focada em estabilidade: nova API de WhatsApp, conexão por QR Code ou pareamento, API oficial disponível no Prospect, novo extrator de grupos (Premium), melhorias na aba de Leads e correções importantes.',
  'items'     => [
    ['type'=>'melhoria', 'text'=>'<b>Mudança de API de WhatsApp mais estável</b>: melhoramos a consistência da conexão e a performance geral, reduzindo falhas e instabilidades.'],
    ['type'=>'novo',     'text'=>'<b>Conexão via QR Code ou Código de pareamento</b>: agora você pode conectar sua conta usando QR Code ou pareamento, do jeito mais prático para você.'],
    ['type'=>'novo',     'text'=>'<b>API oficial disponível na Evolua Prospect</b>: além das opções anteriores, a <b>API oficial</b> agora pode ser usada diretamente dentro do Prospect.'],
    ['type'=>'novo',     'text'=>'<b>Novo extrator de contatos de Grupos de WhatsApp (Premium)</b>: usuários premium agora podem extrair contatos de grupos de forma prática e organizada.'],
    ['type'=>'melhoria', 'text'=>'<b>Aba de Leads reformulada</b>: layout modernizado e novas funções para deixar o gerenciamento mais rápido e intuitivo.'],
    ['type'=>'melhoria', 'text'=>'<b>Limpeza de memória do Agente (para testes)</b>: na aba do agente de atendimento, agora é possível <b>limpar a memória</b> para testar fluxos com mais precisão.'],
    ['type'=>'correcao', 'text'=>'<b>Correção no limite de caracteres</b>: ajustes para evitar travamentos/erros em campos com textos maiores.'],
    ['type'=>'correcao', 'text'=>'<b>Correção no upload de mídia (MB)</b>: ajustes no controle de tamanho e envio de mídias.']
  ],
],
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    [
  'version'   => '1.1.10',
  'date'      => '2025-12-23',
  'channel'   => 'stable',
  'title'     => 'Estabilidade: Pause/Retome + Correções + Sessão Sem Logout',
  'highlights'=> 'Correção na retomada automática do Pause/Retome, ajustes em erros de SQL / “Não autenticado” e melhoria que evita logout automático após 1 hora de inatividade.',
  'items'     => [
    ['type'=>'melhoria', 'text'=>'<b>Pause / Retome</b>: corrigimos casos em que as campanhas <b>não retomava automaticamente</b>, exigindo retomar manualmente. Agora a retomada está mais estável e confiável.'],
    ['type'=>'correcao', 'text'=>'<b>Correções de SQL</b>: ajustes em falhas que poderiam aparecer em algumas páginas durante navegação/ações específicas.'],
    ['type'=>'correcao', 'text'=>'<b>“Não autenticado”</b>: corrigimos ocorrências intermitentes desse erro e outros avisos que apareciam do nada em algumas páginas.'],
    ['type'=>'melhoria', 'text'=>'<b>Sem logout após 1 hora</b>: removemos o logout automático por inatividade — agora você pode manter a plataforma aberta sem ser deslogado.'],
    ['type'=>'info',     'text'=>'Se notar qualquer instabilidade após a atualização, envie um print com o horário para nosso suporte: <a href="mailto:suporte@evoluaprospect.com">suporte@evoluaprospect.com</a>.'],
  ],
],

    
    
    
    [
  'version'   => '1.1.9',
  'date'      => '2025-11-24',
  'channel'   => 'beta',
  'title'     => 'CRM Follow-up Beta + Evolua Chat Premium + Área de Dicas',
  'highlights'=> 'Novo CRM com follow-up automático, Evolua Chat liberado para usuários premium e área de dicas totalmente nova.',
  'items'     => [

    // CRM Follow-up (Beta)
    ['type'=>'novo', 'text'=>'<b>CRM com Follow-up Automático (Beta)</b>: agora você pode programar envios automáticos diretamente nas colunas do CRM, tornando seu processo de follow-up previsível e organizado.'],
    ['type'=>'novo', 'text'=>'Criação de <b>tarefas de follow-up por coluna</b>: após uma campanha enviar leads para a coluna desejada, o sistema executa automaticamente as mensagens conforme sua configuração.'],
    ['type'=>'novo', 'text'=>'Envio de mídias completas: <b>Texto</b>, <b>Imagem</b>, <b>Áudio</b> e <b>Vídeo</b>.'],
    ['type'=>'melhoria', 'text'=>'Configurações flexíveis: escolha <b>quando enviar</b>, horário de início, intervalo mínimo/máximo e comportamento pós-disparo.'],
    ['type'=>'novo', 'text'=>'Regras inteligentes: mova o lead para outra coluna após o envio — ou para uma coluna diferente caso ele responda a mensagem.'],
    ['type'=>'info', 'text'=>'Este módulo está em <b>versão Beta</b>, mas já pode ser usado normalmente para organizar e automatizar seus follow-ups.'],

    // Evolua Chat para premium
    ['type'=>'novo', 'text'=>'<b>Evolua Chat liberado para usuários Premium</b>: nossa plataforma completa de atendimento agora está disponível sem custo adicional para quem possui plano premium.'],
    ['type'=>'info', 'text'=>'A Evolua Chat oferece <b>gestão de conversas</b>, <b>kanban de usuários</b>, <b>respostas rápidas</b>, <b>fluxos</b>, listas, organização por atendente e muito mais.'],
    ['type'=>'info', 'text'=>'Este é um presente exclusivo para tornar sua rotina de atendimento mais rápida e organizada. ❤️'],

    // Dicas
    ['type'=>'novo', 'text'=>'Criada a nova aba <b>Dicas</b>: um espaço com conteúdos práticos, atualizações, tutoriais e orientações de uso para aproveitar o máximo da Evolua Prospect.'],

    // Melhorias gerais
    ['type'=>'melhoria', 'text'=>'Aprimoramos a <b>estabilidade geral da plataforma</b>, especialmente em cenários de volume alto de leads e campanhas.'],
    ['type'=>'correcao', 'text'=>'Ajuste no agente de atendimento que, em alguns casos, deixava de responder leads após uma interação anterior.'],
  ],
],

    
    
    
    
    
    
    
    
    
    
    
    
    
        
    
    [
  'version'   => '1.1.8',
  'date'      => '2025-11-09',
  'channel'   => 'Stable',
  'title'     => 'Pausa Inteligente + Lua Notifications + Exportação de Leads',
  'highlights'=> 'Campanhas agora pausam automaticamente em caso de desconexão, a Lua (IA da Evolua Prospect) envia alertas e lembretes pelo WhatsApp, a tabela de campanhas passa a exibir também a contagem de leads sem WhatsApp e ficou mais fácil exportar seus leads em CSV com 1 clique.',
  'items'     => [
    // Core da release
    ['type'=>'novo', 'text'=>'<b>Pausa inteligente de campanhas</b>: se a conexão com o WhatsApp falhar, a plataforma <b>pausa automaticamente</b> os disparos para evitar erros, bloqueios e desperdício de tentativas. Assim que você reconectar, é possível retomar com segurança.'],
    ['type'=>'novo', 'text'=>'<b>Notificações via Lua</b> (IA da Evolua Prospect): receba <b>alertas no WhatsApp</b> sobre pausas por desconexão, status de campanhas e lembretes úteis. Cadastre seu número em <b>Disparos → Notificações</b> e pronto.'],
    ['type'=>'melhoria', 'text'=>'Nova coluna em <code>campanhas</code>: adicionamos a contagem de <b>leads sem WhatsApp</b> (ex.: <code>leads_sem_whatsapp</code>) para você ter visibilidade total antes de iniciar o disparo.'],
    ['type'=>'novo', 'text'=>'<b>Exportar leads</b>: gere um arquivo <b>CSV</b> com seus contatos filtrados/segmentados. Ideal para auditoria, backups e análises externas.'],

    // “Linguiça” boa: UX, métricas e estabilidade
    ['type'=>'melhoria', 'text'=>'<b>Experiência de uso</b>: feedbacks mais claros na tela de disparos, <b>badges de status</b> e mensagens de orientação quando a campanha estiver pausada por desconexão.'],
    ['type'=>'melhoria', 'text'=>'<b>Observabilidade</b>: mensagens de log mais descritivas em casos de <i>Connection Closed</i> e <i>Precondition Required (HTTP 428)</i>, facilitando o diagnóstico rápido.'],
    ['type'=>'melhoria', 'text'=>'<b>Performance</b>: listagem de campanhas e leads otimizada para cenários com grande volume, com carregamento mais estável e previsível.'],
    ['type'=>'melhoria', 'text'=>'<b>Tratamento de números</b>: validações mais rígidas para <i>leads sem número</i> ou com formatação inconsistente, reduzindo falhas no envio.'],

    // Dicas e instruções práticas
    ['type'=>'info', 'text'=>'💡 <b>Como ativar a Lua:</b> acesse <b>Disparos → Notificações</b>, informe o número do WhatsApp que receberá os avisos e salve. A Lua cuida do resto (pausas, reconexões e lembretes).'],
    ['type'=>'info', 'text'=>'💡 <b>Exportação eficiente:</b> aplique filtros nos leads antes de exportar para obter um CSV somente com o que precisa (por campanha, pasta/quadro, status etc.).'],

    // Notas de compatibilidade (sem quebrar nada)
    ['type'=>'info', 'text'=>'Compatível com fluxos existentes: a pausa inteligente e a contagem de leads sem WhatsApp não exigem alterações nos seus disparos atuais.'],
  ],
],

    
    
    
    
    
    
    
    
    
    
    [
  'version'   => '1.1.7',
  'date'      => '2025-10-19',
  'channel'   => 'stable',
  'title'     => 'Agente com Ferramentas Fixas + Upload no Prompt',
  'highlights'=> 'Agora o Agente de Atendimento pode enviar ferramentas padrão (agenda, humano, grupo) e aceitar mídias por arrasta e solta diretamente no prompt.',
  'items'     => [
    ['type'=>'novo',      'text'=>'Adicionadas <b>ferramentas fixas no Agente de Atendimento</b>: agora é possível enviar diretamente <b>Agenda</b>, <b>Avisar Humano</b> e <b>Avisar Grupo</b> sem precisar de configurações adicionais.'],
    ['type'=>'novo',      'text'=>'Nova função de <b>upload direto no prompt</b>: arraste e solte imagens, vídeos ou PDFs para inserir como mídia no fluxo de atendimento.'],
    ['type'=>'melhoria',  'text'=>'A interface do agente foi aprimorada para tornar a experiência mais fluida, com melhor integração entre o prompt e as mídias enviadas.'],
    ['type'=>'info',      'text'=>'💡 <b>Dica:</b> agora é possível anexar vários arquivos de uma vez e reutilizá-los em diferentes etapas do atendimento.'],
  ],
],

    
    
    
    
    
    
  [
    'version'   => '1.1.6',
    'date'      => '2025-10-13',
    'channel'   => 'stable',
    'title'     => 'Minha Conta + Pausa Dinâmica do Agente de IA',
    'highlights'=> 'Nova aba Minha Conta com gestão de plano e senha, e pausa inteligente do agente de IA após interação humana.',
    'items'     => [
      ['type'=>'novo',      'text'=>'Criação da aba <b>Minha Conta</b>: agora é possível acompanhar seu plano e alterar a senha de acesso diretamente pelo painel.'],
      ['type'=>'novo',      'text'=>'Nova função de <b>pausa dinâmica do agente de IA</b>: defina em minutos quanto tempo ele deve ficar offline após uma interação humana.'],
      ['type'=>'melhoria',  'text'=>'Opção de <b>pausa definitiva</b> do agente caso deseje desativar o retorno automático.'],
      ['type'=>'melhoria',  'text'=>'Valor padrão de pausa definido em <b>12 minutos</b>, ajustável conforme necessidade do usuário.'],
      ['type'=>'info',      'text'=>"Para configurar, acesse a aba <b>Agente de Atendimento</b> e defina sua preferência diretamente no painel."],
    ],
  ],
  [
    'version'   => '1.1.5',
    'date'      => '2025-10-12',
    'channel'   => 'stable',
    'title'     => 'Janela de Envio + Auto Pause/Resume + Detalhes da Campanha',
    'highlights'=> 'Agendamento por horário com bloqueio por dias, pausa/retomada automática com itens sincronizados e modal de detalhes completo.',
    'items'     => [
      ['type'=>'novo',     'text'=>'Janela de envio por horário (início/fim) e opção de bloquear dias da semana.'],
      ['type'=>'novo',     'text'=>'Scheduler para pausar/retomar campanhas conforme a janela e bloqueios.'],
      ['type'=>'novo',     'text'=>"Modal 'Detalhes' na lista de campanhas: resumo da campanha, badges de status/janela/bloqueios, estatísticas e tabela paginada de leads com nome da pasta."],
      ['type'=>'melhoria', 'text'=>'Tratamento de janelas que atravessam a meia-noite e validações de bloqueio por weekday.'],
    ],
  ],
  [
    'version'   => '1.1.4',
    'date'      => '2025-10-11',
    'channel'   => 'stable',
    'title'     => 'Pastas de Leads + Disparo por Pasta + Busca',
    'highlights'=> 'Organização por pastas, campanhas segmentadas por pasta e campo de busca na listagem.',
    'items'     => [
      ['type'=>'novo',     'text'=>'Pastas de leads: separe contatos em pastas específicas (ex.: Follow up, Odontologia, Advocacia).'],
      ['type'=>'novo',     'text'=>'Disparo por pasta: ao criar uma campanha, selecione uma pasta para enviar somente aos leads daquele grupo.'],
      ['type'=>'melhoria', 'text'=>'Tabela de leads: adicionado campo de busca (search) para encontrar contatos rapidamente.'],
    ],
  ],
  [
    'version'   => '1.1.3',
    'date'      => '2025-10-08',
    'channel'   => 'stable',
    'title'     => 'Estabilidade em Campanhas + Performance no CRM',
    'highlights'=> "Correção do 'Pause' nas campanhas, CRM mais leve e cores consistentes em dark/light.",
    'items'     => [
      ['type'=>'correcao',  'text'=>"Campanhas: correção da função 'Pause' que não aplicava o estado corretamente em todos os itens."],
      ['type'=>'melhoria',  'text'=>'CRM: navegação mais fluída com carregamento incremental via AJAX para grandes volumes de leads.'],
      ['type'=>'melhoria',  'text'=>'Layout: normalização de cores entre temas claro/escuro e entre navegadores.'],
    ],
  ],
  [
    'version'   => '1.1.2',
    'date'      => '2025-10-01',
    'channel'   => 'stable', // stable | beta | hotfix
    'title'     => 'Novos blocos e refinamento no funil',
    'highlights'=> 'Kanban mais fluido, novos gatilhos de IA e melhorias na experiência.',
    'items'     => [
      ['type'=>'novo',      'text'=>'Criação de colunas personalizadas no CRM.'],
      ['type'=>'melhoria',  'text'=>'Direcionamento para WhatsApp do Lead ao clicar no card no CRM'],
      ['type'=>'novo',      'text'=>'Webhook: novo evento <code>lead.stage_changed</code>.'],
      ['type'=>'novo',      'text'=>'Agente de atendimento preparado para ouvir áudio.'],
    ],
  ],
  [
    'version'   => '1.1.1',
    'date'      => '2025-09-25',
    'channel'   => 'hotfix',
    'title'     => 'Ajustes rápidos no Extrator Maps',
    'highlights'=> 'Foco em estabilidade.',
    'items'     => [
      ['type'=>'correcao',  'text'=>'Tratamento de timeouts intermitentes no Maps.'],
      ['type'=>'melhoria',  'text'=>'Retry exponencial em segundo plano.'],
    ],
  ],
  [
    'version'   => '1.1.0',
    'date'      => '2025-09-20',
    'channel'   => 'stable',
    'title'     => 'Agente de Atendimento — primeiro release',
    'highlights'=> 'Atendimento com IA, roteiros e qualificação automática.',
    'items'     => [
      ['type'=>'novo',      'text'=>'Agente de Atendimento com roteiros.'],
      ['type'=>'melhoria',  'text'=>'Integração com CRM: arraste & solte entre colunas.'],
      ['type'=>'correcao',  'text'=>'Erro ao salvar configurações de horário do agente.'],
    ],
  ],
];



// ========= Helpers =========
function br_date($iso) {
  $ts = strtotime($iso);
  return $ts ? date('d/m/Y', $ts) : htmlspecialchars($iso);
}
function channel_badge($ch){
  $map = [
    'stable' => ['Stable',  '#16a34a'], // verde médio
    'beta'   => ['Beta',    '#0891b2'], // ciano médio
    'hotfix' => ['Hotfix',  '#d97706'], // âmbar médio
  ];
  $d = $map[$ch] ?? $map['stable'];
  return '<span class="badge" style="--badge-fg:'.$d[1].'">'.$d[0].'</span>';
}

// ========= Processamento do formulário (mail()) =========
// Observação: sem libs externas; validação/sanitização básica + proteção anti header injection.
$feedbackMsg = null; $feedbackOk = null;

if (($_POST['__action'] ?? '') === 'suggest') {
  // Sanitização básica
  $name  = trim($_POST['name']  ?? '');
  $email = trim($_POST['email'] ?? '');
  $type  = trim($_POST['type']  ?? '');
  $msg   = trim($_POST['message'] ?? '');

  // bloqueia header injection em campos de header
  $cleanHeader = function($v){
    $v = str_replace(["\r","\n"], '', $v);
    return preg_replace('/(content-type:|bcc:|cc:|to:|from:)/i', '', $v);
  };
  $name  = $cleanHeader($name);
  $email = $cleanHeader($email);

  // validações mínimas
  if (!$name || !$email || !$msg) {
    $feedbackMsg = 'Preencha nome, e-mail e mensagem.';
    $feedbackOk  = false;
  } elseif (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
    $feedbackMsg = 'Informe um e-mail válido.';
    $feedbackOk  = false;
  } else {
    // Monta e envia
    $subject = "[Sugestão Release] ".($type ? ucfirst($type)." - " : "")."Evolua Prospect";
    $body    = "Nome: {$name}\nEmail: {$email}\nTipo: {$type}\n\nMensagem:\n{$msg}\n";
    $headers = [];
    $headers[] = "From: Evolua Prospect <no-reply@evoluaprospect.com.br>";
    $headers[] = "Reply-To: {$name} <{$email}>";
    $headers[] = "MIME-Version: 1.0";
    $headers[] = "Content-Type: text/plain; charset=UTF-8";

    // IMPORTANTE: em servidores locais pode ser necessário configurar sendmail/SMTP do PHP.
    $ok = @mail($SUPPORT_EMAIL, $subject, $body, implode("\r\n", $headers));

    if ($ok) {
      $feedbackMsg = 'Sugestão enviada com sucesso! Obrigado por contribuir 🙌';
      $feedbackOk  = true;
      // limpa campos
      $_POST = [];
    } else {
      $feedbackMsg = 'Não foi possível enviar agora. Tente novamente mais tarde.';
      $feedbackOk  = false;
    }
  }
}
?>
<style>
  /* ====== Estilo clean para fundo claro ====== */
  :root{
    --ink:#0f172a;
    --muted:#64748b;
    --line:#e5e7eb;
    --card:#ffffff;
    --soft:#f8fafc;
    --chip:#f1f5f9;
    --badge:#eef6ff;
    --shadow:0 8px 24px rgba(15,23,42,.06);
  }
  .page-wrap{max-width:980px;margin:0 auto;padding:24px 16px;color:var(--ink)}
  .hero{
    background:var(--card); border:1px solid var(--line); border-radius:16px;
    padding:18px; box-shadow:var(--shadow); margin-bottom:16px;
  }
  .hero h1{font-size:1.35rem;margin:0 0 6px;font-weight:800}
  .hero p{margin:0;color:var(--muted)}
  .toolbar{
    display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:16px 0 18px
  }
  .chip{
    border:1px solid var(--line); background:var(--chip); color:var(--ink);
    border-radius:999px; padding:8px 12px; font-weight:700; font-size:.85rem;
    cursor:pointer; user-select:none; transition:.15s
  }
  .chip[data-active="1"]{background:#e2e8f0}
  .search{ margin-left:auto; display:flex; align-items:center; gap:8px;
    border:1px solid var(--line); background:var(--card); border-radius:12px; padding:8px 10px;
    flex:1; min-width:220px; max-width:360px
  }
  .search input{background:transparent;border:none;outline:none;color:var(--ink);width:100%}

  .btn, .btn-sm{
    border:1px solid var(--line); background:var(--card); color:var(--ink);
    border-radius:10px; padding:10px 12px; font-weight:700; font-size:.9rem; cursor:pointer;
    box-shadow:var(--shadow)
  }
.btn:hover:not(.btn-primary),
.btn-sm:hover { background: var(--soft); }

.btn-primary{
  background:#111827; color:#fff; border-color:#111827;
}
.btn-primary:hover{
  background:#0f172a; /* mantém dark no hover */
  border-color:#0f172a;
  filter:brightness(1.03);
}


  .card{
    border:1px solid var(--line); background:var(--card);
    border-radius:14px; padding:14px; margin-bottom:12px; box-shadow:var(--shadow)
  }
  .card-head{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
  .ver{font-weight:900;font-size:1.05rem}
  .sep{opacity:.4}
  .when{color:var(--muted);font-weight:700}
  .title{font-weight:800}
  .badge{
    display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:.15rem .5rem;
    font-size:.75rem;font-weight:800;background:var(--badge); color:#0f172a; border:1px solid #dbeafe;
  }
  .high{margin:.35rem 0 0;color:var(--muted)}
  .list{margin:.5rem 0 0;padding-left:1.1rem}
  .list li{margin:.25rem 0}
  .tag{
    font-size:.72rem; border:1px solid var(--line); padding:.05rem .4rem; border-radius:6px;
    margin-right:.4rem; opacity:.95; background:#f8fafc;
  }
  .tag.novo{background:#ecfdf5; border-color:#bbf7d0}
  .tag.melhoria{background:#eef2ff; border-color:#c7d2fe}
  .tag.correcao{background:#fff7ed; border-color:#fed7aa}
  .anchor{font-size:.8rem;color:#2563eb;text-decoration:underline;cursor:pointer}

  details.release{margin-top:.5rem}
  details.release > summary{
    cursor:pointer; list-style:none; display:inline-flex; gap:8px; align-items:center;
    padding:6px 10px; border-radius:10px; border:1px solid var(--line); background:var(--card);
  }
  details.release > summary::-webkit-details-marker{display:none}
  .divider{height:1px;background:var(--line);margin:12px 0}
  code{background:#f1f5f9;padding:.08rem .3rem;border-radius:6px}

  .empty{padding:18px;border:1px dashed var(--line);border-radius:12px;text-align:center;color:var(--muted)}
  .stack{display:flex;gap:8px;flex-wrap:wrap}

  /* ====== Modal sugestão ====== */
  .modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:rgba(2,6,23,.35);z-index:60}
  .modal.is-open{display:flex}
  .modal-card{
    width:92%; max-width:540px; background:var(--card); color:var(--ink);
    border:1px solid var(--line); border-radius:16px; box-shadow:0 24px 80px rgba(15,23,42,.12);
    padding:18px;
  }
  .modal-card h3{margin:0 0 10px;font-size:1.1rem;font-weight:800}
  .grid{display:grid; gap:10px; grid-template-columns:1fr 1fr}
  .grid-1{grid-template-columns:1fr}
  .field{display:flex;flex-direction:column;gap:6px}
  .field label{font-weight:700; font-size:.85rem}
  .field input, .field select, .field textarea{
    border:1px solid var(--line); border-radius:10px; padding:10px; background:#fff; color:var(--ink);
  }
  .modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
  .note{font-size:.85rem;color:var(--muted)}
  .alert{
    margin:10px 0 0; padding:10px 12px; border-radius:10px; border:1px solid var(--line);
    background:#f8fafc; color:var(--ink);
  }
  .alert.ok{background:#ecfdf5;border-color:#bbf7d0}
  .alert.err{background:#fef2f2;border-color:#fecaca}
</style>

<div class="page-wrap">
  <div class="hero">
    <div class="stack" style="justify-content:space-between;align-items:center">
      <div>
        <h1>Atualizações</h1>
        <p>Acompanhe as melhorias, correções e novidades da plataforma.</p>
      </div>
      <button class="btn btn-primary" id="btnOpenSuggest">Envie sua sugestão para próxima release</button>
    </div>
  </div>

  <?php if(!is_null($feedbackOk)): ?>
    <div class="alert <?= $feedbackOk ? 'ok' : 'err' ?>">
      <?= htmlspecialchars($feedbackMsg) ?>
    </div>
  <?php endif; ?>

  <!-- Toolbar -->
  <div class="toolbar">
    <div class="chip" data-chip data-type="all" data-active="1">Tudo</div>
    <div class="chip" data-chip data-type="novo">Novidades</div>
    <div class="chip" data-chip data-type="melhoria">Melhorias</div>
    <div class="chip" data-chip data-type="correcao">Correções</div>

    <div class="search">
      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true">
        <circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/>
      </svg>
      <input id="q" type="text" placeholder="Buscar por palavra-chave…">
    </div>

    <div class="stack">
      <button class="btn-sm" id="expandAll">Expandir</button>
      <button class="btn-sm" id="collapseAll">Recolher</button>
    </div>
  </div>

  <div id="list">
    <?php if (empty($RELEASES)): ?>
      <div class="empty">Nenhuma release cadastrada ainda.</div>
    <?php else: ?>
      <?php
      usort($RELEASES, function($a,$b){ return strcmp($b['date'].$b['version'], $a['date'].$a['version']); });
      foreach ($RELEASES as $rel):
        $vid = 'v'.str_replace(['.',' '], ['-',''], strtolower($rel['version']));
      ?>
      <div class="card release-card" id="<?= htmlspecialchars($vid) ?>"
           data-haystack="<?= htmlspecialchars(strtolower($rel['version'].' '.$rel['title'].' '.$rel['highlights'].' '.implode(' ', array_map(fn($i)=>$i['text'],$rel['items'])))) ?>">
        <div class="card-head">
          <div class="ver">Versão <?= htmlspecialchars($rel['version']) ?></div>
          <span class="sep">•</span>
          <div class="when"><?= br_date($rel['date']) ?></div>
          <span class="sep">•</span>
          <div class="title"><?= htmlspecialchars($rel['title']) ?></div>
          <?= channel_badge($rel['channel']) ?>
          <div class="stack" style="margin-left:auto">
            <a class="anchor" data-copy href="#<?= htmlspecialchars($vid) ?>" title="Copiar link direto">#</a>
          </div>
        </div>
        <?php if(!empty($rel['highlights'])): ?>
          <div class="high"><?= $rel['highlights'] ?></div>
        <?php endif; ?>
        <details class="release">
          <summary>Ver detalhes</summary>
          <ul class="list">
            <?php foreach ($rel['items'] as $it): ?>
              <?php
                $t = $it['type'];
                $tLabel = $t==='novo'?'Novidade':($t==='melhoria'?'Melhoria':($t==='correcao'?'Correção':strtoupper($t)));
              ?>
              <li data-item-type="<?= htmlspecialchars($t) ?>">
                <span class="tag <?= htmlspecialchars($t) ?>"><?= $tLabel ?></span>
                <span><?= $it['text'] ?></span>
              </li>
            <?php endforeach; ?>
          </ul>
        </details>
      </div>
      <?php endforeach; ?>
    <?php endif; ?>
  </div>
</div>

<!-- Modal de Sugestão -->
<div id="suggestModal" class="modal" aria-hidden="true">
  <div class="modal-card" role="dialog" aria-modal="true" aria-labelledby="sug-title">
    <h3 id="sug-title">Sugestão para próxima release</h3>
    <form method="post" id="suggestForm" novalidate>
      <input type="hidden" name="__action" value="suggest">
      <div class="grid">
        <div class="field">
          <label for="name">Seu nome</label>
          <input type="text" id="name" name="name" required value="<?= htmlspecialchars($_POST['name'] ?? '') ?>">
        </div>
        <div class="field">
          <label for="email">Seu e-mail</label>
          <input type="email" id="email" name="email" required value="<?= htmlspecialchars($_POST['email'] ?? '') ?>">
        </div>
      </div>
      <div class="grid">
        <div class="field">
          <label for="type">Tipo</label>
          <select id="type" name="type">
            <option value="">Não especificar</option>
            <option value="novidade"   <?= (($_POST['type'] ?? '')==='novidade')?'selected':''; ?>>Novidade</option>
            <option value="melhoria"   <?= (($_POST['type'] ?? '')==='melhoria')?'selected':''; ?>>Melhoria</option>
            <option value="correcao"   <?= (($_POST['type'] ?? '')==='correcao')?'selected':''; ?>>Correção</option>
          </select>
        </div>
        <div class="field">
          <label for="rel">Versão (opcional)</label>
          <input type="text" id="rel" name="rel" placeholder="ex.: 1.2.x" value="<?= htmlspecialchars($_POST['rel'] ?? '') ?>">
        </div>
      </div>
      <div class="grid grid-1">
        <div class="field">
          <label for="message">Mensagem</label>
          <textarea id="message" name="message" rows="5" required placeholder="Descreva sua sugestão ou problema..."><?= htmlspecialchars($_POST['message'] ?? '') ?></textarea>
        </div>
      </div>
      <div class="modal-actions">
        <button type="button" class="btn" id="btnCloseSuggest">Cancelar</button>
        <button type="submit" class="btn btn-primary">Enviar sugestão</button>
      </div>
    </form>
  </div>
</div>

<script>
(function(){
  const $ = (s,el=document)=>el.querySelector(s);
  const $$ = (s,el=document)=>Array.from(el.querySelectorAll(s));

  // Chips e filtro
  const chips = $$('[data-chip]');
  const input = $('#q');
  const cards = $$('#list .release-card');

  function activeType(){ return (chips.find(c=>c.dataset.active==='1')?.dataset.type)||'all'; }
  function setActive(type){ chips.forEach(c=>c.dataset.active = (c.dataset.type===type?'1':'0')); }
  function filter(){
    const type = activeType();
    const q = (input.value||'').trim().toLowerCase();
    cards.forEach(card=>{
      const text = (card.getAttribute('data-haystack')||'');
      const matchText = !q || text.includes(q);
      let matchType = true;
      if (type!=='all'){
        const has = $$('li[data-item-type]', card).some(li => li.dataset.itemType === type);
        matchType = has;
      }
      card.style.display = (matchText && matchType) ? '' : 'none';
    });
  }
  chips.forEach(c=>c.addEventListener('click', ()=>{ setActive(c.dataset.type); filter(); }));
  input.addEventListener('input', filter);
  $('#expandAll')?.addEventListener('click', ()=> $$('details.release').forEach(d=>d.open=true));
  $('#collapseAll')?.addEventListener('click', ()=> $$('details.release').forEach(d=>d.open=false));

  // Copiar link da versão
  $$('#list .anchor[data-copy]').forEach(a=>{
    a.addEventListener('click', (ev)=>{
      ev.preventDefault();
      const id = a.getAttribute('href');
      if (!id) return;
      const url = location.origin + location.pathname + location.search.split('#')[0] + id;
      navigator.clipboard.writeText(url).then(()=>{
        a.textContent = 'Copiado!';
        setTimeout(()=> a.textContent = '#', 900);
      }).catch(()=>{ location.hash = id; });
    });
  });

  // Modal sugestão
  const modal = $('#suggestModal');
  const openBtn = $('#btnOpenSuggest');
  const closeBtn = $('#btnCloseSuggest');

  function openModal(){ modal.classList.add('is-open'); modal.setAttribute('aria-hidden','false'); }
  function closeModal(){ modal.classList.remove('is-open'); modal.setAttribute('aria-hidden','true'); }

  openBtn?.addEventListener('click', openModal);
  closeBtn?.addEventListener('click', closeModal);
  modal?.addEventListener('click', (e)=>{ if (e.target === modal) closeModal(); });
  document.addEventListener('keydown', (e)=>{ if (e.key === 'Escape') closeModal(); });

  // Se houve erro de validação, mantém modal aberto
  <?php if (!is_null($feedbackOk) && !$feedbackOk): ?>
    openModal();
  <?php endif; ?>

  // Hash: abre detalhes
  if (location.hash) {
    const t = document.querySelector(location.hash);
    if (t) { const d = t.querySelector('details.release'); if (d) d.open = true; t.scrollIntoView({behavior:'smooth', block:'start'}); }
  }
})();
</script>
