// pages-1.jsx — Overview, Users, Households
const monthsFor = (lang) => (lang === 'fr' ? MONTHS_FR : MONTHS_EN);
const dayLabels = (n) => Array.from({ length: n }, (_, i) => (i + 1) + '');

// ════════════════════════════════════════════════════════════════════
// OVERVIEW
// ════════════════════════════════════════════════════════════════════
function PageOverview({ lang, period }) {
  const M = monthsFor(lang);
  const K = ADMIN_KPIS;
  const growthSeries = [
    { name: tA(lang, 'growth_active'), data: K.mau.spark, color: 'var(--chart-1)' },
    { name: tA(lang, 'growth_new'), data: [42, 46, 46, 48, 52, 56, 58, 62, 64, 66, 70, 74], color: 'var(--chart-2)' },
  ];
  const actSeries = [
    { name: tA(lang, 'en_recipes'), data: ACTIVITY_30D.sessions, color: 'var(--chart-1)' },
    { name: tA(lang, 'kpi_scans'), data: ACTIVITY_30D.scans, color: 'var(--chart-2)' },
    { name: tA(lang, 'kpi_cooked'), data: ACTIVITY_30D.cooked, color: 'var(--chart-3)' },
  ];
  return (
    <PageHead>
      {/* KPI ROW 1 */}
      <Grid cols={4} style={{ gap: 14 }}>
        <StatCard label={tA(lang, 'kpi_users')} value={nf(K.users.value)} delta={K.users.delta} spark={K.users.spark} accent="var(--accent)" />
        <StatCard label={tA(lang, 'kpi_mau')} value={nf(K.mau.value)} delta={K.mau.delta} spark={K.mau.spark} sparkColor="var(--chart-2)" accent="var(--chart-2)" />
        <StatCard label={tA(lang, 'kpi_dau')} value={nf(K.dau.value)} delta={K.dau.delta} spark={K.dau.spark} sparkColor="var(--chart-3)" accent="var(--chart-3)" />
        <StatCard label={tA(lang, 'kpi_households')} value={nf(K.households.value)} delta={K.households.delta} spark={K.households.spark} sparkColor="var(--chart-4)" accent="var(--chart-4)" />
      </Grid>
      {/* KPI ROW 2 */}
      <Grid cols={4} style={{ gap: 14 }}>
        <StatCard label={tA(lang, 'kpi_saved_kg')} value={nf(K.savedKg.value)} suffix=" kg" delta={K.savedKg.delta} spark={K.savedKg.spark} accent="var(--accent)" />
        <StatCard label={tA(lang, 'kpi_saved_money')} value={money(K.savedMoney.value)} delta={K.savedMoney.delta} spark={K.savedMoney.spark} sparkColor="var(--chart-2)" accent="var(--chart-2)" />
        <StatCard label={tA(lang, 'kpi_scans')} value={nf(K.scans.value)} delta={K.scans.delta} spark={K.scans.spark} sparkColor="var(--chart-3)" accent="var(--chart-3)" />
        <StatCard label={tA(lang, 'kpi_cooked')} value={nf(K.cooked.value)} delta={K.cooked.delta} spark={K.cooked.spark} sparkColor="var(--chart-4)" accent="var(--chart-4)" />
      </Grid>

      <Grid cols={12}>
        <Card span={8} title={tA(lang, 'growth_title')} sub={tA(lang, 'vs_prev')}
          right={<Legend2 items={growthSeries} />}>
          <LineChart series={growthSeries} labels={M} h={260} />
        </Card>
        <Card span={4} title={tA(lang, 'breakdown_title')}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', flex: 1, paddingTop: 8 }}>
            <Donut data={INVENTORY_SPLIT.map(d => ({ ...d, label: d.label[lang] }))} centerLabel={nf(K.items.value)} centerSub={tA(lang, 'kpi_items')} lang={lang} />
          </div>
        </Card>
      </Grid>

      <Grid cols={12}>
        <Card span={5} title={tA(lang, 'funnel_title')}>
          <Funnel steps={FUNNEL} lang={lang} />
        </Card>
        <Card span={7} title={tA(lang, 'activity_title')} sub="30 j" right={<Legend2 items={actSeries} />}>
          <LineChart series={actSeries} labels={dayLabels(30)} h={236} area={false} />
        </Card>
      </Grid>

      <Grid cols={12}>
        <Card span={8} title={tA(lang, 'recent_signups')} right={<button className="pw-link">{tA(lang, 'viewAll')}</button>}>
          <Table lang={lang} columns={[
            { head: tA(lang, 'name'), render: (r) => <UserCell u={r} /> },
            { head: tA(lang, 'region'), render: (r) => <span style={{ color: 'var(--ink-2)' }}>{r.region}</span> },
            { head: tA(lang, 'plan'), render: (r) => <PlanBadge plan={r.plan} lang={lang} /> },
            { head: tA(lang, 'items'), align: 'right', render: (r) => <b style={{ color: 'var(--ink)' }}>{r.items}</b> },
            { head: tA(lang, 'joined'), align: 'right', render: (r) => <span style={{ color: 'var(--ink-3)' }}>{r.joinedDaysAgo === 0 ? tA(lang, 'today') : r.joinedDaysAgo + tA(lang, 'day')}</span> },
          ]} rows={RECENT_SIGNUPS} />
        </Card>
        <Card span={4} title={tA(lang, 'top_regions')}>
          <HBars lang={lang} items={GEO_REGIONS.slice(0, 5).map(r => ({ label: r.region, value: r.users, color: r.color }))} valueFmt={(v) => nf(v)} showEmoji={false} />
          <div style={{ marginTop: 16, paddingTop: 14, borderTop: '1px solid var(--line-2)', display: 'flex', gap: 14 }}>
            <MiniStat label={tA(lang, 'sys_uptime')} value={SYSTEM.uptime + '%'} tone="pos" />
            <MiniStat label={tA(lang, 'kpi_retention')} value={K.retention30.value + '%'} tone="accent" />
          </div>
        </Card>
      </Grid>
    </PageHead>
  );
}

// ════════════════════════════════════════════════════════════════════
// USERS
// ════════════════════════════════════════════════════════════════════
function PageUsers({ lang }) {
  const M = monthsFor(lang);
  const [statusFilter, setStatusFilter] = useStateU('all');
  const filters = ['all', 'active', 'new', 'dormant', 'churned'];
  const rows = USERS.filter(u => statusFilter === 'all' || u.status === statusFilter);
  return (
    <PageHead>
      <Grid cols={4} style={{ gap: 14 }}>
        <StatCard label={tA(lang, 'kpi_users')} value={nf(ADMIN_KPIS.users.value)} delta={ADMIN_KPIS.users.delta} spark={ADMIN_KPIS.users.spark} accent="var(--accent)" />
        <StatCard label={tA(lang, 'kpi_mau')} value={nf(ADMIN_KPIS.mau.value)} delta={ADMIN_KPIS.mau.delta} spark={ADMIN_KPIS.mau.spark} sparkColor="var(--chart-2)" accent="var(--chart-2)" />
        <StatCard label={tA(lang, 'kpi_retention')} value={ADMIN_KPIS.retention30.value} suffix="%" delta={ADMIN_KPIS.retention30.delta} accent="var(--chart-3)" />
        <StatCard label={tA(lang, 'churn_title')} value={CHURN_TREND[CHURN_TREND.length - 1]} suffix="%" delta={-0.2} invert spark={CHURN_TREND} sparkColor="var(--chart-5)" accent="var(--chart-5)" />
      </Grid>

      <Grid cols={12}>
        <Card span={7} title={tA(lang, 'retention_title')} sub="% • semaines">
          <CohortHeatmap cohorts={COHORTS} lang={lang} />
        </Card>
        <Card span={5} title={tA(lang, 'dau_mau_title')} sub={tA(lang, 'stickiness')}>
          <LineChart series={[{ name: 'DAU/MAU', data: DAU_MAU, color: 'var(--chart-1)' }]} labels={M} h={224} yFmt={(v) => Math.round(v) + '%'} />
        </Card>
      </Grid>

      <Grid cols={12}>
        <Card span={4} title={tA(lang, 'channels_title')}>
          <Donut data={ACQ_CHANNELS.map(c => ({ ...c, label: c.label[lang] }))} centerLabel={nf(ADMIN_KPIS.users.value)} centerSub={tA(lang, 'kpi_users')} lang={lang} size={156} />
        </Card>
        <Card span={4} title={tA(lang, 'platform_split')}>
          <Donut data={PLATFORM_SPLIT.map(c => ({ ...c, label: c.label[lang] }))} centerLabel="83%" centerSub="PWA" lang={lang} size={156} />
        </Card>
        <Card span={4} title={tA(lang, 'churn_title')} sub={tA(lang, 'p_12m')}>
          <BarChart data={CHURN_TREND} labels={M} color="var(--chart-5)" h={184} valueFmt={(v) => v.toFixed(1) + '%'} />
        </Card>
      </Grid>

      <Card title={tA(lang, 'all_users')}
        right={<Segmented size="sm" value={statusFilter} onChange={setStatusFilter} options={filters.map(f => ({ value: f, label: f === 'all' ? tA(lang, 'filterAll') || 'Tous' : tA(lang, f) }))} />}>
        <Table lang={lang} columns={[
          { head: tA(lang, 'name'), render: (r) => <UserCell u={r} /> },
          { head: tA(lang, 'email'), render: (r) => <span style={{ color: 'var(--ink-3)' }}>{r.email}</span> },
          { head: tA(lang, 'region'), render: (r) => r.region },
          { head: tA(lang, 'plan'), render: (r) => <PlanBadge plan={r.plan} lang={lang} /> },
          { head: tA(lang, 'status'), render: (r) => <StatusBadge status={r.status} lang={lang} /> },
          { head: tA(lang, 'items'), align: 'right', render: (r) => r.items },
          { head: tA(lang, 'cooked'), align: 'right', render: (r) => r.cooked },
          { head: tA(lang, 'last_active'), align: 'right', render: (r) => <span style={{ color: 'var(--ink-3)' }}>{r.seenHrsAgo < 1 ? tA(lang, 'online') : r.seenHrsAgo + tA(lang, 'hr')}</span> },
        ]} rows={rows} />
      </Card>
    </PageHead>
  );
}

// ════════════════════════════════════════════════════════════════════
// HOUSEHOLDS
// ════════════════════════════════════════════════════════════════════
function PageHouseholds({ lang }) {
  const sizeData = HH_SIZE_DIST.map(d => d.count);
  const sizeLabels = HH_SIZE_DIST.map(d => d.size + (d.size >= 6 ? '+' : ''));
  return (
    <PageHead>
      <Grid cols={4} style={{ gap: 14 }}>
        <StatCard label={tA(lang, 'hh_total')} value={nf(HH_STATS.total)} delta={11.4} accent="var(--accent)" spark={ADMIN_KPIS.households.spark} />
        <StatCard label={tA(lang, 'hh_shared')} value={nf(HH_STATS.shared)} sub={Math.round(HH_STATS.shared / HH_STATS.total * 100) + '% ' + tA(lang, 'shared')} delta={8.2} accent="var(--chart-2)" sparkColor="var(--chart-2)" />
        <StatCard label={tA(lang, 'hh_avg_size')} value={HH_STATS.avgSize} suffix=" " sub={tA(lang, 'members')} accent="var(--chart-3)" />
        <StatCard label={tA(lang, 'hh_invites')} value={nf(HH_STATS.invites)} sub={HH_STATS.inviteAccept + '% acceptées'} delta={6.5} accent="var(--chart-4)" sparkColor="var(--chart-4)" />
      </Grid>

      <Grid cols={12}>
        <Card span={6} title={tA(lang, 'hh_size_dist')} sub={tA(lang, 'members')}>
          <BarChart data={sizeData} labels={sizeLabels} color="var(--chart-1)" h={236} />
        </Card>
        <Card span={6} title={tA(lang, 'hh_collab')} sub="actions / semaine">
          <HBars lang={lang} items={HH_COLLAB} showEmoji={false} accent="var(--chart-2)" />
          <div style={{ marginTop: 18, paddingTop: 16, borderTop: '1px solid var(--line-2)' }}>
            <div style={{ fontSize: 12.5, color: 'var(--ink-3)', marginBottom: 10 }}>{tA(lang, 'privacy_sub')}</div>
            <StackedBar lang={lang} 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>
      </Grid>

      <Card title={tA(lang, 'im_leaderboard')} sub={tA(lang, 'im_kg')}>
        <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: '', render: (r) => <div style={{ width: 120 }}><div style={{ height: 7, background: 'var(--line-2)', borderRadius: 5 }}><div style={{ width: (r.kg / IMPACT.leaderboard[0].kg * 100) + '%', height: '100%', background: 'var(--accent)', borderRadius: 5 }}></div></div></div> },
        ]} rows={IMPACT.leaderboard.map((r, i) => ({ ...r, _i: i + 1 }))} />
      </Card>
    </PageHead>
  );
}

// ── small shared bits ────────────────────────────────────────────────
function Legend2({ items }) {
  return (
    <div style={{ display: 'flex', gap: 14, flexWrap: 'wrap' }}>
      {items.map((s, i) => (
        <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--ink-2)', fontWeight: 600 }}>
          <span style={{ width: 9, height: 9, borderRadius: 3, background: s.color }}></span>{s.name}
        </div>
      ))}
    </div>
  );
}
function UserCell({ u }) {
  const initial = u.name[0];
  const tones = ['var(--chart-1)', 'var(--chart-2)', 'var(--chart-3)', 'var(--chart-4)', 'var(--chart-5)'];
  const tone = tones[u.name.charCodeAt(0) % tones.length];
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
      <div style={{ width: 30, height: 30, borderRadius: 8, background: `color-mix(in oklab, ${tone} 22%, var(--card))`, color: tone, display: 'grid', placeItems: 'center', fontWeight: 800, fontSize: 12.5, flexShrink: 0 }}>{initial}</div>
      <span style={{ color: 'var(--ink)', fontWeight: 600 }}>{u.name}</span>
    </div>
  );
}
function PlanBadge({ plan, lang }) {
  const map = { free: 'neutral', premium: 'accent', trial: 'warn' };
  return <Badge tone={map[plan]}>{tA(lang, plan)}</Badge>;
}
function StatusBadge({ status, lang }) {
  const map = { active: 'pos', new: 'info', dormant: 'warn', churned: 'neg' };
  return <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, fontSize: 12.5, color: 'var(--ink-2)', fontWeight: 600 }}>
    <span style={{ width: 7, height: 7, borderRadius: 4, background: `var(--${map[status] === 'pos' ? 'pos' : map[status] === 'neg' ? 'neg' : map[status] === 'warn' ? 'warn' : 'info'})` }}></span>
    {tA(lang, status)}
  </span>;
}
function MiniStat({ label, value, tone = 'accent' }) {
  const col = tone === 'pos' ? 'var(--pos)' : 'var(--accent)';
  return (
    <div style={{ flex: 1 }}>
      <div style={{ fontSize: 11.5, color: 'var(--ink-3)', fontWeight: 600, marginBottom: 3 }}>{label}</div>
      <div style={{ fontSize: 18, fontWeight: 800, color: col }}>{value}</div>
    </div>
  );
}

Object.assign(window, { PageOverview, PageUsers, PageHouseholds, Legend2, UserCell, PlanBadge, StatusBadge, MiniStat, monthsFor, dayLabels });