/**
 * TrendApp — Tela Início (§8)
 * Ordem OBRIGATÓRIA:
 *   1. Card hero — Sua comissão (variação A ou B)
 *   2. Meu mês — grid 2col de KPIs
 *   3. Pedidos que exigem atenção (com motivo)
 *   4. Clientes para recuperar (ordenado por valorHistorico)
 *   5. Evolução de recebidos (Recharts 6M)
 */

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

function InicioScreen({ payload }) {
  const { go } = useRouter();
  const { tweaks } = useTweaks();
  useLucide([tweaks.homeVariant, payload]);
  const fmt = window.TrendFmt;

  const {
    usuario, comissao, kpisMeuMes, pedidosPrioritarios, clientes, evolucao6M,
    loading, error,
  } = payload;

  // Clientes para recuperar: filtrar em_risco + churn, ordenar por valorHistorico DESC
  const clientesRecuperar = 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]);

  // Clientes no ciclo de recompra: 20-40 dias, ordenar por dias DESC (urgência)
  const clientesRecompra = 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]);

  const competenciaLabel = fmt.fmtCompetencia(comissao.competencia);

  return (
    <div className="page tab-fade">
      <div className="page-body" style={{ paddingTop: 0 }}>
        {/* ── Hero fotográfico ────────────────────────────────────────
            Foto full-bleed no topo da tela + overlay gradient para
            legibilidade + saudação premium + valor de comissão em light.
            Substitui o header + card hero de comissão da versão anterior. */}
        {loading
          ? <div style={{ height: 460, background: 'var(--muted)' }} />
          : <HomeHeroFoto
              usuario={usuario}
              comissao={comissao}
              onExtrato={() => go('/extrato')}
            />
        }

        <div className="stack" style={{ paddingTop: 8 }}>
          {error && <ErrorBanner onRetry={() => location.reload()} />}

          {/* 2. Meu mês */}
          <Section title="Meu mês">
            {loading ? (
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 8 }}>
                {Array.from({ length: 6 }).map((_, i) => <SkelCard key={i} h={72} />)}
              </div>
            ) : (
              <MeuMesGrid k={kpisMeuMes} />
            )}
          </Section>

          {/* 3. Pedidos que exigem atenção */}
          <Section
            title="Pedidos que exigem atenção"
            description={pedidosPrioritarios.length > 0 && !loading
              ? `${pedidosPrioritarios.length} ${pedidosPrioritarios.length === 1 ? 'pedido priorizado' : 'pedidos priorizados'}`
              : undefined
            }
            action={pedidosPrioritarios.length > 0 && !loading && (
              <button className="btn link sm" onClick={() => go('/pedidos?filtro=prioritarios')}>Ver pedidos</button>
            )}
          >
            {loading ? <SkelCard h={140} /> : (
              pedidosPrioritarios.length === 0 ? (
                <div className="card" style={{ textAlign: 'center', padding: 20 }}>
                  <div style={{
                    width: 40, height: 40, borderRadius: 999,
                    background: 'color-mix(in oklch, var(--success) 14%, transparent)',
                    color: 'var(--success)',
                    display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
                    marginBottom: 8,
                  }}><Icon name="check" size={18} /></div>
                  <div style={{ fontSize: 14, fontWeight: 500 }}>Nenhum pedido exige atenção agora</div>
                  <div style={{ fontSize: 12, color: 'var(--muted-foreground)', marginTop: 4 }}>
                    Voltamos a monitorar em tempo real.
                  </div>
                </div>
              ) : (
                <div>
                  {pedidosPrioritarios.slice(0, 3).map(p => (
                    <PedidoPrioritarioCard key={p.pedido} p={p} onClick={() => go(`/pedido/${p.pedido}`)} />
                  ))}
                </div>
              )
            )}
          </Section>

          {/* 3b. Ciclo de recompra — clientes 20-40 dias sem comprar */}
          <Section
            title="Ciclo de recompra"
            description={clientesRecompra.length > 0 && !loading
              ? `${clientesRecompra.length} ${clientesRecompra.length === 1 ? 'cliente' : 'clientes'} entre 20 e 40 dias`
              : undefined
            }
            action={clientesRecompra.length > 0 && !loading && (
              <button className="btn link sm" onClick={() => go('/recompra')}>Ver todos</button>
            )}
          >
            {loading ? <SkelCard h={140} /> : (
              clientesRecompra.length === 0 ? (
                <div style={{ padding: '20px 0', fontSize: 13, color: 'var(--muted-foreground)' }}>
                  Nenhum cliente no ciclo agora.
                </div>
              ) : (
                <div>
                  {clientesRecompra.slice(0, 3).map(c => (
                    <ClienteRecompraCard key={c.cliente_id} c={c} onClick={() => go(`/cliente/${c.cliente_id}`)} />
                  ))}
                </div>
              )
            )}
          </Section>

          {/* 4. Clientes para recuperar */}
          <Section
            title="Clientes para recuperar"
            description={clientesRecuperar.length > 0 && !loading
              ? `${clientesRecuperar.length} ${clientesRecuperar.length === 1 ? 'cliente' : 'clientes'} em risco ou churn`
              : undefined
            }
            action={clientesRecuperar.length > 0 && !loading && (
              <button className="btn link sm" onClick={() => go('/recuperar')}>Ver todos</button>
            )}
          >
            {loading ? <SkelCard h={180} /> : (
              clientesRecuperar.length === 0 ? (
                <div className="card" style={{ textAlign: 'center', padding: 20 }}>
                  <div style={{ fontSize: 14, fontWeight: 500 }}>Sua carteira está saudável</div>
                  <div style={{ fontSize: 12, color: 'var(--muted-foreground)', marginTop: 4 }}>
                    Nenhum cliente em risco ou churn no momento.
                  </div>
                </div>
              ) : (
                <div>
                  {clientesRecuperar.slice(0, 3).map(c => (
                    <ClienteRecuperarCard key={c.cliente_id} c={c} onClick={() => go(`/cliente/${c.cliente_id}`)} />
                  ))}
                </div>
              )
            )}
          </Section>

          {/* 5. Evolução de vendas */}
          <Section title="Evolução de vendas" description="Últimos 6 meses — valor pago">
            {loading ? <SkelCard h={220} /> : (
              evolucao6M.length === 0 ? (
                <div className="card">
                  <EmptyState icon="line-chart" title="Sem dados suficientes" description="Você ainda não tem histórico para exibir a evolução." />
                </div>
              ) : (
                <EvolucaoChart data={evolucao6M} />
              )
            )}
          </Section>
        </div>
      </div>
    </div>
  );
}

// ─── Variação A — Hero sólido (fundo primary, valor gigante centralizado) ──
// ─── HomeHeroFoto ─────────────────────────────────────────────────────────
// Hero fotográfico full-bleed que substitui o header + card de comissão da
// Home. Foto de fundo + overlay gradient escuro + saudação em fonte light.
function HomeHeroFoto({ usuario, comissao, onExtrato }) {
  const fmt = window.TrendFmt;
  const partes = fmt.fmtBRLParts(comissao.comGerada);
  const semComissao = !comissao.comGerada || comissao.comGerada === 0;

  return (
    <div style={{
      position: 'relative',
      minHeight: 560,
      background: '#0A0A0A',
      color: '#F5F7F7',
      overflow: 'hidden',
      marginBottom: 8,
    }}>
      {/* Foto de fundo (textura orgânica) */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0,
        backgroundImage: 'url(/static/trendapp/assets/welcome-hero.jpg)',
        backgroundSize: 'cover',
        backgroundPosition: 'center center',
        backgroundRepeat: 'no-repeat',
      }} />
      {/* Overlay dark verde-preto — mantém a leitura da textura mas
          escurece bastante o rodapé para legibilidade do valor + CTA */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0,
        background:
          'linear-gradient(180deg,' +
          ' rgba(8, 20, 12, 0.30) 0%,' +
          ' rgba(8, 20, 12, 0.35) 18%,' +
          ' rgba(6, 14, 9, 0.72) 52%,' +
          ' rgba(4, 10, 6, 0.92) 78%,' +
          ' rgba(4, 8, 5, 0.98) 100%)',
      }} />
      {/* Vinheta lateral orgânica */}
      <div aria-hidden="true" style={{
        position: 'absolute', inset: 0,
        background: 'radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.45) 100%)',
        pointerEvents: 'none',
      }} />

      {/* Conteúdo */}
      <div style={{
        position: 'relative', zIndex: 1,
        padding: 'calc(16px + var(--safe-top)) 24px 28px',
        display: 'flex', flexDirection: 'column',
        minHeight: 560,
      }}>
        {/* Topo: marca discreta + iniciais/notificação */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 4 }}>
          <div style={{ color: '#F5F7F7', opacity: 0.95 }}>
            <TrendAppLogo height={18} />
          </div>
          <div style={{ flex: 1 }} />
          <button
            onClick={() => alert('Notificações — apenas visual')}
            aria-label="Notificações"
            style={{
              width: 36, height: 36,
              display: 'flex', alignItems: 'center', justifyContent: 'center',
              color: 'rgba(245,247,247,0.7)',
              background: 'transparent',
            }}
          >
            <Icon name="bell" size={17} strokeWidth={1.5} />
          </button>
          <div style={{
            width: 34, height: 34, borderRadius: '50%',
            border: '1px solid rgba(255,255,255,0.25)',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            fontSize: 12, fontWeight: 400, letterSpacing: '-0.01em',
            color: '#F5F7F7',
            background: 'rgba(255,255,255,0.06)',
            backdropFilter: 'blur(8px)',
          }}>
            {window.TrendFmt.initials(usuario.nome)}
          </div>
        </div>

        <div style={{ flex: 1 }} />

        {/* Saudação premium */}
        <h1 style={{
          fontSize: 28,
          fontWeight: 300,
          letterSpacing: '-0.025em',
          lineHeight: 1.18,
          color: '#F5F7F7',
          maxWidth: 320,
          marginBottom: 28,
        }}>
          Olá, seja bem-vindo<br />
          <span style={{ fontWeight: 400 }}>ao cockpit do representante.</span>
        </h1>

        {/* Valor de comissão em light editorial */}
        <div style={{ marginBottom: 18 }}>
          <div style={{
            fontSize: 10.5,
            fontWeight: 400,
            letterSpacing: '0.14em',
            textTransform: 'uppercase',
            color: 'rgba(245,247,247,0.55)',
            marginBottom: 12,
          }}>
            Sua comissão · {fmt.fmtCompetencia(comissao.competencia)}
          </div>
          <div style={{
            display: 'flex', alignItems: 'baseline', gap: 4,
            fontVariantNumeric: 'tabular-nums',
          }}>
            <span style={{
              fontSize: 20, fontWeight: 300,
              color: 'rgba(245,247,247,0.55)',
              marginRight: 4,
            }}>R$</span>
            <span style={{
              fontSize: 52, fontWeight: 300,
              letterSpacing: '-0.045em',
              lineHeight: 1,
              color: '#F5F7F7',
            }}>{semComissao ? '0' : partes.int}</span>
            <span style={{
              fontSize: 24, fontWeight: 300,
              color: 'rgba(245,247,247,0.55)',
              letterSpacing: '-0.02em',
            }}>{semComissao ? ',00' : partes.dec}</span>
          </div>

          {!semComissao && comissao.deltaMesAnterior != null && (
            <div style={{
              marginTop: 10,
              fontSize: 13,
              fontWeight: 400,
              color: 'rgba(245,247,247,0.65)',
              display: 'flex', alignItems: 'center', gap: 6,
            }}>
              <span style={{
                color: comissao.deltaMesAnterior >= 0 ? 'oklch(0.78 0.16 155)' : 'oklch(0.72 0.18 25)',
                fontWeight: 500,
              }}>
                {comissao.deltaMesAnterior >= 0 ? '↑' : '↓'}{' '}
                {(Math.abs(comissao.deltaMesAnterior) * 100).toFixed(1).replace('.', ',')}%
              </span>
              <span>vs mês anterior</span>
            </div>
          )}
          {semComissao && (
            <div style={{ marginTop: 10, fontSize: 13, color: 'rgba(245,247,247,0.55)' }}>
              Nenhuma comissão gerada no período.
            </div>
          )}
        </div>

        {/* Banner apuração em light */}
        {comissao.pedidosEmApuracao > 0 && (
          <div style={{
            marginBottom: 20,
            padding: '13px 0',
            borderTop: '1px solid rgba(255,255,255,0.10)',
            borderBottom: '1px solid rgba(255,255,255,0.10)',
            display: 'flex', alignItems: 'center', gap: 10,
            fontSize: 12.5,
            color: 'rgba(245,247,247,0.75)',
          }}>
            <span aria-hidden="true" style={{
              width: 6, height: 6, borderRadius: 999,
              background: 'oklch(0.80 0.16 75)',
              flexShrink: 0,
            }} />
            <span>
              <strong style={{ color: '#F5F7F7', fontWeight: 500 }}>
                {comissao.pedidosEmApuracao}
              </strong>
              {' '}
              {comissao.pedidosEmApuracao === 1
                ? 'pedido em apuração — aguarda fechamento'
                : 'pedidos em apuração — aguardam fechamento'}
            </span>
          </div>
        )}

        {/* CTA premium pill */}
        <button
          onClick={onExtrato}
          style={{
            width: '100%',
            display: 'inline-flex', alignItems: 'center', justifyContent: 'space-between',
            padding: '16px 24px',
            borderRadius: 999,
            background: '#F5F7F7',
            color: '#0A0A0A',
            fontSize: 14, fontWeight: 500,
            letterSpacing: '-0.01em',
            minHeight: 54,
            boxShadow: '0 10px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.08)',
            transition: 'transform 200ms cubic-bezier(.22,.61,.36,1)',
          }}
          onMouseDown={e => { e.currentTarget.style.transform = 'scale(0.985)'; }}
          onMouseUp={e => { e.currentTarget.style.transform = 'scale(1)'; }}
          onMouseLeave={e => { e.currentTarget.style.transform = 'scale(1)'; }}
        >
          <span>Ver extrato completo</span>
          <span style={{
            display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
            width: 30, height: 30, borderRadius: 999,
            background: '#0A0A0A', color: '#F5F7F7',
          }}>
            <Icon name="arrow-right" size={14} strokeWidth={1.75} />
          </span>
        </button>
      </div>
    </div>
  );
}

function ComissaoHeroSolido({ comissao, onExtrato }) {
  useLucide([comissao]);
  const fmt = window.TrendFmt;
  const partes = fmt.fmtBRLParts(comissao.comGerada);
  const semComissao = !comissao.comGerada || comissao.comGerada === 0;
  const deltaCls = comissao.deltaMesAnterior == null ? null
    : comissao.deltaMesAnterior > 0 ? 'delta-inline up'
    : comissao.deltaMesAnterior < 0 ? 'delta-inline down'
    : 'delta-inline flat';

  return (
    <div style={{ paddingTop: 4 }}>
      <div className="eyebrow" style={{ marginBottom: 12 }}>
        Sua comissão · {fmt.fmtCompetencia(comissao.competencia)}
      </div>

      {semComissao ? (
        <>
          <div className="big-money" style={{ color: 'var(--foreground)' }}>
            <span className="prefix">R$</span>0<span className="decimals">,00</span>
          </div>
          <div style={{ fontSize: 13, color: 'var(--muted-foreground)', marginTop: 10 }}>
            Nenhuma comissão gerada no período.
          </div>
        </>
      ) : (
        <>
          <div className="big-money" style={{ color: 'var(--foreground)' }}>
            <span className="prefix">R$</span>{partes.int}<span className="decimals">{partes.dec}</span>
          </div>
          {comissao.deltaMesAnterior != null && (
            <div style={{ marginTop: 10, fontSize: 13, color: 'var(--muted-foreground)' }}>
              <span className={deltaCls}>
                {comissao.deltaMesAnterior > 0 ? '↑' : comissao.deltaMesAnterior < 0 ? '↓' : '→'}{' '}
                {(Math.abs(comissao.deltaMesAnterior) * 100).toFixed(1).replace('.', ',')}%
              </span>
              {'  '}vs mês anterior
            </div>
          )}
          {comissao.deltaMesAnterior == null && (
            <div style={{ marginTop: 10, fontSize: 13, color: 'var(--muted-foreground)' }}>
              Sem base comparável.
            </div>
          )}
        </>
      )}

      {comissao.pedidosEmApuracao > 0 && (
        <div style={{
          marginTop: 20, padding: '14px 0',
          borderTop: '1px solid var(--border)',
          borderBottom: '1px solid var(--border)',
          display: 'flex', alignItems: 'center', gap: 10,
          fontSize: 13, color: 'var(--foreground)',
        }}>
          <span aria-hidden="true" style={{
            width: 6, height: 6, borderRadius: 999,
            background: 'oklch(0.75 0.14 75)',
          }} />
          <span style={{ color: 'var(--muted-foreground)' }}>
            <strong style={{ color: 'var(--foreground)', fontWeight: 500 }}>{comissao.pedidosEmApuracao}</strong>
            {' '}{comissao.pedidosEmApuracao === 1 ? 'pedido em apuração — aguarda fechamento' : 'pedidos em apuração — aguardam fechamento'}
          </span>
        </div>
      )}

      <button
        onClick={onExtrato}
        style={{
          marginTop: comissao.pedidosEmApuracao > 0 ? 20 : 24,
          display: 'inline-flex', alignItems: 'center', gap: 6,
          fontSize: 13, fontWeight: 500,
          color: 'var(--foreground)',
          padding: '4px 0',
          borderBottom: '1px solid oklch(from var(--foreground) l c h / 0.3)',
          borderRadius: 0,
        }}
      >
        Ver extrato completo
        <Icon name="arrow-right" size={14} />
      </button>
    </div>
  );
}

// ─── Variação B — Hero leve (fundo card, número gigante, layout mais integrado) ─
function ComissaoHeroLeve({ comissao, onExtrato }) {
  useLucide([comissao]);
  const fmt = window.TrendFmt;
  const partes = fmt.fmtBRLParts(comissao.comGerada);
  const semComissao = !comissao.comGerada || comissao.comGerada === 0;

  return (
    <div className="card" style={{ padding: '20px 20px 16px' }}>
      <div className="between" style={{ marginBottom: 12 }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, color: 'var(--muted-foreground)' }}>
          <div style={{
            width: 28, height: 28, borderRadius: 8,
            background: 'color-mix(in oklch, var(--primary) 10%, transparent)',
            color: 'var(--primary),',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Icon name="wallet" size={15} color="var(--primary)" />
          </div>
          <span style={{ fontWeight: 500, color: 'var(--foreground)' }}>Sua comissão do mês</span>
        </div>
        {comissao.deltaMesAnterior != null && !semComissao && (
          <DeltaChip value={comissao.deltaMesAnterior} formato="pct" size="sm" />
        )}
      </div>

      {semComissao ? (
        <>
          <div className="big-money">
            <span className="prefix">R$</span>0<span className="decimals">,00</span>
          </div>
          <div style={{ fontSize: 12, color: 'var(--muted-foreground)', marginTop: 4 }}>
            Nenhuma comissão gerada em {fmt.fmtCompetencia(comissao.competencia)}
          </div>
        </>
      ) : (
        <>
          <div className="big-money">
            <span className="prefix">R$</span>{partes.int}<span className="decimals">{partes.dec}</span>
          </div>
          <div style={{ fontSize: 12, color: 'var(--muted-foreground)', marginTop: 4 }}>
            Comissão gerada em {fmt.fmtCompetencia(comissao.competencia)}
            {comissao.deltaMesAnterior == null && ' — sem base comparável'}
          </div>
        </>
      )}

      {comissao.pedidosEmApuracao > 0 && (
        <div style={{
          marginTop: 14, padding: '10px 12px',
          borderRadius: 10,
          background: 'color-mix(in oklch, var(--warning) 8%, var(--muted))',
          display: 'flex', alignItems: 'center', gap: 8,
          fontSize: 12, color: 'var(--foreground)',
        }}>
          <div style={{
            width: 22, height: 22, borderRadius: 999,
            background: 'color-mix(in oklch, var(--warning) 20%, transparent)',
            color: 'var(--warning)',
            display: 'flex', alignItems: 'center', justifyContent: 'center',
          }}>
            <Icon name="hourglass" size={12} />
          </div>
          <span>
            <strong style={{ fontWeight: 600 }}>{comissao.pedidosEmApuracao}</strong>
            {' '}pedidos ainda em apuração
          </span>
        </div>
      )}

      <button
        onClick={onExtrato}
        className="btn secondary block"
        style={{ marginTop: 14 }}>
        Ver extrato
        <Icon name="chevron-right" size={16} />
      </button>
    </div>
  );
}

// ─── MeuMês grid ─────────────────────────────────────────────────────────────
function MeuMesGrid({ k }) {
  const fmt = window.TrendFmt;
  const cells = [
    { label: 'Faturamento líq.', value: fmt.fmtBRL(k.fatLiquido, { showCents: false }), delta: k.fatLiquidoDelta },
    { label: 'Pedidos',          value: fmt.fmtInt(k.pedidos),         delta: k.pedidosDelta },
    { label: 'Ticket médio',     value: fmt.fmtBRL(k.ticketMedio, { showCents: false }), delta: k.ticketMedioDelta },
    { label: 'Clientes únicos',  value: fmt.fmtInt(k.clientesUnicos), delta: k.clientesUnicosDelta },
    { label: 'Ciclo entrega',    value: k.cicloEntrega != null ? `${k.cicloEntrega.toString().replace('.', ',')} d` : '—', delta: k.cicloEntregaDelta, hint: k.cicloEntrega == null ? 'amostra insuficiente' : null },
    { label: 'Recompra 3M',      value: k.recompra3MPct != null ? `${(k.recompra3MPct * 100).toFixed(0)}%` : '—', delta: k.recompra3MDelta, formato: 'pp', hint: k.recompra3MPct == null ? 'amostra insuficiente' : null },
  ];
  return (
    <KpiGrid>
      {cells.map((c, i) => <KpiCell key={i} {...c} />)}
    </KpiGrid>
  );
}

// ─── Pedido prioritário card ─────────────────────────────────────────────────
function PedidoPrioritarioCard({ p, onClick }) {
  const MOTIVOS = window.TrendMocks.MOTIVOS;
  const motivoCfg = p.motivo ? MOTIVOS[p.motivo] : null;
  return (
    <div
      className="hairline-row"
      onClick={onClick}
      role="button" tabIndex={0}
      style={{ alignItems: 'flex-start', paddingTop: 16, paddingBottom: 16 }}
    >
      <span aria-hidden="true" style={{
        marginTop: 6, flexShrink: 0,
        width: 6, height: 6, borderRadius: 999,
        background: 'oklch(0.62 0.20 25)',
      }} />
      <div className="grow" style={{ minWidth: 0 }}>
        <div style={{ display: 'flex', gap: 10, alignItems: 'baseline', flexWrap: 'wrap' }}>
          <span style={{ fontSize: 14, fontWeight: 500, color: 'var(--foreground)' }}>{p.pedido}</span>
          <span style={{ fontSize: 12, color: 'var(--muted-foreground)' }}>{p.cliente}</span>
        </div>
        {motivoCfg && (
          <div style={{ fontSize: 12.5, color: 'var(--muted-foreground)', marginTop: 4 }}>
            {motivoCfg.msg}
          </div>
        )}
      </div>
      <Icon name="arrow-right" size={14} color="var(--muted-foreground)" strokeWidth={1.5} style={{ marginTop: 8 }} />
    </div>
  );
}

// ─── Cliente ciclo de recompra row — hairline (Home compact) ────────────
function ClienteRecompraCard({ c, onClick }) {
  const fmt = window.TrendFmt;
  const diasParaRisco = 60 - c.diasSemComprar;
  return (
    <div className="hairline-row" onClick={onClick} role="button" tabIndex={0}>
      <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 }}>
          <span className="tabnum">{c.diasSemComprar}d</span> sem comprar
          {diasParaRisco > 0 && (
            <> · {diasParaRisco}d p/ virar risco</>
          )}
        </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 }}>histórico</div>
      </div>
      <Icon name="arrow-right" size={14} color="var(--muted-foreground)" strokeWidth={1.5} />
    </div>
  );
}

// ─── Cliente para recuperar row — hairline ───────────────────────────────
function ClienteRecuperarCard({ c, onClick }) {
  const fmt = window.TrendFmt;
  return (
    <div
      className="hairline-row"
      onClick={onClick}
      role="button" tabIndex={0}
    >
      <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.diasSemComprar}d sem comprar
        </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 }}>histórico</div>
      </div>
      <Icon name="arrow-right" size={14} color="var(--muted-foreground)" strokeWidth={1.5} />
    </div>
  );
}

// ─── Evolução chart (Recharts) ──────────────────────────────────────────────
function EvolucaoChart({ data }) {
  if (!window.Recharts) return <SkelCard h={220} />;
  const { ResponsiveContainer, AreaChart, Area, XAxis, YAxis, Tooltip, CartesianGrid, defs } = window.Recharts;
  const fmt = window.TrendFmt;

  return (
    <div style={{ padding: 0, marginLeft: -8 }}>
      <div style={{ width: '100%', height: 180 }}>
        <ResponsiveContainer>
          <AreaChart data={data} margin={{ top: 10, right: 8, left: -18, bottom: 0 }}>
            <defs>
              <linearGradient id="areaFill" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stopColor="var(--primary)" stopOpacity={0.35} />
                <stop offset="100%" stopColor="var(--primary)" stopOpacity={0.02} />
              </linearGradient>
            </defs>
            <CartesianGrid stroke="var(--border)" strokeDasharray="3 3" vertical={false} />
            <XAxis
              dataKey="mes"
              tickLine={false}
              axisLine={false}
              tick={{ fill: 'var(--muted-foreground)', fontSize: 11 }}
            />
            <YAxis
              tickLine={false}
              axisLine={false}
              tick={{ fill: 'var(--muted-foreground)', fontSize: 11 }}
              tickFormatter={(v) => `R$ ${(v/1000).toFixed(0)}k`}
              width={54}
            />
            <Tooltip
              contentStyle={{
                background: 'var(--popover)',
                color: 'var(--popover-foreground)',
                border: '1px solid var(--border)',
                borderRadius: 10, fontSize: 12,
              }}
              formatter={(v) => [fmt.fmtBRL(v, { showCents: false }), 'Valor pago']}
              labelStyle={{ color: 'var(--muted-foreground)', fontSize: 11 }}
            />
            <Area type="monotone" dataKey="valor_pago" stroke="var(--primary)" strokeWidth={2} fill="url(#areaFill)" activeDot={{ r: 4 }} />
          </AreaChart>
        </ResponsiveContainer>
      </div>
    </div>
  );
}

Object.assign(window, { InicioScreen, EvolucaoChart });