// Logicall → Leads (spec 2026-08-11): carrinhos abandonados enviados à LogiCall.
// 1 KPI + série diária zero-filled + donut por produto + tabela Day×Carts.
// SEM mock — bridge fora = offline honesto com auto-retry (useAutoRetry). UI em inglês.

// Paleta categórica validada (dataviz): ordem FIXA, nunca ciclada; Others neutro.
const LGL_COLORS = ['#FD7119', '#3B82F6', '#CA8A04', '#1F9D6B', '#8A5BD6', '#EC4899'];
const LGL_OUTROS = '#64748B';

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

const LogicallLeadsView = () => {
  const [period, setPeriod] = React.useState('30d');
  const [customRange, setCustomRange] = React.useState(null);
  const [data, setData] = React.useState(null);
  const [loading, setLoading] = React.useState(true);
  const [err, setErr] = React.useState(false);
  const retry = useAutoRetry(err);
  const fullLoading = useFullLoading();
  const withLoad = (fn) => (...a) => { fullLoading.mark(); fn(...a); };

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

  if (loading && !data) return <LgLoadingScreen />;
  if (!data) return <LgLoadingScreen offline />;

  const donutSegs = (() => {
    const top = (data.byProduct || []).slice(0, 6).map((p, i) => ({ label: p.name, value: p.carts, color: LGL_COLORS[i] }));
    const rest = (data.byProduct || []).slice(6);
    if (rest.length) top.push({ label: `Others (${rest.length})`, value: rest.reduce((s, p) => s + p.carts, 0), color: LGL_OUTROS });
    return top;
  })();
  const rows = data.series.slice().reverse();          // mais recente primeiro

  return (
    <div style={{ position: 'relative' }}>
      <div style={lgl.filterRow}>
        <PeriodSelector period={period} setPeriod={withLoad(setPeriod)}
          customRange={customRange} setCustomRange={withLoad(setCustomRange)} lang="en" />
      </div>
      <div style={lgl.notice}><Icon name="alert" size={14} color="currentColor" />
        Product filter doesn't apply to leads — carts are counted checkout-wide.</div>

      <div className="kpi-grid" style={{ ...lgl.kpiRow, gridTemplateColumns: 'repeat(1,minmax(0,320px))' }}>
        <DotKpi eye="Abandoned Carts" color="var(--fenix-orange)" value={NUM(data.carts)}
          sub={`sent to LogiCall · avg ${NUM(data.avgPerDay)}/day`} />
      </div>

      <div style={lgl.chartCard}>
        <div style={lgl.cardEye}>Carts per day</div>
        <ChannelChart ch={{ key: 'lg-carts', available: data.series.length > 0,
            series: data.series.map(b => ({ bucket: b.bucket, value: b.carts })) }}
          meta={{ label: 'Carts', color: '#CA8A04' }} fmtVal={NUM} fmtTot={NUM}
          subtitle="Abandoned carts sent" granularity="day" height={200} />
      </div>

      <div className="cpa-aov" style={lgl.grid2}>
        <CleanDonut eyebrow="Carts by product" title={NUM(data.carts)} segments={donutSegs} fmt={NUM} />
        <div style={lgl.tableCard}>
          <div style={lgl.cardEye}>Daily detail</div>
          <div style={lgl.scroll}>
            <table style={lgl.table}>
              <thead><tr>
                <th style={{ ...lgl.th, textAlign: 'left' }}>Day</th>
                <th style={lgl.th}>Carts sent</th>
              </tr></thead>
              <tbody>
                {rows.map(b => (
                  <tr key={b.bucket}>
                    <td style={{ ...lgl.td, textAlign: 'left' }}>{lglFmtDay(b.bucket)}</td>
                    <td style={lgl.td} className="fenix-num">{NUM(b.carts)}</td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <FullLoadingOverlay show={fullLoading.show && !!data} conn="connecting" />
    </div>
  );
};

const lgl = {
  filterRow: { display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap', 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 },
  grid2: { display: 'grid', gridTemplateColumns: 'minmax(0,380px) minmax(0,1fr)', gap: 16, alignItems: 'start' },
  tableCard: { background: '#fff', border: '1px solid var(--border-1)', borderRadius: 'var(--r-lg)', boxShadow: 'var(--shadow-sm)', padding: '16px 20px 6px' },
  cardEye: { font: 'var(--text-label)', letterSpacing: '.05em', textTransform: 'uppercase', color: 'var(--fg-3)', marginBottom: 8 },
  scroll: { maxHeight: 420, overflowY: 'auto', overflowX: 'auto' },
  table: { width: '100%', borderCollapse: 'collapse' },
  th: { font: '700 10.5px/1 var(--font-sans)', letterSpacing: '.04em', textTransform: 'uppercase', color: 'var(--fg-3)', padding: '10px 12px', borderBottom: '1px solid var(--border-2)', textAlign: 'right', whiteSpace: 'nowrap', position: 'sticky', top: 0, background: '#fff', zIndex: 1 },
  td: { padding: '9px 12px', borderBottom: '1px solid var(--border-1)', font: 'var(--text-body-sm)', color: 'var(--fg-1)', textAlign: 'right', whiteSpace: 'nowrap' },
  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: 14 },
};

window.LogicallLeadsView = LogicallLeadsView;