<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>CADASTRO DE PACIENTES - CAPS II</title>
  <meta name="theme-color" content="#1e3a8a"/>
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <meta name="apple-mobile-web-app-title" content="CAPS II Pacientes">
  <link rel="manifest" href="manifest.json">
  <link rel="apple-touch-icon" sizes="192x192" href="icon-192x192.png">
  <link rel="apple-touch-icon" sizes="512x512" href="icon-512x512.png">
  <link rel="icon" sizes="192x192" href="icon-192x192.png" type="image/png">
  <link rel="icon" sizes="512x512" href="icon-512x512.png" type="image/png">

  <!-- ==================== BIBLIOTECAS ==================== -->
  <script src="https://sql.js.org/dist/sql-wasm.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.8.2/jspdf.plugin.autotable.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>

  <style>
    :root {
      --primary-dark: #1e3a8a;
      --primary: #2563eb;
      --primary-light: #60a5fa;
      --primary-bg: #eff6ff;
      --stripe-light: #e0f2fe;
      --stripe-medium: #06b6d4;
      --stripe-dark: #0c4a6e;
      --laser-glow: #00d4ff;
      --edit-btn: #2563eb;
      --success: #10b981;
      --danger: #dc2626;
      --gray-light: #f8fafc;
      --gray-medium: #e2e8f0;
      --text-dark: #1f2937;
      --text-light: #f9fafb;
    }
    body { font-family: Arial, Helvetica, sans-serif; margin: 0; padding: 0; background: var(--primary-bg); color: var(--text-dark); overflow-x: hidden; }
    .container { max-width: 1100px; margin: 0 auto; background: white; padding: 10px; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.07); }
    .header { background: white; padding: 0; position: relative; height: 150px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
    .header h1 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: clamp(1.3rem, 3vw, 1.6rem); font-weight: bold; color: var(--primary-dark); text-transform: uppercase; text-align: center; margin: 0; z-index: 3; white-space: nowrap; }
    .logo-container { position: absolute; right: 20px; bottom: 10px; z-index: 3; }
    .logo-right { height: 90px; width: auto; display: block; }
    .logo-container::before {
      content: ''; position: absolute; top: -8px; left: -8px; right: -8px; bottom: -8px;
      border: 2px solid transparent; border-radius: 10px;
      background: linear-gradient(90deg, transparent, var(--laser-glow), transparent) border-box;
      -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
      -webkit-mask-composite: xor; mask-composite: exclude;
      animation: laserRotate 12s linear infinite; opacity: 0.3; pointer-events: none;
    }
    @keyframes laserRotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
    .header::after {
      content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 50px;
      background: linear-gradient(to bottom, var(--stripe-light) 0%, var(--stripe-light) 35%, var(--stripe-medium) 35%, var(--stripe-medium) 70%, var(--stripe-dark) 70%, var(--stripe-dark) 100%);
      z-index: 1; pointer-events: none;
    }
    .header-bottom-area { background: var(--gray-light); padding: 0.4rem 1rem 0.6rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.8rem; border-bottom: 1px solid var(--gray-medium); position: relative; }
   
    #botoesSecretos {
      display: none;
      flex-direction: column;
      gap: 6px;
      position: absolute;
      right: 10px;
      top: 50%;
      transform: translateY(-50%);
      z-index: 100;
    }
    .btn-secreto {
      padding: 0.55rem 1.1rem;
      border: none;
      border-radius: 8px;
      color: white;
      font-weight: bold;
      cursor: pointer;
      box-shadow: 0 4px 10px rgba(0,0,0,0.2);
      font-size: 0.85rem;
      background: #dc2626;
      width: 180px;
      text-align: left;
    }
    .btn-secreto:hover { background: #b91c1c; }
    .btn-exposto { padding: 0.55rem 1.3rem; border: none; border-radius: 8px; color: white; font-weight: bold; cursor: pointer; font-size: 0.95rem; box-shadow: 0 4px 10px rgba(0,0,0,0.2); margin-right: 8px; }
    #btnSincronizarExposto { background: #7c3aed; }
    #btnSincronizarExposto:hover { background: #6d28d9; }
    #btnExportarPDFExposto { background: #dc2626; }
    #btnExportarPDFExposto:hover { background: #b91c1c; }
    .modo-consulta-info { text-align: center; padding: 0.3rem 0; font-size: 0.7rem; color: #bbb; background: var(--gray-light); border-bottom: 1px solid #eee; display: none; }
    .search-container { max-width: 900px; margin: 15px auto 10px; padding: 0 1rem; }
    #busca { width: 100%; padding: 1.1rem 1.5rem; font-size: 1.15rem; border: 3px solid var(--primary); border-radius: 12px; background: white; box-shadow: 0 4px 12px rgba(37,99,235,0.15); box-sizing: border-box; }
    #busca:focus { border-color: var(--primary-light); box-shadow: 0 0 0 6px rgba(96,165,250,0.3); outline: none; }
    .form-area { padding: 0.3rem 1rem; max-width: 900px; margin: 10px auto 0; }
    .form-grid { display: grid; grid-template-columns: 130px 1.8fr 220px; gap: 0.4rem 0.8rem; align-items: end; border: 1.5px solid var(--primary); border-radius: 8px; padding: 0.8rem; background: var(--primary-bg); }
    .form-group { display: flex; flex-direction: column; gap: 0.1rem; }
    .form-group input { padding: 0.45rem 0.7rem; border: 1px solid var(--primary-light); border-radius: 6px; font-size: 0.93rem; background: white; }
    .form-group input[readonly] { background: #dbeafe; color: #4b5563; cursor: not-allowed; }
    .action-buttons { display: flex; flex-direction: row; gap: 0.8rem; justify-content: flex-end; align-items: center; }
    .main-btn { padding: 0.55rem 1.3rem; background: var(--primary); color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; font-size: 0.96rem; white-space: nowrap; }
    .main-btn:hover { background: #1d4ed8; }
    .cancel-btn { background: #718096; }
    .extra-fields { grid-column: 1 / -1; display: grid; grid-template-columns: 200px 1fr 170px 190px; gap: 0.4rem 0.8rem; margin-top: 0.4rem; }
    #resultado { padding: 0.2rem 1rem; margin-top: 0.2rem; overflow-x: auto; min-height: 200px; }
    table { width: 100%; border-collapse: collapse; font-size: 0.79rem; line-height: 1.35; }
    th, td { border: 1px solid var(--gray-medium); padding: 0.3rem 0.5rem; text-align: left; vertical-align: middle; word-wrap: break-word; }
    th { background: var(--primary-dark); color: var(--text-light); font-size: 0.83rem; font-weight: bold; }
    tr:nth-child(even) { background: var(--gray-light); }
    .action-cell { white-space: nowrap; text-align: right; }
    .action-btn { padding: 0.25rem 0.7rem; border: none; border-radius: 5px; cursor: pointer; color: white; font-size: 0.8rem; font-weight: bold; box-shadow: 0 2px 4px rgba(0,0,0,0.15); }
    .edit-btn { background: var(--edit-btn); }
    .delete-btn { background: var(--danger); }
    .loading-msg { color: var(--primary); font-weight: bold; text-align: center; padding: 20px; }
    #banner-edicao { background: #dbeafe; border: 2px solid var(--primary-light); border-radius: 8px; padding: 12px; margin-bottom: 12px; text-align: center; font-weight: bold; color: var(--primary-dark); display: none; }
    #senhaScreen { position: fixed; inset: 0; background: var(--primary-dark); color: white; display: flex; flex-direction: column; justify-content: center; align-items: center; z-index: 9999; gap: 30px; text-align: center; padding: 20px; }
    #senhaScreen img { width: 180px; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,0.4); }
    #campoSenha { padding: 16px; width: 320px; max-width: 90%; border-radius: 10px; border: none; font-size: 1.3rem; text-align: center; letter-spacing: 4px; }
    #botaoEntrar { padding: 16px 60px; background: var(--success); color: white; border: none; border-radius: 10px; font-size: 1.4rem; font-weight: bold; cursor: pointer; }
    #botaoEntrar:hover { background: #059669; }
    #senhaErro { color: #fca5a5; background: rgba(220, 38, 38, 0.3); padding: 12px 30px; border-radius: 10px; font-weight: bold; display: none; }
    #modalExclusao { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); justify-content: center; align-items: center; z-index: 9999; }
    #modalExclusao .modal-content { background: white; padding: 24px; border: 5px solid var(--danger); border-radius: 12px; text-align: center; max-width: 400px; box-shadow: 0 10px 30px rgba(0,0,0,0.3); }
    #modalExclusao .modal-content p { font-size: 1.1rem; font-weight: bold; margin-bottom: 20px; color: #991b1b; }
    #modalExclusao .modal-buttons { display: flex; gap: 16px; justify-content: center; }
    #modalExclusao .modal-btn { padding: 10px 24px; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; }
    #modalExclusao .modal-btn.sim { background: var(--danger); color: white; }
    #modalExclusao .modal-btn.nao { background: #718096; color: white; }
    #toast { position: fixed; top: 80px; left: 50%; transform: translateX(-50%); background: var(--success); color: white; padding: 14px 30px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.2); font-weight: bold; z-index: 1000; opacity: 0; transition: opacity 0.4s ease; max-width: 90%; text-align: center; font-size: 1rem; }
    #toast.show { opacity: 1; }
    #syncProgress { position: fixed; top: 0; left: 0; width: 100%; height: 5px; background: #e0e0e0; z-index: 9999; display: none; }
    #syncBar { height: 100%; width: 0%; background: var(--primary); transition: width 0.4s ease; }
    .paciente-card { background: #ffffff; border: 1px solid var(--gray-medium); border-radius: 10px; padding: 14px; margin: 12px 8px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); font-size: 0.98rem; }
    .paciente-card strong { color: var(--primary-dark); }
    .paciente-card .campo { margin-bottom: 10px; display: flex; flex-direction: column; }
    .paciente-card .campo-label { font-size: 0.82rem; color: #718096; margin-bottom: 3px; }
    .paciente-card .acoes { margin-top: 12px; display: flex; gap: 10px; justify-content: flex-end; }
    .paginacao { text-align: center; margin: 30px 0 20px; padding: 12px; font-size: 1rem; background: var(--gray-light); border-radius: 8px; }
    .paginacao button { padding: 10px 18px; margin: 0 6px; border: none; border-radius: 8px; background: var(--primary); color: white; cursor: pointer; font-weight: bold; }
    .paginacao button:disabled { background: #a0aec0; cursor: not-allowed; }
    #totalPacientes { font-size: 0.85rem; color: #64748b; font-weight: 500; margin-left: 10px; }
  </style>

  <script>
    // ==================== CONFIGURAÇÕES GLOBAIS ====================
    const SENHA_FULL = "568700a";
    const SENHA_CONSULTA = "785600b";
    let acessoNivel = "none";
    let db = null;
    let SQL = null;
    let editingId = null;
    let editingOnlyPhone = false;
    let idParaExcluir = null;

    const DB_NAME = "PacientesCAPSBarraDoCorda";
    const STORE_NAME = "bancoPrincipal";
    const KEY = "sqlite_db";
    const SERVER_KEY = "Melancia@78";

    const isMobileDevice = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0) || (window.innerWidth <= 768);
    const itemsPerPage = isMobileDevice ? 200 : 500;
    let currentPage = 1;
    let currentFiltro = "";
    let totalResults = 0;

    // ==================== FUNÇÕES AUXILIARES ====================
    function mostrarProgresso(porcentagem) {
      const progress = document.getElementById('syncProgress');
      const bar = document.getElementById('syncBar');
      if (progress && bar) {
        progress.style.display = 'block';
        bar.style.width = porcentagem + '%';
        if (porcentagem === 100) setTimeout(() => { progress.style.display = 'none'; bar.style.width = '0%'; }, 800);
      }
    }

    function mostrarToast(mensagem, cor = null) {
      const toast = document.getElementById("toast");
      if (toast) {
        toast.textContent = mensagem;
        if (cor) toast.style.background = cor;
        toast.classList.add("show");
        setTimeout(() => {
          toast.classList.remove("show");
          if (cor) toast.style.background = '';
        }, 5000);
      }
    }

    function scrollToForm() {
      const formArea = document.querySelector(".form-area");
      if (formArea) {
        formArea.scrollIntoView({ behavior: "smooth", block: "center" });
      }
    }

    // ==================== IMPORTAÇÃO E EXPORTAÇÃO ====================
    function importarCSV() {
      if (acessoNivel !== "full") return alert("Apenas modo Full pode importar.");
      const input = document.createElement('input');
      input.type = 'file';
      input.accept = '.csv';
      input.onchange = e => {
        const file = e.target.files[0];
        if (!file) return;
        const reader = new FileReader();
        reader.onload = function(ev) {
          try {
            const texto = ev.target.result;
            const linhas = texto.split('\n').filter(l => l.trim());
            if (linhas.length < 2) return alert("Arquivo CSV inválido.");
            db.run("DELETE FROM pacientes");
            const insert = db.prepare("INSERT INTO pacientes (id_ficha, nome, sus, mae, nascimento, telefone, updated_at) VALUES (?,?,?,?,?,?,?)");
            linhas.slice(1).forEach(l => {
              const cols = l.split(';');
              insert.run([cols[0]?.trim(), cols[1]?.trim().toUpperCase(), cols[2]?.trim() || null, cols[3]?.trim().toUpperCase() || null, cols[4]?.trim() || null, cols[5]?.trim().replace(/\D/g,'') || null, new Date().toISOString()]);
            });
            insert.free();
            salvarNoIndexedDB();
            mostrarToast("✅ Importação CSV concluída!");
            atualizarTotalPacientes();
            mostrarPacientes("");
          } catch (err) { alert("Erro ao importar CSV: " + err.message); }
        };
        reader.readAsText(file);
      };
      input.click();
    }

    function importarExcel() {
      if (acessoNivel !== "full") return alert("Apenas modo Full pode importar.");
      const input = document.createElement('input');
      input.type = 'file';
      input.accept = '.xlsx,.xls';
      input.onchange = e => {
        const file = e.target.files[0];
        if (!file) return;
        const reader = new FileReader();
        reader.onload = function(ev) {
          try {
            const data = new Uint8Array(ev.target.result);
            const workbook = XLSX.read(data, { type: 'array' });
            const sheet = workbook.Sheets[workbook.SheetNames[0]];
            const json = XLSX.utils.sheet_to_json(sheet);
            db.run("DELETE FROM pacientes");
            const insert = db.prepare("INSERT INTO pacientes (id_ficha, nome, sus, mae, nascimento, telefone, updated_at) VALUES (?,?,?,?,?,?,?)");
            json.forEach(row => {
              insert.run([
                row.ID || row.id || row["ID da Ficha"] || "",
                (row.Nome || row.nome || "").toUpperCase(),
                row.SUS || row.sus || null,
                (row.Mãe || row.mae || "").toUpperCase(),
                row.Nascimento || row.nascimento || null,
                (row.Telefone || row.telefone || "").replace(/\D/g,'') || null,
                new Date().toISOString()
              ]);
            });
            insert.free();
            salvarNoIndexedDB();
            mostrarToast("✅ Importação Excel concluída!");
            atualizarTotalPacientes();
            mostrarPacientes("");
          } catch (err) { alert("Erro ao importar Excel: " + err.message); }
        };
        reader.readAsArrayBuffer(file);
      };
      input.click();
    }

    function exportarExcel() {
      if (!db) return alert("Banco não carregado.");
      const stmt = db.prepare("SELECT * FROM pacientes ORDER BY CAST(id_ficha AS INTEGER)");
      let data = [];
      while (stmt.step()) {
        const r = stmt.getAsObject();
        data.push({
          "ID da Ficha": r.id_ficha,
          "Nome Completo": r.nome,
          "Cartão SUS": r.sus,
          "Nome da Mãe": r.mae,
          "Data de Nascimento": r.nascimento,
          "Telefone": r.telefone,
          "Última Atualização": r.updated_at
        });
      }
      stmt.free();
      const ws = XLSX.utils.json_to_sheet(data);
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, "Pacientes");
      XLSX.writeFile(wb, `Pacientes_CAPS_II_${new Date().toISOString().slice(0,10)}.xlsx`);
      mostrarToast("✅ Excel exportado!");
    }

    function exportarPDF() {
      if (!db) return alert("Banco não carregado.");
      const { jsPDF } = window.jspdf;
      const doc = new jsPDF('l', 'pt', 'a4');
      const stmt = db.prepare("SELECT id_ficha, nome, sus, mae, nascimento, telefone FROM pacientes ORDER BY CAST(id_ficha AS INTEGER)");
      let rows = [];
      while (stmt.step()) {
        const r = stmt.getAsObject();
        rows.push([r.id_ficha, r.nome, r.sus || "-", r.mae || "-", r.nascimento || "-", r.telefone || "-"]);
      }
      stmt.free();
      doc.setFontSize(16);
      doc.text("CADASTRO DE PACIENTES - CAPS II BARRA DO CORDA", 40, 40);
      doc.setFontSize(10);
      doc.text(`Data: ${new Date().toLocaleDateString('pt-BR')}`, 40, 60);
      doc.autoTable({
        head: [["ID Ficha", "Nome Completo", "SUS", "Mãe", "Nascimento", "Telefone"]],
        body: rows,
        startY: 80,
        styles: { fontSize: 9 },
        headStyles: { fillColor: [30, 58, 138] }
      });
      doc.save(`Pacientes_CAPS_II_${new Date().toISOString().slice(0,10)}.pdf`);
      mostrarToast("✅ PDF exportado com sucesso!");
    }

    function exportarSQLite() {
      if (!db) return alert("Banco não carregado.");
      const data = db.export();
      const blob = new Blob([data], { type: 'application/octet-stream' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = `backup_caps_${new Date().toISOString().slice(0,10)}.sqlite`;
      a.click();
      URL.revokeObjectURL(url);
      mostrarToast("✅ SQLite exportado!");
    }

    function limparBanco() {
      if (acessoNivel !== "full") return alert("Apenas modo Full.");
      if (!confirm("⚠️ APAGAR TODOS OS PACIENTES? Esta ação não pode ser desfeita!")) return;
      db.run("DELETE FROM pacientes");
      salvarNoIndexedDB();
      mostrarToast("🗑️ Banco limpo!", "#ef4444");
      atualizarTotalPacientes();
      mostrarPacientes("");
    }

    function forcarBackup() {
      enviarParaMesmoDiretorio();
      mostrarToast("🔄 Backup forçado enviado.");
    }

    // ==================== SINCRONIZAÇÃO E BANCO ====================
    async function carregarBancoDoServidor() {
      mostrarProgresso(10);
      const div = document.getElementById("resultado");
      if (div) div.innerHTML = '<div class="loading-msg">Sincronizando com o banco central...</div>';
      try {
        db.run("DELETE FROM pacientes");
        const resp = await fetch('backup_latest.csv?t=' + Date.now(), { cache: 'no-cache' });
        if (!resp.ok) throw new Error("Falha ao baixar backup_latest.csv");
        const texto = await resp.text();
        const linhas = texto.split('\n').filter(l => l.trim());
        if (linhas.length > 1) {
          const rows = linhas.slice(1).map(l => {
            const cols = l.split(';');
            return {
              id_ficha: cols[0]?.trim(),
              nome: cols[1]?.trim().toUpperCase(),
              sus: cols[2]?.trim() || null,
              mae: cols[3]?.trim().toUpperCase() || null,
              nascimento: cols[4]?.trim() || null,
              telefone: cols[5]?.trim().replace(/\D/g,'') || null,
              updated_at: cols[6]?.trim() || new Date().toISOString()
            };
          });
          const insert = db.prepare("INSERT INTO pacientes (id_ficha, nome, sus, mae, nascimento, telefone, updated_at) VALUES (?,?,?,?,?,?,?)");
          rows.forEach(r => insert.run([r.id_ficha, r.nome, r.sus, r.mae, r.nascimento, r.telefone, r.updated_at]));
          insert.free();
        }
        salvarNoIndexedDB();
        mostrarProgresso(100);
        mostrarToast("Banco sincronizado com sucesso.");
        atualizarTotalPacientes();
        mostrarPacientes("");
      } catch (err) {
        mostrarProgresso(100);
        mostrarToast("Não foi possível sincronizar com o servidor.", "#f59e0b");
        atualizarTotalPacientes();
        mostrarPacientes("");
      }
    }

    async function carregarDoIndexedDB(SQL) {
      return new Promise((resolve) => {
        const req = indexedDB.open(DB_NAME, 1);
        req.onupgradeneeded = e => e.target.result.createObjectStore(STORE_NAME);
        req.onsuccess = e => {
          const tx = e.target.result.transaction(STORE_NAME, "readonly");
          const get = tx.objectStore(STORE_NAME).get(KEY);
          get.onsuccess = () => resolve(get.result ? new SQL.Database(new Uint8Array(get.result)) : null);
        };
        req.onerror = () => resolve(null);
      });
    }

    function salvarNoIndexedDB() {
      if (!db) return;
      const data = db.export();
      const req = indexedDB.open(DB_NAME, 1);
      req.onupgradeneeded = e => e.target.result.createObjectStore(STORE_NAME);
      req.onsuccess = e => {
        const tx = e.target.result.transaction(STORE_NAME, "readwrite");
        tx.objectStore(STORE_NAME).put(Array.from(data), KEY);
      };
    }

    async function enviarParaMesmoDiretorio() {
      if (!navigator.onLine || !db) return;
      const stmt = db.prepare("SELECT * FROM pacientes ORDER BY CAST(id_ficha AS INTEGER)");
      let csv = "ID;Nome;SUS;Mãe;Nascimento;Telefone;updated_at\n";
      while (stmt.step()) {
        const r = stmt.getAsObject();
        csv += `${r.id_ficha};${(r.nome||'').replace(/;/g,'')};${r.sus||''};${(r.mae||'').replace(/;/g,'')};${r.nascimento||''};${r.telefone||''};${r.updated_at||''}\n`;
      }
      stmt.free();
      const form = new FormData();
      form.append('chave', SERVER_KEY);
      form.append('csv', csv);
      try {
        await fetch('salvar-backup.php', { method: 'POST', body: form });
      } catch (err) {
        console.error("Erro ao enviar backup:", err);
      }
    }

    // ==================== FUNÇÕES DE PACIENTES ====================
    function atualizarTotalPacientes() {
      const total = db ? db.exec("SELECT COUNT(*) AS total FROM pacientes")[0].values[0][0] : 0;
      const el = document.getElementById("totalPacientes");
      if (el) el.textContent = `Total: ${total} pacientes`;
    }

    function limparFormulario() {
      document.getElementById("id_ficha").value = "";
      document.getElementById("nome").value = "";
      document.getElementById("sus").value = "";
      document.getElementById("mae").value = "";
      document.getElementById("nascimento").value = "";
      document.getElementById("telefone").value = "";
      document.getElementById("banner-edicao").style.display = "none";
      document.getElementById("btnAcao").textContent = "Adicionar Paciente";
      document.getElementById("btnCancelar").style.display = "none";
      editingId = null;
      editingOnlyPhone = false;
    }

    function formatarDataISOparaBR(iso) {
      if (!iso || !iso.includes('-')) return '-';
      const [y, m, d] = iso.split('-');
      return `${d.padStart(2,'0')}/${m.padStart(2,'0')}/${y}`;
    }

    function calcularIdade(nasc) {
      if (!nasc) return '-';
      const hoje = new Date();
      const dt = new Date(nasc);
      if (isNaN(dt)) return '-';
      let idade = hoje.getFullYear() - dt.getFullYear();
      if (hoje.getMonth() < dt.getMonth() || (hoje.getMonth() === dt.getMonth() && hoje.getDate() < dt.getDate())) idade--;
      return idade >= 0 ? idade : '-';
    }

    function editarPaciente(id) {
      if (acessoNivel !== "full") return alert("Acesso restrito - modo consulta.");
      const stmt = db.prepare("SELECT * FROM pacientes WHERE id = ?");
      stmt.bind([id]);
      if (stmt.step()) {
        const r = stmt.getAsObject();
        editingId = id;
        editingOnlyPhone = false;
        document.getElementById("id_ficha").value = r.id_ficha;
        document.getElementById("nome").value = r.nome;
        document.getElementById("sus").value = r.sus || "";
        document.getElementById("mae").value = r.mae || "";
        document.getElementById("nascimento").value = r.nascimento || "";
        document.getElementById("telefone").value = r.telefone || "";
        document.getElementById("btnAcao").textContent = "Salvar Edição";
        document.getElementById("btnCancelar").style.display = "inline-block";
        document.getElementById("banner-edicao").innerHTML = `Editando paciente: <strong>${r.nome}</strong> (ID da Ficha: <strong>${r.id_ficha}</strong>) <button onclick="cancelarEdicao()">Cancelar</button>`;
        document.getElementById("banner-edicao").style.display = "block";
        scrollToForm();
      }
      stmt.free();
    }

    function editarTelefoneConsulta(id) {
      if (acessoNivel !== "consulta" && acessoNivel !== "full") return;
      const stmt = db.prepare("SELECT * FROM pacientes WHERE id = ?");
      stmt.bind([id]);
      if (stmt.step()) {
        const r = stmt.getAsObject();
        editingId = id;
        editingOnlyPhone = true;
        document.getElementById("id_ficha").value = r.id_ficha;
        document.getElementById("nome").value = r.nome; document.getElementById("nome").readOnly = true;
        document.getElementById("sus").value = r.sus || ""; document.getElementById("sus").readOnly = true;
        document.getElementById("mae").value = r.mae || ""; document.getElementById("mae").readOnly = true;
        document.getElementById("nascimento").value = r.nascimento || ""; document.getElementById("nascimento").readOnly = true;
        document.getElementById("telefone").value = r.telefone || ""; document.getElementById("telefone").readOnly = false;
        document.getElementById("btnAcao").textContent = "Salvar Telefone";
        document.getElementById("btnCancelar").style.display = "inline-block";
        document.getElementById("banner-edicao").innerHTML = `Editando <strong>TELEFONE</strong> de: <span>${r.nome}</span> (ID da Ficha: ${r.id_ficha}) <button onclick="cancelarEdicao()">Cancelar</button>`;
        document.getElementById("banner-edicao").style.display = "block";
        scrollToForm();
      }
      stmt.free();
    }

    function cancelarEdicao() {
      limparFormulario();
    }

    function salvarPaciente() {
      const isPhoneOnly = document.getElementById("btnAcao").textContent === "Salvar Telefone";
      if (!isPhoneOnly && acessoNivel !== "full") return alert("Acesso restrito - modo consulta.");
      const id_ficha = document.getElementById("id_ficha").value.trim();
      const nome = document.getElementById("nome").value.trim().toUpperCase();
      if (!id_ficha) return alert("O campo ID da Ficha é obrigatório!");
      if (!nome && !isPhoneOnly) return alert("Nome completo é obrigatório!");
      const sus = document.getElementById("sus").value.replace(/\D/g, '') || null;
      const mae = document.getElementById("mae").value.trim().toUpperCase() || null;
      const nascimento = document.getElementById("nascimento").value || null;
      const telefone = document.getElementById("telefone").value.replace(/\D/g, '') || null;
      const agora = new Date().toISOString();
      try {
        if (editingId !== null) {
          const stmt = db.prepare("SELECT 1 FROM pacientes WHERE id_ficha = ? AND id != ?");
          stmt.bind([id_ficha, editingId]);
          if (stmt.step()) return alert("Este ID da Ficha já está sendo usado por outro paciente!");
          stmt.free();
          if (isPhoneOnly) {
            db.run("UPDATE pacientes SET telefone = ?, updated_at = ? WHERE id = ?", [telefone, agora, editingId]);
          } else {
            db.run("UPDATE pacientes SET id_ficha = ?, nome = ?, sus = ?, mae = ?, nascimento = ?, telefone = ?, updated_at = ? WHERE id = ?",
                   [id_ficha, nome, sus, mae, nascimento, telefone, agora, editingId]);
          }
        } else {
          const stmt = db.prepare("SELECT 1 FROM pacientes WHERE id_ficha = ?");
          stmt.bind([id_ficha]);
          if (stmt.step()) return alert("Este ID da Ficha já existe! Escolha outro número.");
          stmt.free();
          db.run("INSERT INTO pacientes (id_ficha, nome, sus, mae, nascimento, telefone, updated_at) VALUES (?,?,?,?,?,?,?)",
                 [id_ficha, nome, sus, mae, nascimento, telefone, agora]);
        }
        salvarNoIndexedDB();
        limparFormulario();
        mostrarPacientes(currentFiltro);
        enviarParaMesmoDiretorio();
        atualizarTotalPacientes();
        const msg = isPhoneOnly ? "Telefone atualizado com sucesso!" : (editingId ? "Paciente atualizado com sucesso!" : "Paciente adicionado com sucesso!");
        mostrarToast(msg + " Backup realizado.");
      } catch (e) {
        alert("Erro ao salvar: " + e.message);
      }
    }

    function abrirModalExclusao(id) {
      idParaExcluir = id;
      document.getElementById("modalExclusao").style.display = "flex";
    }

    function confirmarExclusao() {
      if (acessoNivel !== "full") return alert("Acesso restrito - modo consulta.");
      db.run("DELETE FROM pacientes WHERE id = ?", [idParaExcluir]);
      salvarNoIndexedDB();
      mostrarPacientes(currentFiltro);
      enviarParaMesmoDiretorio();
      atualizarTotalPacientes();
      document.getElementById("modalExclusao").style.display = "none";
      idParaExcluir = null;
      mostrarToast("Paciente excluído com sucesso! Backup realizado.");
    }

    function cancelarExclusao() {
      document.getElementById("modalExclusao").style.display = "none";
      idParaExcluir = null;
    }

    function contarPacientes(filtro = "") {
      if (!db) return 0;
      let sql = "SELECT COUNT(*) AS total FROM pacientes";
      let params = [];
      if (filtro.trim()) {
        const like = `%${filtro.trim()}%`;
        sql += " WHERE nome LIKE ? OR id_ficha LIKE ? OR sus LIKE ? OR mae LIKE ? OR telefone LIKE ? OR nascimento LIKE ?";
        params.push(like, like, like, like, like, like);
      }
      const stmt = db.prepare(sql);
      stmt.bind(params);
      return stmt.step() ? stmt.getAsObject().total : 0;
    }

    function mostrarPacientes(filtro = "") {
      const div = document.getElementById("resultado");
      if (!db || !div) return;
      if (filtro !== currentFiltro) {
        currentFiltro = filtro;
        currentPage = 1;
      }
      totalResults = contarPacientes(currentFiltro);
      const limit = acessoNivel === "consulta" ? totalResults : itemsPerPage;
      const offset = acessoNivel === "consulta" ? 0 : (currentPage - 1) * itemsPerPage;
      let sql = "SELECT * FROM pacientes";
      let params = [];
      if (currentFiltro.trim()) {
        const like = `%${currentFiltro.trim()}%`;
        sql += " WHERE nome LIKE ? OR id_ficha LIKE ? OR sus LIKE ? OR mae LIKE ? OR telefone LIKE ? OR nascimento LIKE ?";
        params.push(like, like, like, like, like, like);
      }
      sql += " ORDER BY CAST(id_ficha AS INTEGER) LIMIT ? OFFSET ?";
      params.push(limit, offset);
      const stmt = db.prepare(sql);
      stmt.bind(params);
      let html = "";
      if (isMobileDevice) {
        while (stmt.step()) {
          const r = stmt.getAsObject();
          const dataBR = formatarDataISOparaBR(r.nascimento);
          const idade = calcularIdade(r.nascimento);
          const susFmt = r.sus ? r.sus.replace(/(\d{3})(\d{4})(\d{4})(\d{4})/, '$1 $2 $3 $4') : '-';
          const telFmt = r.telefone ? r.telefone.replace(/^(\d{2})(\d{4,5})(\d{4})$/, '($1) $2-$3') : '-';
          html += `<div class="paciente-card">
            <div class="campo"><span class="campo-label">ID da Ficha</span><strong>${r.id_ficha}</strong></div>
            <div class="campo"><span class="campo-label">Nome Completo</span><strong>${r.nome}</strong></div>
            <div class="campo"><span class="campo-label">Cartão SUS</span>${susFmt}</div>
            <div class="campo"><span class="campo-label">Nome da Mãe</span>${r.mae || '-'}</div>
            <div class="campo"><span class="campo-label">Data de Nascimento</span>${dataBR}</div>
            <div class="campo"><span class="campo-label">Idade</span>${idade} anos</div>
            <div class="campo"><span class="campo-label">Telefone</span>${telFmt}`;
          if (acessoNivel === "consulta") html += ` <button onclick="editarTelefoneConsulta(${r.id})" class="edit-btn action-btn">Editar Telefone</button>`;
          html += `</div>`;
          if (acessoNivel === "full") {
            html += `<div class="acoes">
              <button class="edit-btn action-btn" onclick="editarPaciente(${r.id})">Editar Completo</button>
              <button class="delete-btn action-btn" onclick="abrirModalExclusao(${r.id})">Excluir</button>
            </div>`;
          }
          html += `</div>`;
        }
      } else {
        let headers = ["ID da Ficha", "Nome Completo", "Cartão SUS", "Nome da Mãe", "Data de Nascimento", "Idade", "Telefone"];
        if (acessoNivel === "full") headers.push("Ações");
        html += `<table><tr>${headers.map(h => `<th>${h}</th>`).join('')}</tr>`;
        while (stmt.step()) {
          const r = stmt.getAsObject();
          const dataBR = formatarDataISOparaBR(r.nascimento);
          const idade = calcularIdade(r.nascimento);
          const susFmt = r.sus ? r.sus.replace(/(\d{3})(\d{4})(\d{4})(\d{4})/, '$1 $2 $3 $4') : '-';
          const telFmt = r.telefone ? r.telefone.replace(/^(\d{2})(\d{4,5})(\d{4})$/, '($1) $2-$3') : '-';
          html += `<tr>
            <td><strong>${r.id_ficha}</strong></td>
            <td><strong>${r.nome}</strong></td>
            <td>${susFmt}</td>
            <td>${r.mae || '-'}</td>
            <td>${dataBR}</td>
            <td>${idade}</td>
            <td>${telFmt}</td>`;
          if (acessoNivel === "full") {
            html += `<td class="action-cell">
              <button class="edit-btn action-btn" onclick="editarPaciente(${r.id})">Editar</button>
              <button class="delete-btn action-btn" onclick="abrirModalExclusao(${r.id})">Excluir</button>
            </td>`;
          }
          html += `</tr>`;
        }
        html += "</table>";
      }
      stmt.free();
      if (acessoNivel !== "consulta" && totalResults > itemsPerPage) {
        const totalPages = Math.ceil(totalResults / itemsPerPage);
        html += `<div class="paginacao">
          Mostrando ${(currentPage-1)*itemsPerPage + 1} a ${Math.min(currentPage*itemsPerPage, totalResults)} de ${totalResults} pacientes<br><br>`;
        if (totalPages > 1) {
          html += `
            <button onclick="changePage(1)" ${currentPage===1 ? 'disabled' : ''}>Primeira</button>
            <button onclick="changePage(${currentPage-1})" ${currentPage===1 ? 'disabled' : ''}>Anterior</button>
            <button onclick="changePage(${currentPage+1})" ${currentPage===totalPages ? 'disabled' : ''}>Próxima</button>
            <button onclick="changePage(${totalPages})" ${currentPage===totalPages ? 'disabled' : ''}>Última</button>`;
        }
        html += `</div>`;
      }
      div.innerHTML = html || "<p style='color:#e53e3e;text-align:center;'>Nenhum paciente encontrado</p>";
      atualizarTotalPacientes();
    }

    function changePage(page) {
      currentPage = page;
      mostrarPacientes(currentFiltro);
    }

    function aplicarRestricoes() {
      const formArea = document.getElementById("formArea");
      const modoConsultaInfo = document.getElementById("modoConsultaInfo");
      if (acessoNivel === "consulta") {
        if (formArea) formArea.style.display = "none";
        if (modoConsultaInfo) modoConsultaInfo.style.display = "block";
      } else {
        if (formArea) formArea.style.display = "block";
        if (modoConsultaInfo) modoConsultaInfo.style.display = "none";
      }
    }

    function configurarNavegacaoSetas() {
      const campos = ["id_ficha", "nome", "sus", "mae", "nascimento", "telefone"];
      campos.forEach((id, index) => {
        const campo = document.getElementById(id);
        if (campo) {
          campo.addEventListener("keydown", (e) => {
            if (e.key === "ArrowDown") {
              e.preventDefault();
              const nextId = campos[(index + 1) % campos.length];
              const nextCampo = document.getElementById(nextId);
              if (nextCampo) nextCampo.focus();
            } else if (e.key === "ArrowUp") {
              e.preventDefault();
              const prevId = campos[(index - 1 + campos.length) % campos.length];
              const prevCampo = document.getElementById(prevId);
              if (prevCampo) prevCampo.focus();
            }
          });
        }
      });
    }

    function verificarSenha() {
      const senha = document.getElementById("campoSenha").value.trim();
      if (senha === SENHA_FULL) acessoNivel = "full";
      else if (senha === SENHA_CONSULTA) acessoNivel = "consulta";
      else {
        document.getElementById("senhaErro").style.display = "block";
        return;
      }
      document.getElementById("senhaScreen").style.display = "none";
      document.getElementById("appContainer").style.display = "block";
      initApp();
    }

    async function initApp() {
      const div = document.getElementById("resultado");
      if (div) div.innerHTML = '<div class="loading-msg">Carregando banco de dados central...</div>';
      try {
        SQL = await initSqlJs({ locateFile: file => `https://sql.js.org/dist/${file}` });
        db = await carregarDoIndexedDB(SQL);
        if (!db) {
          db = new SQL.Database();
          db.run(`CREATE TABLE pacientes (id INTEGER PRIMARY KEY AUTOINCREMENT, id_ficha TEXT UNIQUE NOT NULL, nome TEXT NOT NULL, sus TEXT, mae TEXT, nascimento TEXT, telefone TEXT, updated_at TEXT);`);
        }
        await carregarBancoDoServidor();
        aplicarRestricoes();
        configurarNavegacaoSetas();
      } catch (err) {
        if (div) div.innerHTML = `<div style="color:#e53e3e;text-align:center;">Erro ao inicializar: ${err.message}</div>`;
      }
    }

    // ==================== INICIALIZAÇÃO ====================
    window.addEventListener("load", () => {
      document.getElementById("campoSenha").focus();
      document.getElementById("botaoEntrar").addEventListener("click", verificarSenha);
      document.getElementById("campoSenha").addEventListener("keydown", e => { if (e.key === "Enter") verificarSenha(); });

      // Máscaras de input
      const idFichaInput = document.getElementById("id_ficha");
      const nomeInput = document.getElementById("nome");
      const maeInput = document.getElementById("mae");
      const susInput = document.getElementById("sus");
      const telefoneInput = document.getElementById("telefone");
      const buscaInput = document.getElementById("busca");

      if (idFichaInput) idFichaInput.addEventListener("input", e => e.target.value = e.target.value.replace(/\D/g, ''));
      if (nomeInput) nomeInput.addEventListener("input", e => e.target.value = e.target.value.replace(/\d/g, '').toUpperCase());
      if (maeInput) maeInput.addEventListener("input", e => e.target.value = e.target.value.replace(/\d/g, '').toUpperCase());
      if (susInput) susInput.addEventListener("input", e => {
        let v = e.target.value.replace(/\D/g, '').slice(0,15);
        e.target.value = v.length === 15 ? v.replace(/(\d{3})(\d{4})(\d{4})(\d{4})/, '$1 $2 $3 $4') : v;
      });
      if (telefoneInput) telefoneInput.addEventListener("input", e => {
        let v = e.target.value.replace(/\D/g, '').slice(0,11);
        if (v.length <= 10) v = v.replace(/^(\d{2})(\d)/, '($1) $2').replace(/(\d{4})(\d)/, '$1-$2');
        else v = v.replace(/^(\d{2})(\d)/, '($1) $2').replace(/(\d{5})(\d)/, '$1-$2');
        e.target.value = v;
      });
      if (buscaInput) {
        buscaInput.addEventListener("input", e => {
          e.target.value = e.target.value.toUpperCase();
          mostrarPacientes(e.target.value);
        });
      }

      // Botões principais
      document.getElementById("btnSincronizarExposto").addEventListener("click", carregarBancoDoServidor);
      document.getElementById("btnExportarPDFExposto").addEventListener("click", exportarPDF);

      // Botões secretos
      document.getElementById("btnImportarCSV").addEventListener("click", importarCSV);
      document.getElementById("btnImportarExcel").addEventListener("click", importarExcel);
      document.getElementById("btnExportarExcel").addEventListener("click", exportarExcel);
      document.getElementById("btnExportarSQLite").addEventListener("click", exportarSQLite);
      document.getElementById("btnLimparBanco").addEventListener("click", limparBanco);
      document.getElementById("btnForcarBackup").addEventListener("click", forcarBackup);

      document.getElementById("btnAcao").addEventListener("click", salvarPaciente);

      // Atalho secreto Ctrl + Shift + B
      let timeoutEsconder = null;
      document.addEventListener('keydown', e => {
        if (e.ctrlKey && e.shiftKey && e.key.toLowerCase() === 'b') {
          e.preventDefault();
          const botoes = document.getElementById("botoesSecretos");
          if (botoes) botoes.style.display = "flex";
          clearTimeout(timeoutEsconder);
          timeoutEsconder = setTimeout(() => { if(botoes) botoes.style.display = "none"; }, 20000);
        }
      });
    });
  </script>
</head>
<body>
  <div id="syncProgress"><div id="syncBar"></div></div>

  <!-- TELA DE SENHA -->
  <div id="senhaScreen">
    <img src="logo2026.jpg" alt="Logo CAPS II">
    <h2>ACESSO RESTRITO</h2>
    <p>CADASTRO DE PACIENTES - CAPS II BARRA DO CORDA-MA</p>
    <input type="password" id="campoSenha" placeholder="•••••••">
    <button id="botaoEntrar">ENTRAR →</button>
    <p id="senhaErro">Senha incorreta. Tente novamente.</p>
  </div>

  <!-- MODAL DE EXCLUSÃO -->
  <div id="modalExclusao">
    <div class="modal-content">
      <p>Excluir permanentemente este paciente?</p>
      <div class="modal-buttons">
        <button class="modal-btn sim" id="confirmarExclusaoBtn">Sim, excluir</button>
        <button class="modal-btn nao" id="cancelarExclusaoBtn">Não, cancelar</button>
      </div>
    </div>
  </div>

  <div id="toast"></div>

  <!-- APLICAÇÃO PRINCIPAL -->
  <div class="container" id="appContainer" style="display:none;">
    <div class="header">
      <h1>CADASTRO DE PACIENTES</h1>
      <div class="logo-container">
        <img src="logoheader2026.jpg" alt="CAPS II" class="logo-right">
      </div>
    </div>

    <div class="header-bottom-area">
      <button id="btnSincronizarExposto" class="btn-exposto">Sincronizar Banco Central</button>
      <button id="btnExportarPDFExposto" class="btn-exposto">Exportar PDF</button>
      <span id="totalPacientes">Total: 0 pacientes</span>
      
      <div id="botoesSecretos">
        <button class="btn-secreto" onclick="testarBackupAutomatico()">Testar Backup</button>
        <button class="btn-secreto" id="btnImportarCSV">Importar CSV</button>
        <button class="btn-secreto" id="btnImportarExcel">Importar Excel</button>
        <button class="btn-secreto" id="btnExportarExcel">Exportar Excel</button>
        <button class="btn-secreto" id="btnExportarSQLite">Exportar SQLite</button>
        <button class="btn-secreto" id="btnLimparBanco">Limpar Banco</button>
        <button class="btn-secreto" id="btnForcarBackup">Forçar Backup</button>
      </div>
    </div>

    <div class="modo-consulta-info" id="modoConsultaInfo">Modo Consulta</div>

    <div class="search-container">
      <input type="text" id="busca" placeholder="Buscar por nome, ID da ficha, SUS, mãe ou telefone...">
    </div>

    <div class="form-area" id="formArea">
      <div id="banner-edicao"></div>
      <div class="form-grid">
        <div class="form-group"><input id="id_ficha" placeholder="ID da Ficha (apenas números)" required></div>
        <div class="form-group"><input id="nome" placeholder="Nome completo (obrigatório)" required></div>
        <div class="action-buttons">
          <button id="btnAcao" class="main-btn">Adicionar Paciente</button>
          <button id="btnCancelar" class="main-btn cancel-btn" style="display:none;" onclick="cancelarEdicao()">Cancelar</button>
        </div>
        <div class="extra-fields">
          <div class="form-group"><input id="sus" placeholder="Cartão SUS"></div>
          <div class="form-group"><input id="mae" placeholder="Nome da mãe"></div>
          <div class="form-group"><input type="date" id="nascimento"></div>
          <div class="form-group"><input id="telefone" placeholder="Telefone (DDD)"></div>
        </div>
      </div>
    </div>

    <div id="resultado"><div class="loading-msg">Inicializando sistema...</div></div>
  </div>

  <script>
    document.getElementById("confirmarExclusaoBtn").addEventListener("click", confirmarExclusao);
    document.getElementById("cancelarExclusaoBtn").addEventListener("click", cancelarExclusao);
  </script>
</body>
</html>