// Canais → Leads (spec 2026-07-27-leads-bridge-design + adendo UI padrão): Resumo
// Diário 1:1 com o painel BuyGoods Bridge, no idioma visual do projeto — molde
// Acompanhamento (PeriodSelector canônico, Dropdown, DotKpi, tabela padrão,
// FullLoadingOverlay). Self-contained; SEM mock (dado operacional — offline honesto).

const ldFmtDia = (iso) => iso
  ? new Date(iso + 'T12:00:00').toLocaleDateString('pt-BR', { day: '2-digit', month: 'short', year: 'numeric' })
  : '—';

// Paleta do donut VALIDADA (dataviz 27/jul): ordem FIXA, nunca ciclada; warns de
// contraste do laranja/âmbar aliviados pela legenda com rótulos + tabela.
// "Outros" = agregação neutra deliberada (fora da paleta categórica).
const LD_COLORS = ['#FD7119', '#3B82F6', '#CA8A04', '#1F9D6B', '#8A5BD6', '#EC4899'];
const LD_OUTROS = '#64748B';

// Carrinhos é a métrica principal da página (spec 2026-08-03-leads-carrinhos-canais):
// abre a fileira no laranja da marca. Purchases cede o laranja e assume o âmbar da
// paleta validada LD_COLORS.
const LD_KPIS = [
  { key: 'carrinho',  label: 'Carrinhos', color: 'var(--fenix-orange)', fmt: NUM },
  { key: 'total',     label: 'Total',     color: 'var(--fenix-blue)',   fmt: NUM },
  { key: 'purchases', label: 'Purchases', color: '#CA8A04',             fmt: NUM },
  { key: 'upsells',   label: 'Upsells',   color: '#8A5BD6',             fmt: NUM },
  { key: 'enviados',  label: 'Enviados',  color: 'var(--positive)',     fmt: NUM },
  { key: 'revenue',   label: 'Revenue',   color: 'var(--positive)',     fmt: USD },
];

const LD_COLS = [
  { key: 'dia',       label: 'Dia',       align: 'left'  },
  { key: 'total',     label: 'Total',     align: 'right' },
  { key: 'purchases', label: 'Purchases', align: 'right' },
  { key: 'upsells',   label: 'Upsells',   align: 'right' },
  { key: 'carrinho',  label: 'Carrinho',  align: 'right' },
  { key: 'enviados',  label: 'Enviados',  align: 'right' },
  { key: 'revenue',   label: 'Revenue',   align: 'right' },
];

const LeadsView = () => {
  const [period, setPeriod] = React.useState('30d');
  const [customRange, setCustomRange] = React.useState(null);
  const [product, setProduct] = React.useState('todos');
  const [sortKey, setSortKey] = React.useState('dia');
  const [dir, setDir] = React.useState(-1);
  const [data, setData] = React.useState(null);
  const [err, setErr] = React.useState(false);
  const [loading, setLoading] = React.useState(true);
  const fullLoading = useFullLoading();
  const withLoad = (fn) => (...a) => { fullLoading.mark(); fn(...a); };
  const retry = useAutoRetry(err);   // falhou → tenta de novo a cada 15s, sozinho

  React.useEffect(() => {
    const began = fullLoading.begin();
    let cancelled = false; setLoading(true);
    fetchLeadsAPI({ period, product, start: customRange?.start, end: customRange?.end })
      .then(d => { if (!cancelled) { setData(d); setErr(false); } })
      .catch(() => { if (!cancelled) setErr(true); })
      .finally(() => { if (!cancelled) setLoading(false); fullLoading.end(began); });
    return () => { cancelled = true; };
  }, [period, product, customRange, retry]);

  const kpis = (data && data.kpis) || {};
  const daily = (data && data.daily) || [];
  // 'T12:00:00' força parse LOCAL no trendLabel (date-only vira UTC midnight → em BRT o
  // eixo X imprimiria o dia anterior); _dayLabel do badge faz slice(0,10) e segue correto.
  const serie = ((data && data.series) || []).map(p => ({ bucket: p.bucket + 'T12:00:00', value: p.carrinho }));

  const sortBy = (k) => k === sortKey ? setDir(-dir) : (setSortKey(k), setDir(-1));
  const list = React.useMemo(() => {
    const l = daily.slice();
    l.sort((a, b) => {
      const av = a[sortKey], bv = b[sortKey];
      if (typeof av === 'string') return av.localeCompare(bv) * dir;
      return (av - bv) * dir;
    });
    return l;
  }, [daily, sortKey, dir]);
  const ind = (k) => sortKey === k ? (dir < 0 ? ' ▾' : ' ▴') : '';

  const byProduct = (data && data.byProduct) || [];
  const top = byProduct.slice(0, 6);
  const resto = byProduct.slice(6).reduce((s, p) => s + p.leads, 0);
  const segments = top.map((p, i) => ({ label: p.name, value: p.leads, color: LD_COLORS[i] }));
  if (resto > 0) segments.push({ label: 'Outros', value: resto, color: LD_OUTROS });

  // 1º load falhou: LoadingScreen offline + retry automático — nunca card estático
  // sem retry (requisito ui-fenix, spec 2026-07-30-reconexao).
  if (err && !data) return (
    <>
      <LoadingScreen conn="offline" />
      <div style={ldx.reconNota}>
        Os leads vêm direto do BuyGoods Bridge — se a API ou o bridge caíram, esta
        tela reconecta sozinha a cada 15s.
      </div>
    </>
  );
  // Primeiro carregamento: tela padrão do projeto (mesma do gate !hasData do App).
  if (!data) return <LoadingScreen conn="connecting"/>;

  return (
    <div style={{ position: 'relative' }}>
      <div style={ldx.header}>
        <div>
          <div style={ldx.eye}>Canais</div>
          <div style={ldx.title}>Leads</div>
        </div>
        <div style={ldx.filterRow}>
          <PeriodSelector period={period} setPeriod={withLoad(setPeriod)}
            customRange={customRange} setCustomRange={withLoad(setCustomRange)} />
          <Dropdown icon="cart" label="Produto" value={product} onChange={withLoad(setProduct)}
            options={[{ key: 'todos', label: 'Todos' },
                      ...(((data && data.products) || []).map(p => ({ key: p.slug, label: p.name })))]} />
        </div>
      </div>

      {err && data && (
        <div style={ldx.notice}><Icon name="alert" size={14} color="currentColor" />
          Falha ao atualizar — mostrando a última janela carregada.</div>
      )}

      <div style={{ ...ldx.kpiRow, gridTemplateColumns: `repeat(${LD_KPIS.length},minmax(0,1fr))` }}>
        {LD_KPIS.map(k => <DotKpi key={k.key} eye={k.label} color={k.color} value={k.fmt(kpis[k.key] || 0)} />)}
      </div>

      <div style={ldx.chartCard}>
        <div style={ldx.cardEye}>Carrinhos por dia · {data ? `${ldFmtDia(data.start)} — ${ldFmtDia(data.end)}` : '…'}</div>
        <ChannelChart ch={{ key: 'leads', available: serie.length > 0, series: serie }}
          meta={{ label: 'Carrinhos', color: 'var(--fenix-orange, #FD7119)' }} fmtVal={NUM} fmtTot={NUMk}
          subtitle="Carrinhos abandonados do bridge, por dia" granularity="day" height={220} />
      </div>

      <div style={{ marginBottom: 16 }}>
        <CleanDonut eyebrow="Composição" title="Leads por produto" segments={segments} fmt={NUM} />
      </div>

      <div style={ldx.tableWrap}>
        <div style={ldx.scroll}>
          <table style={ldx.table}>
            <thead><tr>
              {LD_COLS.map(c => (
                <th key={c.key} onClick={() => sortBy(c.key)}
                  style={{ ...ldx.th, textAlign: c.align }}>{c.label}{ind(c.key)}</th>
              ))}
            </tr></thead>
            <tbody>
              {list.map(r => (
                <tr key={r.dia}
                  onMouseEnter={e => { e.currentTarget.style.background = 'var(--gray-50)'; }}
                  onMouseLeave={e => { e.currentTarget.style.background = 'transparent'; }}>
                  <td style={{ ...ldx.td, textAlign: 'left' }} className="fenix-num">{ldFmtDia(r.dia)}</td>
                  <td style={ldx.tdNum} className="fenix-num">{NUM(r.total)}</td>
                  <td style={ldx.tdNum} className="fenix-num">{NUM(r.purchases)}</td>
                  <td style={ldx.tdNum} className="fenix-num">{NUM(r.upsells)}</td>
                  <td style={ldx.tdNum} className="fenix-num">{NUM(r.carrinho)}</td>
                  <td style={{ ...ldx.tdNum, color: 'var(--positive)', fontWeight: 700 }} className="fenix-num">{NUM(r.enviados)}</td>
                  <td style={{ ...ldx.tdNum, color: 'var(--positive)', fontWeight: 700 }} className="fenix-num">{USD(r.revenue)}</td>
                </tr>
              ))}
              {!loading && list.length === 0 && (
                <tr><td colSpan={LD_COLS.length} style={ldx.empty}>Sem leads no período.</td></tr>
              )}
            </tbody>
          </table>
        </div>
      </div>
      <FullLoadingOverlay show={fullLoading.show && !!data} conn="connecting"/>
    </div>
  );
};

const ldx = {
  header: { display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16, marginBottom: 16, flexWrap: 'wrap' },
  eye: { font: 'var(--text-label)', letterSpacing: '.05em', textTransform: 'uppercase', color: 'var(--fg-3)' },
  title: { font: '800 22px/1.1 var(--font-sans)', color: 'var(--fg-1)', letterSpacing: '-.01em', marginTop: 4 },
  filterRow: { display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' },
  notice: { display: 'flex', alignItems: 'center', gap: 6, font: '600 12px/1.4 var(--font-sans)', color: 'var(--warning)', background: 'var(--warning-bg)', padding: '10px 16px', borderRadius: 'var(--r-md)', marginBottom: 12 },
  kpiRow: { display: 'grid', gap: 14, marginBottom: 16 },
  chartCard: { background: '#fff', border: '1px solid var(--border-1)', borderRadius: 'var(--r-lg)', boxShadow: 'var(--shadow-sm)', padding: '16px 20px 8px', marginBottom: 16 },
  cardEye: { font: 'var(--text-label)', letterSpacing: '.05em', textTransform: 'uppercase', color: 'var(--fg-3)', marginBottom: 4 },
  tableWrap: { background: '#fff', border: '1px solid var(--border-1)', borderRadius: 'var(--r-lg)', boxShadow: 'var(--shadow-sm)', overflow: 'hidden' },
  scroll: { maxHeight: 600, overflowY: 'auto', overflowX: 'auto' },
  table: { width: '100%', borderCollapse: 'collapse', minWidth: 760 },
  th: { font: '700 10.5px/1 var(--font-sans)', letterSpacing: '.04em', textTransform: 'uppercase', color: 'var(--fg-3)', padding: '12px 14px', background: 'var(--bg-sunken)', borderBottom: '1px solid var(--border-2)', whiteSpace: 'nowrap', userSelect: 'none', cursor: 'pointer', position: 'sticky', top: 0, zIndex: 2 },
  td: { padding: '11px 14px', borderBottom: '1px solid var(--border-1)', font: 'var(--text-body-sm)', color: 'var(--fg-1)', whiteSpace: 'nowrap', fontFamily: 'var(--font-num)', fontVariantNumeric: 'tabular-nums' },
  tdNum: { padding: '11px 14px', borderBottom: '1px solid var(--border-1)', font: 'var(--text-body-sm)', color: 'var(--fg-1)', whiteSpace: 'nowrap', textAlign: 'right', fontFamily: 'var(--font-num)', fontVariantNumeric: 'tabular-nums' },
  empty: { padding: '34px 22px', textAlign: 'center', font: 'var(--text-body-sm)', color: 'var(--fg-4)' },
  reconNota: { textAlign: 'center', font: 'var(--text-body-sm)', color: 'var(--fg-4)', maxWidth: 520, margin: '-28px auto 0' },
};

window.LeadsView = LeadsView;