// pages-2.jsx — Engagement, Content (recipes & food), Impact (anti-waste)

// ════════════════════════════════════════════════════════════════════
// ENGAGEMENT
// ════════════════════════════════════════════════════════════════════
function PageEngagement({ lang }) {
  const adoption = FEATURE_ADOPTION.map(f => ({ label: tA(lang, f.key), value: f.value }));
  const scanSeries = [
    { name: tA(lang, 'scan_barcode'), data: SCANS_DAILY.barcode, color: 'var(--chart-2)' },
    { name: tA(lang, 'scan_photo'), data: SCANS_DAILY.photo, color: 'var(--chart-1)' },
  ];
  return (
    <PageHead>
      <Grid cols={4} style={{ gap: 14 }}>
        <StatCard label={tA(lang, 'stickiness')} value={STICKINESS} suffix="%" delta={2.1} accent="var(--accent)" />
        <StatCard label={tA(lang, 'kpi_scans')} value={nf(ADMIN_KPIS.scans.value)} delta={ADMIN_KPIS.scans.delta} spark={ADMIN_KPIS.scans.spark} sparkColor="var(--chart-2)" accent="var(--chart-2)" />
        <StatCard label={tA(lang, 'notif_opt')} value={NOTIF_ENABLED} suffix="%" delta={4.5} accent="var(--chart-3)" />
        <StatCard label={tA(lang, 'en_calendar')} value="44%" sub={tA(lang, 'feat_adoption')} delta={6.8} accent="var(--chart-4)" />
      </Grid>

      <Grid cols={12}>
        <Card span={5} title={tA(lang, 'feat_adoption')} sub="% MAU">
          <HBars lang={lang} items={adoption} showEmoji={false} valueFmt={(v) => v + '%'} max={100} />
        </Card>
        <Card span={7} title={tA(lang, 'scan_title')} sub="30 j" right={<Legend2 items={scanSeries} />}>
          <LineChart series={scanSeries} labels={dayLabels(30)} h={232} />
        </Card>
      </Grid>

      <Grid cols={12}>
        <Card span={5} title={tA(lang, 'sessions_title')}>
          <BarChart data={SESSIONS_WEEKDAY.map(d => d.v)} labels={SESSIONS_WEEKDAY.map(d => d.d[lang])} colors={SESSIONS_WEEKDAY.map((d, i) => i >= 5 ? 'var(--accent)' : 'var(--chart-2)')} h={216} />
          <p style={{ margin: '12px 0 0', fontSize: 12.5, color: 'var(--ink-3)' }}>{lang === 'fr' ? 'Pic le week-end — planification des repas.' : 'Weekend peak — meal planning.'}</p>
        </Card>
        <Card span={4} title={tA(lang, 'privacy_title')} sub={tA(lang, 'privacy_sub')}>
          <div style={{ display: 'flex', justifyContent: 'center', paddingTop: 4 }}>
            <Donut lang={lang} size={156} centerLabel={Math.round(PRIVACY_SPLIT.shared / (PRIVACY_SPLIT.shared + PRIVACY_SPLIT.private) * 100) + '%'} centerSub={tA(lang, 'privacy_shared')}
              data={[
                { label: { fr: 'Partagé foyer', en: 'Shared' }, value: PRIVACY_SPLIT.shared, color: 'var(--chart-1)' },
                { label: { fr: 'Gardé privé', en: 'Private' }, value: PRIVACY_SPLIT.private, color: 'var(--chart-3)' },
              ]} />
          </div>
        </Card>
        <Card span={3} title={tA(lang, 'en_favorites')}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14, justifyContent: 'center', flex: 1 }}>
            <BigNumber value="2 184" label={tA(lang, 'en_favorites')} tone="var(--accent)" />
            <BigNumber value="612" label={tA(lang, 'en_leftovers')} tone="var(--chart-3)" />
          </div>
        </Card>
      </Grid>
    </PageHead>
  );
}

// ════════════════════════════════════════════════════════════════════
// CONTENT — recipes & food
// ════════════════════════════════════════════════════════════════════
function PageContent({ lang }) {
  return (
    <PageHead>
      <Grid cols={4} style={{ gap: 14 }}>
        <StatCard label={tA(lang, 'kpi_cooked')} value={nf(ADMIN_KPIS.cooked.value)} delta={ADMIN_KPIS.cooked.delta} spark={ADMIN_KPIS.cooked.spark} accent="var(--accent)" />
        <StatCard label={tA(lang, 'kpi_items')} value={nf(ADMIN_KPIS.items.value)} delta={ADMIN_KPIS.items.delta} spark={ADMIN_KPIS.items.spark} sparkColor="var(--chart-2)" accent="var(--chart-2)" />
        <StatCard label={tA(lang, 'most_fav')} value="2 184" delta={9.1} accent="var(--chart-3)" />
        <StatCard label={tA(lang, 'most_saved')} value={nf(713)} sub={tA(lang, 'times_saved')} delta={12.4} accent="var(--chart-4)" />
      </Grid>

      <Grid cols={12}>
        <Card span={4} title={tA(lang, 'recipe_types')}>
          <Donut lang={lang} size={160} centerLabel={nf(RECIPE_TYPES.reduce((a, b) => a + b.value, 0))} centerSub={tA(lang, 'nav_content')}
            data={RECIPE_TYPES.map(r => ({ label: tA(lang, r.key), value: r.value, color: r.color }))} />
        </Card>
        <Card span={8} title={tA(lang, 'top_recipes')} sub={tA(lang, 'times_cooked')}>
          <HBars lang={lang} items={TOP_RECIPES} accent="var(--chart-1)" />
        </Card>
      </Grid>

      <Grid cols={12}>
        <Card span={4} title={tA(lang, 'top_foods')} sub={tA(lang, 'kpi_items')}>
          <HBars lang={lang} items={TOP_FOODS} accent="var(--chart-2)" />
        </Card>
        <Card span={4} title={tA(lang, 'most_saved')} sub={tA(lang, 'times_saved')}>
          <HBars lang={lang} items={MOST_SAVED} accent="var(--accent)" />
        </Card>
        <Card span={4} title={tA(lang, 'most_fav')} sub={tA(lang, 'favorited')}>
          <HBars lang={lang} items={MOST_FAV} accent="var(--chart-3)" />
        </Card>
      </Grid>
    </PageHead>
  );
}

// ════════════════════════════════════════════════════════════════════
// IMPACT — anti-waste
// ════════════════════════════════════════════════════════════════════
function PageImpact({ lang }) {
  const M = monthsFor(lang);
  return (
    <PageHead>
      <Grid cols={4} style={{ gap: 14 }}>
        <StatCard label={tA(lang, 'im_kg')} value={nf(IMPACT.kg)} suffix=" kg" delta={16.4} spark={ADMIN_KPIS.savedKg.spark} accent="var(--accent)" />
        <StatCard label={tA(lang, 'im_money')} value={money(IMPACT.money)} delta={17.1} spark={ADMIN_KPIS.savedMoney.spark} sparkColor="var(--chart-2)" accent="var(--chart-2)" />
        <StatCard label={tA(lang, 'im_co2')} value={nf(IMPACT.co2)} suffix=" kg" delta={15.2} sparkColor="var(--chart-3)" accent="var(--chart-3)" />
        <StatCard label={tA(lang, 'im_per_user')} value={money(IMPACT.perUserMoney, 1)} sub={IMPACT.perUserKg + ' kg'} delta={3.8} accent="var(--chart-4)" />
      </Grid>

      <Grid cols={12}>
        <Card span={8} title={tA(lang, 'im_trend')} sub={tA(lang, 'p_12m') + ' · kg'}>
          <LineChart series={[{ name: tA(lang, 'im_kg'), data: IMPACT.monthlyKg, color: 'var(--accent)' }]} labels={M} h={252} yFmt={(v) => nf(v)} />
        </Card>
        <Card span={4} title={tA(lang, 'im_by_cat')} sub="kg">
          <Donut lang={lang} size={156} centerLabel={nf(IMPACT.kg)} centerSub="kg"
            data={IMPACT.byCat.map(c => ({ label: tA(lang, c.key), value: c.value, color: c.color }))} />
        </Card>
      </Grid>

      <Card title={tA(lang, 'im_leaderboard')}>
        <Table lang={lang} columns={[
          { head: '#', render: (r) => <span style={{ color: 'var(--ink-3)', fontWeight: 700 }}>{r._i}</span> },
          { head: tA(lang, 'household'), render: (r) => <b style={{ color: 'var(--ink)' }}>{r.name}</b> },
          { head: tA(lang, 'im_kg'), align: 'right', render: (r) => <span><b style={{ color: 'var(--ink)' }}>{r.kg}</b> kg</span> },
          { head: tA(lang, 'im_money'), align: 'right', render: (r) => <b style={{ color: 'var(--pos)' }}>{money(r.money)}</b> },
          { head: tA(lang, 'im_co2'), align: 'right', render: (r) => <span style={{ color: 'var(--ink-2)' }}>{Math.round(r.kg * 2.5)} kg</span> },
          { head: '', wrap: true, render: (r) => <div style={{ minWidth: 110 }}><div style={{ height: 7, background: 'var(--line-2)', borderRadius: 5 }}><div style={{ width: (r.kg / IMPACT.leaderboard[0].kg * 100) + '%', height: '100%', background: 'linear-gradient(90deg,var(--accent),var(--accent-2))', borderRadius: 5 }}></div></div></div> },
        ]} rows={IMPACT.leaderboard.map((r, i) => ({ ...r, _i: i + 1 }))} />
      </Card>
    </PageHead>
  );
}

function BigNumber({ value, label, tone }) {
  return (
    <div>
      <div style={{ fontSize: 28, fontWeight: 800, color: tone, letterSpacing: '-0.02em', lineHeight: 1 }}>{value}</div>
      <div style={{ fontSize: 12, color: 'var(--ink-3)', marginTop: 4, fontWeight: 600 }}>{label}</div>
    </div>
  );
}

Object.assign(window, { PageEngagement, PageContent, PageImpact, BigNumber });