// ============================================================
// WASIED · Admin - overview + kanban + users + CMS + logs + billing
// ============================================================

// ---------- Admin overview ----------
function AdminOverview() {
  const k = DATA.admin.kpis;
  return (
    <AppShell isAdmin title="Vue d'ensemble" breadcrumbs={[{ label: 'Admin · Vue d\'ensemble' }]}
      actions={<><Badge tone="hp">Admin</Badge><Button variant="ghost" size="sm" icon="download">Export</Button></>}>

      <div style={{ marginBottom: 28 }}>
        <h1 className="h-display" style={{ fontSize: 22, margin: 0, marginBottom: 6 }}>Bonjour, <span style={{ color: 'var(--accent)' }}>Maxime</span></h1>
        <p style={{ fontSize: 13, color: 'var(--fg-3)', margin: 0 }}>Voici l'état de Wasied aujourd'hui.</p>
      </div>

      {/* KPI grid */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, marginBottom: 14 }} className="dash-kpis">
        {k.map((kpi, i) => (
          <Panel key={i} hoverable style={{ padding: 22 }}>
            <div style={{ fontSize: 11, color: 'var(--fg-3)', fontWeight: 500, marginBottom: 10 }}>{kpi.label}</div>
            <div style={{ display: 'flex', alignItems: 'baseline', justifyContent: 'space-between', marginBottom: 14 }}>
              <span style={{ fontSize: 30, fontWeight: 600, color: 'var(--fg-1)', letterSpacing: 'var(--tracking-tight)', fontVariantNumeric: 'tabular-nums' }}>{kpi.value}</span>
              <span style={{ fontSize: 12, fontWeight: 500, color: kpi.positive ? 'var(--cash)' : 'var(--hp)' }}>{kpi.delta}</span>
            </div>
            <Sparkline data={kpi.spark} color={kpi.positive ? 'var(--cash)' : 'var(--hp)'} width={300} height={36}/>
          </Panel>
        ))}
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 14 }} className="dash-main">
        <Panel style={{ padding: 22 }}>
          <SectionHead title="Revenu mensuel · 12 derniers mois" link={{ label: 'Détails facturation', to: '/admin/billing' }}/>
          <div style={{ height: 240, display: 'flex', alignItems: 'flex-end', gap: 8, padding: '20px 0', borderBottom: '1px solid var(--border-1)' }}>
            {[3200, 3450, 3680, 3820, 3950, 4100, 4280, 4420, 4520, 4680, 4760, 4821].map((v, i) => {
              const h = (v / 5000) * 200;
              const isLast = i === 11;
              return (
                <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 8, position: 'relative' }}>
                  {isLast && <span style={{ position: 'absolute', top: -22, left: 0, right: 0, textAlign: 'center', fontSize: 11, fontWeight: 600, color: 'var(--accent)' }}>{v}€</span>}
                  <div style={{ width: '100%', height: h, background: isLast ? 'var(--accent)' : 'var(--surface-3)', borderRadius: 4, transition: 'background 200ms ease' }}/>
                </div>
              );
            })}
          </div>
          <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: 10, color: 'var(--fg-3)', marginTop: 8, fontFamily: 'var(--font-mono)' }}>
            {['Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Fev', 'Mar', 'Avr', 'Mai'].map(m => <span key={m}>{m}</span>)}
          </div>
        </Panel>
        <Panel style={{ padding: 22 }}>
          <SectionHead title="Répartition revenu" link={{ label: 'Voir tout', to: '/admin/billing' }}/>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
            <RevenueBar label="Hosting (récurrent)" value={2840} total={4821} color="var(--service-hosting)"/>
            <RevenueBar label="Orders (one-shot)" value={1620} total={4821} color="var(--service-orders)"/>
            <RevenueBar label="Formations" value={361} total={4821} color="var(--service-formations)"/>
          </div>
        </Panel>

        <Panel style={{ padding: 22 }}>
          <SectionHead title="Commandes à traiter" link={{ label: 'Kanban', to: '/admin/orders' }}/>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
            {DATA.admin.ordersKanban['En développement'].slice(0, 3).map(o => (
              <div key={o.id} style={{ display: 'grid', gridTemplateColumns: '60px 1fr 100px 80px', gap: 12, alignItems: 'center', padding: '10px 14px', background: 'var(--surface-2)', borderRadius: 8 }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-3)' }}>#{o.id}</span>
                <div style={{ minWidth: 0 }}>
                  <div style={{ fontSize: 12, fontWeight: 500, color: 'var(--fg-1)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{o.service}</div>
                  <div style={{ fontSize: 11, color: 'var(--fg-3)' }}>{o.client}</div>
                </div>
                <Badge tone={o.priority === 'high' ? 'hp' : 'subtle'} size="sm">{o.priority === 'high' ? 'Priorité' : o.priority}</Badge>
                <div style={{ fontSize: 12, color: 'var(--fg-1)', textAlign: 'right', fontWeight: 500 }}>{o.budget}</div>
              </div>
            ))}
          </div>
        </Panel>

        <Panel style={{ padding: 22 }}>
          <SectionHead title="Logs récents" link={{ label: 'Voir tout', to: '/admin/logs' }}/>
          <div style={{ fontFamily: 'var(--font-mono)', fontSize: 11, lineHeight: 1.9, display: 'flex', flexDirection: 'column' }}>
            {DATA.admin.logs.slice(0, 6).map((l, i) => (
              <div key={i} style={{ display: 'flex', alignItems: 'baseline', gap: 8, padding: '4px 0', borderTop: i > 0 ? '1px solid var(--border-1)' : 'none' }}>
                <span style={{ color: 'var(--fg-4)' }}>{l.t}</span>
                <span style={{ color: 'var(--fg-1)', fontWeight: 500 }}>{l.actor}</span>
                <span style={{ color: 'var(--accent)' }}>{l.event}</span>
                <span style={{ color: 'var(--fg-3)', marginLeft: 'auto' }}>{l.ref}{l.amount ? ` · ${l.amount} €` : ''}</span>
              </div>
            ))}
          </div>
        </Panel>
      </div>
    </AppShell>
  );
}

function RevenueBar({ label, value, total, color }) {
  const pct = (value / total) * 100;
  return (
    <div>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 6 }}>
        <span style={{ fontSize: 13, color: 'var(--fg-1)' }}>{label}</span>
        <span style={{ fontSize: 12, color: 'var(--fg-2)', fontVariantNumeric: 'tabular-nums', fontWeight: 500 }}>{value.toLocaleString('fr-FR')} € · {pct.toFixed(0)} %</span>
      </div>
      <div style={{ height: 8, background: 'var(--surface-2)', borderRadius: 4, overflow: 'hidden' }}>
        <div style={{ width: `${pct}%`, height: '100%', background: color, borderRadius: 4 }}/>
      </div>
    </div>
  );
}

// ---------- Kanban ----------
function AdminOrdersKanban() {
  const cols = Object.entries(DATA.admin.ordersKanban);
  const colColors = {
    'Devis envoyé': 'var(--fg-3)',
    'Acompte versé': 'var(--accent)',
    'En développement': 'var(--service-orders)',
    'En relecture': 'var(--xp)',
    'Livré · solde dû': 'var(--service-formations)',
  };
  return (
    <AppShell isAdmin title="Commandes" breadcrumbs={[{ label: 'Admin', path: '/admin' }, { label: 'Commandes · kanban' }]}
      sectionPadding={false}
      actions={<><Button variant="ghost" size="sm" icon="filter">Filtrer</Button><Button variant="primary" size="sm" icon="plus">Nouvelle</Button></>}>
      <div style={{ padding: '24px 24px 0', display: 'flex', gap: 12, alignItems: 'center', marginBottom: 16, flexWrap: 'wrap' }}>
        <Input icon="search" placeholder="Rechercher une commande, un client…" containerStyle={{ maxWidth: 320 }}/>
        <Badge tone="subtle">Total · {cols.reduce((s, [, items]) => s + items.length, 0)} commandes</Badge>
        <Badge tone="cash">Revenu en cours · 27 600 €</Badge>
      </div>

      <div style={{ padding: '0 24px 24px', display: 'flex', gap: 12, overflowX: 'auto', alignItems: 'flex-start' }}>
        {cols.map(([col, items]) => (
          <div key={col} style={{ flex: '0 0 280px', maxWidth: 280, display: 'flex', flexDirection: 'column', gap: 8 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '8px 4px' }}>
              <span style={{ width: 8, height: 8, borderRadius: '50%', background: colColors[col] }}/>
              <span style={{ fontSize: 12, fontWeight: 600, color: 'var(--fg-1)' }}>{col}</span>
              <span style={{ fontSize: 11, color: 'var(--fg-3)', marginLeft: 'auto' }}>{items.length}</span>
            </div>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {items.map(o => <KanbanCard key={o.id} order={o}/>)}
              <button style={{ padding: 10, background: 'transparent', border: '1px dashed var(--border-1)', borderRadius: 8, color: 'var(--fg-3)', fontSize: 11, cursor: 'pointer' }}>+ Ajouter</button>
            </div>
          </div>
        ))}
      </div>
    </AppShell>
  );
}

function KanbanCard({ order }) {
  const prio = order.priority === 'high' ? { color: 'var(--hp)', label: 'Prioritaire' } : order.priority === 'low' ? { color: 'var(--fg-4)', label: 'Standard' } : { color: 'var(--fg-3)', label: 'Normal' };
  return (
    <Panel hoverable style={{ padding: 14, cursor: 'grab' }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 6, marginBottom: 8 }}>
        <span style={{ fontFamily: 'var(--font-mono)', fontSize: 10, color: 'var(--fg-3)' }}>#{order.id}</span>
        <span style={{ width: 4, height: 4, borderRadius: '50%', background: prio.color }}/>
        <span style={{ fontSize: 10, color: prio.color, marginLeft: 'auto' }}>{prio.label}</span>
      </div>
      <div style={{ fontSize: 13, fontWeight: 500, color: 'var(--fg-1)', lineHeight: 1.35, marginBottom: 8 }}>{order.service}</div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8, fontSize: 11, color: 'var(--fg-3)' }}>
        <Avatar name={order.client} size={18} tone="cyan"/>
        <span>{order.client}</span>
      </div>
      <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 10, paddingTop: 10, borderTop: '1px solid var(--border-1)' }}>
        <span style={{ fontSize: 12, color: 'var(--fg-1)', fontWeight: 500, fontVariantNumeric: 'tabular-nums' }}>{order.budget}</span>
        <span style={{ fontSize: 11, color: 'var(--fg-3)', marginLeft: 'auto', display: 'inline-flex', alignItems: 'center', gap: 4 }}>
          <Icon name="calendar" size={10}/>{order.deadline}
        </span>
      </div>
    </Panel>
  );
}

// ---------- Users ----------
function AdminUsersPage() {
  const [search, setSearch] = React.useState('');
  const filtered = DATA.admin.users.filter(u => !search || u.name.toLowerCase().includes(search.toLowerCase()) || u.handle.toLowerCase().includes(search.toLowerCase()));
  return (
    <AppShell isAdmin title="Utilisateurs" breadcrumbs={[{ label: 'Admin', path: '/admin' }, { label: 'Utilisateurs' }]}
      actions={<Button variant="primary" size="sm" icon="plus">Inviter</Button>}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 12, marginBottom: 18 }}>
        <Input icon="search" placeholder="Nom, handle Discord, email…" value={search} onChange={e => setSearch(e.target.value)} containerStyle={{ maxWidth: 360 }}/>
        <Badge tone="subtle">{filtered.length} utilisateurs</Badge>
      </div>

      <Panel style={{ padding: 0, overflow: 'hidden' }}>
        <div style={{ display: 'grid', gridTemplateColumns: '40px 1fr 1fr 120px 100px 120px 120px', gap: 16, padding: '12px 22px', borderBottom: '1px solid var(--border-1)', fontSize: 11, color: 'var(--fg-3)', fontWeight: 500 }}>
          <span></span>
          <span>Utilisateur</span>
          <span>Plan / abo</span>
          <span style={{ textAlign: 'right' }}>MRR</span>
          <span>Joined</span>
          <span>Flags</span>
          <span style={{ textAlign: 'right' }}>Actions</span>
        </div>
        {filtered.map(u => (
          <div key={u.handle} style={{ display: 'grid', gridTemplateColumns: '40px 1fr 1fr 120px 100px 120px 120px', gap: 16, padding: '14px 22px', borderTop: '1px solid var(--border-1)', alignItems: 'center' }}>
            <Avatar name={u.name} size={28} tone={u.flag === 'vip' ? 'amber' : 'cyan'}/>
            <div>
              <Link to={`/u/${u.handle}`} style={{ fontSize: 13, fontWeight: 500, color: 'var(--fg-1)' }}>{u.name}</Link>
              <div style={{ fontSize: 11, color: 'var(--fg-3)', fontFamily: 'var(--font-mono)' }}>@{u.handle}</div>
            </div>
            <span style={{ fontSize: 13, color: 'var(--fg-2)' }}>{u.plan}</span>
            <span style={{ fontSize: 13, color: 'var(--fg-1)', textAlign: 'right', fontWeight: 500, fontVariantNumeric: 'tabular-nums' }}>{u.mrr.toFixed(2)} €</span>
            <span style={{ fontSize: 12, color: 'var(--fg-3)' }}>{u.joined}</span>
            <div>{u.flag === 'vip' && <Badge tone="vip" icon="star">VIP</Badge>}</div>
            <div style={{ display: 'flex', gap: 4, justifyContent: 'flex-end' }}>
              <Button variant="ghost" size="xs">Override</Button>
              <button style={iconBtn}><Icon name="more" size={14}/></button>
            </div>
          </div>
        ))}
      </Panel>
    </AppShell>
  );
}

// ---------- Content / CMS ----------
// ---------- Content / CMS lives in js/admin-cms.jsx (AdminContentPage) ----------

// ---------- Logs / webhooks ----------
function AdminLogsPage() {
  return (
    <AppShell isAdmin title="Logs · webhooks" breadcrumbs={[{ label: 'Admin', path: '/admin' }, { label: 'Logs' }]}
      actions={<><Button variant="ghost" size="sm" icon="filter">Filtres</Button><Button variant="ghost" size="sm" icon="refresh">Replay</Button></>}>
      <div style={{ display: 'grid', gridTemplateColumns: '1.4fr 1fr', gap: 14 }} className="dash-main">
        <Panel style={{ padding: 0, overflow: 'hidden' }}>
          <div style={{ padding: '12px 22px', borderBottom: '1px solid var(--border-1)', display: 'flex', alignItems: 'center', gap: 10 }}>
            <span style={{ fontSize: 13, fontWeight: 600, color: 'var(--fg-1)' }}>Event stream</span>
            <span className="live-dot" style={{ width: 7, height: 7, background: 'var(--cash)', color: 'var(--cash)', borderRadius: '50%' }}/>
            <span style={{ fontSize: 11, color: 'var(--fg-3)' }}>En direct</span>
          </div>
          {DATA.admin.logs.map((l, i) => (
            <div key={i} style={{ display: 'grid', gridTemplateColumns: '70px 100px 1fr 140px 80px', gap: 14, alignItems: 'center', padding: '12px 22px', borderTop: i > 0 ? '1px solid var(--border-1)' : 'none', fontFamily: 'var(--font-mono)', fontSize: 12 }}>
              <span style={{ color: 'var(--fg-4)' }}>{l.t}</span>
              <span style={{ color: 'var(--fg-1)', fontWeight: 500 }}>{l.actor}</span>
              <span style={{ color: 'var(--accent)' }}>{l.event}</span>
              <span style={{ color: 'var(--fg-3)' }}>{l.ref}</span>
              <span style={{ color: l.amount ? 'var(--cash)' : 'var(--fg-3)', textAlign: 'right', fontWeight: 500 }}>{l.amount ? `${l.amount} €` : '-'}</span>
            </div>
          ))}
        </Panel>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 14 }}>
          <Panel style={{ padding: 22 }}>
            <SectionHead title="Webhooks Stripe"/>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              {[
                { event: 'payment_intent.succeeded', delivered: 142, failed: 0 },
                { event: 'invoice.paid', delivered: 89, failed: 0 },
                { event: 'invoice.payment_failed', delivered: 3, failed: 0 },
                { event: 'customer.subscription.updated', delivered: 64, failed: 1 },
              ].map((w, i) => (
                <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '10px 12px', background: 'var(--surface-2)', borderRadius: 8 }}>
                  <code style={{ fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-1)', flex: 1 }}>{w.event}</code>
                  <Badge tone="cash" size="sm">{w.delivered}</Badge>
                  {w.failed > 0 && <Badge tone="hp" size="sm">{w.failed} fail</Badge>}
                </div>
              ))}
            </div>
          </Panel>

          <Panel style={{ padding: 22 }}>
            <SectionHead title="Webhooks sortants"/>
            <p style={{ fontSize: 12, color: 'var(--fg-3)', margin: 0, marginBottom: 14 }}>Clients ayant configuré un webhook sortant pour recevoir les events de leur compte.</p>
            <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
              <div style={{ padding: 12, background: 'var(--surface-2)', borderRadius: 8 }}>
                <div style={{ fontSize: 12, fontWeight: 500, color: 'var(--fg-1)' }}>raalii_</div>
                <code style={{ fontSize: 11, color: 'var(--fg-3)', fontFamily: 'var(--font-mono)' }}>https://raalii.fr/api/wasied-hook</code>
                <div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
                  <Badge tone="cash" size="sm">412 delivered</Badge>
                  <Badge tone="subtle" size="sm">3 retries</Badge>
                </div>
              </div>
              <div style={{ padding: 12, background: 'var(--surface-2)', borderRadius: 8 }}>
                <div style={{ fontSize: 12, fontWeight: 500, color: 'var(--fg-1)' }}>kogui</div>
                <code style={{ fontSize: 11, color: 'var(--fg-3)', fontFamily: 'var(--font-mono)' }}>https://kogui-studio.com/wh</code>
                <div style={{ display: 'flex', gap: 6, marginTop: 8 }}>
                  <Badge tone="cash" size="sm">218 delivered</Badge>
                </div>
              </div>
            </div>
          </Panel>
        </div>
      </div>
    </AppShell>
  );
}

// ---------- Admin billing ----------
function AdminBillingPage() {
  return (
    <AppShell isAdmin title="Facturation" breadcrumbs={[{ label: 'Admin', path: '/admin' }, { label: 'Facturation' }]}
      actions={<Button variant="ghost" size="sm" icon="download">Export comptable</Button>}>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginBottom: 18 }} className="dash-kpis">
        <KpiTile color="var(--accent)" icon="euro" label="MRR" value="4 821 €" sub="+12 % vs M-1"/>
        <KpiTile color="var(--service-orders)" icon="briefcase" label="Pipeline orders" value="27 600 €" sub="7 commandes en cours"/>
        <KpiTile color="var(--xp)" icon="alert" label="Impayés" value="142 €" sub="1 facture en retard"/>
        <KpiTile color="var(--cash)" icon="receipt" label="Factures émises (12m)" value="287" sub="+34 vs 12m précédents"/>
      </div>

      <Panel style={{ padding: 22 }}>
        <SectionHead title="Toutes les transactions"/>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 8 }}>
          {[
            { id: 'INV-2026-005', client: 'spacev', amount: 34.99, status: 'paid', date: '2026-05-12', service: 'Hosting Community Pro · mai' },
            { id: 'INV-2026-006', client: 'kogui',  amount: 49.99, status: 'paid', date: '2026-05-10', service: 'Hosting Elite · mai' },
            { id: 'INV-2026-007', client: 'raalii_', amount: 49.99, status: 'paid', date: '2026-05-08', service: 'Hosting Elite · mai' },
            { id: 'INV-2026-004-O', client: 'spacev', amount: 1440, status: 'paid', date: '2026-04-22', service: 'Commande #0418 · acompte' },
            { id: 'INV-2026-EXP', client: 'spacev', amount: 249, status: 'paid', date: '2026-02-04', service: 'Formation Pack Expert' },
            { id: 'INV-2026-002', client: 'damie2pain', amount: 34.99, status: 'overdue', date: '2026-05-01', service: 'Hosting Community Pro · mai' },
          ].map(t => (
            <div key={t.id} style={{ display: 'grid', gridTemplateColumns: '140px 120px 1fr 100px 100px 80px 80px', gap: 14, alignItems: 'center', padding: '12px 14px', background: 'var(--surface-2)', borderRadius: 8 }}>
              <span style={{ fontFamily: 'var(--font-mono)', fontSize: 12, color: 'var(--fg-3)' }}>{t.id}</span>
              <span style={{ fontSize: 13, color: 'var(--fg-1)' }}>{t.client}</span>
              <span style={{ fontSize: 13, color: 'var(--fg-2)' }}>{t.service}</span>
              <span style={{ fontSize: 12, color: 'var(--fg-3)' }}>{t.date}</span>
              <span style={{ fontSize: 13, color: 'var(--fg-1)', textAlign: 'right', fontWeight: 500, fontVariantNumeric: 'tabular-nums' }}>{t.amount} €</span>
              <Badge tone={t.status === 'paid' ? 'cash' : t.status === 'overdue' ? 'hp' : 'xp'} size="sm">{t.status === 'paid' ? 'Payée' : t.status === 'overdue' ? 'En retard' : 'En attente'}</Badge>
              <Button variant="ghost" size="xs" icon="download">PDF</Button>
            </div>
          ))}
        </div>
      </Panel>
    </AppShell>
  );
}

Object.assign(window, {
  AdminOverview, AdminOrdersKanban, AdminUsersPage, AdminLogsPage, AdminBillingPage,
});