/* ================================================================
   Tracker FMN — Vendas
   Todas as vendas da tabela `vendas`, com filtro de período, produto,
   situação, origem e um atalho para ver só a Black (11/11/2026).
   ================================================================ */
const { useState, useEffect, useMemo } = React;
const { LucideIcon, Btn, Badge, CardKPI, SectionCard, PageBody, PageHeader, buscarTudo } = window;

/* Venda da Black é a que tem a etiqueta da Black: o cupom começando com BLACK
   (BLACK2026, BLACKMCV7K2, BLACKANTECIPADA), que o webhook grava em
   vendas.cupom_codigo. Data não decide nada (BLACK-FRIDAY-2026.md, 31.4). */
const ehBlack = v => /^black/i.test(v.cupom_codigo || '');

const brl = n => (Number(n) || 0).toLocaleString('pt-BR', { style: 'currency', currency: 'BRL' });
const nf = n => (Number(n) || 0).toLocaleString('pt-BR');
const fmtDt = iso => iso ? new Date(iso).toLocaleString('pt-BR', { timeZone: 'America/Sao_Paulo', day: '2-digit', month: '2-digit', year: '2-digit', hour: '2-digit', minute: '2-digit' }) : '—';
const estilo = { height: 32, padding: '0 8px', borderRadius: 8, background: 'var(--app-bg)', border: '1px solid var(--app-border)', color: 'var(--text-1)', fontFamily: 'Roboto,sans-serif', fontSize: 12, outline: 'none', colorScheme: 'dark' };

const SITUACOES = { aprovada: ['Aprovada', 'ok'], reembolsada: ['Reembolsada', 'danger'], chargeback: ['Chargeback', 'danger'],
  cancelada: ['Cancelada', 'neutral'], recusada: ['Recusada', 'warn'], expirada: ['Expirada', 'neutral'], pendente: ['Pendente', 'warn'] };

function origem(v) {
  if (window.classifyOrigin) return window.classifyOrigin(v);
  return v.meta_ad_id ? 'Meta Ads' : (v.utm_source || 'Direto');
}

function VendasScreen() {
  const hoje = window.FMNFinancas.dataBRT();
  const [periodo, setPeriodo] = useState('30');
  const [de, setDe] = useState(hoje); const [ate, setAte] = useState(hoje);
  const [produto, setProduto] = useState('');
  const [situacao, setSituacao] = useState('aprovada');
  const [orig, setOrig] = useState('');
  const [black, setBlack] = useState(false);
  const [busca, setBusca] = useState('');
  const [linhas, setLinhas] = useState([]);
  const [carregando, setCarregando] = useState(true);
  const [pagina, setPagina] = useState(0);
  const POR_PAGINA = 50;

  const faixa = useMemo(() => {
    if (black) return ['2026-10-01T03:00:00Z', null, true];
    const dia = d => new Date(d + 'T00:00:00-03:00');
    if (periodo === 'tudo') return [null, null];
    if (periodo === 'custom') { const f = dia(ate); f.setDate(f.getDate() + 1); return [dia(de).toISOString(), f.toISOString()]; }
    const ini = dia(hoje); ini.setDate(ini.getDate() - (Number(periodo) - 1));
    return [ini.toISOString(), null];
  }, [periodo, de, ate, hoje, black]);

  useEffect(() => {
    let vivo = true; setCarregando(true);
    (async () => {
      try {
        const [ini, fim, modoBlack] = faixa;
        // Na Black também entra quem usou cupom BLACK antes da abertura.
        const ini2 = modoBlack ? '2026-10-01T03:00:00Z' : ini;
        const tudo = await buscarTudo(() => {
          let q = window.db.from('vendas').select('id,hotmart_transaction_id,hotmart_event,produto_nome,valor_bruto,valor_liquido,status,metodo_pagamento,parcelas,utm_source,utm_medium,meta_ad_id,ads_numero,created_at,comprador_nome,comprador_email,comprador_telefone,cupom_codigo,oferta_nome,is_order_bump,atribuicao_fonte');
          if (ini2) q = q.gte('created_at', ini2);
          if (fim) q = q.lt('created_at', fim);
          return q.order('created_at', { ascending: false });
        });
        if (vivo) { setLinhas(modoBlack ? tudo.filter(ehBlack) : tudo); setPagina(0); }
      } finally { if (vivo) setCarregando(false); }
    })();
    return () => { vivo = false; };
  }, [faixa]);

  const produtos = useMemo(() => [...new Set(linhas.map(v => v.produto_nome).filter(Boolean))].sort(), [linhas]);
  const origens = useMemo(() => [...new Set(linhas.map(origem))].sort(), [linhas]);
  const situacoesPresentes = useMemo(() => [...new Set(linhas.map(v => v.status).filter(Boolean))].sort(), [linhas]);

  const filtradas = useMemo(() => {
    const b = busca.trim().toLowerCase();
    return linhas.filter(v =>
      (!produto || v.produto_nome === produto) &&
      (!situacao || v.status === situacao) &&
      (!orig || origem(v) === orig) &&
      (!b || [v.comprador_nome, v.comprador_email, v.comprador_telefone, v.hotmart_transaction_id, v.cupom_codigo]
        .some(x => (x || '').toLowerCase().includes(b))));
  }, [linhas, produto, situacao, orig, busca]);

  const kpi = useMemo(() => {
    const ap = filtradas.filter(v => v.status === 'aprovada');
    const bruto = ap.reduce((s, v) => s + (Number(v.valor_bruto) || 0), 0);
    const liq = ap.reduce((s, v) => s + (Number(v.valor_liquido) || 0), 0);
    return { qtd: ap.length, bruto, liq, ticket: ap.length ? bruto / ap.length : 0 };
  }, [filtradas]);

  const porProduto = useMemo(() => {
    const m = {};
    filtradas.filter(v => v.status === 'aprovada').forEach(v => {
      const k = v.produto_nome || '—'; m[k] = m[k] || { qtd: 0, liq: 0 };
      m[k].qtd++; m[k].liq += Number(v.valor_liquido) || 0;
    });
    return Object.entries(m).sort((a, b) => b[1].liq - a[1].liq);
  }, [filtradas]);

  const exportar = () => {
    const esc = x => `"${String(x ?? '').replace(/"/g, '""')}"`;
    const cab = ['data', 'produto', 'situacao', 'bruto', 'liquido', 'pagamento', 'origem', 'ads', 'cupom', 'nome', 'email', 'telefone', 'transacao'];
    const csv = [cab.join(','), ...filtradas.map(v => [fmtDt(v.created_at), v.produto_nome, v.status, v.valor_bruto, v.valor_liquido,
      v.metodo_pagamento, origem(v), v.ads_numero, v.cupom_codigo, v.comprador_nome, v.comprador_email, v.comprador_telefone, v.hotmart_transaction_id].map(esc).join(','))].join('\n');
    const url = URL.createObjectURL(new Blob(['' + csv], { type: 'text/csv;charset=utf-8' }));
    const a = document.createElement('a'); a.href = url; a.download = `vendas${black ? '-black' : ''}-${hoje}.csv`; a.click(); URL.revokeObjectURL(url);
  };

  const pag = filtradas.slice(pagina * POR_PAGINA, (pagina + 1) * POR_PAGINA);
  const totalPag = Math.max(1, Math.ceil(filtradas.length / POR_PAGINA));
  const th = { textAlign: 'left', padding: '8px 10px', fontSize: 11, color: 'var(--text-3)', fontWeight: 500, whiteSpace: 'nowrap' };
  const td = { padding: '8px 10px', fontSize: 12, color: 'var(--text-1)', borderTop: '1px solid var(--app-border)', whiteSpace: 'nowrap' };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <PageBody>
        <PageHeader title="Vendas" description="Todas as vendas, com filtro de período, produto, situação e origem."
          actions={<Btn icon="download" onClick={exportar} disabled={!filtradas.length}>Exportar CSV</Btn>}/>

        <SectionCard title="Filtros" icon="filter">
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, alignItems: 'center' }}>
            <Btn size="sm" variant={black ? 'primary' : 'ghost'} icon="flame" onClick={() => setBlack(b => !b)}>Só a Black</Btn>
            {!black && <select style={estilo} value={periodo} onChange={e => setPeriodo(e.target.value)}>
              <option value="1">Hoje</option><option value="7">7 dias</option><option value="30">30 dias</option>
              <option value="90">90 dias</option><option value="365">12 meses</option><option value="tudo">Tudo</option>
              <option value="custom">Personalizado</option>
            </select>}
            {!black && periodo === 'custom' && <>
              <input type="date" style={estilo} value={de} onChange={e => setDe(e.target.value)}/>
              <input type="date" style={estilo} value={ate} onChange={e => setAte(e.target.value)}/>
            </>}
            <select style={estilo} value={produto} onChange={e => setProduto(e.target.value)}>
              <option value="">Todos os produtos</option>{produtos.map(p => <option key={p}>{p}</option>)}
            </select>
            <select style={estilo} value={situacao} onChange={e => setSituacao(e.target.value)}>
              <option value="">Todas as situações</option>
              {situacoesPresentes.map(s => <option key={s} value={s}>{(SITUACOES[s] || [s])[0]}</option>)}
            </select>
            <select style={estilo} value={orig} onChange={e => setOrig(e.target.value)}>
              <option value="">Todas as origens</option>{origens.map(o => <option key={o}>{o}</option>)}
            </select>
            <input style={{ ...estilo, minWidth: 220 }} placeholder="Buscar nome, e-mail, telefone, cupom" value={busca} onChange={e => { setBusca(e.target.value); setPagina(0); }}/>
          </div>
          {black && <div style={{ marginTop: 8, fontSize: 11, color: 'var(--text-3)' }}>Black: só vendas com cupom da Black (BLACK2026, BLACKMCV7K2, BLACKANTECIPADA).</div>}
        </SectionCard>

        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit,minmax(180px,1fr))', gap: 12, margin: '12px 0' }}>
          <CardKPI label="Vendas aprovadas" value={nf(kpi.qtd)} icon="shopping-cart" accent/>
          <CardKPI label="Faturamento bruto" value={brl(kpi.bruto)} icon="banknote"/>
          <CardKPI label="Líquido" value={brl(kpi.liq)} icon="wallet"/>
          <CardKPI label="Ticket médio" value={brl(kpi.ticket)} icon="receipt"/>
        </div>

        {porProduto.length > 1 && <SectionCard title="Por produto" icon="package">
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: 16 }}>
            {porProduto.map(([p, x]) => <div key={p} style={{ fontSize: 12, color: 'var(--text-2)' }}>
              <b style={{ color: 'var(--text-1)' }}>{p}</b>: {nf(x.qtd)} vendas, {brl(x.liq)}</div>)}
          </div>
        </SectionCard>}

        <SectionCard title={carregando ? 'Carregando...' : `${nf(filtradas.length)} vendas`} icon="list" noPad style={{ marginTop: 12 }}>
          <div style={{ overflowX: 'auto' }}>
            <table style={{ width: '100%', borderCollapse: 'collapse' }}>
              <thead><tr>{['Data', 'Comprador', 'Produto', 'Situação', 'Bruto', 'Líquido', 'Pagamento', 'Origem', 'Cupom'].map(h => <th key={h} style={th}>{h}</th>)}</tr></thead>
              <tbody>{pag.map(v => {
                const [lab, tone] = SITUACOES[v.status] || [v.status, 'neutral'];
                return <tr key={v.id}>
                  <td style={td}>{fmtDt(v.created_at)}</td>
                  <td style={td}><div>{v.comprador_nome || '—'}</div><div style={{ fontSize: 11, color: 'var(--text-3)' }}>{v.comprador_email}</div></td>
                  <td style={td}>{v.produto_nome}{v.is_order_bump && <span style={{ fontSize: 10, color: 'var(--text-3)' }}> (bump)</span>}</td>
                  <td style={td}><Badge tone={tone}>{lab}</Badge></td>
                  <td style={td}>{brl(v.valor_bruto)}</td>
                  <td style={td}>{brl(v.valor_liquido)}</td>
                  <td style={td}>{v.metodo_pagamento || '—'}{v.parcelas > 1 ? ` ${v.parcelas}x` : ''}</td>
                  <td style={td}>{origem(v)}{v.ads_numero ? ` · ADS ${v.ads_numero}` : ''}{v.atribuicao_fonte === 'quiz' ? ' (via quiz)' : ''}</td>
                  <td style={td}>{v.cupom_codigo || '—'}</td>
                </tr>;
              })}</tbody>
            </table>
          </div>
          {totalPag > 1 && <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end', alignItems: 'center', padding: 10, fontSize: 12, color: 'var(--text-3)' }}>
            <Btn size="sm" variant="ghost" icon="chevron-left" disabled={pagina === 0} onClick={() => setPagina(p => p - 1)}/>
            Página {pagina + 1} de {totalPag}
            <Btn size="sm" variant="ghost" icon="chevron-right" disabled={pagina >= totalPag - 1} onClick={() => setPagina(p => p + 1)}/>
          </div>}
        </SectionCard>
      </PageBody>
    </div>
  );
}

Object.assign(window, { VendasScreen });