/* global React, window */
/* Gráficos SVG no estilo Swiss da marca (cream/ink/graphite, labels mono). */
const { useState: useStateChart } = React;

const C_GRAPHITE = '#5a5347';
const C_SOFT = '#8a8175';
const C_GRID = '#ddd6c8';
const C_LABEL = '#6b6258';
const C_INK = '#141414';
const C_CREAM = '#f6f4ef';

/* Marcos reais de transistores (ano, contagem, nome). Fonte: Wikipedia / Our World in Data. */
const MOORE_DATA = [
  [1971, 2300, 'Intel 4004'],
  [1972, 3500, 'Intel 8008'],
  [1974, 4500, 'Intel 8080'],
  [1976, 8500, 'Zilog Z80'],
  [1978, 29000, 'Intel 8086'],
  [1979, 68000, 'Motorola 68000'],
  [1982, 134000, 'Intel 80286'],
  [1985, 275000, 'Intel 80386'],
  [1989, 1180000, 'Intel 80486'],
  [1993, 3100000, 'Pentium'],
  [1995, 5500000, 'Pentium Pro'],
  [1997, 7500000, 'Pentium II'],
  [1999, 9500000, 'Pentium III'],
  [2000, 42000000, 'Pentium 4'],
  [2006, 291000000, 'Core 2 Duo'],
  [2008, 731000000, 'Core i7 Quad'],
  [2010, 1170000000, 'Six-core Core i7'],
  [2012, 3100000000, '8-core Itanium Poulson'],
  [2014, 5560000000, '18-core Xeon Haswell'],
  [2017, 19200000000, '32-core AMD Epyc'],
  [2019, 39540000000, 'AMD Epyc Rome'],
  [2020, 16000000000, 'Apple M1'],
  [2021, 57000000000, 'Apple M1 Max'],
  [2023, 67000000000, 'Apple M2 Max'],
  [2022, 114000000000, 'Apple M1 Ultra'],
];

function fmtCount(n) {
  if (n >= 1e9) return (n / 1e9 >= 10 ? Math.round(n / 1e9) : (n / 1e9).toFixed(1).replace(/\.0$/, '')) + 'B';
  if (n >= 1e6) return (n / 1e6 >= 10 ? Math.round(n / 1e6) : (n / 1e6).toFixed(1).replace(/\.0$/, '')) + 'M';
  if (n >= 1e3) return (n / 1e3 >= 10 ? Math.round(n / 1e3) : (n / 1e3).toFixed(1).replace(/\.0$/, '')) + 'K';
  return '' + n;
}

function MooreLawChart({ lang }) {
  const tr = (k) => window.tr(lang, k);
  const [hi, setHi] = useStateChart(-1);

  const W = 1000, H = 560, left = 92, right = 962, top = 44, bottom = 478;
  const y0 = 1971, y1 = 2024, lmin = 3, lmax = 11.35;
  const xFor = (yr) => left + ((yr - y0) / (y1 - y0)) * (right - left);
  const yFor = (c) => bottom - ((Math.log10(c) - lmin) / (lmax - lmin)) * (bottom - top);

  const pts = MOORE_DATA.map((d) => ({ px: xFor(d[0]), py: yFor(d[1]), year: d[0], count: d[1], name: d[2] }));
  const yExps = [3, 5, 7, 9, 11];
  const yLabels = { 3: '10³', 5: '10⁵', 7: '10⁷', 9: '10⁹', 11: '10¹¹' };
  const xTicks = [1971, 1980, 1990, 2000, 2010, 2020];
  const trendA = yFor(2300), trendB = yFor(2300 * Math.pow(2, (2024 - y0) / 2));

  const sel = hi >= 0 ? pts[hi] : null;
  let tip = null;
  if (sel) {
    const label = sel.name + '  ·  ' + sel.year + '  ·  ' + fmtCount(sel.count);
    const bw = label.length * 8.6 + 26, bh = 34;
    let bx = sel.px - bw / 2;
    bx = Math.max(left, Math.min(bx, right - bw));
    let by = sel.py - bh - 16;
    if (by < top) by = sel.py + 16;
    tip = { label, bx, by, bw, bh, tx: bx + bw / 2 };
  }

  return (
    <figure className="chart">
      <figcaption className="chart-title">{tr('about.chart1_title')}</figcaption>
      <svg className="chart-svg" viewBox={'0 0 ' + W + ' ' + H} role="img" aria-label={tr('about.chart1_title')}>
        {yExps.map((e) => (
          <g key={e}>
            <line x1={left} y1={yFor(Math.pow(10, e))} x2={right} y2={yFor(Math.pow(10, e))} stroke={C_GRID} strokeWidth="1" />
            <text x={left - 14} y={yFor(Math.pow(10, e)) + 5} textAnchor="end" fontFamily="var(--font-mono)" fontSize="15" fill={C_LABEL}>{yLabels[e]}</text>
          </g>
        ))}
        <line x1={left} y1={bottom} x2={right} y2={bottom} stroke={C_INK} strokeWidth="1" />
        {xTicks.map((yr) => (
          <text key={yr} x={xFor(yr)} y={bottom + 28} textAnchor="middle" fontFamily="var(--font-mono)" fontSize="15" fill={C_LABEL}>{yr}</text>
        ))}

        {/* reference line: doubling every 2 years */}
        <line x1={xFor(y0)} y1={trendA} x2={xFor(2024)} y2={trendB} stroke={C_SOFT} strokeWidth="1.2" strokeDasharray="2 7" strokeLinecap="round" />
        <text x={xFor(2024) - 6} y={trendB - 12} textAnchor="end" fontFamily="var(--font-mono)" fontSize="13" fill={C_SOFT}>{tr('about.chart1_note')}</text>

        {/* crosshair for hovered */}
        {sel ? (
          <g>
            <line x1={sel.px} y1={bottom} x2={sel.px} y2={sel.py} stroke={C_SOFT} strokeWidth="1" strokeDasharray="2 5" />
            <line x1={left} y1={sel.py} x2={sel.px} y2={sel.py} stroke={C_SOFT} strokeWidth="1" strokeDasharray="2 5" />
          </g>
        ) : null}

        {/* points */}
        {pts.map((p, i) => (
          <circle key={i} cx={p.px} cy={p.py} r={hi === i ? 7 : 4}
            fill={hi === i ? C_INK : C_GRAPHITE}
            opacity={hi < 0 ? 0.55 : (hi === i ? 1 : 0.16)} />
        ))}

        {/* invisible hit areas */}
        {pts.map((p, i) => (
          <circle key={'h' + i} className="moore-hit" cx={p.px} cy={p.py} r="16" fill="transparent" style={{ cursor: 'pointer' }}
            onMouseEnter={() => setHi(i)} onMouseLeave={() => setHi(-1)} onClick={() => setHi(i)} />
        ))}

        {/* tooltip */}
        {tip ? (
          <g pointerEvents="none">
            <rect x={tip.bx} y={tip.by} width={tip.bw} height={tip.bh} rx="2" fill={C_CREAM} stroke={C_INK} strokeWidth="1" />
            <text x={tip.tx} y={tip.by + 22} textAnchor="middle" fontFamily="var(--font-mono)" fontSize="15" fill={C_INK}>{tip.label}</text>
          </g>
        ) : null}
      </svg>
      <div className="chart-axis">{tr('about.chart1_axis')}</div>
    </figure>
  );
}

function AiCurveChart({ lang }) {
  const tr = (k) => window.tr(lang, k);
  const W = 1000, H = 420, left = 70, right = 905, top = 56, bottom = 348;
  const sw = right - left, sh = bottom - top;
  const intel = 'M ' + left + ' ' + bottom +
    ' C ' + (left + sw * 0.55) + ' ' + bottom + ', ' + (right - sw * 0.16) + ' ' + (top + sh * 0.55) + ', ' + right + ' ' + top;
  const cost = 'M ' + left + ' ' + top +
    ' C ' + (left + sw * 0.2) + ' ' + (top + sh * 0.62) + ', ' + (left + sw * 0.5) + ' ' + bottom + ', ' + right + ' ' + bottom;

  return (
    <figure className="chart">
      <figcaption className="chart-title">{tr('about.chart2_title')}</figcaption>
      <svg className="chart-svg" viewBox={'0 0 ' + W + ' ' + H} role="img" aria-label={tr('about.chart2_title')}>
        <line x1={left} y1={bottom} x2={right + 30} y2={bottom} stroke={C_INK} strokeWidth="1" />
        <path d={'M ' + (right + 24) + ' ' + (bottom - 5) + ' L ' + (right + 34) + ' ' + bottom + ' L ' + (right + 24) + ' ' + (bottom + 5)} fill="none" stroke={C_INK} strokeWidth="1" />
        <path d={cost} fill="none" stroke={C_SOFT} strokeWidth="2" strokeDasharray="2 7" strokeLinecap="round" />
        <path d={intel} fill="none" stroke={C_GRAPHITE} strokeWidth="2.6" />
        <text x={right} y={top - 14} textAnchor="end" fontFamily="var(--font-mono)" fontSize="16" letterSpacing="1" fill={C_INK}>{tr('about.chart2_intel').toUpperCase()}</text>
        <text x={right} y={bottom - 16} textAnchor="end" fontFamily="var(--font-mono)" fontSize="16" letterSpacing="1" fill={C_SOFT}>{tr('about.chart2_cost').toUpperCase()}</text>
        <text x={left} y={bottom + 28} textAnchor="start" fontFamily="var(--font-mono)" fontSize="15" fill={C_LABEL}>{tr('about.chart2_time')} →</text>
      </svg>
    </figure>
  );
}

window.MooreLawChart = MooreLawChart;
window.AiCurveChart = AiCurveChart;