/**
 * TrendApp — Clientes (§11)
 *
 * Tabs: Minha carteira | Recuperar clientes
 * NÃO exibir: CPF/CNPJ, documento mascarado, coluna Rep, dados
 * de outros representantes, dados clínicos.
 * WhatsApp: dois estados — disponível / indisponível. Nunca mostrar telefone.
 */

// (React hooks declarados uma vez em logo.jsx)

function ClientesScreen({ payload }) {
  const { go, route } = useRouter();
  // Se veio via query ?tab=recompra, começa nessa tab
  const initialTab = useMemo(() => {
    const q = location.hash.split('?')[1] || '';
    const t = new URLSearchParams(q).get('tab');
    return ['carteira', 'recuperar', 'recompra', 'analise'].includes(t) ? t : 'carteira';
  }, []);
  const [tab, setTab] = useState(initialTab);
  const { clientes, loading, error } = payload;
  const totalClientes = clientes?.length ?? 0;
  const emRecuperacao = useMemo(() => {
    return clientes.filter(c => window.TrendMocks.classificarRecuperacao(c.diasSemComprar) != null).length;
  }, [clientes]);

  return (
    <div className="page tab-fade">
      <div className="page-body" style={{ paddingTop: 0 }}>
        <HeroHeader
          eyebrow="Sua carteira"
          title="Clientes"
          subtitle={loading ? undefined
            : `${totalClientes} ${totalClientes === 1 ? 'cliente' : 'clientes'}${emRecuperacao > 0 ? ` · ${emRecuperacao} para recuperar` : ''}`
          }
          minHeight={220}
          action={{
            icon: 'search',
            ariaLabel: 'Buscar cliente',
            onClick: () => alert('Buscar cliente — apenas visual no protótipo'),
          }}
        />

        <div style={{ padding: '4px 0 0' }}>
          <div className="tabs-scroll" style={{
            display: 'flex',
            gap: 0,
            overflowX: 'auto',
            padding: '0 20px',
            borderBottom: '1px solid var(--border)',
            scrollbarWidth: 'none',
          }}>
            {[
              { id: 'carteira',  label: 'Carteira' },
              { id: 'recompra',  label: 'Recompra' },
              { id: 'recuperar', label: 'Recuperar' },
              { id: 'analise',   label: 'Análise' },
            ].map(t => (
              <button
                key={t.id}
                data-active={tab === t.id ? 'true' : 'false'}
                onClick={() => setTab(t.id)}
                style={{
                  padding: '14px 4px',
                  marginRight: 24,
                  fontSize: 13,
                  fontWeight: 500,
                  color: tab === t.id ? 'var(--foreground)' : 'var(--muted-foreground)',
                  background: 'transparent',
                  position: 'relative',
                  whiteSpace: 'nowrap',
                  flexShrink: 0,
                  borderBottom: tab === t.id ? '1.5px solid var(--foreground)' : '1.5px solid transparent',
                  marginBottom: '-1px',
                  transition: 'color 120ms ease, border-color 120ms ease',
                }}
              >
                {t.label}
              </button>
            ))}
          </div>
        </div>

        {error && <div style={{ padding: '16px 20px 0' }}><ErrorBanner onRetry={() => location.reload()} /></div>}
        {tab === 'carteira'  && <CarteiraTab  clientes={clientes} loading={loading} onOpen={id => go(`/cliente/${id}`)} />}
        {tab === 'recompra'  && <RecompraTab  clientes={clientes} loading={loading} onOpen={id => go(`/cliente/${id}`)} />}
        {tab === 'recuperar' && <RecuperarTab clientes={clientes} loading={loading} onOpen={id => go(`/cliente/${id}`)} />}
        {tab === 'analise'   && <AnaliseTab   clientes={clientes} loading={loading} onOpen={id => go(`/cliente/${id}`)} />}
      </div>
    </div>
  );
}

// ─── TabIntro — título grande + descrição concisa ─────────────────────────
function TabIntro({ title, description }) {
  return (
    <div style={{ padding: '24px 20px 12px' }}>
      <h2 style={{
        fontSize: 22, fontWeight: 500,
        letterSpacing: '-0.025em',
        color: 'var(--foreground)',
        margin: 0,
      }}>{title}</h2>
      {description && (
        <p style={{
          fontSize: 13, color: 'var(--muted-foreground)',
          marginTop: 4, lineHeight: 1.5,
        }}>{description}</p>
      )}
    </div>
  );
}

// ─── Aba Carteira ──────────────────────────────────────────────────────────
function CarteiraTab({ clientes, loading, onOpen }) {
  const [filtro, setFiltro] = useState('todos');
  const fmt = window.TrendFmt;

  const filtrado = useMemo(() => {
    return clientes
      .map(c => ({ ...c, faixa: window.TrendMocks.classificarRecuperacao(c.diasSemComprar) }))
      .filter(c => {
        if (filtro === 'todos') return true;
        if (filtro === 'ativos') return c.farol === 'verde';
        if (filtro === 'novos') return c.pedidos <= 3;
        if (filtro === 'recompra') return c.pedidos >= 10;
        if (filtro === 'risco') return c.faixa === 'em_risco';
        if (filtro === 'churn') return c.faixa === 'churn';
        return true;
      });
  }, [clientes, filtro]);

  return (
    <>
      <TabIntro
        title="Sua carteira ativa"
        description="Todos os clientes vinculados a você. Filtre por comportamento para agir com precisão."
      />
      <div style={{ borderBottom: '1px solid var(--border)' }}>
        <div className="chips" style={{ padding: '0 20px 10px' }}>
          {FILTROS_CARTEIRA.map(f => (
            <button
              key={f.id} className="chip"
              data-active={filtro === f.id ? 'true' : 'false'}
              onClick={() => setFiltro(f.id)}
            >{f.label}</button>
          ))}
        </div>
      </div>

      <div className="stack">
        {loading ? (
          <>{Array.from({ length: 4 }).map((_, i) => <SkelCard key={i} h={100} />)}</>
        ) : filtrado.length === 0 ? (
          <div className="card">
            <EmptyState
              icon="users-round"
              title="Sem clientes neste filtro"
              description="Ajuste o filtro para ver outras faixas da sua carteira."
            />
          </div>
        ) : (
          filtrado.map(c => <ClienteCard key={c.cliente_id} c={c} onClick={() => onOpen(c.cliente_id)} />)
        )}
      </div>
    </>
  );
}

const FILTROS_CARTEIRA = [
  { id: 'todos',    label: 'Todos' },
  { id: 'ativos',   label: 'Ativos' },
  { id: 'novos',    label: 'Novos' },
  { id: 'recompra', label: 'Recompra' },
  { id: 'risco',    label: 'Em risco' },
  { id: 'churn',    label: 'Churn' },
];

// ─── Cliente carteira — hairline editorial ─────────────────────────────
function ClienteCard({ c, onClick }) {
  const fmt = window.TrendFmt;
  const farolColor = {
    verde: 'oklch(0.65 0.15 155)',
    amarelo: 'oklch(0.75 0.14 75)',
    vermelho: 'oklch(0.62 0.20 25)',
  }[c.farol];
  return (
    <div
      className="hairline-row"
      style={{ alignItems: 'flex-start', paddingTop: 18, paddingBottom: 18 }}
      onClick={onClick}
      role="button" tabIndex={0}
    >
      <span aria-hidden="true" style={{
        marginTop: 8, flexShrink: 0,
        width: 6, height: 6, borderRadius: 999,
        background: farolColor,
      }} />
      <div className="grow" style={{ minWidth: 0 }}>
        <div style={{ display: 'flex', gap: 10, alignItems: 'baseline', flexWrap: 'wrap' }}>
          <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--foreground)' }} className="truncate">{c.nome}</div>
          {c.faixa && (
            <span style={{ fontSize: 11.5, color: c.faixa === 'churn' ? 'oklch(0.55 0.16 25)' : 'oklch(0.55 0.12 70)' }}>
              {c.faixa === 'churn' ? 'Churn' : 'Em risco'}
            </span>
          )}
        </div>
        <div style={{ fontSize: 12.5, color: 'var(--muted-foreground)', marginTop: 4 }}>
          {c.diasSemComprar}d sem comprar
          {'  ·  '}Últ. {fmt.fmtDate(c.ultimaCompra, { compact: true })}
          {'  ·  '}RFM {c.rfm}
        </div>
      </div>
      <div style={{ textAlign: 'right', flexShrink: 0 }}>
        <div className="tabnum" style={{ fontSize: 14, fontWeight: 500, color: 'var(--foreground)' }}>
          {fmt.fmtBRL(c.valorHistorico, { showCents: false })}
        </div>
        <div style={{ fontSize: 11, color: 'var(--muted-foreground)', marginTop: 3 }}>
          {c.pedidos} {c.pedidos === 1 ? 'pedido' : 'pedidos'}
        </div>
      </div>
    </div>
  );
}

// ─── Aba Recuperar ─────────────────────────────────────────────────────────
function RecuperarTab({ clientes, loading, onOpen }) {
  const fmt = window.TrendFmt;
  const recuperar = useMemo(() => {
    return clientes
      .map(c => ({ ...c, faixa: window.TrendMocks.classificarRecuperacao(c.diasSemComprar) }))
      .filter(c => c.faixa != null)
      .sort((a, b) => b.valorHistorico - a.valorHistorico);
  }, [clientes]);

  return (
    <>
      <TabIntro
        title="Resgate proativo"
        description="Clientes em risco ou churn, ordenados pelo maior valor histórico. Em risco: 60 a 90 dias sem comprar. Churn: mais de 90 dias."
      />
      <div className="stack">
      {loading ? (
        <>{Array.from({ length: 3 }).map((_, i) => <SkelCard key={i} h={120} />)}</>
      ) : recuperar.length === 0 ? (
        <div className="card">
          <EmptyState
            icon="party-popper"
            title="Sua carteira está saudável"
            description="Nenhum cliente em risco ou churn no momento. Continue o bom trabalho."
          />
        </div>
      ) : (
        recuperar.map(c => <ClienteRecuperarItem key={c.cliente_id} c={c} onClick={() => onOpen(c.cliente_id)} />)
      )}
      </div>
    </>
  );
}

function ClienteRecuperarItem({ c, onClick }) {
  const fmt = window.TrendFmt;
  const { tweaks } = useTweaks();
  const waDisponivel = getWhatsAppState(c, tweaks.whatsappOverride);
  useLucide([c.faixa]);

  return (
    <div style={{ paddingTop: 18, paddingBottom: 18, borderBottom: '1px solid var(--border)' }}>
      <div
        style={{ display: 'flex', gap: 12, alignItems: 'flex-start', cursor: 'pointer' }}
        onClick={onClick}
        role="button" tabIndex={0}
      >
        <div className="grow" style={{ minWidth: 0 }}>
          <div style={{ display: 'flex', gap: 10, alignItems: 'baseline', flexWrap: 'wrap' }}>
            <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--foreground)' }} className="truncate">{c.nome}</div>
            <span style={{ fontSize: 11.5, color: c.faixa === 'churn' ? 'oklch(0.55 0.16 25)' : 'oklch(0.55 0.12 70)' }}>
              {c.faixa === 'churn' ? 'Churn' : 'Em risco'}
            </span>
          </div>
          <div style={{ fontSize: 12.5, color: 'var(--muted-foreground)', marginTop: 4 }}>
            <span className="tabnum">{c.diasSemComprar}d</span> sem comprar · {c.ultimoSku}
          </div>
        </div>
        <div className="tabnum" style={{ fontSize: 14, fontWeight: 500, color: 'var(--foreground)', flexShrink: 0 }}>
          {fmt.fmtBRL(c.valorHistorico, { showCents: false })}
        </div>
      </div>
      <div style={{ marginTop: 12, display: 'flex', justifyContent: 'flex-end' }}>
        <WhatsAppButton disponivel={waDisponivel} onClick={() => waDisponivel && alert('Abriria WhatsApp — apenas visual no protótipo')} />
      </div>
    </div>
  );
}

// ─── Perfil do cliente — premium ──────────────────────────────────────────
function ClienteDetalheScreen({ payload }) {
  const { back, go, route } = useRouter();
  const { tweaks } = useTweaks();
  const fmt = window.TrendFmt;

  const id = route.params[0];
  const c = payload.clientes.find(x => x.cliente_id === id);

  if (!c) {
    return (
      <div className="page page-enter">
        <PageHeader title="Cliente não encontrado" back={() => back('/clientes')} />
        <div className="page-body">
          <div className="stack">
            <EmptyState icon="user-x" title="Cliente não encontrado" />
          </div>
        </div>
      </div>
    );
  }

  const faixa = window.TrendMocks.classificarRecuperacao(c.diasSemComprar);
  const ciclo = window.TrendMocks.classificarCicloRecompra(c.diasSemComprar);
  const waDisponivel = getWhatsAppState(c, tweaks.whatsappOverride);
  const historicoPedidos = payload.pedidos.filter(p => p.cliente_id === c.cliente_id).slice(0, 6);
  const topSkus = window.TrendMocks.topSkusDoCliente(c.cliente_id);

  return (
    <div className="page page-enter">
      <div className="page-body" style={{ paddingTop: 0 }}>
        {/* HeroHeader dark premium */}
        <HeroHeader
          eyebrow={`RFM ${c.rfm}`}
          title={c.nome}
          subtitle={faixa ? (faixa === 'churn' ? 'Cliente em churn' : 'Cliente em risco') : ciclo ? 'No ciclo de recompra' : 'Cliente ativo'}
          minHeight={220}
          action={{
            icon: 'arrow-left',
            ariaLabel: 'Voltar',
            onClick: () => back('/clientes'),
          }}
        >
          {/* Dentro do hero: total histórico gigante em light */}
          <div style={{ marginTop: 4 }}>
            <div style={{
              fontSize: 10.5, fontWeight: 400,
              letterSpacing: '0.14em', textTransform: 'uppercase',
              color: 'rgba(245,247,247,0.55)',
              marginBottom: 8,
            }}>Total histórico</div>
            <div style={{
              display: 'flex', alignItems: 'baseline', gap: 4,
              fontVariantNumeric: 'tabular-nums',
            }}>
              <span style={{
                fontSize: 18, fontWeight: 300,
                color: 'rgba(245,247,247,0.55)',
                marginRight: 4,
              }}>R$</span>
              <span style={{
                fontSize: 42, fontWeight: 300,
                letterSpacing: '-0.045em',
                lineHeight: 1,
                color: '#F5F7F7',
              }}>{fmt.fmtBRLParts(c.valorHistorico).int}</span>
              <span style={{
                fontSize: 20, fontWeight: 300,
                color: 'rgba(245,247,247,0.55)',
                letterSpacing: '-0.02em',
              }}>{fmt.fmtBRLParts(c.valorHistorico).dec}</span>
            </div>
          </div>
        </HeroHeader>

        <div className="stack" style={{ paddingTop: 8 }}>
          {/* Status badges (Farol/Recuperação/Ciclo) */}
          <div style={{ display: 'flex', gap: 6, flexWrap: 'wrap', paddingBottom: 4 }}>
            <FarolPill farol={c.farol} size="sm" />
            {faixa && <RecuperacaoPill faixa={faixa} />}
            {ciclo && !faixa && (
              <span style={{ fontSize: 11.5, color: 'oklch(0.55 0.09 190)', padding: '3px 9px', border: '1px solid var(--border)', borderRadius: 999 }}>
                Ciclo de recompra
              </span>
            )}
          </div>

          {/* Métricas em KpiGrid */}
          <Section title="Comportamento">
            <KpiGrid>
              <KpiCell label="Ticket médio"     value={fmt.fmtBRL(c.ticketMedio)} />
              <KpiCell label="Pedidos"          value={fmt.fmtInt(c.pedidos)} />
              <KpiCell label="Última compra"    value={fmt.fmtDate(c.ultimaCompra, { compact: true })} />
              <KpiCell label="Dias sem comprar" value={`${c.diasSemComprar}d`} />
            </KpiGrid>
          </Section>

          {/* WhatsApp CTA */}
          <WhatsAppFullBtn disponivel={waDisponivel} />

          {/* Top 5 SKUs */}
          {topSkus.length > 0 && (
            <Section title="Top SKUs" description="Produtos mais comprados por este cliente">
              <div>
                {topSkus.map((s, i) => (
                  <TopSkuRow key={s.sku} sku={s} rank={i + 1} />
                ))}
              </div>
            </Section>
          )}

          {/* Histórico de pedidos */}
          <Section title="Histórico de pedidos" description={`${historicoPedidos.length} ${historicoPedidos.length === 1 ? 'pedido' : 'pedidos'}`}>
            {historicoPedidos.length === 0 ? (
              <div style={{ padding: '32px 0' }}>
                <EmptyState icon="receipt" title="Sem pedidos históricos" description="Este cliente ainda não fez pedidos com você." />
              </div>
            ) : (
              <div>
                {historicoPedidos.map(p => (
                  <div
                    key={p.pedido}
                    className="hairline-row"
                    onClick={() => go(`/pedido/${p.pedido}`)}
                    role="button" tabIndex={0}
                  >
                    <div className="grow" style={{ minWidth: 0 }}>
                      <div style={{ display: 'flex', gap: 10, alignItems: 'baseline', flexWrap: 'wrap' }}>
                        <span style={{ fontSize: 14, fontWeight: 500 }}>{p.pedido}</span>
                        <span style={{ fontSize: 11.5, color: 'var(--muted-foreground)' }}>{p.status}</span>
                      </div>
                      <div style={{ fontSize: 12.5, color: 'var(--muted-foreground)', marginTop: 4 }}>
                        {fmt.fmtDate(p.data, { compact: true })} · {p.itens} {p.itens === 1 ? 'item' : 'itens'}
                      </div>
                    </div>
                    <div className="tabnum" style={{ fontSize: 14, fontWeight: 500 }}>
                      {fmt.fmtBRL(p.valor_pago, { showCents: false })}
                    </div>
                    <Icon name="arrow-right" size={14} color="var(--muted-foreground)" strokeWidth={1.5} />
                  </div>
                ))}
              </div>
            )}
          </Section>
        </div>
      </div>
    </div>
  );
}

// ─── MetricBlock (usado no perfil do cliente) ──────────────────────────────
function MetricBlock({ label, value }) {
  return (
    <div>
      <div className="eyebrow" style={{ fontSize: 10 }}>{label}</div>
      <div className="tabnum" style={{ fontSize: 15, fontWeight: 600, marginTop: 2 }}>{value}</div>
    </div>
  );
}

// ─── WhatsApp helpers (§11.2) ──────────────────────────────────────────────
function getWhatsAppState(c, override) {
  if (override === 'all_available') return true;
  if (override === 'all_unavailable') return false;
  return c.telefoneElegivelWhatsApp === true;
}

function WhatsAppButton({ disponivel, onClick }) {
  useLucide([disponivel]);
  if (disponivel) {
    return (
      <button
        className="btn sm wa-btn"
        onClick={(e) => { e.stopPropagation(); onClick?.(); }}
        aria-label="Chamar no WhatsApp"
        style={{ minHeight: 40, minWidth: 44, padding: '0 14px' }}
      >
        <Icon name="message-circle" size={16} />
        WhatsApp
      </button>
    );
  }
  return (
    <div style={{ textAlign: 'right' }}>
      <button
        className="btn sm secondary"
        disabled
        style={{ minHeight: 40, minWidth: 44, padding: '0 14px', opacity: 0.6, cursor: 'not-allowed' }}
      >
        <Icon name="message-circle-off" size={16} />
        Indisponível
      </button>
      <div style={{ fontSize: 10, color: 'var(--muted-foreground)', marginTop: 4, maxWidth: 140 }}>
        Sem contato elegível
      </div>
    </div>
  );
}

function WhatsAppFullBtn({ disponivel }) {
  useLucide([disponivel]);
  if (disponivel) {
    return (
      <button
        className="btn wa-btn block"
        onClick={() => alert('Abriria WhatsApp — apenas visual no protótipo')}
      >
        <Icon name="message-circle" size={18} />
        Chamar no WhatsApp
      </button>
    );
  }
  return (
    <div className="card" style={{ padding: 14 }}>
      <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
        <div style={{
          width: 40, height: 40, borderRadius: 10,
          background: 'var(--muted)',
          color: 'var(--muted-foreground)',
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          flexShrink: 0,
        }}>
          <Icon name="message-circle-off" size={20} />
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ fontSize: 14, fontWeight: 500 }}>Contato indisponível</div>
          <div style={{ fontSize: 12, color: 'var(--muted-foreground)', marginTop: 2 }}>
            Não há um contato comercial elegível para este cliente.
          </div>
        </div>
      </div>
    </div>
  );
}

// ─── Rota /recuperar direta ────────────────────────────────────────────────
// ─── AnaliseTab — visão consolidada da carteira ───────────────────────────
// KPIs no topo + cards grandes por segmento de Farol + top 5 clientes.
// Não usa gráfico — foco em números tabulares grandes (editorial).
function AnaliseTab({ clientes, loading, onOpen }) {
  const fmt = window.TrendFmt;

  const stats = useMemo(() => {
    if (!clientes || clientes.length === 0) {
      return { total: 0, verde: 0, amarelo: 0, vermelho: 0,
               valorTotal: 0, ticketMedio: null, topClientes: [],
               emRecuperacao: 0, emRecompra: 0, ativos: 0 };
    }
    const total = clientes.length;
    const verde    = clientes.filter(c => c.farol === 'verde').length;
    const amarelo  = clientes.filter(c => c.farol === 'amarelo').length;
    const vermelho = clientes.filter(c => c.farol === 'vermelho').length;
    const valorTotal = clientes.reduce((s, c) => s + (c.valorHistorico || 0), 0);
    const totalPedidos = clientes.reduce((s, c) => s + (c.pedidos || 0), 0);
    const ticketMedio = totalPedidos > 0 ? valorTotal / totalPedidos : null;
    const emRecuperacao = clientes.filter(c => window.TrendMocks.classificarRecuperacao(c.diasSemComprar) != null).length;
    const emRecompra = clientes.filter(c => window.TrendMocks.classificarCicloRecompra(c.diasSemComprar) != null).length;
    const ativos = clientes.filter(c => c.farol === 'verde').length;
    const topClientes = [...clientes]
      .sort((a, b) => (b.valorHistorico || 0) - (a.valorHistorico || 0))
      .slice(0, 5);
    return { total, verde, amarelo, vermelho, valorTotal, ticketMedio, topClientes,
             emRecuperacao, emRecompra, ativos };
  }, [clientes]);

  if (loading) {
    return (
      <>
        <TabIntro title="Análise de carteira" description="Visão consolidada da saúde e composição da sua carteira." />
        <div className="stack">
          <SkelCard h={100} /><SkelCard h={240} /><SkelCard h={180} />
        </div>
      </>
    );
  }

  const pct = (v) => stats.total > 0 ? Math.round((v / stats.total) * 100) : 0;

  return (
    <>
      <TabIntro
        title="Análise de carteira"
        description="Visão consolidada da saúde, composição e concentração da sua carteira."
      />

      <div className="stack">
        {/* Bloco 1 — KPIs consolidados editorial */}
        <div style={{ paddingBottom: 4 }}>
          <div className="eyebrow" style={{ marginBottom: 12 }}>Consolidado</div>
          <KpiGrid>
            <KpiCell label="Valor total"    value={fmt.fmtBRL(stats.valorTotal, { showCents: false })} />
            <KpiCell label="Clientes"       value={fmt.fmtInt(stats.total)} />
            <KpiCell label="Ticket médio"   value={fmt.fmtBRL(stats.ticketMedio, { showCents: false })} />
            <KpiCell label="Ativos (verde)" value={fmt.fmtInt(stats.ativos)} hint={`${pct(stats.ativos)}% da carteira`} />
          </KpiGrid>
        </div>

        {/* Bloco 2 — Distribuição por Farol (cards grandes) */}
        <div>
          <div className="eyebrow" style={{ marginBottom: 12 }}>Distribuição por Farol</div>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            <FarolSegmentCard
              label="Ativos"
              dotColor="oklch(0.65 0.15 155)"
              count={stats.verde}
              pct={pct(stats.verde)}
              description="Clientes com compras recentes e regulares."
            />
            <FarolSegmentCard
              label="Atenção"
              dotColor="oklch(0.75 0.14 75)"
              count={stats.amarelo}
              pct={pct(stats.amarelo)}
              description="Ciclo desacelerando. Vale acompanhar."
            />
            <FarolSegmentCard
              label="Alerta"
              dotColor="oklch(0.62 0.20 25)"
              count={stats.vermelho}
              pct={pct(stats.vermelho)}
              description="Frequência muito baixa ou parada."
            />
          </div>
        </div>

        {/* Bloco 3 — Barra visual de composição (linha única, editorial) */}
        <div>
          <div className="eyebrow" style={{ marginBottom: 12 }}>Composição</div>
          <div style={{
            display: 'flex',
            width: '100%',
            height: 8,
            borderRadius: 999,
            overflow: 'hidden',
            background: 'var(--muted)',
          }}>
            {stats.verde > 0 && (
              <div style={{
                width: `${pct(stats.verde)}%`,
                background: 'oklch(0.65 0.15 155)',
              }} />
            )}
            {stats.amarelo > 0 && (
              <div style={{
                width: `${pct(stats.amarelo)}%`,
                background: 'oklch(0.75 0.14 75)',
              }} />
            )}
            {stats.vermelho > 0 && (
              <div style={{
                width: `${pct(stats.vermelho)}%`,
                background: 'oklch(0.62 0.20 25)',
              }} />
            )}
          </div>
          <div style={{
            display: 'flex', justifyContent: 'space-between',
            marginTop: 10, fontSize: 12,
            color: 'var(--muted-foreground)',
          }}>
            <span>{pct(stats.verde)}% ativos</span>
            <span>{pct(stats.amarelo)}% atenção</span>
            <span>{pct(stats.vermelho)}% alerta</span>
          </div>
        </div>

        {/* Bloco 4 — Movimento */}
        <div>
          <div className="eyebrow" style={{ marginBottom: 12 }}>Movimento</div>
          <div style={{
            display: 'grid', gridTemplateColumns: '1fr 1fr',
            columnGap: 24,
          }}>
            <div style={{
              borderRight: '1px solid var(--border)',
              paddingRight: 12,
              marginRight: -12,
            }}>
              <KpiCell label="No ciclo (20-40d)"    value={fmt.fmtInt(stats.emRecompra)} hint={`${pct(stats.emRecompra)}% da carteira`} />
            </div>
            <div style={{ paddingLeft: 12, marginLeft: -12 }}>
              <KpiCell label="Em recuperação" value={fmt.fmtInt(stats.emRecuperacao)} hint={`${pct(stats.emRecuperacao)}% da carteira`} />
            </div>
          </div>
        </div>

        {/* Bloco 5 — Top 5 clientes por valor histórico */}
        <div>
          <div className="between" style={{ marginBottom: 12 }}>
            <div className="eyebrow">Top 5 · maior valor histórico</div>
          </div>
          {stats.topClientes.length === 0 ? (
            <div style={{ padding: '32px 0' }}>
              <EmptyState icon="users-round" title="Sem clientes na carteira" />
            </div>
          ) : (
            <div>
              {stats.topClientes.map((c, i) => (
                <TopClienteRow key={c.cliente_id} c={c} rank={i + 1} onClick={() => onOpen(c.cliente_id)} />
              ))}
            </div>
          )}
        </div>
      </div>
    </>
  );
}

// FarolSegmentCard — card grande por segmento (verde/amarelo/vermelho)
function FarolSegmentCard({ label, dotColor, count, pct, description }) {
  return (
    <div style={{
      display: 'flex', gap: 16, alignItems: 'flex-start',
      padding: '18px 0',
      borderBottom: '1px solid var(--border)',
    }}>
      <span aria-hidden="true" style={{
        marginTop: 10, flexShrink: 0,
        width: 8, height: 8, borderRadius: 999,
        background: dotColor,
      }} />
      <div className="grow" style={{ minWidth: 0 }}>
        <div style={{
          fontSize: 12,
          fontWeight: 500,
          textTransform: 'uppercase',
          letterSpacing: '0.06em',
          color: 'var(--muted-foreground)',
          marginBottom: 4,
        }}>{label}</div>
        <div style={{ fontSize: 12.5, color: 'var(--muted-foreground)', lineHeight: 1.4 }}>
          {description}
        </div>
      </div>
      <div style={{ textAlign: 'right', flexShrink: 0 }}>
        <div className="tabnum" style={{
          fontSize: 32,
          fontWeight: 400,
          letterSpacing: '-0.03em',
          lineHeight: 1,
          color: 'var(--foreground)',
        }}>{count}</div>
        <div style={{
          fontSize: 11,
          color: 'var(--muted-foreground)',
          marginTop: 6,
        }}>{pct}%</div>
      </div>
    </div>
  );
}

// TopClienteRow — hairline com rank, nome, valor
// TopSkuRow — usado na ficha do cliente
function TopSkuRow({ sku, rank }) {
  const fmt = window.TrendFmt;
  return (
    <div className="hairline-row" style={{ cursor: 'default' }}>
      <span style={{
        width: 22, flexShrink: 0,
        fontSize: 11.5,
        fontWeight: 500,
        color: 'var(--muted-foreground)',
        fontVariantNumeric: 'tabular-nums',
      }}>{String(rank).padStart(2, '0')}</span>
      <div className="grow" style={{ minWidth: 0 }}>
        <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--foreground)' }} className="truncate">
          {sku.nome}
        </div>
        <div style={{ fontSize: 12, color: 'var(--muted-foreground)', marginTop: 3 }}>
          {sku.qtd} {sku.qtd === 1 ? 'unidade' : 'unidades'}
        </div>
      </div>
      <div className="tabnum" style={{ fontSize: 14, fontWeight: 500, color: 'var(--foreground)', flexShrink: 0 }}>
        {fmt.fmtBRL(sku.valor, { showCents: false })}
      </div>
    </div>
  );
}

function TopClienteRow({ c, rank, onClick }) {
  const fmt = window.TrendFmt;
  return (
    <div
      className="hairline-row"
      onClick={onClick}
      role="button" tabIndex={0}
    >
      <span style={{
        width: 22, flexShrink: 0,
        fontSize: 11.5,
        fontWeight: 500,
        color: 'var(--muted-foreground)',
        fontVariantNumeric: 'tabular-nums',
      }}>{String(rank).padStart(2, '0')}</span>
      <div className="grow" style={{ minWidth: 0 }}>
        <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--foreground)' }} className="truncate">
          {c.nome}
        </div>
        <div style={{ fontSize: 12, color: 'var(--muted-foreground)', marginTop: 3 }}>
          {c.pedidos} {c.pedidos === 1 ? 'pedido' : 'pedidos'} · ticket {fmt.fmtBRL(c.ticketMedio, { showCents: false })}
        </div>
      </div>
      <div style={{ textAlign: 'right', flexShrink: 0 }}>
        <div className="tabnum" style={{ fontSize: 14, fontWeight: 500, color: 'var(--foreground)' }}>
          {fmt.fmtBRL(c.valorHistorico, { showCents: false })}
        </div>
      </div>
      <Icon name="arrow-right" size={14} color="var(--muted-foreground)" strokeWidth={1.5} />
    </div>
  );
}

// ─── Rota /recuperar direta ────────────────────────────────────────────────
function RecuperarScreen({ payload }) {
  const { back, go } = useRouter();
  return (
    <div className="page page-enter">
      <PageHeader title="Recuperar clientes" back={() => back('/clientes')} />
      <div className="page-body">
        <RecuperarTab clientes={payload.clientes} loading={payload.loading} onOpen={id => go(`/cliente/${id}`)} />
      </div>
    </div>
  );
}

// ─── Aba/Rota Recompra — clientes no ciclo (20-40 dias) ────────────────────
// Nomenclatura preservada: `ciclo_recompra` (para handoff D9Pro).
// Ordenação: dias sem comprar DESC (urgência — próximos de virar risco no topo).
function RecompraTab({ clientes, loading, onOpen }) {
  const fmt = window.TrendFmt;
  const recompra = useMemo(() => {
    return clientes
      .map(c => ({ ...c, ciclo: window.TrendMocks.classificarCicloRecompra(c.diasSemComprar) }))
      .filter(c => c.ciclo === 'ciclo_recompra')
      .sort((a, b) => b.diasSemComprar - a.diasSemComprar);
  }, [clientes]);

  return (
    <>
      <TabIntro
        title="Ciclo de recompra"
        description="Clientes entre 20 e 40 dias sem comprar. Reative o ciclo antes de virarem risco. Ordenado por urgência."
      />
      <div className="stack">
      {loading ? (
        <>{Array.from({ length: 3 }).map((_, i) => <SkelCard key={i} h={72} />)}</>
      ) : recompra.length === 0 ? (
        <div style={{ padding: '32px 0' }}>
          <EmptyState
            icon="calendar-check"
            title="Nenhum cliente entre 25 e 45 dias sem comprar"
            description="Ninguém no ciclo de recompra agora."
          />
        </div>
      ) : (
        recompra.map(c => <ClienteRecompraItem key={c.cliente_id} c={c} onClick={() => onOpen(c.cliente_id)} />)
      )}
      </div>
    </>
  );
}

function ClienteRecompraItem({ c, onClick }) {
  const fmt = window.TrendFmt;
  const { tweaks } = useTweaks();
  const waDisponivel = getWhatsAppState(c, tweaks.whatsappOverride);
  // Farol dot (opcional — o doc de resposta disse "mostrar como é")
  const farolColor = {
    verde: 'oklch(0.65 0.15 155)',
    amarelo: 'oklch(0.75 0.14 75)',
    vermelho: 'oklch(0.62 0.20 25)',
  }[c.farol];
  // Faltam X dias para virar risco (60 é o limite inferior de em_risco)
  const diasParaRisco = 60 - c.diasSemComprar;
  return (
    <div style={{ paddingTop: 18, paddingBottom: 18, borderBottom: '1px solid var(--border)' }}>
      <div
        style={{ display: 'flex', gap: 12, alignItems: 'flex-start', cursor: 'pointer' }}
        onClick={onClick}
        role="button" tabIndex={0}
      >
        <span aria-hidden="true" style={{
          marginTop: 8, flexShrink: 0,
          width: 6, height: 6, borderRadius: 999,
          background: farolColor,
        }} />
        <div className="grow" style={{ minWidth: 0 }}>
          <div style={{ display: 'flex', gap: 10, alignItems: 'baseline', flexWrap: 'wrap' }}>
            <div style={{ fontSize: 14, fontWeight: 500, color: 'var(--foreground)' }} className="truncate">
              {c.nome}
            </div>
          </div>
          <div style={{ fontSize: 12.5, color: 'var(--muted-foreground)', marginTop: 4 }}>
            <span className="tabnum">{c.diasSemComprar}d</span> sem comprar
            {'  ·  '}Últ. {fmt.fmtDate(c.ultimaCompra, { compact: true })}
            {diasParaRisco > 0 && (
              <>
                {'  ·  '}
                <span style={{ color: 'var(--foreground)', fontWeight: 500 }}>
                  {diasParaRisco}d p/ virar risco
                </span>
              </>
            )}
          </div>
        </div>
        <div className="tabnum" style={{ fontSize: 14, fontWeight: 500, color: 'var(--foreground)', flexShrink: 0 }}>
          {fmt.fmtBRL(c.valorHistorico, { showCents: false })}
        </div>
      </div>
      <div style={{ marginTop: 12, display: 'flex', justifyContent: 'flex-end' }}>
        <WhatsAppButton disponivel={waDisponivel} onClick={() => waDisponivel && alert('Abriria WhatsApp — apenas visual no protótipo')} />
      </div>
    </div>
  );
}

// ─── Rota /recompra direta ─────────────────────────────────────────────────
function RecompraScreen({ payload }) {
  const { back, go } = useRouter();
  return (
    <div className="page page-enter">
      <PageHeader title="Ciclo de recompra" subtitle="Clientes entre 20 e 40 dias sem comprar" back={() => back('/inicio')} />
      <div className="page-body">
        <RecompraTab clientes={payload.clientes} loading={payload.loading} onOpen={id => go(`/cliente/${id}`)} />
      </div>
    </div>
  );
}

Object.assign(window, {
  ClientesScreen, ClienteDetalheScreen, RecuperarScreen, RecompraScreen,
  WhatsAppButton, WhatsAppFullBtn, getWhatsAppState,
});