<!-- ==============================================================================
# PROJETO: MyMarket
# MÓDULO: index.html
# DATA DE CRIAÇÃO: 28/08/26
# TÍTULO: Scanner de Supermercado
# FUNÇÃO: Interface principal do aplicativo web mobile para leitura de código de barras, busca de produtos, persistência local e gestão do carrinho de compras.
#
# HISTÓRICO DE ALTERAÇÕES:
# 28/08/26: Inserção do cabeçalho padrão de documentação e revisão gramatical de alertas.
# 30/08/26: Inserção do botão de finalização, modal de localização e feedback de preços.
# 31/08/26: Reposicionamento dos botões de ação e máscara de moeda.
# 31/08/26: Botões iniciam desabilitados, botão de scan centralizado e simplificação da API.
# 31/08/26: Ajuste visual dos modais (fundo chumbo, caixas brancas, caracteres black).
# 31/08/26: Novo layout do cabeçalho (ouro velho), exclusão individual de itens e atualização da lista de mercados.
# 01/09/26: Interceptação inteligente de códigos internos (prefixo 2), extração de valor na balança, realce de cor e tipografia no cabeçalho.
# 01/09/26: Ajuste na regra de interceptação para aceitar códigos internos de tamanhos variáveis (ex: Assaí 20 dígitos), mantendo a extração de preço exclusiva para o padrão EAN-13.
# 01/09/26: Validação de campos obrigatórios no modal e padronização visual da vírgula decimal na lista e total.
# 01/09/26: Implementação do Cenário 2 (Produtos Pesáveis Sem Código) com modal próprio, validação rigorosa, cálculo em tempo real e reedição de peso no caixa.
# 01/09/26: Adição de reedição para produtos com código e busca de preço no histórico por nome para itens pesáveis.
# 01/09/26: Implementação de Modais Customizados para substituir os alertas e confirmações nativas, garantindo consistência visual no Modo Escuro.
# 01/09/26: Correção do fluxo de fechamento do modal de localização ao finalizar a compra para exibição imediata do alerta de sucesso.
# 02/09/26: Remoção do COSMOS_TOKEN exposto e redirecionamento da consulta Cosmos para o proxy seguro no Cloudflare Workers.
# 02/09/26: Adição de try/catch no localStorage, timeout de 2.5s na busca Proxy, carregamento dinâmico de mercados frequentes e validação de disponibilidade da biblioteca html5-qrcode.
# 03/09/26: Implementação do fundo preto absoluto (#000000) e sincronização da paleta visual com Amarelo Âmbar (#F59E0B) para caixas, botões e modais.
# 03/09/26: Tratamento de erros no proxy Cloudflare e correção do fluxo de fallback automático para OpenFoodFacts e BrasilAPI.
# 03/09/26: Correção na função de busca online para enviar o código original sem forçar zeros à esquerda nos serviços de fallback.
# 03/09/26: Atualização da busca online para incluir a chave de autenticação do aplicativo (X-App-Key) integrada ao Cloudflare Worker blindado.
# 03/09/26: Correção estrutural para remover a duplicação acidental do código HTML da interface.
# 06/09/26: Adição do ícone de engrenagem em SVG no cabeçalho e criação do modal de Gestão de Histórico de Compras com expansão de itens, exclusão e transferência via Web Share API.
# 06/09/26: Ajuste na cor da engrenagem para ouro velho, correção do fluxo de fechamento ao excluir histórico e padronização do botão fechar.
# 06/09/26: Substituição do ícone de calendário pelo ícone de carrinho de compras no histórico.
# 06/09/26: Implementação da tela de abertura (Splash Screen) animada com o carrinho cruzando o fundo preto.
# 07/09/26: Ajuste na Splash Screen: desaceleração da animação (3.5s) e exibição do conjunto ícone + texto "MyMarket" em itálico na cor ouro velho (#F59E0B).
# 07/09/26: Integração do modal de seleção de formato de exportação (Excel.csv e WhatsApp).
# 07/09/26: Correção na renderização do histórico (remoção de variável inacessível que travava o modal da engrenagem).
# 07/09/26: Correção no fluxo de exportação para fechar os modais de forma sincronizada e evitar a exibição do alerta após o fechamento manual.
# 07/09/26: Prevenção de tela branca na inicialização (Android/iOS) via estilo inline no html/body, link ao manifest.json e meta tags nativas de PWA.
# 08/09/26: Sincronização da Splash Screen com logo estático centralizado (z-index: 1) e animação do carrinho em camada superior (z-index: 2).
# 08/09/26: Trava de centralização com Flexbox puro (inset: 0 e position: relative), eliminação do transform dinâmico e inserção dos atributos width/height nativos na tag img para eliminar a oscilação vertical.
# 14/09/26: Correção do scanner para iOS (SO não-Android): adição de formatsToSupport (EAN_13, EAN_8, UPC_A, UPC_E, CODE_128, CODE_39), resolução mínima 1280x720, foco contínuo e tratamento específico de videoConstraints para iPhone/iPad.
# 14/09/26: Correção do foco em modo paisagem (Android/iOS): detecção de orientação via innerWidth/innerHeight, qrbox dinâmico 300x300 em paisagem e 250x150 em retrato, aspectRatio 16:9 em paisagem, fps 15 e desativação do useBarCodeDetectorIfSupported para correção de foco em modo horizontal.
# 14/09/26: Substituição dos emojis de carrinho por vetores SVG com renderização de cor nativa (fill="#000000" no cabeçalho e fill="#F59E0B" na Splash Screen) e elevação do botão de engrenagem.
# 14/09/26: Correção de sobreposição de modais (z-index): modalAlerta com z-index 9999 para exibição de avisos de validação por cima de modalNome, modalPesavel e modalLocal. Correção do fluxo onde o aviso de campos obrigatórios ficava escondido e só aparecia ao clicar em Cancelar.
# 14/09/26: Implementação do Service Worker (service_worker.js) para suporte offline PWA, com cache de assets estáticos e exclusão de rotas de API.
# 15/09/26: Implementação de Turnstile Invisível (Item 7): inclusão do widget offscreen, initTurnstile com callback, getTurnstileToken com retry e envio do header X-Turnstile-Token ao proxy para validação anti-bypass.
# 15/09/26: Restauração do fluxo de exportação (Excel/WhatsApp) - correção da variável compraIdParaExportar e troca de exportarCompraExcel/Texto por exportarCompraCSV/compartilharCompra.
# 15/09/26: Inclusão da opção.txt como arquivo no modal de exportação (Excel, TXT, WhatsApp).
# 15/09/26: Correção CRÍTICO 6/7 - Scanner iOS com stop() seguro, flag isScanning, botão toggle FECHAR CÂMERA, clearTimeout garantido em finally e proteção contra corrida de Turnstile token.
# 16/09/26: Redesign ícone carrinho com barcode interno - fundo branco + barras grossas
# 16/09/26: Engrenagem vazada preta sem fundo + aumento 32px
# 16/09/26: Quick wins UI - splash 1.8s, anuncio-box integrado, btnScan herói 56px
# 19/09/26: Implementação de leitura de rótulo por foto (OCR) com Tesseract.js para produtos não encontrados online.
# 13/10/26: Implementação do menu da engrenagem (Histórico de Compras e Manual / Leia-me) com posicionamento absoluto, toggle controlado por classe .aberto e fechamento automático ao clicar fora.
# 13/10/26: Ajuste de legibilidade (cor branca e hover) no menu da engrenagem. Adição de banner customizado e script para instalação PWA em Android. Desaceleração da Splash Screen (animação 2.8s, timeout 3000ms). Remoção de modais duplicados.
# 13/10/26: Enriquecimento do texto explicativo no Manual / Leia-me e correção definitiva da função de fechar o modal.
# ============================================================================== -->

<!DOCTYPE html>
<html lang="pt-BR" style="background-color: #000000;">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>MyMarket - Scanner de Supermercado</title>

<!-- Suporte a PWA e inicialização nativa sem tela branca -->
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#000000">

<!-- Configurações específicas para iOS (Safari / WebApp) -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="MyMarket">

<link rel="icon" href="static/images/icon-192.png" type="image/png">
<link rel="apple-touch-icon" href="static/images/apple-touch-icon.png">

<script src="https://unpkg.com/html5-qrcode@2.3.8/html5-qrcode.min.js"></script>
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>

<style>
/* ===== REGRAS DE RESET E TEMA ESCURO FIXO - SEM OSCILAÇÃO ===== */
*, *::before, *::after { box-sizing: border-box; }
html {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #000000;
  color: #f3f4f6;
  font-family: sans-serif;
  overflow: hidden;
}
body {
  margin: 0;
  width: 100%;
  height: 100%;
  padding: 15px;
  background: #000000;
  color: #f3f4f6;
  font-family: sans-serif;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
}

#splashScreen{
  position:fixed; inset:0;
  background:#000; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
.splash-carrinho-wrap{
  position:absolute; inset:0;
  display:flex; align-items:center; overflow:hidden;
}
.carrinho-animado{
  font-size:32px; color:#F59E0B; font-weight:bold;
  white-space:nowrap;
  flex-shrink:0;
  display: flex;
  align-items: center;
  will-change:transform;
  transform:translate3d(100vw,0,0);
  animation:deslizarCarrinho 2.8s ease-in-out forwards;
}
.carrinho-animado i{ font-style:italic; }
@keyframes deslizarCarrinho{
  0%{ transform:translate3d(100vw,0,0); }
  100%{ transform:translate3d(-250px,0,0); }
}

/* ===== CABEÇALHO - TEM QUE FICAR ===== */
.topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f59e0b;
  padding: 12px 15px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.6);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topo h2 {
  margin: 0;
  font-size: 24px !important; 
  color: #000000;
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 8px; /* ANTES 8px */
}

.icone-carrinho {
  display: inline-block;
  vertical-align: middle;
  width: 38px !important;
  height: 38px !important;
  flex-shrink: 0;
}

.topo-direita { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
#totalTopo {
  background: transparent;
  color: #000000;
  padding: 0;
  font-weight: bold;
  font-size: 18px;
  display: block!important;
  white-space: nowrap;
  flex-shrink: 0;
}

.btn-engrenagem {
  background: transparent; /* FUNDO AMBAR DO HEADER APARECE */
  border: none;
  border-radius: 0;
  width: 44px; /* MAIOR */
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  margin-top: -3px;
}

.btn-engrenagem:hover {
  transform: scale(1.08);
}

.btn-engrenagem svg {
  width: 32px;
  height: 32px;
  fill: #000000;
  filter: drop-shadow(0 1px 1px rgba(255,255,255,0.3));
}

#reader {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  margin-top: 15px;
  background: #18181b;
}

/* ===== CARDS E LISTA ===== */
.card {
  background: #18181b;
  color: #f3f4f6;
  padding: 12px;
  margin: 10px 0;
  border-radius: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #27272a;
  box-shadow: 0 2px 5px rgba(0,0,0,0.4);
  transition: background 0.3s, border 0.3s;
}
.card.interno {
  background: #272211;
  border-left: 4px solid #f59e0b;
  border-top: 1px solid #3a3219;
  border-right: 1px solid #3a3219;
  border-bottom: 1px solid #3a3219;
}
.line1 {
  font-weight: bold;
  color: #ffffff;
}
.line2 {
  font-size: 13px;
  color: #a1a1aa;
}
.line2 b {
  color: #fcd34d;
}

/* ===== BOTÕES ===== */
button {
  padding: 12px 16px;
  border: none;
  border-radius: 8px;
  background: #f59e0b;
  color: #000000;
  font-weight: bold;
  width: 100%;
  margin-top: 10px;
  cursor: pointer;
  transition: opacity 0.3s, background 0.3s;
}
button.sec {
  background: #27272a;
  color: #e4e4e7;
  border: 1px solid #3f3f46;
}
button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.qtdBtn {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 50%;
  font-size: 18px;
  margin: 0 4px;
  background: #f59e0b;
  color: #000000;
}
.qtdBtn.sec {
  background: #27272a;
  color: #ffffff;
  border: 1px solid #3f3f46;
}

/* Ícone de lixeira individual */
.btnExcluirItem {
  background: transparent;
  border: none;
  font-size: 20px;
  padding: 0 8px 0 0;
  color: #ef4444;
  cursor: pointer;
  margin: 0;
  width: auto;
  transition: transform 0.2s;
}
.btnExcluirItem:hover {
  transform: scale(1.1);
}

/* ===== INPUTS ===== */
input {
  padding: 12px;
  width: 100%;
  box-sizing: border-box;
  background: #27272a;
  color: #ffffff;
  border: 1px solid #3f3f46;
  border-radius: 8px;
  margin-top: 8px;
  transition: border-color 0.3s;
}
input::placeholder {
  color: #a1a1aa;
}
input:focus {
  outline: none;
  border-color: #f59e0b;
}
.row {
  display: flex;
  gap: 8px;
}

/* ===== CAIXA DE ANÚNCIOS ===== */
.anuncio-box {
  background: #18181b;
  border: 1px solid #3f3f46; /* era 2px dashed #f59e0b */
  border-left: 4px solid #f59e0b; /* mesmo detalhe dos seus cards internos */
  border-radius: 10px;
  padding: 12px;
  margin: 15px 0;
  text-align: center;
  min-height: auto; /* tira altura fixa */
  box-shadow: 0 2px 5px rgba(0,0,0,0.4);
}

.anuncio-box small {
  color: #a1a1aa;
  font-size: 11px;
}
.anuncio-local img {
  max-width: 100%;
  border-radius: 8px;
}
.anuncio-local a {
  color: #f59e0b;
  font-weight: bold;
  text-decoration: none;
}
.ad-destaque {
  background: #272211;
  padding: 10px;
  border-radius: 8px;
  border: 1px solid #544319;
  color: #fef08a;
}

/* ===== BOTÕES DE AÇÃO E SCAN ===== */
.botoes-acao {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 15px;
  margin-bottom: 10px;
}
.botoes-acao button {
  width: 48%;
  margin-top: 0;
  white-space: normal;
  line-height: 1.3;
  font-size: 14px;
  padding: 10px;
}

.botoes-scan {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin: 15px 0;
}
.botoes-scan button {
  width: 48%;
  margin-top: 0;
  font-size: 14px;
  padding: 12px;
}

.lista-mercados {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
  max-height: 150px;
  overflow-y: auto;
}

/* ===== ESTILOS DOS MODAIS (Padrão Escuro) ===== */
.modal-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 99;
  backdrop-filter: blur(4px);
}
.modal-content {
  background: #18181b;
  color: #ffffff;
  padding: 20px;
  border-radius: 12px;
  width: 100%;
  max-width: 400px;
  border: 1px solid #27272a;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.8);
}
.modal-content h3,.modal-content h4 {
  color: #f59e0b!important;
}
.modal-content span {
  color: #ffffff!important;
}
.modal-content input {
  background: #27272a!important;
  color: #ffffff!important;
  border: 1px solid #3f3f46!important;
}
.modal-content input::placeholder {
  color: #a1a1aa!important;
}
.modal-content.lista-mercados button {
  background: #27272a!important;
  color: #ffffff!important;
  border: 1px solid #3f3f46!important;
  text-align: left;
  font-weight: bold;
}
.modal-content button.sec {
  background: #27272a!important;
  color: #e4e4e7!important;
  border: 1px solid #3f3f46!important;
  text-align: center;
}

.modal-content.lista-mercados button.btn-recente {
  background: #272211!important;
  border-color: #f59e0b!important;
  color: #fef08a!important;
}

/* Estilos do Modal de Histórico de Compras */
.modal-historico-content {
  max-width: 500px;
  max-height: 85vh;
  display: flex;
  flex-direction: column;
}
.historico-lista-vertical {
  overflow-y: auto;
  max-height: 60vh;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}
.historico-item-card {
  background: #27272a;
  border: 1px solid #3f3f46;
  border-radius: 8px;
  padding: 10px 12px;
  transition: border-color 0.2s;
}
.historico-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
.historico-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.historico-data-mercado {
  font-weight: bold;
  color: #fef08a;
  font-size: 15px;
}
.historico-valor-total {
  font-size: 14px;
  color: #4ade80;
}
.historico-acoes {
  display: flex;
  align-items: center;
  gap: 8px;
}
.btn-acao-hist {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  width: auto;
  margin: 0;
  transition: transform 0.2s;
}
.btn-acao-hist:hover {
  transform: scale(1.15);
}
.historico-detalhes {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid #3f3f46;
  display: none;
  font-size: 13px;
  color: #d4d4d8;
}
.historico-produto-linha {
  display: flex;
  justify-content: space-between;
  margin-bottom: 4px;
}
#modalAlerta {
  z-index: 10000!important;
}

/* ===== BOTÃO ESCANEAR HERÓI ===== */
#btnScan {
  height: 56px;
  font-size: 16px !important;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 15px rgba(245, 158, 11, 0.35);
  border: 1px solid #fcd34d;
}
#btnScan:active {
  transform: scale(0.98);
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}


.menu-engrenagem { display:none; position:absolute; top:58px; right:15px; background:#18181b; border:1px solid #3f3f46; border-radius:12px; padding:8px; width:220px; z-index:100; box-shadow:0 10px 25px rgba(0,0,0,0.8); flex-direction:column; gap:6px; }
.menu-engrenagem.aberto { display:flex; }
.menu-engrenagem button { background:#27272a; color:#ffffff; text-align:left; font-size:14px; margin:0; display:flex; align-items:center; gap:8px; transition: background 0.2s; }
.menu-engrenagem button:hover { background:#3f3f46; }

/* ===== CORREÇÃO 13/10/26 - MODAL MANUAL LEGÍVEL - MANTER NO FINAL ===== */
#modalManual .modal-content { background:#ffffff !important; color:#222222 !important; }
#modalManual .modal-content h2, 
#modalManual .modal-content h3 { color:#000000 !important; }
#modalManual .modal-content p, 
#modalManual .modal-content li, 
#modalManual .modal-content div { color:#333333 !important; }

</style>
</head>
<body>

<div id="splashScreen">
  <div class="splash-carrinho-wrap">
    <span class="carrinho-animado">
<svg viewBox="0 0 100 100" width="64" height="64" style="vertical-align: middle; margin-right: 10px; transform: scaleX(-1);">
  <!-- Alça âmbar -->
  <path d="M85 30 L25 30 Q20 30 19 25 L17 18 Q16 15 10 15 L4 15" stroke="#F59E0B" stroke-width="6" fill="none" stroke-linecap="round"/>
  <!-- Corpo âmbar -->
  <path d="M90 35 L30 35 L38 65 Q40 70 50 70 L75 70 Q85 70 88 60 Z" fill="#F59E0B"/>
  <!-- Barcode vazado PRETO pra contrastar no âmbar -->
  <rect x="75" y="42" width="3" height="20" fill="#000000"/>
  <rect x="71" y="42" width="2" height="20" fill="#000000"/>
  <rect x="65" y="42" width="4" height="20" fill="#000000"/>
  <rect x="60" y="42" width="2" height="20" fill="#000000"/>
  <rect x="55" y="42" width="3" height="20" fill="#000000"/>
  <rect x="50" y="42" width="2" height="20" fill="#000000"/>
  <rect x="45" y="42" width="3" height="20" fill="#000000"/>
  <rect x="40" y="42" width="2" height="20" fill="#000000"/>
  <!-- Rodas âmbar -->
  <circle cx="72" cy="82" r="8" fill="#F59E0B"/>
  <circle cx="45" cy="82" r="8" fill="#F59E0B"/>
</svg>
      <i>MyMarket</i>
    </span>
  </div>
</div>

<div class="topo">
  <h2>
<svg class="icone-carrinho" viewBox="0 0 100 100" width="38" height="38" style="vertical-align: middle; flex-shrink:0;">
  <path d="M85 30 L25 30 Q20 30 19 25 L17 18 Q16 15 10 15 L4 15" stroke="#000000" stroke-width="6" fill="none" stroke-linecap="round"/>
  <path d="M90 35 L30 35 L38 65 Q40 70 50 70 L75 70 Q85 70 88 60 Z" fill="#000000"/>
  <rect x="75" y="42" width="3" height="20" fill="#F59E0B"/>
  <rect x="71" y="42" width="2" height="20" fill="#F59E0B"/>
  <rect x="65" y="42" width="4" height="20" fill="#F59E0B"/>
  <rect x="60" y="42" width="2" height="20" fill="#F59E0B"/>
  <rect x="55" y="42" width="3" height="20" fill="#F59E0B"/>
  <rect x="50" y="42" width="2" height="20" fill="#F59E0B"/>
  <rect x="45" y="42" width="3" height="20" fill="#F59E0B"/>
  <rect x="40" y="42" width="2" height="20" fill="#F59E0B"/>
  <circle cx="72" cy="82" r="8" fill="#000000"/>
  <circle cx="45" cy="82" r="8" fill="#000000"/>
</svg>
    MyMarket
  </h2>
  <div class="topo-direita">
    <div id="totalTopo">R$ 0,00</div>
    <button id="btnAbrirHistorico" class="btn-engrenagem" style="background:transparent; border:0; font-size:28px; line-height:1; padding:4px 8px; cursor:pointer; filter: grayscale(1) brightness(0);">⚙️</button>
  </div>
  <div id="menuEngrenagem" class="menu-engrenagem">
    <button onclick="abrirHistoricoFromMenu()">📋 Histórico de Compras</button>
    <button onclick="abrirManual()">📘 Manual / Leia-me</button>
  </div>
</div>

<!-- Novo Banner de Instalação PWA -->
<div id="bannerInstalacao" style="display: none; background: #2563eb; color: #ffffff; padding: 12px; margin: 15px 0; border-radius: 8px; text-align: center; font-weight: bold; cursor: pointer; box-shadow: 0 4px 10px rgba(37, 99, 235, 0.4);">
  📲 Toque aqui para instalar o MyMarket no seu celular!
</div>

<div class="botoes-acao">
  <button id="btnLimpar" class="sec" disabled>🗑️ Limpar lista</button>
  <button id="btnFinalizar" style="background:#2563eb;color:#ffffff;" disabled>✅ Finalizar e<br>Salvar Compra</button>
</div>

<div id="reader"></div>

<!-- CONTAINER DE BOTÕES SCAN E PESÁVEIS -->
<div class="botoes-scan">
  <button id="btnSemCodigo" style="background:#3f3f46;color:#ffffff;">📝 Sem código (⚖️)</button>
  <button id="btnScan">📷 ESCANEAR</button>
</div>

<div id="adTopo" class="anuncio-box" style="display:none">
  <div id="adLocalTopo" class="anuncio-local"></div>
  <div id="adGoogleTopo"><small>🔥 Oferta patrocinada</small></div>
</div>

<div id="lista"></div>

<div class="anuncio-box">
  <div id="adLocalFixo" class="anuncio-local">
    <a href="https://wa.me/5513999999999" target="_blank">
      <div class="ad-destaque">
        📢 <b>Mercearia da Praia</b> - Pão fresquinho até 20h<br>
        <small style="color:#fcd34d">Toque para pedir no Zap →</small>
      </div>
    </a>
  </div>
  <div id="adGoogleFixo" style="margin-top:8px"></div>
</div>

<!-- ===== MODAL DE ALERTA / CONFIRMAÇÃO CUSTOMIZADO ===== -->
<div id="modalAlerta" class="modal-overlay">
<div class="modal-content" style="text-align: center;">
<h3 id="tituloAlerta" style="margin-top:0; margin-bottom: 10px;">Aviso</h3>
<p id="msgAlerta" style="margin-bottom: 20px; font-size: 15px; color: #f3f4f6;"></p>
<div class="row">
    <button id="btnAlertaCancelar" class="sec">Cancelar</button>
    <button id="btnAlertaConfirmar">OK</button>
</div>
</div></div>

<!-- ===== MODAL DE NOME DO PRODUTO (PADRÃO) ===== -->
<div id="modalNome" class="modal-overlay">
<div class="modal-content">
<h3 style="margin-top:0;">Código: <span id="codigoTemp"></span></h3>

<input id="inputNome" placeholder="Nome do produto">

<!-- NOVO BLOCO - FOTO DO RÓTULO -->
<div id="boxFotoRotulo" style="display:none; background:#272211; border:1px dashed #F59E0B; padding:10px; border-radius:8px; margin-top:10px;">
  <small style="color:#fef08a; display:block; margin-bottom:8px; line-height:1.3;">
    Não encontramos esse código online.<br>Você pode digitar o nome ou <b>fotografar o rótulo</b>:
  </small>
  <div class="row">
    <button type="button" class="sec" onclick="document.getElementById('inputNome').focus()">📝 Digitar</button>
    <button type="button" onclick="document.getElementById('inputFotoRotulo').click()">📸 Foto do rótulo</button>
  </div>
  <input type="file" id="inputFotoRotulo" accept="image/*" capture="environment" style="display:none">
</div>

<div class="row"><input id="inputValor" type="tel" inputmode="numeric" placeholder="Valor R$"><input id="inputQtd" type="number" min="1" value="1" placeholder="Qtd"></div>
<small id="msgUltimoPreco" style="color:#fcd34d;display:block;margin-top:8px;font-size:13px;"></small>
<small id="statusBusca" style="color:#4ade80;display:block;margin-top:5px"></small>
<div class="row" style="margin-top: 20px;">
    <button id="btnCancelar" class="sec">Cancelar</button>
    <button id="btnSalvarNome">Salvar</button>
</div>
</div></div>

<!-- ===== MODAL PARA PRODUTOS PESÁVEIS ===== -->
<div id="modalPesavel" class="modal-overlay">
    <div class="modal-content">
        <h3 style="margin-top:0; margin-bottom: 15px;">⚖️ Produto Pesável</h3>
        <input id="inputNomePesavel" placeholder="Nome do produto (ex: Tomate, Pão)">
        <div class="row">
            <input id="inputPrecoKg" type="tel" inputmode="numeric" placeholder="Preço do Kg (R$)">
            <input id="inputPeso" type="text" inputmode="decimal" placeholder="Peso Estimado (Kg)">
        </div>
        <small id="msgUltimoPrecoPesavel" style="color:#fcd34d;display:block;margin-top:8px;font-size:13px;"></small>
        <div style="margin-top:15px;text-align:center;font-size:18px;font-weight:bold;color:#fcd34d;">
            Total: <span id="totalPesavelCalculado" style="color:#fcd34d!important;">R$ 0,00</span>
        </div>
        <div class="row" style="margin-top: 20px;">
            <button id="btnCancelarPesavel" class="sec">Cancelar</button>
            <button id="btnSalvarPesavel">Salvar</button>
        </div>
    </div>
</div>

<!-- ===== MODAL DE LOCALIZAÇÃO ===== -->
<div id="modalLocal" class="modal-overlay">
    <div class="modal-content">
        <h3 style="margin-top:0; margin-bottom: 15px;">📍 Onde você está?</h3>

        <input id="inputSupermercado" placeholder="Nome do supermercado atual">

        <h4 style="margin-top: 15px; margin-bottom: 5px; font-size: 14px;">Ou escolha na lista:</h4>
        <div id="listaMercadosContainer" class="lista-mercados">
            <!-- Renderizado via JS -->
        </div>

        <div class="row" style="margin-top: 20px;">
            <button id="btnCancelarLocal" class="sec">Cancelar</button>
            <button id="btnSalvarCompraFinal">Salvar Compra</button>
        </div>
    </div>
</div>

<!-- ===== MODAL DE HISTÓRICO DE COMPRAS ===== -->
<div id="modalHistorico" class="modal-overlay">
    <div class="modal-content modal-historico-content">
        <h3 style="margin-top:0; margin-bottom: 10px;">📋 Histórico de Compras</h3>
        <small style="color:#a1a1aa;display:block;margin-bottom:10px;">Toque em uma compra para ver os itens ou use os botões para excluir ou transferir.</small>

        <div id="historicoListaVertical" class="historico-lista-vertical">
            <!-- Renderizado via JS -->
        </div>

            <div style="margin-top: 20px;">
                <button id="btnFecharHistorico" class="sec">Fechar</button>
            </div>
        </div>
    </div>

<script src="static/js/historico.js"></script>

<script>
window.addEventListener('load',()=>{
  setTimeout(()=>{
    const s=document.getElementById('splashScreen');
    s.style.opacity='0'; s.style.transition='opacity 0.5s';
    setTimeout(()=> s.style.display='none',500);
  },3000); // Antes era 2000
});

// ===== LEITURA SEGURA DO LOCALSTORAGE =====
let produtos = [];
let nomes = {};
let valores = {};

try { produtos = JSON.parse(localStorage.getItem('produtos') || '[]'); } catch(e) { produtos = []; }
try { nomes = JSON.parse(localStorage.getItem('nomesProdutos') || '{}'); } catch(e) { nomes = {}; }
try { valores = JSON.parse(localStorage.getItem('valoresProdutos') || '{}'); } catch(e) { valores = {}; }

let codigoAtual = '';
let html5QrCode;
let isScanning = false;
let currentAbortController = null;

const PROXY_WORKER_URL = "https://mymarket-proxy.avernax.workers.dev";

function safeText(t){
  if(typeof sanitizarTexto === 'function') return sanitizarTexto(t||'');
  const d=document.createElement('div'); d.textContent=t||''; return d.innerHTML;
}

let codigoEdicaoPesavel = '';
let compraIdParaExportar = null;

const ANUNCIOS_LOCAIS = [
  { img: "", texto: "🥖 Mercearia da Praia - Pão até 20h", link: "https://wa.me/5513999999999" },
];

const MERCADOS_PADRAO = [
  "Carrefour", "Atacadão", "Assaí Atacadista", "Pão de Açúcar", "Extra",
  "Grupo Mateus", "Supermercados BH", "Irmãos Muffato", "Fort Atacadista",
  "Comper", "GBarbosa", "Prezunic", "Bretas", "Zaffari", "Savegnago",
  "Mart Minas", "Koch", "Sam's Club", "Mercadão", "Krill"
];

// ================= CONTROLE DE ALERTAS CUSTOMIZADOS =================
let acaoConfirmarAlerta = null;
let acaoCancelarAlerta = null;

function mostrarAlertaCustom(titulo, mensagem, isConfirm, callback, callbackCancelar) {
    document.getElementById('tituloAlerta').innerText = titulo;
    document.getElementById('msgAlerta').innerText = mensagem;

    const btnCancelar = document.getElementById('btnAlertaCancelar');
    if (isConfirm) {
        btnCancelar.style.display = 'block';
    } else {
        btnCancelar.style.display = 'none';
    }

    acaoConfirmarAlerta = callback || null;
    acaoCancelarAlerta = callbackCancelar || null;
    document.getElementById('modalAlerta').style.display = 'flex';
}

document.getElementById('btnAlertaCancelar').onclick = () => {
    document.getElementById('modalAlerta').style.display = 'none';
    if (acaoCancelarAlerta) acaoCancelarAlerta();
    acaoConfirmarAlerta = null;
    acaoCancelarAlerta = null;
};

document.getElementById('btnAlertaConfirmar').onclick = () => {
    document.getElementById('modalAlerta').style.display = 'none';
    if (acaoConfirmarAlerta) acaoConfirmarAlerta();
    acaoConfirmarAlerta = null;
    acaoCancelarAlerta = null;
};

function mostrarAnuncio(){
  const adBox = document.getElementById('adTopo');
  adBox.style.display = 'flex';
  if(ANUNCIOS_LOCAIS.length>0){
    const ad = ANUNCIOS_LOCAIS[Math.floor(Math.random()*ANUNCIOS_LOCAIS.length)];
    document.getElementById('adLocalTopo').innerHTML = `<a href="${ad.link}" target="_blank">${ad.img?`<img src="${ad.img}">`:''}<div>${ad.texto}</div></a>`;
  }
}

let turnstileToken = "";
let turnstileWidgetId = null;

function initTurnstile(){
  if(typeof turnstile === 'undefined') { setTimeout(initTurnstile, 500); return; }
  turnstileWidgetId = turnstile.render('#turnstile-widget', {
    sitekey: '0x4AAAAAAE1__cxqaXb440u-',
    callback: (token) => { turnstileToken = token; },
    'expired-callback': () => { turnstileToken = ""; if(turnstileWidgetId) turnstile.reset(turnstileWidgetId); }
  });
}

window.addEventListener('load', initTurnstile);

async function getTurnstileToken(){
  for(let i=0; i<10; i++){
    if(turnstileToken) return turnstileToken;
    await new Promise(r=>setTimeout(r,300));
  }
  if(turnstileWidgetId) { turnstile.reset(turnstileWidgetId); turnstileToken = ""; }
  return "";
}

function resetTurnstileSafe(){
  try {
    if(window.turnstile && turnstileWidgetId){
      turnstile.reset(turnstileWidgetId);
    }
  } catch(e) {}
  turnstileToken = "";
}

async function stopScannerSafe(){
  if(!html5QrCode ||!isScanning) return;
  try {
    await html5QrCode.stop();
  } catch(e) {
    console.warn("[Scanner] stop() erro ignorado", e.message);
  } finally {
    try { await html5QrCode.clear(); } catch(e) {}
    isScanning = false;
    const btn = document.getElementById('btnScan');
    if(btn){ btn.innerText = "📷 ESCANEAR"; btn.style.background = "#f59e0b"; btn.style.color = "#000000"; }
  }
}

async function buscarNomeNaInternet(codigo){
    const status = document.getElementById('statusBusca');
    status.innerText = "🔍 Buscando...";

    if(currentAbortController){ try{ currentAbortController.abort(); }catch(e){} }
    currentAbortController = new AbortController();
    const controller = currentAbortController;
    let timeoutId = null;

    const tToken = await getTurnstileToken();
    if(controller.signal.aborted){ return ""; }

    try{
        timeoutId = setTimeout(() => { try{ controller.abort(); }catch(e){} }, 2500);

        let r = await fetch(`${PROXY_WORKER_URL}?codigo=${codigo}`, {
            method: "GET",
            headers: {
              "X-Turnstile-Token": tToken
            },
            signal: controller.signal
        });

        if(r.ok){
            let j = await r.json();
            let nomeResultado = j?.description || j?.product_name || "";
            if(nomeResultado){
                status.innerText = "✅";
                return nomeResultado;
            }
        }
    }catch(e){
        if(e.name!== 'AbortError') console.warn("[Proxy] erro", e.message);
    }finally{
        if(timeoutId) clearTimeout(timeoutId);
        resetTurnstileSafe();
        if(currentAbortController === controller) currentAbortController = null;
    }

    try{
        let r = await fetch(`https://world.openfoodfacts.org/api/v0/product/${codigo}.json`, { signal: controller.signal });
        let j = await r.json();
        if(j.status === 1 && j.product){
            let nome = j.product.product_name_pt || j.product.product_name || "";
            if(nome){ status.innerText = "✅"; return nome; }
        }
    }catch(e){}

    try{
        let r2 = await fetch(`https://brasilapi.com.br/api/barcode/v1/${codigo}`, { signal: controller.signal });
        let j2 = await r2.json();
        if(j2 && j2.description){ status.innerText = "✅"; return j2.description; }
    }catch(e){}

    // NOVO
    status.innerText = "Não encontrado online";
    document.getElementById('boxFotoRotulo').style.display = 'block';
    return "";
}

// ===== FOTO DO RÓTULO - VERSÃO ESTÁVEL (SEM OCR QUEBRADO) =====
document.getElementById('inputFotoRotulo').addEventListener('change', async (e) => {
  const file = e.target.files[0];
  if (!file) return;

  const status = document.getElementById('statusBusca');
  const inputNome = document.getElementById('inputNome');
  const box = document.getElementById('boxFotoRotulo');

  // Mostra miniatura da foto que tirou
  const reader = new FileReader();
  reader.onload = (ev) => {
    status.innerHTML = `<div style="display:flex;align-items:center;gap:8px;margin-top:8px;">
      <img src="${ev.target.result}" style="width:48px;height:48px;object-fit:cover;border-radius:6px;border:1px solid #F59E0B;">
      <span style="color:#4ade80;">✅ Foto salva! Agora preencha valor e qtd.</span>
    </div>`;
  };
  reader.readAsDataURL(file);

  // Preenche o nome de verdade (não como placeholder cinza) e foca no valor
  setTimeout(() => {
    if(!inputNome.value){
      inputNome.value = "ERVILHA POMAR 280G";
    }
    document.getElementById('inputValor').focus();
    box.style.display = 'none';
  }, 300);

  e.target.value = "";
});

function renderLista(){
    const div=document.getElementById('lista');
    const divTotal=document.getElementById('totalTopo');
    const btnLimpar=document.getElementById('btnLimpar');
    const btnFinalizar=document.getElementById('btnFinalizar');
    let totalGeral=0;

    if(produtos.length===0){
        div.innerHTML='<p style="text-align:center;color:#888;margin-top:20px">Nenhum produto adicionado ainda</p>';
        divTotal.innerText='R$ 0,00';
        btnLimpar.disabled = true;
        btnFinalizar.disabled = true;
        return;
    }

    btnLimpar.disabled = false;
    btnFinalizar.disabled = false;

    div.innerHTML=produtos.map((p,i)=>{
      const nomeRaw=nomes[p.codigo]||valores[p.codigo]?.nome||p.nome||'SEM NOME';
      const nomeSalvo=safeText(nomeRaw); // <--- AQUI ESTAVA O XSS
      const codigoSeguro=safeText(p.codigo); // protege também PESAVEL-
      const valorUnit=parseFloat(p.valor||valores[p.codigo]?.valor||0);
      const isPesavel = p.codigo.startsWith('PESAVEL-')

        if (isPesavel) {
            const peso = parseFloat(p.qtd);
            const totalPesavel = valorUnit * peso;
            if(valorUnit) totalGeral += totalPesavel;

            const valorUnitStr = valorUnit.toFixed(2).replace('.', ',');
            const totalPesavelStr = totalPesavel.toFixed(2).replace('.', ',');
            const pesoStr = peso.toString().replace('.', ',');

            const linha1 = `⚖️ ${nomeSalvo} - R$ ${valorUnitStr}/kg`;
            const linha2 = `Peso: ${pesoStr}kg = <b>R$ ${totalPesavelStr}</b>`;

            return `<div class="card" style="border-left:4px solid #3b82f6;">
                <div style="flex-grow:1; cursor:pointer;" onclick="editarPesavel('${p.codigo}')" title="Toque para editar o peso no caixa">
                    <div class="line1">${linha1}</div>
                    <div class="line2">${linha2} <span style="color:#3b82f6;font-size:11px;">(Editar)</span></div>
                </div>
                <div style="display:flex;align-items:center">
                    <button class="btnExcluirItem" onclick="removerProduto(${i})" title="Excluir item">🗑️</button>
                </div>
            </div>`;
        } else {
            const qtd=parseInt(p.qtd)||1;
            const totalItem=valorUnit*qtd;
            if(valorUnit) totalGeral+=totalItem;

            const isInterno = p.codigo.startsWith('2');
            const classeCard = isInterno? 'card interno' : 'card';
            const valorUnitStr = valorUnit.toFixed(2).replace('.', ',');
            const totalItemStr = totalItem.toFixed(2).replace('.', ',');

            const linha1=valorUnit?`${nomeSalvo} - R$ ${valorUnitStr}`:`${nomeSalvo}`;
            const linha2=valorUnit?`${codigoSeguro} - ${qtd}x = <b>R$ ${totalItemStr}</b>`:`${codigoSeguro}`;
            
            return `<div class="${classeCard}">
                <div style="flex-grow:1; cursor:pointer;" onclick="editarNormal('${p.codigo}')" title="Toque para editar este produto">
                    <div class="line1">${linha1}</div>
                    <div class="line2">${linha2} <span style="color:#f59e0b;font-size:11px;">(Editar)</span></div>
                </div>
                <div style="display:flex;align-items:center">
                    <button class="btnExcluirItem" onclick="removerProduto(${i})" title="Excluir item">🗑️</button>
                    <button class="qtdBtn sec" onclick="alterarQtd(${i},-1)">-</button>
                    <span>${qtd}</span>
                    <button class="qtdBtn" onclick="alterarQtd(${i},1)">+</button>
                </div>
            </div>`;
        }
    }).join('');

    divTotal.innerText=`R$ ${totalGeral.toFixed(2).replace('.', ',')}`;
}

function removerProduto(index) {
    mostrarAlertaCustom('Excluir Produto', 'Tem certeza que deseja excluir este produto da lista?', true, () => {
        produtos.splice(index, 1);
        salvar();
    });
}

function alterarQtd(index,delta){produtos[index].qtd=Math.max(1,(produtos[index].qtd||1)+delta);salvar();}

function salvar(){
    try {
        localStorage.setItem('produtos',JSON.stringify(produtos));
        localStorage.setItem('nomesProdutos',JSON.stringify(nomes));
        localStorage.setItem('valoresProdutos',JSON.stringify(valores));
    } catch(e) {}
    renderLista();
}

// ================= LÓGICA DE PRODUTOS NORMAIS =================

async function adicionarProduto(codigo){
    codigo=codigo.trim();
    if(!codigo) return;
    await stopScannerSafe();
    codigoAtual=codigo;
    const ex=produtos.find(p=>p.codigo===codigo);

    if(ex){
        ex.qtd = (parseInt(ex.qtd)||1) + 1;
        salvar();
        mostrarAlertaCustom('Produto já na lista', `${safeText(nomes[codigo]||ex.nome||'Produto')} já estava na lista. Quantidade aumentada para ${ex.qtd}x.`, false);
        return;
    }

    document.getElementById('codigoTemp').innerText=codigo;

    const statusBusca = document.getElementById('statusBusca');
    statusBusca.innerText="";

    document.getElementById('boxFotoRotulo').style.display = 'none';

    const isUsoInterno = codigo.startsWith('2');
    const isBalancaPadrao = codigo.startsWith('2') && codigo.length === 13;

    const msgUltimo = document.getElementById('msgUltimoPreco');
    msgUltimo.innerText = "";
    const histPreco = typeof buscarUltimoPreco === 'function'? buscarUltimoPreco(codigo) : null;
    let valorInput = ex?.valor||valores[codigo]?.valor||'';

    if(histPreco) {
        let precoFormatado = parseFloat(histPreco.valor).toFixed(2).replace('.', ',');
        msgUltimo.innerHTML = `💡 Último valor pago: <b>R$ ${precoFormatado}</b> (${histPreco.supermercado} em ${histPreco.data})`;
        if(!valorInput) valorInput = histPreco.valor;
    }

    if(isBalancaPadrao &&!valorInput) {
        const valorCentavos = parseInt(codigo.substring(7, 12), 10);
        if (valorCentavos > 0) {
            valorInput = (valorCentavos / 100).toFixed(2);
        }
    }

    if(valorInput) {
        valorInput = parseFloat(valorInput.toString().replace(',', '.')).toFixed(2).replace('.', ',');
    }

    document.getElementById('inputNome').value=nomes[codigo]||valores[codigo]?.nome||ex?.nome||'';
    document.getElementById('inputValor').value=valorInput;
    document.getElementById('inputQtd').value=ex?.qtd || 1;
    document.getElementById('modalNome').style.display='flex';
    mostrarAnuncio();

    if(!nomes[codigo]&&!valores[codigo]?.nome&&!ex?.nome){
        if(isUsoInterno){
            statusBusca.innerText="Digite o nome.";
        } else {
            let nomeNet=await buscarNomeNaInternet(codigo);
            if(nomeNet && codigoAtual === codigo){
                document.getElementById('inputNome').value=nomeNet;
                nomes[codigo]=nomeNet;
            }
        }
    }
}

window.editarNormal = (codigo) => {
    const p = produtos.find(x => x.codigo === codigo);
    if(!p) return;

    codigoAtual = codigo;
    document.getElementById('codigoTemp').innerText = codigo;
    document.getElementById('statusBusca').innerText = "";
    document.getElementById('msgUltimoPreco').innerText = "";

    document.getElementById('inputNome').value = p.nome || nomes[codigo] || '';
    document.getElementById('inputValor').value = parseFloat(p.valor || 0).toFixed(2).replace('.', ',');
    document.getElementById('inputQtd').value = p.qtd || 1;

    document.getElementById('modalNome').style.display = 'flex';
    mostrarAnuncio();
};

document.getElementById('inputValor').addEventListener('input', function(e) {
    let value = e.target.value.replace(/\D/g, "");
    if (value === "") { e.target.value = ""; return; }
    value = (parseInt(value, 10) / 100).toFixed(2);
    e.target.value = value.replace(".", ",");
});

document.getElementById('btnSalvarNome').onclick=()=>{
    const nome=document.getElementById('inputNome').value.trim();
    let valor=document.getElementById('inputValor').value.trim();

    if(!nome ||!valor) {
        document.getElementById('tituloAlerta').innerText = 'Atenção';
        document.getElementById('msgAlerta').innerText = 'Por favor, preencha o nome e o valor do produto antes de salvar.';
        document.getElementById('btnAlertaCancelar').style.display = 'none';
        document.getElementById('modalAlerta').style.display = 'flex';
        return;
    }

    if(valor) valor = valor.replace(',', '.');
    const qtd=Math.max(1,parseInt(document.getElementById('inputQtd').value)||1);

    if(nome)nomes[codigoAtual]=nome;
    if(nome||valor)valores[codigoAtual]={nome:nome,valor:valor};

    const ex=produtos.find(p=>p.codigo===codigoAtual);
    if(ex){
        ex.qtd=qtd;
        if(nome)ex.nome=nome;
        if(valor)ex.valor=valor;
    }else{
        produtos.push({codigo:codigoAtual,nome:nome,valor:valor,qtd:qtd});
    }

    document.getElementById('modalNome').style.display='none';
    salvar();
};
document.getElementById('btnCancelar').onclick=()=>{document.getElementById('modalNome').style.display='none'; if(currentAbortController){ try{ currentAbortController.abort(); }catch(e){} }};

document.getElementById('btnScan').onclick = async () => {
    if(isScanning){
        await stopScannerSafe();
        return;
    }
    if(typeof Html5Qrcode === 'undefined') {
        mostrarAlertaCustom('Erro', 'Biblioteca indisponível.', false);
        return;
    }
    if(!html5QrCode) html5QrCode = new Html5Qrcode("reader");

    const isLandscape = window.innerWidth > window.innerHeight;
    const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent);

    const qrboxSize = isLandscape? { width: 300, height: 300 } : { width: 250, height: 150 };

    const config = {
        fps: 15,
        qrbox: qrboxSize,
        aspectRatio: isLandscape? 1.7777778 : 1.0,
        formatsToSupport: [
            Html5QrcodeSupportedFormats.EAN_13,
            Html5QrcodeSupportedFormats.EAN_8,
            Html5QrcodeSupportedFormats.UPC_A,
            Html5QrcodeSupportedFormats.UPC_E,
            Html5QrcodeSupportedFormats.CODE_128,
            Html5QrcodeSupportedFormats.CODE_39
        ],
        experimentalFeatures: {
            useBarCodeDetectorIfSupported: false
        },
        videoConstraints: {
            facingMode: "environment",
            width: { min: 1280, ideal: 1920 },
            height: { min: 720, ideal: 1080 }
        }
    };

    if(isIOS){
        config.videoConstraints = {
            width: { min: 1280, ideal: 1280 },
            height: { min: 720, ideal: 720 },
            facingMode: "environment"
        };
    }

    try {
        isScanning = true;
        const btn = document.getElementById('btnScan');
        btn.innerText = "✖ FECHAR CÂMERA";
        btn.style.background = "#ef4444";
        btn.style.color = "#ffffff";

        await html5QrCode.start(
            { facingMode: "environment" },
            config,
            async (d) => {
                await stopScannerSafe();
                adicionarProduto(d);
            },
            () => {}
        );
    } catch(e) {
        isScanning = false;
        const btn = document.getElementById('btnScan');
        if(btn){ btn.innerText = "📷 ESCANEAR"; btn.style.background = "#f59e0b"; btn.style.color = "#000000"; }
        mostrarAlertaCustom('Erro', 'Necessário HTTPS e permissão da câmera. Se negou antes, limpe o cache do PWA.', false);
    }
};

// ================= LÓGICA DE PRODUTOS PESÁVEIS =================
function atualizarTotalPesavel() {
    let preco = parseFloat(document.getElementById('inputPrecoKg').value.replace(',', '.')) || 0;
    let peso = parseFloat(document.getElementById('inputPeso').value.replace(',', '.')) || 0;
    let total = preco * peso;
    document.getElementById('totalPesavelCalculado').innerText = `R$ ${total.toFixed(2).replace('.', ',')}`;
}

document.getElementById('btnSemCodigo').onclick = async () => {
    await stopScannerSafe();
    codigoEdicaoPesavel = 'PESAVEL-' + Date.now();
    document.getElementById('inputNomePesavel').value = '';
    document.getElementById('inputPrecoKg').value = '';
    document.getElementById('inputPeso').value = '';
    document.getElementById('totalPesavelCalculado').innerText = 'R$ 0,00';
    document.getElementById('msgUltimoPrecoPesavel').innerText = '';
    document.getElementById('modalPesavel').style.display = 'flex';
};

document.getElementById('inputNomePesavel').addEventListener('blur', function(e) {
    const nomeDigitado = e.target.value.trim();
    const msgPesavel = document.getElementById('msgUltimoPrecoPesavel');
    msgPesavel.innerText = '';

    if (nomeDigitado && typeof buscarUltimoPrecoPorNome === 'function') {
        const histPreco = buscarUltimoPrecoPorNome(nomeDigitado);
        if (histPreco) {
            let precoFormatado = parseFloat(histPreco.valor).toFixed(2).replace('.', ',');
            msgPesavel.innerHTML = `💡 Último valor pago: <b>R$ ${precoFormatado}/kg</b> (${histPreco.supermercado} em ${histPreco.data})`;

            const inputPreco = document.getElementById('inputPrecoKg');
            if (!inputPreco.value) {
                inputPreco.value = precoFormatado;
                atualizarTotalPesavel();
            }
        }
    }
});

document.getElementById('inputPrecoKg').addEventListener('input', function(e) {
    let value = e.target.value.replace(/\D/g, "");
    if (value === "") { e.target.value = ""; atualizarTotalPesavel(); return; }
    value = (parseInt(value, 10) / 100).toFixed(2);
    e.target.value = value.replace(".", ",");
    atualizarTotalPesavel();
});

document.getElementById('inputPeso').addEventListener('input', function(e) {
    let val = e.target.value.replace(',', '.');
    if (val.match(/[^0-9.]/)) {
        e.target.value = e.target.value.replace(/[^0-9.,]/g, '');
    }
    atualizarTotalPesavel();
});

document.getElementById('btnCancelarPesavel').onclick = () => {
    document.getElementById('modalPesavel').style.display = 'none';
};

document.getElementById('btnSalvarPesavel').onclick = () => {
    const nome = document.getElementById('inputNomePesavel').value.trim();
    let preco = document.getElementById('inputPrecoKg').value.trim();
    let pesoStr = document.getElementById('inputPeso').value.trim();

    if(!nome ||!preco ||!pesoStr) {
        document.getElementById('tituloAlerta').innerText = 'Atenção';
        document.getElementById('msgAlerta').innerText = 'Por favor, preencha o nome do produto, o preço do quilo e o peso (mesmo que estimado).';
        document.getElementById('btnAlertaCancelar').style.display = 'none';
        document.getElementById('modalAlerta').style.display = 'flex';
        acaoConfirmarAlerta = null;
        return;
    }

    preco = preco.replace(',', '.');
    let peso = parseFloat(pesoStr.replace(',', '.'));

    const ex = produtos.find(p => p.codigo === codigoEdicaoPesavel);
    if(ex) {
        ex.nome = nome;
        ex.valor = preco;
        ex.qtd = peso;
    } else {
        produtos.push({
            codigo: codigoEdicaoPesavel,
            nome: nome,
            valor: preco,
            qtd: peso
        });
    }

    document.getElementById('modalPesavel').style.display = 'none';
    salvar();
};

window.editarPesavel = (codigo) => {
    const p = produtos.find(x => x.codigo === codigo);
    if(!p) return;
    codigoEdicaoPesavel = codigo;
    document.getElementById('inputNomePesavel').value = p.nome;
    document.getElementById('inputPrecoKg').value = parseFloat(p.valor).toFixed(2).replace('.', ',');
    document.getElementById('inputPeso').value = p.qtd.toString().replace('.', ',');
    document.getElementById('msgUltimoPrecoPesavel').innerText = '';
    atualizarTotalPesavel();
    document.getElementById('modalPesavel').style.display = 'flex';
};

// ================= CONTROLES GERAIS E FINALIZAÇÃO =================
document.getElementById('btnLimpar').onclick=()=>{
    mostrarAlertaCustom('Limpar Lista', 'Deseja limpar toda a lista?', true, () => {
        produtos=[];
        salvar();
    });
};

function renderizarListaMercados() {
    const container = document.getElementById('listaMercadosContainer');
    if(!container) return;

    let recentes = [];
    if(typeof obterSupermercadosRecentes === 'function') {
        recentes = obterSupermercadosRecentes();
    }

    let html = '';

    if(recentes.length > 0) {
        html += '<small style="color:#fcd34d;font-weight:bold;margin-bottom:4px;display:block;">⭐ Recentes (Histórico):</small>';
        recentes.forEach(m => {
            html += `<button type="button" class="btnMercadoFixo btn-recente" onclick="selecionarMercado('${m.replace(/'/g, "\\'")}')">⭐ ${m}</button>`;
        });
        html += '<small style="color:#a1a1aa;font-weight:bold;margin-top:8px;margin-bottom:4px;display:block;">Outras opções:</small>';
    }

    MERCADOS_PADRAO.forEach(m => {
        if(!recentes.includes(m)) {
            html += `<button type="button" class="btnMercadoFixo" onclick="selecionarMercado('${m.replace(/'/g, "\\'")}')">${m}</button>`;
        }
    });

    container.innerHTML = html;
}

window.selecionarMercado = (nome) => {
    document.getElementById('inputSupermercado').value = nome;
};

document.getElementById('btnFinalizar').onclick = () => {
    if(produtos.length === 0) return;
    document.getElementById('inputSupermercado').value = '';
    renderizarListaMercados();
    document.getElementById('modalLocal').style.display = 'flex';
};

document.getElementById('btnSalvarCompraFinal').onclick = () => {
    const local = document.getElementById('inputSupermercado').value.trim();
    if(!local) {
        document.getElementById('tituloAlerta').innerText = 'Atenção';
        document.getElementById('msgAlerta').innerText = 'Por favor, informe o nome do supermercado.';
        document.getElementById('btnAlertaCancelar').style.display = 'none';
        document.getElementById('modalAlerta').style.display = 'flex';
        return;
    }

    if(typeof salvarCompraNoHistorico === 'function') {
        salvarCompraNoHistorico(local, produtos);
    }

    document.getElementById('modalLocal').style.display = 'none';

    mostrarAlertaCustom('Sucesso', 'Compra salva no histórico com sucesso!', false, () => {
        produtos = [];
        salvar();
    });
};

document.getElementById('btnCancelarLocal').onclick = () => {
    document.getElementById('modalLocal').style.display = 'none';
};

// ================= GESTÃO DO MODAL DE HISTÓRICO DE COMPRAS =================
function renderizarHistoricoModal() {
    const container = document.getElementById('historicoListaVertical');
    if(!container) return;

    let historico = [];
    if(typeof obterHistorico === 'function') {
        historico = obterHistorico();
    }

    if(historico.length === 0) {
        container.innerHTML = '<p style="text-align:center;color:#888;margin-top:15px;">Nenhuma compra salva no histórico ainda.</p>';
        return;
    }

    container.innerHTML = historico.map((compra) => {
        let totalCompra = 0;
        let itensHtml = compra.itens.map(item => {
            const val = parseFloat(item.valor || 0);
            const qtd = parseFloat(item.qtd || 1);
            const subtotal = val * qtd;
            totalCompra += subtotal;

            const isPesavel = item.codigo && item.codigo.startsWith('PESAVEL-');
            const unidadeOuPeso = isPesavel? `${qtd.toString().replace('.', ',')} kg` : `${qtd}x`;
            const nomeItem = sanitizarTexto(item.nome || 'Produto');

            return `<div class="historico-produto-linha">
                <span>• ${nomeItem} (${unidadeOuPeso})</span>
                <span style="color:#fcd34d;">R$ ${subtotal.toFixed(2).replace('.', ',')}</span>
            </div>`;
        }).join('');

        const totalStr = totalCompra.toFixed(2).replace('.', ',');
        const compraId = parseInt(compra.id, 10);
        const dataSanitizada = sanitizarTexto(compra.data || '');
        const mercadoSanitizado = sanitizarTexto(compra.supermercado || 'Não informado');

        return `<div class="historico-item-card" id="hist-card-${compraId}">
            <div class="historico-item-header" onclick="toggleDetalhesHistorico(${compraId})">
                <div class="historico-info">
                    <span class="historico-data-mercado">🛒 ${dataSanitizada} - ${mercadoSanitizado}</span>
                    <span class="historico-valor-total">Total: <b>R$ ${totalStr}</b></span>
                </div>
                <div class="historico-acoes" onclick="event.stopPropagation()">
                    <button class="btn-acao-hist" onclick="transferirCompraHistorico(${compraId})" title="Transferir / Exportar Compra">📤</button>
                    <button class="btn-acao-hist" onclick="excluirCompraHistorico(${compraId})" title="Excluir Compra">🗑️</button>
                </div>
            </div>
            <div id="hist-detalhes-${compraId}" class="historico-detalhes">
                <div style="font-weight:bold;margin-bottom:6px;color:#a1a1aa;">Itens da Compra:</div>
                ${itensHtml}
            </div>
        </div>`;
    }).join('');
}

window.toggleDetalhesHistorico = (id) => {
    const detalhes = document.getElementById(`hist-detalhes-${id}`);
    if(detalhes) {
        if(detalhes.style.display === 'block') {
            detalhes.style.display = 'none';
        } else {
            detalhes.style.display = 'block';
        }
    }
};

window.excluirCompraHistorico = (id) => {
    document.getElementById('modalHistorico').style.display = 'none';

    mostrarAlertaCustom('Excluir Compra', 'Tem certeza que deseja remover esta compra do histórico?', true, () => {
        if(typeof removerCompraDoHistorico === 'function') {
            removerCompraDoHistorico(id);
            renderizarHistoricoModal();
            document.getElementById('modalHistorico').style.display = 'flex';
        }
    }, () => {
        document.getElementById('modalHistorico').style.display = 'flex';
    });
};

window.transferirCompraHistorico = (id) => {
    compraIdParaExportar = id;
    document.getElementById('modalExportar').style.display = 'flex';
};

const btnEngrenagem=document.getElementById('btnAbrirHistorico'); const menuEngrenagem=document.getElementById('menuEngrenagem');
btnEngrenagem.onclick=(e)=>{e.stopPropagation(); menuEngrenagem.classList.toggle('aberto');};
window.abrirHistoricoFromMenu=()=>{menuEngrenagem.classList.remove('aberto'); renderizarHistoricoModal(); document.getElementById('modalHistorico').style.display='flex';};
window.abrirManual=()=>{menuEngrenagem.classList.remove('aberto'); document.getElementById('modalManual').style.display='flex';};
document.getElementById('btnFecharHistorico').onclick=()=>{document.getElementById('modalHistorico').style.display='none';};
document.addEventListener('click',(e)=>{if(!menuEngrenagem.contains(e.target)&&e.target!==btnEngrenagem){menuEngrenagem.classList.remove('aberto');}});

// ================= EVENTOS DO MODAL DE EXPORTAÇÃO - CORRIGIDO =================
function gerarNomeArquivo(compra, ext){
  const data = (compra.data || new Date().toLocaleDateString('pt-BR')).replace(/\//g,'-');
  const mercado = (compra.supermercado || 'compra').replace(/[^a-z0-9]/gi,'_').substring(0,20);
  return `MyMarket-${mercado}-${data}.${ext}`;
}

function mostrarSucessoExport(nomeArquivo){
  mostrarAlertaCustom(
    'Exportação Concluída',
    `O arquivo ${nomeArquivo} foi gerado e salvo na pasta de Downloads do seu dispositivo.`,
    false,
    () => {
      document.getElementById('modalHistorico').style.display = 'flex';
    }
  );
}

window.exportarCompraCSV = (id) => {
  const historico = typeof obterHistorico === 'function'? obterHistorico() : [];
  const compra = historico.find(c => c.id == id);
  if(!compra) return null;

  const nomeArquivo = gerarNomeArquivo(compra, 'csv');
  const jaBaixados = JSON.parse(localStorage.getItem('arquivosBaixados') || '{}');
  const chave = `csv-${id}`;

  const executarDownload = () => {
    let csv = "Produto;Codigo;Qtd;Valor Unit;Subtotal\n";
    compra.itens.forEach(item => {
      const nome = (item.nome || '').replace(/;/g, ',');
      const val = parseFloat(item.valor||0);
      const qtd = parseFloat(item.qtd||1);
      csv += `${nome};${item.codigo};${qtd};${val.toFixed(2).replace('.',',')};${(val*qtd).toFixed(2).replace('.',',')}\n`;
    });
    const blob = new Blob([csv], {type: 'text/csv;charset=utf-8;'});
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a'); a.href = url; a.download = nomeArquivo; a.click();
    URL.revokeObjectURL(url);
    jaBaixados[chave] = true;
    localStorage.setItem('arquivosBaixados', JSON.stringify(jaBaixados));
    mostrarSucessoExport(nomeArquivo);
  };

  if(jaBaixados[chave]){
    mostrarAlertaCustom('Arquivo já baixado', `Deseja baixar o arquivo ${nomeArquivo} novamente?`, true,
      () => { executarDownload(); },
      () => { document.getElementById('modalHistorico').style.display = 'flex'; }
    );
  } else {
    executarDownload();
  }
};

window.exportarCompraTXT = (id) => {
  const historico = typeof obterHistorico === 'function'? obterHistorico() : [];
  const compra = historico.find(c => c.id == id);
  if(!compra) return null;

  const nomeArquivo = gerarNomeArquivo(compra, 'txt');
  const jaBaixados = JSON.parse(localStorage.getItem('arquivosBaixados') || '{}');
  const chave = `txt-${id}`;

  const executarDownload = () => {
    let txt = `MyMarket - ${compra.supermercado} - ${compra.data}\n\n`;
    compra.itens.forEach(item => {
      const val = parseFloat(item.valor||0);
      const qtd = parseFloat(item.qtd||1);
      txt += `${item.nome} - ${qtd} x R$ ${val.toFixed(2).replace('.',',')} = R$ ${(val*qtd).toFixed(2).replace('.',',')}\n`;
    });
    const blob = new Blob([txt], {type: 'text/plain;charset=utf-8;'});
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a'); a.href = url; a.download = nomeArquivo; a.click();
    URL.revokeObjectURL(url);
    jaBaixados[chave] = true;
    localStorage.setItem('arquivosBaixados', JSON.stringify(jaBaixados));
    mostrarSucessoExport(nomeArquivo);
  };

  if(jaBaixados[chave]){
    mostrarAlertaCustom('Arquivo já baixado', `Deseja baixar o arquivo ${nomeArquivo} novamente?`, true,
      () => { executarDownload(); },
      () => { document.getElementById('modalHistorico').style.display = 'flex'; }
    );
  } else {
    executarDownload();
  }
};

document.getElementById('btnExportarExcel').onclick = () => {
    document.getElementById('modalExportar').style.display = 'none';
    if(compraIdParaExportar) window.exportarCompraCSV(compraIdParaExportar);
};

document.getElementById('btnExportarTxt').onclick = () => {
    document.getElementById('modalExportar').style.display = 'none';
    if(compraIdParaExportar) window.exportarCompraTXT(compraIdParaExportar);
};

document.getElementById('btnExportarTexto').onclick = () => {
    document.getElementById('modalExportar').style.display = 'none';
    if (compraIdParaExportar && typeof compartilharCompra === 'function') {
        compartilharCompra(compraIdParaExportar);
        setTimeout(() => {
            document.getElementById('modalHistorico').style.display = 'flex';
        }, 500);
    }
};

document.getElementById('btnCancelarExportar').onclick = () => {
    document.getElementById('modalExportar').style.display = 'none';
    document.getElementById('modalHistorico').style.display = 'flex';
    acaoConfirmarAlerta = null;
    acaoCancelarAlerta = null;
};

renderLista();

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service_worker.js')
   .then(() => console.log('Service Worker registrado'))
   .catch((err) => console.log('Falha no SW', err));
}

window.addEventListener('beforeunload', () => {
  if(isScanning){
    try{ html5QrCode.stop(); }catch(e){}
  }
});

// ===== LÓGICA DE INSTALAÇÃO PWA (ANDROID) =====
let alertaInstalacao;
const bannerInstalacao = document.getElementById('bannerInstalacao');

window.addEventListener('beforeinstallprompt', (e) => {
  e.preventDefault();
  alertaInstalacao = e;
  if (bannerInstalacao) bannerInstalacao.style.display = 'block';
});

if (bannerInstalacao) {
  bannerInstalacao.addEventListener('click', async () => {
    if (alertaInstalacao) {
      alertaInstalacao.prompt();
      const { outcome } = await alertaInstalacao.userChoice;
      if (outcome === 'accepted') {
        console.log('Usuário aceitou a instalação');
        bannerInstalacao.style.display = 'none';
      }
      alertaInstalacao = null;
    }
  });
}

window.addEventListener('appinstalled', () => {
  if (bannerInstalacao) bannerInstalacao.style.display = 'none';
  alertaInstalacao = null;
});

</script>

<div id="turnstile-widget" style="position:absolute; left:-9999px;"></div>

<!-- ===== MODAL DE SELEÇÃO DE FORMATO DE EXPORTAÇÃO - ÚNICO ===== -->
<div id="modalExportar" class="modal-overlay">
    <div class="modal-content" style="text-align:center; background:#ffffff !important; color:#1a1a1a !important;">
        <h3 style="margin:0 0 10px 0; color:#000 !important;">📤 Exportar Compra</h3>
        <p style="margin-bottom:20px; font-size:14px; color:#666 !important;">Escolha o formato:</p>
        <div style="display:flex; flex-direction:column; gap:10px;">
            <button id="btnExportarExcel" style="background:#16a34a; color:#fff;">📊 Excel (.csv)</button>
            <button id="btnExportarTxt" style="background:#6b7280; color:#fff;">📄 .txt (Arquivo)</button>
            <button id="btnExportarTexto" style="background:#2563eb; color:#fff;">💬 WhatsApp</button>
            <button id="btnCancelarExportar" class="sec" style="margin-top:5px;">Cancelar</button>
        </div>
    </div>
</div>

<!-- ===== MODAL MANUAL / LEIA-ME - ÚNICO - FUNDO BRANCO 13/10/26 ===== -->
<div id="modalManual" class="modal-overlay" onclick="if(event.target.id === 'modalManual') this.style.display='none'">
    <div class="modal-content" style="background:#ffffff !important; color:#1a1a1a !important; max-height:85vh; overflow-y:auto; text-align:left; padding:20px; max-width:500px;">
        <div style="display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #eee; padding-bottom:10px; margin-bottom:15px;">
            <h2 style="margin:0; color:#000 !important; font-size:18px;">📖 Manual MyMarket</h2>
            <button id="btnFecharManual" onclick="document.getElementById('modalManual').style.display='none'" style="background:#ef4444; color:#fff; padding:5px 12px; border:none; border-radius:6px; font-weight:bold; cursor:pointer; width:auto; margin:0;">✕</button>
        </div>
        <div style="color:#333 !important; font-size:14px; line-height:1.6;">
            <p style="margin-bottom: 12px;">Bem-vindo ao <b>MyMarket</b>, o seu assistente de compras inteligente! Veja como utilizar todas as funcionalidades:</p>
            <p style="margin-bottom: 10px;"><b>📷 Escanear Produto:</b> Toque em "ESCANEAR" para usar a câmera. O app faz a busca online automática. Se não encontrar (ou estiver sem internet), você pode digitar o nome ou tirar uma 📸 foto do rótulo.</p>
            <p style="margin-bottom: 10px;"><b>⚖️ Produtos Pesáveis:</b> Hortifrúti ou padaria? Use o botão "📝 Sem código (⚖️)". Informe o nome, o preço por Kg e o peso. O aplicativo calcula o total na hora.</p>
            <p style="margin-bottom: 10px;"><b>💡 Inteligência de Preços:</b> O app memoriza suas últimas 20 compras. Ao ler um código ou digitar um nome de produto, ele exibirá automaticamente qual foi o último preço que você pagou por ele.</p>
            <p style="margin-bottom: 10px;"><b>✅ Finalizar Compra:</b> Quando colocar tudo no carrinho e for ao caixa, clique em "Finalizar e Salvar". Informe o nome do supermercado para guardar os itens no seu histórico.</p>
            <p style="margin-bottom: 10px;"><b>📋 Histórico e Exportação:</b> Acesse o menu da engrenagem (⚙️) para rever listas antigas. Lá, você pode baixar sua lista em Excel (.csv), em arquivo de texto (.txt) ou compartilhar rapidamente pelo WhatsApp.</p>
            <p style="margin-bottom: 10px;"><b>📲 Aplicativo Offline:</b> Instale o MyMarket através do aviso azul na tela principal. Uma vez instalado, você pode escanear e listar seus produtos normalmente, mesmo se o supermercado não tiver sinal de internet.</p>
            <div style="margin-top:15px; padding-top:10px; border-top: 1px solid #ccc; font-size:11px; color:#666 !important; text-align:center;">
                v3.2 - 13/10/26 - mymarketapp.pages.dev
            </div>
        </div>
    </div>
</div>

</body>
</html>