// pages-3.jsx — Revenue, Costs & infra, Geography, System & bugs
const { useState: useS3, useMemo: useM3 } = React;

// ── slider control ───────────────────────────────────────────────────
function Slider({ label, value, min, max, step, onChange, fmt }) {
  const pct = ((value - min) / (max - min)) * 100;
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 12.5 }}>
        <span style={{ color: 'var(--ink-2)', fontWeight: 600 }}>{label}</span>
        <span style={{ color: 'var(--accent)', fontWeight: 800, fontVariantNumeric: 'tabular-nums' }}>{fmt(value)}</span>
      </div>
      <input type="range" min={min} max={max} step={step} value={value} onChange={(e) => onChange(parseFloat(e.target.value))}
        style={{ width: '100%', accentColor: 'var(--accent)', height: 6, background: `linear-gradient(90deg, var(--accent) ${pct}%, var(--line-2) ${pct}%)`, borderRadius: 6, appearance: 'none', cursor: 'pointer' }} />
    </div>
  );
}

// ════════════════════════════════════════════════════════════════════
// REVENUE
// ════════════════════════════════════════════════════════════════════
function PageRevenue({ lang }) {
  const M = monthsFor(lang);
  const [conv, setConv] = useS3(REVENUE.conversion);
  const [price, setPrice] = useS3(4.99);
  const [growth, setGrowth] = useS3(12);

  const totalUsers = ADMIN_KPIS.users.value;
  const calc = useM3(() => {
    const paying = Math.round(totalUsers * conv / 100);
    const familyShare = 0.27;
    const subMrr = Math.round(paying * (1 - familyShare) * price + paying * familyShare * (price + 4));
    const scanRev = REVENUE.scanRevenueProjected;
    const partner = 240;
    const mrr = subMrr + scanRev + partner;
    // 12-mo ramp with growth
    const ramp = []; let u = totalUsers;
    for (let i = 0; i < 12; i++) { u = i === 0 ? totalUsers : u * (1 + growth / 100); ramp.push(Math.round(u * conv / 100 * price + scanRev + partner)); }
    return { paying, subMrr, scanRev, partner, mrr, arr: mrr * 12, arpu: paying ? mrr / paying : 0, ramp };
  }, [conv, price, growth, totalUsers]);

  const streams = [
    { key: 're_str_sub', value: calc.subMrr, color: 'var(--chart-1)' },
    { key: 're_str_scan', value: calc.scanRev, color: 'var(--chart-2)' },
    { key: 're_str_partner', value: calc.partner, color: 'var(--chart-3)' },
  ];
  return (
    <PageHead>
      <div style={{ display: 'flex', alignItems: 'center', gap: 14, padding: '16px 18px', borderRadius: 14, background: 'var(--accent-soft)', border: '1px solid color-mix(in oklab, var(--accent) 30%, transparent)' }}>
        <div style={{ width: 40, height: 40, borderRadius: 11, background: 'var(--accent)', display: 'grid', placeItems: 'center', flexShrink: 0 }}>
          <Icon name="revenue" size={20} color="var(--accent-ink)" />
        </div>
        <div>
          <div style={{ fontSize: 14.5, fontWeight: 800, color: 'var(--ink)' }}>{tA(lang, 're_banner')}</div>
          <div style={{ fontSize: 12.5, color: 'var(--ink-2)' }}>{tA(lang, 're_banner_sub')}</div>
        </div>
        <Badge tone="accent">{tA(lang, 're_projected')}</Badge>
      </div>

      <Grid cols={4} style={{ gap: 14 }}>
        <StatCard label={tA(lang, 're_mrr') + ' · ' + tA(lang, 're_current')} value={money(0)} sub={tA(lang, 're_banner')} accent="var(--ink-3)" />
        <StatCard label={tA(lang, 're_mrr') + ' · ' + tA(lang, 're_projected')} value={money(calc.mrr)} delta={null} accent="var(--accent)" sub={tA(lang, 're_projected')} />
        <StatCard label={tA(lang, 're_arr')} value={money(calc.arr)} accent="var(--chart-2)" />
        <StatCard label={tA(lang, 're_arpu')} value={money(calc.arpu, 2)} sub={calc.paying + ' ' + tA(lang, 're_paying')} accent="var(--chart-3)" />
      </Grid>

      <Grid cols={12}>
        <Card span={8} title={tA(lang, 're_mrr_proj')} sub={tA(lang, 'p_12m')}>
          <LineChart series={[{ name: tA(lang, 're_mrr'), data: calc.ramp, color: 'var(--accent)' }]} labels={M} h={244} valueFmt={(v) => money(v)} />
        </Card>
        <Card span={4} title={tA(lang, 're_assumptions')} sub={tA(lang, 're_assume_note')}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 20, paddingTop: 6 }}>
            <Slider label={tA(lang, 'lever_conv')} value={conv} min={2} max={25} step={0.5} onChange={setConv} fmt={(v) => v + '%'} />
            <Slider label={tA(lang, 'lever_price')} value={price} min={1.99} max={12.99} step={1} onChange={setPrice} fmt={(v) => money(v, 2) + tA(lang, 'perMonth')} />
            <Slider label={tA(lang, 'lever_growth')} value={growth} min={0} max={30} step={1} onChange={setGrowth} fmt={(v) => '+' + v + '%'} />
          </div>
        </Card>
      </Grid>

      <Grid cols={12}>
        <Card span={8} title={tA(lang, 're_pricing')}>
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3,1fr)', gap: 14 }}>
            {REVENUE.pricing.map((p, i) => (
              <div key={i} style={{
                border: p.highlight ? '1.5px solid var(--accent)' : '1px solid var(--line)', borderRadius: 14, padding: 16,
                background: p.highlight ? 'var(--accent-soft)' : 'var(--card-2)', position: 'relative',
              }}>
                {p.highlight && <span style={{ position: 'absolute', top: -10, right: 12, fontSize: 10.5, fontWeight: 800, color: 'var(--accent-ink)', background: 'var(--accent)', padding: '3px 9px', borderRadius: 10 }}>POPULAIRE</span>}
                <div style={{ fontSize: 13.5, fontWeight: 700, color: 'var(--ink)' }}>{tA(lang, p.tier)}</div>
                <div style={{ fontSize: 26, fontWeight: 800, color: p.color, margin: '6px 0', letterSpacing: '-0.02em' }}>
                  {p.price === 0 ? (lang === 'fr' ? 'Gratuit' : 'Free') : money(p.price, 2)}
                  {p.price > 0 && <span style={{ fontSize: 13, color: 'var(--ink-3)', fontWeight: 600 }}>{tA(lang, 'perMonth')}</span>}
                </div>
                <ul style={{ margin: '10px 0 0', padding: 0, listStyle: 'none', display: 'flex', flexDirection: 'column', gap: 7 }}>
                  {p.feats[lang].map((f, fi) => (
                    <li key={fi} style={{ display: 'flex', gap: 7, fontSize: 12, color: 'var(--ink-2)' }}>
                      <Icon name="dot" size={6} color={p.color} fill={p.color} /><span>{f}</span>
                    </li>
                  ))}
                </ul>
                <div style={{ marginTop: 12, paddingTop: 10, borderTop: '1px solid var(--line-2)', fontSize: 12, color: 'var(--ink-3)' }}>
                  <b style={{ color: 'var(--ink)' }}>{nf(p.users)}</b> {tA(lang, 'kpi_users').toLowerCase()}
                </div>
              </div>
            ))}
          </div>
        </Card>
        <Card span={4} title={tA(lang, 're_streams')} sub={tA(lang, 'perMonth')}>
          <Donut lang={lang} size={150} centerLabel={money(calc.mrr)} centerSub={tA(lang, 're_mrr')}
            data={streams.map(s => ({ label: tA(lang, s.key), value: s.value, color: s.color }))} />
          <div style={{ marginTop: 14, paddingTop: 12, borderTop: '1px solid var(--line-2)', display: 'flex', justifyContent: 'space-between', fontSize: 12.5 }}>
            <span style={{ color: 'var(--ink-3)' }}>{tA(lang, 're_scan_price')}</span>
            <b style={{ color: 'var(--ink)' }}>{money(REVENUE.scanPricePerScan, 2)}{tA(lang, 'perScan')}</b>
          </div>
        </Card>
      </Grid>
    </PageHead>
  );
}

// ════════════════════════════════════════════════════════════════════
// COSTS & INFRA
// ════════════════════════════════════════════════════════════════════
function PageCosts({ lang }) {
  const M = monthsFor(lang);
  const total = COSTS.breakdown.reduce((a, b) => a + b.value, 0);
  const revVs = [
    { name: tA(lang, 're_mrr'), data: COSTS.revVsCost_rev, color: 'var(--chart-1)' },
    { name: tA(lang, 'cost_total'), data: COSTS.revVsCost_cost, color: 'var(--chart-5)' },
  ];
  return (
    <PageHead>
      <Grid cols={4} style={{ gap: 14 }}>
        <StatCard label={tA(lang, 'cost_total')} value={money(COSTS.totalMonthly)} sub={tA(lang, 'perMonth')} delta={2.3} invert spark={COSTS.trend} sparkColor="var(--chart-5)" accent="var(--chart-5)" />
        <StatCard label={tA(lang, 'cost_per_user')} value={money(COSTS.perUser, 2)} delta={-3.1} invert accent="var(--chart-2)" />
        <StatCard label={tA(lang, 'cost_per_scan')} value={money(COSTS.perScan, 3)} delta={-5.4} invert accent="var(--chart-3)" />
        <StatCard label={tA(lang, 'cost_margin')} value={COSTS.marginProjected} suffix="%" sub={tA(lang, 're_projected')} accent="var(--accent)" />
      </Grid>

      <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '13px 16px', borderRadius: 12, background: 'var(--warn-soft)', border: '1px solid color-mix(in oklab, var(--warn) 25%, transparent)' }}>
        <Icon name="costs" size={18} color="var(--warn)" />
        <span style={{ fontSize: 13, color: 'var(--ink-2)' }}><b style={{ color: 'var(--ink)' }}>{tA(lang, 'cost_burn')}: {money(COSTS.burn)}{tA(lang, 'perMonth')}</b> — {tA(lang, 'cost_runway_note')}</span>
      </div>

      <Grid cols={12}>
        <Card span={5} title={tA(lang, 'cost_breakdown')} sub={tA(lang, 'perMonth')}>
          <Donut lang={lang} size={158} centerLabel={money(total)} centerSub={tA(lang, 'perMonth')}
            data={COSTS.breakdown.slice(0, 6).map(c => ({ label: tA(lang, c.key), value: c.value, color: c.color }))} />
        </Card>
        <Card span={7} title={tA(lang, 'cost_revenue_vs')} sub={tA(lang, 'p_12m')} right={<Legend2 items={revVs} />}>
          <LineChart series={revVs} labels={M} h={232} valueFmt={(v) => money(v)} />
          <p style={{ margin: '10px 0 0', fontSize: 12, color: 'var(--ink-3)' }}>{lang === 'fr' ? 'Point de rentabilité projeté autour du mois 6.' : 'Projected break-even around month 6.'}</p>
        </Card>
      </Grid>

      <Grid cols={12}>
        <Card span={7} title={tA(lang, 'cost_breakdown')}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 2 }}>
            {COSTS.breakdown.map((c, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '9px 4px', borderBottom: i < COSTS.breakdown.length - 1 ? '1px solid var(--line-2)' : 'none' }}>
                <span style={{ width: 9, height: 9, borderRadius: 3, background: c.color, flexShrink: 0 }}></span>
                <div style={{ flex: 1, minWidth: 0 }}>
                  <div style={{ fontSize: 13, color: 'var(--ink)', fontWeight: 600 }}>{tA(lang, c.key)}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--ink-3)' }}>{c.note[lang]}</div>
                </div>
                <div style={{ width: 90, height: 6, background: 'var(--line-2)', borderRadius: 4, overflow: 'hidden' }}><div style={{ width: (c.value / total * 100) + '%', height: '100%', background: c.color }}></div></div>
                <b style={{ color: 'var(--ink)', fontVariantNumeric: 'tabular-nums', width: 52, textAlign: 'right' }}>{money(c.value)}</b>
              </div>
            ))}
          </div>
        </Card>
        <Card span={5} title={tA(lang, 'cost_api_usage')}>
          <Table lang={lang} columns={[
            { head: tA(lang, 'api'), wrap: true, render: (r) => <span style={{ color: 'var(--ink)', fontWeight: 600, fontSize: 12.5 }}>{r.api}</span> },
            { head: tA(lang, 'calls'), align: 'right', render: (r) => <span style={{ color: 'var(--ink-2)' }}>{r.calls}</span> },
            { head: tA(lang, 'cost'), align: 'right', render: (r) => <b style={{ color: 'var(--ink)' }}>{money(r.cost)}</b> },
          ]} rows={COSTS.apiUsage} />
        </Card>
      </Grid>
    </PageHead>
  );
}

// ════════════════════════════════════════════════════════════════════
// GEOGRAPHY
// ════════════════════════════════════════════════════════════════════
function PageGeo({ lang }) {
  const maxCity = Math.max(...GEO_CITIES.map(c => c.users));
  return (
    <PageHead>
      <Grid cols={4} style={{ gap: 14 }}>
        <StatCard label="Québec" value="72.7%" sub={nf(612) + ' ' + tA(lang, 'geo_users')} accent="var(--accent)" />
        <StatCard label={tA(lang, 'geo_cities')} value="8" sub="Montréal #1" accent="var(--chart-2)" />
        <StatCard label="Canada" value="94.4%" accent="var(--chart-3)" />
        <StatCard label={tA(lang, 'geo_intl')} value="5.6%" sub="France, autres" accent="var(--chart-4)" />
      </Grid>

      <Grid cols={12}>
        <Card span={7} title={tA(lang, 'geo_map')} sub={nf(842) + ' ' + tA(lang, 'geo_users')}>
          <div style={{ position: 'relative', height: 320, borderRadius: 12, background: 'var(--card-2)', overflow: 'hidden', border: '1px solid var(--line-2)' }}>
            {/* abstract dotted grid backdrop */}
            <svg width="100%" height="100%" style={{ position: 'absolute', inset: 0 }}>
              <defs><pattern id="geoGrid" width="26" height="26" patternUnits="userSpaceOnUse"><circle cx="2" cy="2" r="1" fill="var(--grid)" /></pattern></defs>
              <rect width="100%" height="100%" fill="url(#geoGrid)" />
            </svg>
            {GEO_CITIES.map((c, i) => {
              const r = 10 + (c.users / maxCity) * 34;
              return (
                <div key={i} title={c.city} style={{ position: 'absolute', left: c.lng + '%', top: c.lat + '%', transform: 'translate(-50%,-50%)' }}>
                  <div style={{ width: r * 2, height: r * 2, borderRadius: '50%', background: 'var(--accent-soft)', border: '1.5px solid var(--accent)', display: 'grid', placeItems: 'center' }}>
                    <div style={{ width: r * 0.8, height: r * 0.8, borderRadius: '50%', background: 'var(--accent)', opacity: 0.85 }}></div>
                  </div>
                  {c.users > 60 && <div style={{ position: 'absolute', top: '102%', left: '50%', transform: 'translateX(-50%)', fontSize: 11, color: 'var(--ink-2)', fontWeight: 700, whiteSpace: 'nowrap', marginTop: 2 }}>{c.city}</div>}
                </div>
              );
            })}
          </div>
        </Card>
        <Card span={5} title={tA(lang, 'geo_regions')}>
          <HBars lang={lang} showEmoji={false} items={GEO_REGIONS.map(r => ({ label: r.region, value: r.users, color: r.color }))} valueFmt={(v) => nf(v)} />
        </Card>
      </Grid>

      <Card title={tA(lang, 'geo_cities')}>
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4,1fr)', gap: 14 }}>
          {GEO_CITIES.map((c, i) => (
            <div key={i} style={{ padding: 14, borderRadius: 12, background: 'var(--card-2)', border: '1px solid var(--line-2)' }}>
              <div style={{ fontSize: 13, color: 'var(--ink-2)', fontWeight: 600 }}>{c.city}</div>
              <div style={{ fontSize: 22, fontWeight: 800, color: 'var(--ink)', margin: '4px 0' }}>{nf(c.users)}</div>
              <div style={{ height: 6, background: 'var(--line-2)', borderRadius: 4 }}><div style={{ width: (c.users / maxCity * 100) + '%', height: '100%', background: 'var(--accent)', borderRadius: 4 }}></div></div>
            </div>
          ))}
        </div>
      </Card>
    </PageHead>
  );
}

// ════════════════════════════════════════════════════════════════════
// SYSTEM & BUGS
// ════════════════════════════════════════════════════════════════════
function PageSystem({ lang }) {
  const sevTone = { critical: 'neg', high: 'neg', medium: 'warn', low: 'neutral' };
  const stTone = { st_open: 'neg', st_progress: 'warn', st_resolved: 'pos' };
  const sevLabel = { critical: 'sev_critical', high: 'sev_high', medium: 'sev_medium', low: 'sev_low' };
  return (
    <PageHead>
      <Grid cols={4} style={{ gap: 14 }}>
        <StatCard label={tA(lang, 'sys_uptime')} value={SYSTEM.uptime} suffix="%" accent="var(--pos)" />
        <StatCard label={tA(lang, 'sys_latency')} value={SYSTEM.latencyP95} suffix=" ms" delta={-4.2} invert accent="var(--chart-2)" />
        <StatCard label={tA(lang, 'sys_errors')} value={SYSTEM.errorRate} suffix="%" delta={-0.1} invert accent="var(--chart-3)" />
        <StatCard label={tA(lang, 'sys_open_bugs')} value={SYSTEM.openBugs} delta={null} accent="var(--neg)" />
      </Grid>

      <Grid cols={12}>
        <Card span={8} title={tA(lang, 'sys_latency_trend')} sub="p95 · ms">
          <LineChart series={[{ name: 'p95', data: SYSTEM.latency24h, color: 'var(--chart-2)' }]} labels={SYSTEM.latency24h.map((_, i) => i + 'h')} h={224} valueFmt={(v) => Math.round(v) + 'ms'} />
        </Card>
        <Card span={4} title={tA(lang, 'sys_errors_trend')}>
          <Donut lang={lang} size={152} centerLabel={nf(SYSTEM.errorsByType.reduce((a, b) => a + b.value, 0))} centerSub="erreurs / 24h"
            data={SYSTEM.errorsByType.map(e => ({ label: e.type[lang], value: e.value, color: e.color }))} />
        </Card>
      </Grid>

      <Card title={tA(lang, 'sys_bugs_title')} right={<Badge tone="neg">{SYSTEM.openBugs} {tA(lang, 'st_open').toLowerCase()}</Badge>}>
        <Table lang={lang} columns={[
          { head: 'ID', render: (r) => <span style={{ color: 'var(--ink-3)', fontWeight: 700, fontFamily: 'ui-monospace,monospace', fontSize: 12 }}>{r.id}</span> },
          { head: tA(lang, 'sys_bugs_title'), wrap: true, render: (r) => <span style={{ color: 'var(--ink)', fontWeight: 600 }}>{r.title[lang]}</span> },
          { head: tA(lang, 'sys_severity'), render: (r) => <Badge tone={sevTone[r.sev]}>{tA(lang, sevLabel[r.sev])}</Badge> },
          { head: tA(lang, 'sys_platform'), render: (r) => <span style={{ color: 'var(--ink-2)' }}>{r.platform}</span> },
          { head: tA(lang, 'status'), render: (r) => <Badge tone={stTone[r.status]}>{tA(lang, r.status)}</Badge> },
          { head: tA(lang, 'sys_reported'), align: 'right', render: (r) => <span style={{ color: 'var(--ink-3)' }}>{r.daysAgo}{tA(lang, 'day')}</span> },
        ]} rows={SYSTEM.bugs} />
      </Card>
    </PageHead>
  );
}

Object.assign(window, { PageRevenue, PageCosts, PageGeo, PageSystem, Slider });