---
import Base from '../../layouts/Base.astro';
import Icon from '../../components/Icon.astro';
import { config, onlineAtivo } from '../../lib/dados.js';
const cfg = config();
const online = onlineAtivo();
---
<Base titulo="Minha conta" descricao="Acompanhe seus lances nos leilões online da Soares Leilões." semIndex>
  <section class="pagina-topo">
    <div class="container">
      <nav class="migalhas"><a href="/">Início</a><Icon name="chevron-right" size={14} /><span>Minha conta</span></nav>
      <h1>Minha conta</h1>
      <p>Entre para dar lances e acompanhar, em tempo real, se você continua na frente.</p>
    </div>
  </section>

  {online ? (
    <div class="container">
      <div class="conta" id="conta-deslogado" hidden>
        <div class="conta__card">
          <h2>Entrar</h2>
          <form class="form" data-form="entrar" novalidate>
            <label class="campo"><span>Usuário, e-mail ou CPF/CNPJ</span><input name="usuario" autocomplete="username" required /></label>
            <label class="campo"><span>Senha</span><input name="senha" type="password" autocomplete="current-password" required /></label>
            <div class="aviso" hidden data-retorno></div>
            <button class="btn btn--grande btn--bloco" type="submit"><Icon name="lock" size={18} />Entrar</button>
            <small style="color:var(--suave)">Esqueceu a senha? Fale conosco pelo WhatsApp {cfg.whatsapp_rodape}.</small>
          </form>
        </div>
        <div class="conta__card">
          <h2>Criar cadastro</h2>
          <form class="form" data-form="cadastro" novalidate>
            <label class="campo"><span>Nome completo ou razão social</span><input name="nome" autocomplete="name" required /></label>
            <div class="form__linha">
              <label class="campo"><span>CPF ou CNPJ</span><input name="documento" inputmode="numeric" data-mascara="documento" required /></label>
              <label class="campo"><span>Celular (WhatsApp)</span><input name="celular" type="tel" inputmode="tel" autocomplete="tel" data-mascara="celular" required /></label>
            </div>
            <label class="campo"><span>E-mail</span><input name="email" type="email" autocomplete="email" required /></label>
            <div class="form__linha">
              <label class="campo"><span>Usuário</span><input name="usuario" autocomplete="username" required /></label>
              <label class="campo"><span>Senha</span><input name="senha" type="password" autocomplete="new-password" minlength="8" required /><small>Mínimo de 8 caracteres</small></label>
            </div>
            <label class="check"><input type="checkbox" name="aceite" required /><span>{cfg.leilao_termos}</span></label>
            <div class="aviso" hidden data-retorno></div>
            <button class="btn btn--grande btn--bloco" type="submit"><Icon name="check" size={18} />Criar cadastro</button>
          </form>
        </div>
      </div>

      <div class="conta conta--logado" id="conta-logado" hidden>
        <div class="conta__card conta__perfil">
          <div class="conta__avatar" data-iniciais>?</div>
          <h2 style="margin:0" data-nome></h2>
          <p style="margin:0;color:var(--suave)">@<span data-usuario></span></p>
          <div class="aviso aviso--info" data-pendente hidden>Seu cadastro está em análise. Você poderá dar lances assim que for liberado.</div>
          <a class="btn btn--bloco" href="/leiloes/?online=1"><Icon name="gavel" size={18} />Ver leilões ao vivo</a>
          <button class="btn btn--fantasma btn--bloco" type="button" data-sair><Icon name="logout" size={18} />Sair</button>
        </div>
        <div>
          <div class="secao-topo" style="margin-bottom:16px">
            <div><h2 style="margin:0">Meus lances</h2><p>Atualizado em tempo real.</p></div>
            <span class="selo selo--vivo"><span class="pulso"></span>Ao vivo</span>
          </div>
          <div id="meus-lances"></div>
        </div>
      </div>
    </div>
  ) : (
    <div class="container secao">
      <div class="vazio"><Icon name="lock" size={40} /><h3>Leilão online indisponível no momento</h3><p>Para participar, fale com nossa equipe.</p>
        <a class="btn btn--whats" href={`https://wa.me/${cfg.whatsapp_numero}`} target="_blank" rel="noopener"><Icon name="whatsapp" size={18} />Falar no WhatsApp</a></div>
    </div>
  )}
</Base>

<script>
  import { $, api, estado, aoMudarUsuario, definirUsuario, ligarFormsConta, aoVivo, toast } from '../../scripts/nucleo.js';
  import { moeda } from '../../lib/leilao.js';

  const deslogado = document.getElementById('conta-deslogado');
  const logado = document.getElementById('conta-logado');
  const lista = document.getElementById('meus-lances');
  if (deslogado) ligarFormsConta(deslogado);

  const esc = (s) => String(s ?? '').replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' })[c]);

  async function carregar() {
    try {
      const r = await api('/api/conta/eu');
      lista.innerHTML = r.lotes.length
        ? r.lotes
            .map(
              (l) => `<article class="meu-lance">
          ${l.capa ? `<img src="/uploads/${l.capa}-480.webp" alt="" loading="lazy">` : '<div class="card__placeholder"></div>'}
          <div><h3><a href="/lote/${l.slug}/" style="color:inherit">${esc(l.titulo)}</a></h3>
            <p>Seu maior lance: <strong>${moeda(l.meuMaior)}</strong> · maior lance atual: <strong>${moeda(l.maiorLance)}</strong></p>
            <p>${esc(l.fase)}${l.encerra ? ` · encerra ${new Date(l.encerra).toLocaleString('pt-BR', { dateStyle: 'short', timeStyle: 'short' })}` : ''}</p></div>
          <div>${
            l.liderando
              ? '<span class="selo selo--verde">✓ Você está na frente</span>'
              : `<a class="btn btn--vivo btn--pequeno" href="/lote/${l.slug}/">Superado · dar novo lance</a>`
          }</div></article>`
            )
            .join('')
        : '<div class="vazio"><h3>Você ainda não deu lances</h3><p>Escolha um lote e participe ao vivo.</p><a class="btn" href="/leiloes/?online=1">Ver leilões</a></div>';
      return r;
    } catch {
      return null;
    }
  }

  aoMudarUsuario((u) => {
    if (!estado.online || !deslogado) return;
    deslogado.hidden = Boolean(u);
    logado.hidden = !u;
    if (!u) return;
    $('[data-nome]', logado).textContent = u.nome;
    $('[data-usuario]', logado).textContent = u.usuario;
    $('[data-iniciais]', logado).textContent = u.nome.split(' ').map((p) => p[0]).slice(0, 2).join('').toUpperCase();
    $('[data-pendente]', logado).hidden = u.status !== 'pendente';
    carregar();
  });

  let anterior = null;
  aoVivo('lance', async () => {
    if (!estado.usuario) return;
    const r = await carregar();
    if (!r) return;
    const agora = Object.fromEntries(r.lotes.map((l) => [l.id, l.liderando]));
    if (anterior) for (const l of r.lotes) if (anterior[l.id] && !l.liderando) toast(`Seu lance em "${l.titulo}" foi superado!`, 'vivo', 7000);
    anterior = agora;
  });

  document.querySelector('[data-sair]')?.addEventListener('click', async () => {
    await api('/api/conta/sair', { method: 'POST' });
    definirUsuario(null);
    toast('Você saiu da sua conta.');
  });
</script>