<!-- ==============================================================================
# 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.
# ============================================================================== -->

<!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" 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 3.5s 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: 20px; 
  color: #000000; 
  font-style: italic; 
  display: flex; 
  align-items: center; 
  gap: 5px; 
}
.icone-carrinho {
  display: inline-block;
  vertical-align: middle;
}
.topo-direita { display: flex; align-items: center; gap: 10px; }
#totalTopo { 
  background: transparent; 
  color: #000000; 
  padding: 0; 
  font-weight: bold; 
  font-size: 18px; 
  display: block !important;
}
.btn-engrenagem {
  background: #000000;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: transform 0.2s;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  margin-top: -3px;
}
.btn-engrenagem:hover {
  transform: scale(1.08);
}
.btn-engrenagem svg {
  width: 20px;
  height: 20px;
  fill: #f59e0b;
}

#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: 2px dashed #f59e0b;
  border-radius: 12px;
  padding: 10px;
  margin: 15px 0;
  text-align: center;
  min-height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.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;
}

</style>
</head>
<body>

<div id="splashScreen">
  <div class="splash-carrinho-wrap">
    <span class="carrinho-animado">
      <svg viewBox="0 0 24 24" width="32" height="32" fill="#F59E0B" style="vertical-align: middle; margin-right: 6px; transform: scaleX(-1);">
        <circle cx="7" cy="19.5" r="1.5" />
        <circle cx="17" cy="19.5" r="1.5" />
        <path fill-rule="evenodd" d="M1 2h3.2l1.4 3h15.8c.6 0 1 .5.9 1.1l-2.2 9c-.1.5-.6.9-1.1.9H7.2c-.5 0-1-.3-1.1-.8L3.8 3.5H1V2zm5.8 4.2l1.5 6.3h10.2l1.5-6.3H6.8z" />
        <rect x="8.0" y="6.0" width="1.2" height="6.5" />
        <rect x="9.8" y="6.0" width="0.6" height="6.5" />
        <rect x="11.2" y="6.0" width="1.6" height="6.5" />
        <rect x="13.5" y="6.0" width="0.8" height="6.5" />
        <rect x="15.2" y="6.0" width="1.4" height="6.5" />
        <rect x="17.2" y="6.0" width="0.8" height="6.5" />
      </svg>
      <i>MyMarket</i>
    </span>
  </div>
</div>

<div class="topo">
  <h2>
    <svg class="icone-carrinho" viewBox="0 0 24 24" width="22" height="22" fill="#000000" style="vertical-align: middle;">
        <circle cx="7" cy="19.5" r="1.5" />
        <circle cx="17" cy="19.5" r="1.5" />
        <path fill-rule="evenodd" d="M1 2h3.2l1.4 3h15.8c.6 0 1 .5.9 1.1l-2.2 9c-.1.5-.6.9-1.1.9H7.2c-.5 0-1-.3-1.1-.8L3.8 3.5H1V2zm5.8 4.2l1.5 6.3h10.2l1.5-6.3H6.8z" />
        <rect x="8.0" y="6.0" width="1.2" height="6.5" />
        <rect x="9.8" y="6.0" width="0.6" height="6.5" />
        <rect x="11.2" y="6.0" width="1.6" height="6.5" />
        <rect x="13.5" y="6.0" width="0.8" height="6.5" />
        <rect x="15.2" y="6.0" width="1.4" height="6.5" />
        <rect x="17.2" y="6.0" width="0.8" height="6.5" />
    </svg>
    MyMarket
  </h2>
  <div class="topo-direita">
    <div id="totalTopo">R$ 0,00</div>
    <button id="btnAbrirHistorico" class="btn-engrenagem" title="Histórico de Compras">
      <svg viewBox="0 0 24 24">
        <path d="M19.14,12.94c0.04-0.3,0.06-0.61,0.06-0.94c0-0.32-0.02-0.64-0.07-0.94l2.03-1.58c0.18-0.14,0.23-0.41,0.12-0.61 l-1.92-3.32c-0.12-0.22-0.37-0.29-0.59-0.22l-2.39,0.96c-0.5-0.38-1.03-0.7-1.62-0.94L14.4,2.81c-0.04-0.24-0.24-0.41-0.48-0.41 h-3.84c-0.24,0-0.43,0.17-0.47,0.41L9.25,5.35C8.66,5.59,8.12,5.92,7.63,6.3L5.24,5.34c-0.22-0.08-0.47,0-0.59,0.22L2.73,8.88 c-0.11,0.2-0.06,0.47,0.12,0.61l2.03,1.58c-0.05,0.3-0.07,0.62-0.07,0.94s0.02,0.64,0.07,0.94l-2.03,1.58 c-0.18,0.14-0.23,0.41-0.12,0.61l1.92,3.32c0.12,0.22,0.37,0.29,0.59,0.22l2.39-0.96c0.5,0.38,1.03,0.7,1.62,0.94l0.36,2.54 c0.05,0.24,0.24,0.41,0.48,0.41h3.84c0.24,0,0.43-0.17,0.47-0.41l0.36-2.54c0.59-0.24,1.13-0.56,1.62-0.94l2.39,0.96 c0.22,0.08,0.47,0,0.59-0.22l1.92-3.32c0.11-0.2,0.06-0.47-0.12-0.61L19.14,12.94z M12,15.6c-1.98,0-3.6-1.62-3.6-3.6 s1.62-3.6,3.6-3.6s3.6,1.62,3.6,3.6S13.98,15.6,12,15.6z"/>
      </svg>
    </button>
  </div>
</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">
<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>

<!-- ===== MODAL DE SELEÇÃO DE FORMATO DE EXPORTAÇÃO ===== -->
<div id="modalExportar" class="modal-overlay">
    <div class="modal-content" style="text-align: center;">
        <h3 style="margin-top:0; margin-bottom: 10px;">📤 Exportar Compra</h3>
        <p style="margin-bottom: 20px; font-size: 14px; color: #a1a1aa;">Escolha o formato desejado para transferência:</p>
        
        <div style="display: flex; flex-direction: column; gap: 10px;">
            <button id="btnExportarExcel" style="background:#16a34a; color:#ffffff;">📊 Baixar para Excel (.csv)</button>
            <button id="btnExportarTexto" style="background:#2563eb; color:#ffffff;">💬 Compartilhar Texto (WhatsApp)</button>
            <button id="btnCancelarExportar" class="sec" style="margin-top: 5px;">Cancelar</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);
  },3800);
});

// ===== 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;

const PROXY_WORKER_URL = "https://mymarket-proxy.avernax.workers.dev";
let codigoEdicaoPesavel = '';

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>`;
  }
}

async function buscarNomeNaInternet(codigo){
    const status = document.getElementById('statusBusca');
    status.innerText = "🔍 Buscando...";
    
    try{
        const controller = new AbortController();
        const timeoutId = setTimeout(() => controller.abort(), 2500);
        
        let r = await fetch(`${PROXY_WORKER_URL}?codigo=${codigo}`, { 
            method: "GET",
            headers: { "X-App-Key": "MySecretPass" },
            signal: controller.signal 
        });
        clearTimeout(timeoutId);
        
        if(r.ok){
            let j = await r.json();
            let nomeResultado = j?.description || j?.product_name || "";
            if(nomeResultado){
                status.innerText = "✅";
                return nomeResultado;
            }
        }
    }catch(e){}
    
    try{
        let r = await fetch(`https://world.openfoodfacts.org/api/v0/product/${codigo}.json`);
        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}`);
        let j2 = await r2.json();
        if(j2 && j2.description){
            status.innerText = "✅";
            return j2.description;
        }
    }catch(e){}
    
    status.innerText = "Não encontrado online, digite manualmente";
    return "";
}

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 nomeSalvo=nomes[p.codigo]||valores[p.codigo]?.nome||p.nome||'SEM NOME';
        const valorUnit=parseFloat(p.valor||valores[p.codigo]?.valor||0);
        const valorUnitStr = valorUnit.toFixed(2).replace('.', ',');
        const isPesavel = p.codigo.startsWith('PESAVEL-');
        
        if (isPesavel) {
            const peso = parseFloat(p.qtd); 
            const totalPesavel = valorUnit * peso;
            if(valorUnit) totalGeral += totalPesavel;
            
            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 totalItemStr = totalItem.toFixed(2).replace('.', ',');
            
            const linha1=valorUnit?`${nomeSalvo} - R$ ${valorUnitStr}`:`${nomeSalvo}`;
            const linha2=valorUnit?`${p.codigo} - ${qtd}x = <b>R$ ${totalItemStr}</b>`:`${p.codigo}`;
            
            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();
    codigoAtual=codigo;
    const ex=produtos.find(p=>p.codigo===codigo);
    
    document.getElementById('codigoTemp').innerText=codigo;
    const statusBusca = document.getElementById('statusBusca');
    statusBusca.innerText="";
    
    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){
                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';};

document.getElementById('btnScan').onclick = async () => {
    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 {
        await html5QrCode.start(
            { facingMode: "environment" },
            config,
            (d) => { html5QrCode.stop(); adicionarProduto(d); },
            () => {}
        );
    } catch(e) {
        mostrarAlertaCustom('Erro', 'Necessário HTTPS e permissão da câmera.', 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 = () => {
    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) {
        // mantém o modal pesável aberto e joga o alerta por cima
        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';
        // quando fechar o alerta, volta pro pesável
        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'); // FIX: sanitizado
            
            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); // FIX: garante numero
        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) => {
    if(typeof compartilharCompra === 'function') {
        compartilharCompra(id);
    }
};

document.getElementById('btnAbrirHistorico').onclick = () => {
    renderizarHistoricoModal();
    document.getElementById('modalHistorico').style.display = 'flex';
};

document.getElementById('btnFecharHistorico').onclick = () => {
    document.getElementById('modalHistorico').style.display = 'none';
    acaoConfirmarAlerta = null;
    acaoCancelarAlerta = null;
};

// ================= EVENTOS DO MODAL DE EXPORTAÇÃO =================
document.getElementById('btnExportarExcel').onclick = () => {
    document.getElementById('modalExportar').style.display = 'none';
    document.getElementById('modalHistorico').style.display = 'none';
    if (typeof compraIdParaExportar !== 'undefined' && compraIdParaExportar) {
        exportarCompraExcel(compraIdParaExportar);
        mostrarAlertaCustom(
            'Exportação Concluída', 
            'O arquivo .csv da compra foi gerado e salvo na pasta de Downloads do seu dispositivo.', 
            false
        );
    }
};

document.getElementById('btnExportarTexto').onclick = () => {
    document.getElementById('modalExportar').style.display = 'none';
    document.getElementById('modalHistorico').style.display = 'none';
    if (typeof compraIdParaExportar !== 'undefined' && compraIdParaExportar) {
        exportarCompraTexto(compraIdParaExportar);
    }
};

document.getElementById('btnCancelarExportar').onclick = () => {
    document.getElementById('modalExportar').style.display = 'none';
    acaoConfirmarAlerta = null;
    acaoCancelarAlerta = null;
};

renderLista();

// Registro do Service Worker para PWA Offline
if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('/service_worker.js')
    .then(() => console.log('Service Worker registrado'))
    .catch((err) => console.log('Falha no SW', err));
}

</script>
</body>
</html>