// Nova seção "Análises" (home-v3) — texto à esquerda + card à direita que
// cicla automaticamente por 4 telas REAIS da página de Análises do app
// (C:\Users\conta\Projects\econome\app\(app)\analises\page.tsx — títulos,
// subtítulos e cores exatos, conferidos no código):
//   1) "Análise por categoria" (abas Gastos do Mês/Parceladas/Recorrentes)
//   2) "Evolução de uma categoria" (seletor + linha roxa)
//   3) "Evolução de compras parceladas" (linha ciano)
//   4) "Evolução — Receitas vs Despesas" (barras empilhadas + linha)
// window.AnalisesSection.

// Cores exatas do ComposedChart real (page.tsx) — diferentes das usadas no
// resto do site/app (ali é var(--purple) #7010B0 / #6A0DAD da marca).
const ANL_C_RECORRENTE = '#7B2FBE';
const ANL_C_PARCELADA = '#0891B2';
const ANL_C_VARIAVEL = '#3B82F6';
const ANL_C_RECEITA = '#10B981';
const ANL_C_CATEGORIA = '#6A0DAD';

const ANL_CATEGORIAS = [
  { label: 'Supermercado', value: 'R$ 640,00', delta: '▼ 9%', kind: 'down', pct: 100 },
  { label: 'Restaurante', value: 'R$ 360,00', delta: '▲ 13%', kind: 'up', pct: 56 },
  { label: 'Transporte', value: 'R$ 210,00', delta: '▼ 12%', kind: 'down', pct: 33 },
  { label: 'Saúde', value: 'R$ 180,00', delta: 'novo', kind: 'new', pct: 28 },
];
const ANL_DELTA_STYLE = {
  down: { color: 'var(--green-deep, #3DB868)', bg: 'var(--green-tint, #ECFAF1)' },
  up: { color: '#B91C1C', bg: '#FDECEC' },
  new: { color: 'var(--ink-3)', bg: 'var(--surface-2, #EEE)' },
};
const ANL_CAT_TABS = ['Gastos do Mês', 'Parceladas', 'Recorrentes'];

const ANL_MESES = ['Mar', 'Abr', 'Mai', 'Jun', 'Jul', 'Ago'];
const ANL_EVOLUCAO = [
  { m: 'Mar', rec: 1800, parc: 620, gas: 900 }, { m: 'Abr', rec: 1800, parc: 580, gas: 800 },
  { m: 'Mai', rec: 1850, parc: 540, gas: 900 }, { m: 'Jun', rec: 1850, parc: 514, gas: 1000 },
  { m: 'Jul', rec: 1900, parc: 480, gas: 900 }, { m: 'Ago', rec: 1900, parc: 450, gas: 900 },
].map((d, i) => ({ ...d, receita: [6900, 6900, 7200, 7400, 6900, 7000][i] }));

// Valores espalhados pela escala toda (não um pico isolado seguido de 5
// pontos achatados lá embaixo) — a distribuição anterior deixava 2/3 do
// gráfico vazios, só usados por um único mês.
const ANL_CATEGORIA_SERIE = [320, 225, 175, 150, 170, 110];
const ANL_PARCELADAS_SERIE = [620, 580, 540, 514, 480, 450];

// Eixo Y compartilhado pelos 3 gráficos de linha/barra: grade horizontal +
// rótulos à esquerda, pra dar escala de verdade (a 1ª versão não tinha
// nenhuma referência — as barras só "flutuavam" sem dar pra comparar). */
function AnlYAxis({ ticks, y, left, right, fmt }) {
  return (
    <>
      {ticks.map((t) => (
        <g key={t}>
          <line x1={left} y1={y(t)} x2={right} y2={y(t)} stroke="var(--line)" strokeWidth="1" strokeDasharray={t === 0 ? '0' : '3 3'} />
          <text x={left - 10} y={y(t) + 3} fontSize="10" fill="var(--ink-4)" textAnchor="end">{fmt ? fmt(t) : t}</text>
        </g>
      ))}
    </>
  );
}

function AnlSlideCategoria() {
  return (
    <div className="anl-slide">
      <div className="anl-slide-title">Análise por categoria</div>
      <div className="anl-cat-tabs">
        {ANL_CAT_TABS.map((t) => (
          <span key={t} className={`anl-cat-tab ${t === 'Gastos do Mês' ? 'on' : ''}`}>{t}</span>
        ))}
      </div>
      <div className="anl-slide-sub">Onde você mais gasta e o que mudou vs Julho.</div>
      <div className="anl-cat-list">
        {ANL_CATEGORIAS.map((c) => {
          const ds = ANL_DELTA_STYLE[c.kind];
          return (
            <div key={c.label} className="anl-cat-row">
              <div className="anl-cat-top">
                <span className="anl-cat-name">{c.label}</span>
                <span className="anl-cat-delta" style={{ color: ds.color, background: ds.bg }}>{c.delta}</span>
                <span className="anl-cat-value">{c.value}</span>
              </div>
              <div className="anl-track"><div className="anl-track-fill" style={{ width: `${c.pct}%`, background: ANL_C_VARIAVEL }} /></div>
            </div>
          );
        })}
      </div>
      <div className="anl-tip anl-tip-orange">⚠ Maior alta: Restaurante +13% vs Julho.</div>
    </div>
  );
}

// Compartilhado pelas 2 telas de "evolução de uma série só" (categoria e
// compras parceladas) — mesmo tipo de gráfico no app real, só muda a cor,
// os dados e o seletor/legenda.
function AnlSingleLineChart({ data, color, maxV, ticks, fmtTick }) {
  // Mais alto que o gráfico de barras (anl-chart-svg-tall) — essas 2 telas
  // só têm título+linha, então sobrava um vão vazio enorme antes da dica lá
  // embaixo; aqui o gráfico ocupa quase todo o espaço reservado do card.
  const left = 40, right = 424, baseY = 248, topY = 28;
  const n = data.length;
  const scale = (baseY - topY) / maxV;
  const y = (v) => baseY - v * scale;
  const X = (i) => left + 16 + (i / (n - 1)) * (right - left - 32);
  const pts = data.map((v, i) => `${X(i).toFixed(1)},${y(v).toFixed(1)}`).join(' ');
  return (
    <svg viewBox="0 0 440 280" className="anl-chart-svg anl-chart-svg-tall">
      <AnlYAxis ticks={ticks} y={y} left={left} right={right} fmt={fmtTick} />
      <polyline points={pts} fill="none" stroke={color} strokeWidth="2.5" />
      {data.map((v, i) => (
        <circle key={i} cx={X(i)} cy={y(v)} r="4" fill={color} stroke="#fff" strokeWidth="1.4" />
      ))}
      {ANL_MESES.map((m, i) => (
        <text key={m} x={X(i)} y={268} fontSize="12" fill="var(--ink-4)" textAnchor="middle">{m}</text>
      ))}
    </svg>
  );
}

function AnlSlideCategoriaEvolucao() {
  return (
    <div className="anl-slide">
      <div className="anl-slide-head">
        <div>
          <div className="anl-slide-title">Evolução de uma categoria</div>
          <div className="anl-slide-sub">Está subindo, caindo ou estável?</div>
        </div>
        <span className="anl-select">Compras variadas <Icon.ChevronDown size={13} color="var(--ink-3)" /></span>
      </div>
      <AnlSingleLineChart data={ANL_CATEGORIA_SERIE} color={ANL_C_CATEGORIA} maxV={360} ticks={[0, 120, 240, 360]} fmtTick={(t) => `R$${t}`} />
      <div className="anl-tip">💡 Compras variadas em queda nos últimos meses.</div>
    </div>
  );
}

function AnlSlideParceladasEvolucao() {
  return (
    <div className="anl-slide">
      <div className="anl-slide-title">Evolução de compras parceladas</div>
      <div className="anl-slide-sub">Está acumulando ou quitando?</div>
      <AnlSingleLineChart data={ANL_PARCELADAS_SERIE} color={ANL_C_PARCELADA} maxV={700} ticks={[0, 350, 700]} fmtTick={(t) => `R$${t}`} />
      <div className="anl-tip anl-tip-green">✓ Suas parcelas caíram R$ 170,00 desde março — quitando.</div>
    </div>
  );
}

function AnlSlideReceitasDespesas() {
  const maxV = 8000, ticks = [0, 2000, 4000, 6000, 8000];
  const left = 44, right = 424, baseY = 220, topY = 26;
  const scale = (baseY - topY) / maxV;
  const y = (v) => baseY - v * scale;
  const barW = 30, gap = 23;
  const startX = left + 14;

  return (
    <div className="anl-slide">
      <div className="anl-slide-title">Evolução — Receitas vs Despesas</div>
      <div className="anl-slide-sub">Receitas (linha) contra despesas por tipo (barras), mês a mês.</div>
      <svg viewBox="0 0 440 250" className="anl-chart-svg anl-chart-svg-mid">
        <AnlYAxis ticks={ticks} y={y} left={left} right={right} fmt={(t) => t === 0 ? '0' : `${t / 1000}k`} />
        {ANL_EVOLUCAO.map((d, i) => {
          const x = startX + i * (barW + gap);
          const hg = d.gas * scale, hp = d.parc * scale, hr = d.rec * scale;
          const yGas = baseY - hg, yParc = yGas - hp, yRec = yParc - hr;
          return (
            <g key={d.m}>
              <rect x={x} y={yGas} width={barW} height={hg} fill={ANL_C_VARIAVEL} rx="2" />
              <rect x={x} y={yParc} width={barW} height={hp} fill={ANL_C_PARCELADA} rx="2" />
              <rect x={x} y={yRec} width={barW} height={hr} fill={ANL_C_RECORRENTE} rx="2" />
              <text x={x + barW / 2} y={236} fontSize="11" fill="var(--ink-4)" textAnchor="middle">{d.m}</text>
            </g>
          );
        })}
        <polyline
          points={ANL_EVOLUCAO.map((d, i) => `${startX + i * (barW + gap) + barW / 2},${y(d.receita)}`).join(' ')}
          fill="none" stroke={ANL_C_RECEITA} strokeWidth="2.5"
        />
        {ANL_EVOLUCAO.map((d, i) => (
          <circle key={d.m} cx={startX + i * (barW + gap) + barW / 2} cy={y(d.receita)} r="3.5" fill={ANL_C_RECEITA} stroke="#fff" strokeWidth="1.2" />
        ))}
      </svg>
      <div className="anl-chart-legend">
        {[['Recorrentes', ANL_C_RECORRENTE], ['Parceladas', ANL_C_PARCELADA], ['Gastos do Mês', ANL_C_VARIAVEL], ['Receitas', ANL_C_RECEITA]].map(([l, c]) => (
          <span key={l}><span className="anl-sw" style={{ background: c }} />{l}</span>
        ))}
      </div>
      <div className="anl-tip anl-tip-green">✓ Sua melhor folga foi em Junho.</div>
    </div>
  );
}

const ANL_SLIDES = [
  { label: 'Por categoria', Comp: AnlSlideCategoria },
  { label: 'Uma categoria', Comp: AnlSlideCategoriaEvolucao },
  { label: 'Parceladas', Comp: AnlSlideParceladasEvolucao },
  { label: 'Receitas x despesas', Comp: AnlSlideReceitasDespesas },
];
const ANL_SLIDE_MS = 4200;

function AnalisesChartCard() {
  const [active, setActive] = React.useState(0);
  React.useEffect(() => {
    const id = setInterval(() => {
      setActive((a) => (a + 1) % ANL_SLIDES.length);
    }, ANL_SLIDE_MS);
    return () => clearInterval(id);
  }, []);

  return (
    <div className="anl-card">
      <div className="anl-card-body">
        {ANL_SLIDES.map((s, i) => (
          <div key={s.label} className={`anl-slide-wrap ${i === active ? 'on' : ''}`}>
            <s.Comp />
          </div>
        ))}
      </div>
    </div>
  );
}

function AnalisesSection() {
  return (
    <section id="analises" style={{ background: 'var(--bg-warm)' }}>
      <div className="container">
        <div className="analises-grid">
          <div className="analises-text">
            <div className="eyebrow"><span className="dot" />Análises</div>
            <h2>O mês passa.<br /><span style={{ color: 'var(--purple)' }}>Entender o que mudou</span><br />faz diferença.</h2>
            <p className="lead">
              O dinheiro está rendendo menos? As parcelas estão diminuindo?
              Está sobrando mais no fim do mês?
            </p>
            <p>
              O Econome transforma seus registros em análises fáceis de acompanhar,
              para você perceber o que pesa nas contas e o que está melhorando.
            </p>
            <p>
              Além dos gráficos, você encontra explicações que destacam as mudanças
              e ajudam a entender onde prestar atenção.
            </p>
          </div>

          <AnalisesChartCard />
        </div>
      </div>

      <style>{`
        .analises-grid {
          display: grid;
          grid-template-columns: 1fr 1.1fr;
          gap: 56px;
          align-items: center;
        }
        .analises-text h2 { font-size: clamp(30px, 3.6vw, 44px); margin: 16px 0 20px; line-height: 1.15; }
        .analises-text .lead { font-size: 17px; font-weight: 600; color: var(--ink); margin-bottom: 14px; line-height: 1.6; }
        .analises-text p { font-size: 15.5px; color: var(--ink-3); line-height: 1.6; margin-bottom: 10px; }
        .analises-text p:last-child { margin-bottom: 0; }

        .anl-card {
          background: var(--bg-elevated);
          border: 1px solid var(--line);
          border-radius: var(--radius-xl);
          box-shadow: var(--shadow-md);
          padding: 24px;
        }
        /* altura fixa — as 4 telas têm conteúdos de tamanhos diferentes;
           sem isso a seção mudaria de altura a cada troca (dançando). */
        .anl-card-body { position: relative; height: 368px; }
        .anl-slide-wrap {
          position: absolute; inset: 0;
          opacity: 0;
          transition: opacity 0.5s ease;
          pointer-events: none;
        }
        .anl-slide-wrap.on { opacity: 1; pointer-events: auto; }
        .anl-slide-title { font-size: 16px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
        .anl-slide-sub { font-size: 12.5px; color: var(--ink-4); margin-bottom: 16px; }
        .anl-slide-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
        .anl-select {
          flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px;
          font-size: 12px; font-weight: 600; color: var(--ink-2);
          background: var(--surface-2, var(--bg-warm)); border-radius: 999px; padding: 6px 12px;
        }

        .anl-cat-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
        .anl-cat-tab {
          font-size: 11.5px; font-weight: 600; color: var(--ink-3);
          background: var(--surface-2, var(--bg-warm)); border-radius: 999px; padding: 5px 11px;
        }
        .anl-cat-tab.on { background: var(--purple); color: #fff; }

        .anl-chart-svg { width: 100%; height: 178px; display: block; }
        .anl-chart-svg-tall { height: 258px; }
        .anl-chart-svg-mid { height: 228px; }
        /* padding-left alinhado ao início das barras no SVG (não ao início
           do card) — sem isso a legenda começava mais à esquerda que o
           próprio gráfico, parecendo desalinhada/bagunçada. */
        .anl-chart-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 12px; padding-left: 13%; }
        .anl-chart-legend span { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--ink-3); }
        .anl-sw { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }

        .anl-cat-list { display: flex; flex-direction: column; gap: 16px; }
        .anl-cat-top { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
        .anl-cat-name { font-size: 14px; font-weight: 600; color: var(--ink); }
        .anl-cat-delta { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
        .anl-cat-value { margin-left: auto; font-size: 14px; font-weight: 700; color: var(--ink); }
        .anl-track { height: 6px; background: var(--surface-2, var(--line)); border-radius: 999px; overflow: hidden; }
        .anl-track-fill { height: 100%; border-radius: 999px; }

        .anl-tip {
          position: absolute; left: 24px; right: 24px; bottom: 0;
          font-size: 12.5px; font-weight: 500; color: var(--purple-deep, var(--purple));
          background: var(--purple-tint); border-radius: 10px; padding: 9px 14px;
        }
        .anl-tip-green { color: var(--green-deep, #3DB868); background: var(--green-tint, #ECFAF1); }
        .anl-tip-orange { color: var(--orange-ink, #9A3412); background: var(--orange-soft, #FFEDD5); }

        @media (max-width: 960px) {
          .analises-grid { grid-template-columns: 1fr; gap: 32px; text-align: center; }
          .analises-text .lead, .analises-text p { max-width: 560px; margin-left: auto; margin-right: auto; }
        }
        @media (max-width: 480px) {
          .anl-card-body { height: 440px; }
        }
      `}</style>
    </section>
  );
}

window.AnalisesSection = AnalisesSection;