// Admin screens: Overview, Tenants list, Devices global, Packages, Billing
// Tenant detail page lives in admin-tenant-detail.jsx

// ============= Overview =============
const AdminOverview = ({ onNav, setRoute }) => {
  // simulate gentle live values
  const [tick, setTick] = React.useState(0);
  React.useEffect(() => {
    const t = setInterval(() => setTick(x => x + 1), 4000);
    return () => clearInterval(t);
  }, []);

  const totalDevices = DEVICES.length;
  const activeDevices = DEVICES.filter(d => d.status === 'active').length;
  // §14: maintenance counts as connected but NOT operating
  const onlineDevices = DEVICES.filter(d => d.connectivity === 'online' && d.status === 'active').length;
  // §14: Live PV sums ACTIVE devices only (maintenance excluded)
  const totalPvActive = DEVICES.filter(d => d.status === 'active').reduce((s, d) => s + d.pvNow, 0);
  const totalPv = totalPvActive + Math.sin(tick) * 0.4;
  // §14: Load today (cumulative kWh) across active devices
  const totalLoad = DEVICES.filter(d => d.status === 'active').reduce((s, d) => s + d.loadKwh, 0);
  // §14: Average battery SOC EXCLUDES solar-only devices
  const socEligible = DEVICES.filter(d => d.status === 'active' && d.type !== 'solar_only' && d.soc != null);
  const avgSoc = socEligible.length
    ? socEligible.reduce((s, d) => s + d.soc, 0) / socEligible.length
    : null;
  const openInvoicesTotal = INVOICES.filter(i => i.status !== 'paid').reduce((s, i) => s + i.total, 0);
  const pendingVerif = INVOICES.filter(i => i.status === 'pending_verification').length;

  // chart scaled down to today's modest live output (~38 kW peak vs 185 kW installed)
  const series24h = [
    { label: 'Solar Output (kW)', color: '#1b5c8e', data: genSolarCurve(96, 60) },
    { label: 'Load Draw (kW)',    color: '#5baa6f', data: genLoadCurve(96, 32) },
  ];

  return (
    <>
      <PageHead title="Operator Overview"
        subtitle="Real-time pulse of the entire device fleet across all tenants"
        actions={
          <>
            <Button icon={<Icon.Refresh size={14} />}>Refresh</Button>
            <Button variant="primary" icon={<Icon.Download size={14} />}>Export Report</Button>
          </>
        }
      />

      {/* §3: six metric cards with corrected labels + units (kW vs kWh) */}
      <div className="kpi-row cols-3">
        <KPI label="Connected DER Devices" value={totalDevices} foot={`${activeDevices} / ${totalDevices} active`}
          icon={<Icon.Cpu size={18} />} />
        <KPI label="Live Solar Output" value={totalPv.toFixed(1)} unit="kW" foot={`across ${onlineDevices} sites`}
          icon={<Icon.Bolt size={18} />} tone="amber" />
        <KPI label="Average Battery SOC" value={avgSoc != null ? avgSoc.toFixed(0) : '—'} unit="%"
          foot="excludes solar-only" icon={<Icon.Battery size={18} />} tone="green" />
      </div>
      <div className="kpi-row cols-3">
        <KPI label="Load Today" value={totalLoad.toFixed(1)} unit="kWh" foot="cumulative · active fleet"
          icon={<Icon.Bolt size={18} />} />
        <KPI label="Last Data Sync" value="3" unit="min ago" foot="auto-sync enabled"
          icon={<Icon.Clock size={18} />} tone="green" />
        <KPI label="Open Energy Invoices" value={fmtSDG(openInvoicesTotal)} foot={`${pendingVerif} pending verification`}
          icon={<Icon.Receipt size={18} />} tone="red" />
      </div>
      <div className="demo-note">Demo values shown from simulated productive-use DER sites.</div>

      <div className="grid-3" style={{ marginBottom: 20 }}>
        <Card title="Fleet Telemetry — Today"
          subtitle="Aggregated solar generation and load draw across all active devices"
          action={
            <div className="row" style={{ gap: 6 }}>
              <button className="btn sm">24h</button>
              <button className="btn sm">7d</button>
              <button className="btn sm">30d</button>
            </div>
          }>
          <LineChart series={series24h} height={260} ySuffix=" kW" area />
        </Card>

        <Card title="Active Alarms" subtitle={ALARMS.filter(a => !a.cleared).length + ' open'}>
          <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
            {ALARMS.filter(a => !a.cleared).map(a => {
              const d = DEVICES.find(x => x.id === a.deviceId);
              const t = TENANTS.find(x => x.id === a.tenantId);
              return (
                <div key={a.id} style={{
                  padding: 10, borderRadius: 8,
                  background: a.severity === 'alert' ? 'var(--red-100)' : a.severity === 'warn' ? 'var(--amber-100)' : 'var(--teal-50)',
                  borderLeft: '3px solid ' + (a.severity === 'alert' ? 'var(--red-600)' : a.severity === 'warn' ? 'var(--amber-600)' : 'var(--navy-700)'),
                }}>
                  <div style={{ fontWeight: 600, fontSize: 13, color: 'var(--ink-900)' }}>{a.msg}</div>
                  <div style={{ fontSize: 12, color: 'var(--ink-500)', marginTop: 4 }}>
                    <span style={{ fontWeight: 600 }}>{d?.label}</span> · {t?.name}
                  </div>
                  <div style={{ fontSize: 11, color: 'var(--ink-400)', fontFamily: 'var(--font-mono)', marginTop: 3 }}>{a.at}</div>
                </div>
              );
            })}
          </div>
        </Card>
      </div>

      <div className="grid-3">
        <Card title="Top Tenants by Fleet Output"
          subtitle="Solar generation this month"
          padded={false}>
          <table className="tbl">
            <thead>
              <tr>
                <th>Tenant</th>
                <th>Devices</th>
                <th className="num">Today's Gen</th>
                <th className="num">This Month</th>
                <th>Trend</th>
              </tr>
            </thead>
            <tbody>
              {TENANTS.slice(0, 4).map((t, i) => {
                const devs = DEVICES.filter(d => d.tenantId === t.id);
                const todayGen = devs.reduce((s, d) => s + d.todayGen, 0);
                const monthGen = todayGen * 28;
                const spark = genSolarCurve(24, devs.reduce((s, d) => s + d.pvKw, 0), i + 1).filter((_, j) => j % 2 === 0);
                return (
                  <tr key={t.id} style={{ cursor: 'pointer' }} onClick={() => setRoute(`a-tenants/${t.id}`)}>
                    <td><TenantChip tenant={t} variant={tenantVariant(i)} /></td>
                    <td>{devs.length} <span className="muted">({devs.filter(d => d.status === 'active').length} active)</span></td>
                    <td className="num">{todayGen.toFixed(1)} kWh</td>
                    <td className="num bb">{monthGen.toFixed(0)} kWh</td>
                    <td><Sparkline data={spark} color={PALETTE[i % PALETTE.length]} width={90} /></td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </Card>
        <Card title="Pending Tasks">
          <div className="stack">
            <TaskItem
              icon={<Icon.Check />}
              tone="amber"
              title="Verify 1 payment upload"
              sub="Mariam Cold Storage · REF-MCS-044"
              cta="Review →"
              onClick={() => setRoute('a-verifications')}
            />
            <TaskItem
              icon={<Icon.Alert />}
              tone="red"
              title="Yousif Cooperative Hub invoice overdue"
              sub={fmtSDG(128000) + ' · INV-2026-04-YCH'}
              cta="View invoice →"
              onClick={() => setRoute('a-invoices')}
            />
            <TaskItem
              icon={<Icon.Cpu />}
              tone="blue"
              title="1 device awaiting commission"
              sub="Yousif Cooperative Hub · Dryer Unit B (inactive)"
              cta="Open device →"
              onClick={() => setRoute('a-devices')}
            />
            <TaskItem
              icon={<Icon.Alert />}
              tone="amber"
              title="Cold Room A compressor fault watch"
              sub="Cycling above normal threshold · Ahmed Hassan Farm"
              cta="View device →"
              onClick={() => setRoute('a-devices/d-cold-A')}
            />
          </div>
        </Card>
      </div>

      {/* §4: SmartDER Intelligence — forecasting + decision-support layer */}
      <div style={{ height: 20 }} />
      <div className="grid-3">
        <Card title="SmartDER Intelligence"
          subtitle="Forecasting and decision-support layer for productive-use DER sites"
          action={<Badge tone="blue" dot>MVP simulation</Badge>}>
          <div className="intel-grid">
            <div className="intel-item">
              <div className="lbl">Forecasted solar tomorrow</div>
              <div className="val">182 <span className="unit">kWh</span></div>
            </div>
            <div className="intel-item">
              <div className="lbl">Expected productive load</div>
              <div className="val">146 <span className="unit">kWh</span></div>
            </div>
            <div className="intel-item">
              <div className="lbl">Battery risk</div>
              <div className="val"><Badge tone="green" dot>Low</Badge></div>
            </div>
            <div className="intel-item">
              <div className="lbl">Recommended dispatch window</div>
              <div className="val">10:00<span className="unit">–</span>15:00</div>
            </div>
            <div className="intel-item span-2">
              <div className="lbl">Fault watch</div>
              <div className="val intel-fault">
                <Icon.Alert size={14} />
                <span>Cold Room A compressor cycling above normal threshold</span>
              </div>
            </div>
            <div className="intel-item">
              <div className="lbl">Data confidence</div>
              <div className="val">82<span className="unit">%</span></div>
            </div>
            <div className="intel-item">
              <div className="lbl">Last sync</div>
              <div className="val">3 <span className="unit">min ago</span></div>
            </div>
          </div>
          <div className="intel-disclaimer">
            Forecast and recommendation values are part of the MVP simulation and will be validated with
            live pilot telemetry during the R&D phase.
          </div>
        </Card>

        <Card title="Recommended action"
          subtitle="Based on tomorrow's forecast"
          className="rec-card">
          <div className="rec-body">
            <div className="rec-headline">
              Prioritise irrigation and cold-room charging between 10:00 and 15:00 tomorrow.
            </div>
            <div className="rec-sub">
              Expected solar surplus is sufficient to avoid evening battery stress.
            </div>
            <div className="rec-meta">
              <Badge tone="blue">Dispatch advisory</Badge>
              <Badge tone="outline">Setpoint guidance · staged control</Badge>
            </div>
          </div>
        </Card>
      </div>

      {/* §5: Low-bandwidth resilience strip */}
      <div style={{ height: 20 }} />
      <div className="resilience">
        <div className="resilience-hd">
          <div>
            <div className="resilience-ttl">Built for low-connectivity environments</div>
            <div className="resilience-sub">
              Bleu SmartDER is designed for fragile and low-bandwidth operating environments.
              Edge gateways store telemetry locally when connectivity drops, then synchronise
              compressed readings once GSM or internet access returns.
            </div>
          </div>
          <Badge tone="green" dot>Resilience layer</Badge>
        </div>
        <div className="resilience-strip">
          <span><Icon.Clock size={13} /> Last sync: 4 min ago</span>
          <span className="dot-sep">·</span>
          <span><Icon.Hardware size={13} /> Local buffer active</span>
          <span className="dot-sep">·</span>
          <span><Icon.Cpu size={13} /> 23 readings queued</span>
          <span className="dot-sep">·</span>
          <span className="weak"><Icon.Alert size={13} /> GSM signal weak</span>
          <span className="dot-sep">·</span>
          <span className="ok"><Icon.Check size={13} /> Auto-sync enabled</span>
        </div>
      </div>

      {/* §16: demo environment disclaimer */}
      <div className="demo-disclaimer">
        <strong>Demo environment:</strong> values shown are simulated for MVP validation. Live deployment
        will connect to real inverter, BMS and smart-meter telemetry from productive-use DER sites. The
        MVP provides monitoring, alerts, billing and decision-support; direct device control will be
        enabled only after hardware compatibility and safety validation.
      </div>
    </>
  );
};

const TaskItem = ({ icon, tone = 'blue', title, sub, cta, onClick }) => (
  <div className="row" onClick={onClick} style={{
    padding: 12, borderRadius: 8, cursor: 'pointer',
    background: tone === 'red' ? 'var(--red-100)' :
                tone === 'amber' ? 'var(--amber-100)' :
                tone === 'green' ? 'var(--green-100)' : 'var(--teal-50)',
  }}>
    <span style={{
      width: 32, height: 32, borderRadius: 8, display: 'inline-flex', alignItems: 'center', justifyContent: 'center',
      color: tone === 'red' ? 'var(--red-600)' : tone === 'amber' ? 'var(--amber-600)' : tone === 'green' ? 'var(--green-700)' : 'var(--navy-700)',
      background: '#fff'
    }}>{icon}</span>
    <div style={{ flex: 1, minWidth: 0 }}>
      <div style={{ fontWeight: 600, fontSize: 13 }}>{title}</div>
      <div style={{ fontSize: 12, color: 'var(--ink-500)' }}>{sub}</div>
    </div>
    <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--navy-700)' }}>{cta}</div>
  </div>
);

// ============= Tenants List =============
const AdminTenants = ({ setRoute }) => {
  const [q, setQ] = React.useState('');
  const [pkg, setPkg] = React.useState('all');
  const filtered = TENANTS.filter(t =>
    (q === '' || t.name.toLowerCase().includes(q.toLowerCase()) || t.contact.toLowerCase().includes(q.toLowerCase())) &&
    (pkg === 'all' || t.package === pkg)
  );

  return (
    <>
      <PageHead title="Tenants"
        subtitle={`${TENANTS.length} tenants · managing ${DEVICES.length} devices across the fleet`}
        actions={<><Button icon={<Icon.Download size={14} />}>Export</Button><Button variant="primary" icon={<Icon.Plus size={14} />}>Add Tenant</Button></>}
      />

      <div className="kpi-row cols-3">
        <KPI label="Total Tenants" value={TENANTS.length} foot="2 added this month" icon={<Icon.Users size={18} />} />
        <KPI label="Active" value={TENANTS.filter(t => t.status === 'active').length} foot="1 pending activation" icon={<Icon.CircleCheck size={18} />} tone="green" />
        <KPI label="Total Monthly Spend" value={fmtSDG(TENANTS.reduce((s, t) => s + t.monthSpend, 0))} foot="across all tenants" icon={<Icon.Wallet size={18} />} tone="amber" />
      </div>

      <Card padded={false}>
        <div className="filters">
          <div className="input">
            <Icon.Search size={14} />
            <input placeholder="Search tenants by name or contact…" value={q} onChange={e => setQ(e.target.value)} />
          </div>
          <div className="select">
            <Icon.Filter size={14} />
            <select value={pkg} onChange={e => setPkg(e.target.value)}>
              <option value="all">All Packages</option>
              <option value="Basic">Basic</option>
              <option value="Standard">Standard</option>
              <option value="Premium">Premium</option>
            </select>
            <Icon.ChevronD size={14} />
          </div>
          <div className="select">
            <Icon.Filter size={14} />
            <select><option>All Statuses</option><option>Active</option><option>Pending</option></select>
            <Icon.ChevronD size={14} />
          </div>
          <div className="grow"></div>
          <span className="muted" style={{ fontSize: 12 }}>{filtered.length} of {TENANTS.length}</span>
        </div>
        <table className="tbl">
          <thead>
            <tr>
              <th>Tenant</th>
              <th>Contact</th>
              <th>Default Pkg</th>
              <th>Devices</th>
              <th className="num">This Month</th>
              <th>Status</th>
              <th>Joined</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {filtered.map((t, i) => (
              <tr key={t.id} onClick={() => setRoute(`a-tenants/${t.id}`)} style={{ cursor: 'pointer' }}>
                <td><TenantChip tenant={t} variant={tenantVariant(i)} /></td>
                <td>
                  <div>{t.email}</div>
                  <div className="meta">{t.phone}</div>
                </td>
                <td><Badge tone="blue">{t.package}</Badge></td>
                <td>
                  <span className="pri">{t.deviceCount}</span>
                  <span className="meta"> · {t.activeDevices} active</span>
                </td>
                <td className="num">{fmtSDG(t.monthSpend)}</td>
                <td><StatusBadge status={t.status} /></td>
                <td className="meta mono">{t.joined}</td>
                <td><button className="btn ghost sm"><Icon.More size={14} /></button></td>
              </tr>
            ))}
          </tbody>
        </table>
      </Card>
    </>
  );
};

// ============= Global Devices Registry =============
const AdminDevices = ({ setRoute, openAdd }) => {
  const [q, setQ] = React.useState('');
  const [tenantFilter, setTenantFilter] = React.useState('all');
  const [statusFilter, setStatusFilter] = React.useState('all');
  const [typeFilter, setTypeFilter] = React.useState('all');

  const filtered = DEVICES.filter(d =>
    (q === '' || d.label.toLowerCase().includes(q.toLowerCase()) || d.serial.toLowerCase().includes(q.toLowerCase())) &&
    (tenantFilter === 'all' || d.tenantId === tenantFilter) &&
    (statusFilter === 'all' || d.status === statusFilter) &&
    (typeFilter === 'all' || d.type === typeFilter)
  );

  return (
    <>
      <PageHead title="Device Registry"
        subtitle="Every device across all tenants — global view"
        actions={<><Button icon={<Icon.Map size={14} />}>Map View</Button><Button variant="primary" icon={<Icon.Plus size={14} />} onClick={openAdd}>Add Device</Button></>}
      />
      <div className="kpi-row">
        <KPI label="Total Devices" value={DEVICES.length} foot={`${DEVICES.filter(d => d.status !== 'inactive').length} commissioned`} icon={<Icon.Cpu size={18} />} />
        <KPI label="Active" value={DEVICES.filter(d => d.status === 'active').length} icon={<Icon.CircleCheck size={18} />} tone="green" foot="streaming telemetry" />
        <KPI label="In Maintenance" value={DEVICES.filter(d => d.status === 'maintenance').length} icon={<Icon.Settings size={18} />} tone="amber" />
        <KPI label="Inactive / Unassigned" value={DEVICES.filter(d => d.status === 'inactive').length} icon={<Icon.Hardware size={18} />} foot="awaiting commission" />
      </div>

      <Card padded={false}>
        <div className="filters">
          <div className="input">
            <Icon.Search size={14} />
            <input placeholder="Search by label or serial…" value={q} onChange={e => setQ(e.target.value)} />
          </div>
          <div className="select">
            <select value={tenantFilter} onChange={e => setTenantFilter(e.target.value)}>
              <option value="all">All Tenants</option>
              {TENANTS.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
            </select>
            <Icon.ChevronD size={14} />
          </div>
          <div className="select">
            <select value={statusFilter} onChange={e => setStatusFilter(e.target.value)}>
              <option value="all">All Statuses</option>
              <option value="active">Active</option>
              <option value="maintenance">Maintenance</option>
              <option value="inactive">Inactive</option>
            </select>
            <Icon.ChevronD size={14} />
          </div>
          <div className="select">
            <select value={typeFilter} onChange={e => setTypeFilter(e.target.value)}>
              <option value="all">All Types</option>
              <option value="solar_battery_der">Solar + Battery</option>
              <option value="solar_only">Solar Only</option>
              <option value="hybrid">Hybrid</option>
              <option value="battery_only">Battery Only</option>
            </select>
            <Icon.ChevronD size={14} />
          </div>
          <div className="grow"></div>
          <span className="muted" style={{ fontSize: 12 }}>{filtered.length} of {DEVICES.length}</span>
        </div>
        <table className="tbl">
          <thead>
            <tr>
              <th>Device</th>
              <th>Tenant</th>
              <th>Type</th>
              <th>Package</th>
              <th>Capacity</th>
              <th>Status</th>
              <th>Conn</th>
              <th>Live Output</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {filtered.map((d, i) => {
              const t = TENANTS.find(x => x.id === d.tenantId);
              return (
                <tr key={d.id} style={{ cursor: 'pointer' }} onClick={() => setRoute(`a-devices/${d.id}`)}>
                  <td>
                    <div className="pri">{d.label}</div>
                    <div className="meta mono">{d.serial}</div>
                  </td>
                  <td>{t?.name}</td>
                  <td><Badge tone="outline">{d.typeLabel}</Badge></td>
                  <td><Badge tone="blue">{d.package}</Badge></td>
                  <td className="num">{d.pvKw}kW / {d.batteryKwh}kWh</td>
                  <td><StatusBadge status={d.status} /></td>
                  <td><ConnDot status={d.connectivity} /></td>
                  <td className="num">{d.pvNow.toFixed(1)} kW</td>
                  <td><button className="btn ghost sm"><Icon.More size={14} /></button></td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </Card>
    </>
  );
};

// ============= Packages & Tariff =============
const AdminPackages = () => {
  return (
    <>
      <PageHead title="Packages & Tariff"
        subtitle="Subscription tiers and energy tariff applied to all variable consumption"
        actions={<Button variant="primary" icon={<Icon.Plus size={14} />}>Add Package</Button>}
      />

      <div className="grid-3" style={{ marginBottom: 20 }}>
        <div className="grid-3-eq" style={{ gap: 16 }}>
          {PACKAGES.map(p => {
            const useCount = DEVICES.filter(d => d.package === p.name).length;
            return (
              <div key={p.id} className="card" style={{ padding: 24 }}>
                <div className="row">
                  <span style={{ width: 8, height: 8, borderRadius: 4, background: p.color }} />
                  <span style={{ fontSize: 11, fontWeight: 700, letterSpacing: 0.06, textTransform: 'uppercase', color: 'var(--ink-500)' }}>{p.name}</span>
                  <div className="spacer"></div>
                  <button className="btn ghost sm"><Icon.Edit size={14} /></button>
                </div>
                <div style={{ marginTop: 14, fontSize: 32, fontFamily: 'var(--font-mono)', fontWeight: 600, color: 'var(--ink-900)' }}>
                  {p.monthlyFee.toLocaleString()} <span style={{ fontSize: 13, color: 'var(--ink-500)', fontFamily: 'var(--font-sans)', fontWeight: 500 }}>SDG / month</span>
                </div>
                <div style={{ color: 'var(--ink-500)', fontSize: 13, marginTop: 4 }}>{p.desc}</div>
                <div style={{ marginTop: 18, padding: '14px 0', borderTop: '1px dashed var(--line)', borderBottom: '1px dashed var(--line)' }}>
                  <div className="row" style={{ justifyContent: 'space-between', fontSize: 13 }}>
                    <span className="muted">Included Energy</span>
                    <span className="mono bb">{p.includedKwh} kWh</span>
                  </div>
                  <div className="row" style={{ justifyContent: 'space-between', fontSize: 13, marginTop: 6 }}>
                    <span className="muted">Variable Energy</span>
                    <span className="mono bb">{TARIFF.sdgPerKwh.toLocaleString()} SDG/kWh</span>
                  </div>
                </div>
                <div className="row" style={{ marginTop: 14, justifyContent: 'space-between' }}>
                  <span className="muted" style={{ fontSize: 12 }}>In use by</span>
                  <span className="bb">{useCount} devices</span>
                </div>
              </div>
            );
          })}
        </div>

        <Card title="Energy Tariff" subtitle={'Effective from ' + TARIFF.effectiveFrom}>
          <div style={{ textAlign: 'center', padding: '12px 0 20px' }}>
            <div style={{ fontFamily: 'var(--font-mono)', fontSize: 44, fontWeight: 600, color: 'var(--navy-700)' }}>
              {TARIFF.sdgPerKwh.toLocaleString()}
            </div>
            <div style={{ color: 'var(--ink-500)', fontSize: 13 }}>SDG per kWh (variable)</div>
          </div>
          <div className="kv">
            <span className="k">Currency</span><span className="v">SDG</span>
            <span className="k">Applies after</span><span className="v">included kWh exhausted</span>
            <span className="k">Last changed</span><span className="v">{TARIFF.effectiveFrom}</span>
            <span className="k">Changed by</span><span className="v" style={{ fontFamily: 'var(--font-sans)' }}>operator@bleu.sd</span>
          </div>
          <Button variant="primary" className="" icon={<Icon.Edit size={14} />}>Update Tariff</Button>
          <div className="tariff-note">
            Demo tariff for MVP simulation. Final tariffs will be configured per pilot site
            and commercial agreement.
          </div>
        </Card>
      </div>

      <Card title="Tariff history" subtitle="Last 4 changes — snapshot taken with every invoice" padded={false}>
        <table className="tbl">
          <thead>
            <tr><th>Effective from</th><th>Rate</th><th>Changed by</th><th>Affected invoices</th><th>Notes</th></tr>
          </thead>
          <tbody>
            <tr><td className="mono">2025-01-01</td><td className="num bb">1,000 SDG / kWh</td><td>operator@bleu.sd</td><td>23 issued</td><td className="muted">Current rate</td></tr>
            <tr><td className="mono">2024-09-01</td><td className="num">850 SDG / kWh</td><td>operator@bleu.sd</td><td>52 issued</td><td className="muted">+17.6% adjustment</td></tr>
            <tr><td className="mono">2024-04-01</td><td className="num">700 SDG / kWh</td><td>founder@bleu.sd</td><td>34 issued</td><td className="muted">Initial pricing</td></tr>
          </tbody>
        </table>
      </Card>
    </>
  );
};

// ============= All Invoices =============
const AdminInvoices = ({ setRoute, filterStatus = null }) => {
  const [q, setQ] = React.useState('');
  const [status, setStatus] = React.useState(filterStatus || 'all');
  const [tenant, setTenant] = React.useState('all');

  const filtered = INVOICES.filter(inv =>
    (q === '' || inv.id.toLowerCase().includes(q.toLowerCase())) &&
    (status === 'all' || inv.status === status) &&
    (tenant === 'all' || inv.tenantId === tenant)
  );

  const monthNames = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];

  return (
    <>
      <PageHead title={filterStatus === 'pending_verification' ? "Pending Verifications" : "All Invoices"}
        subtitle={filterStatus === 'pending_verification' ? "Tenant-uploaded payment references awaiting your review" : "Every invoice issued — multi-device, per tenant per month"}
        actions={<><Button icon={<Icon.Download size={14} />}>Export CSV</Button><Button variant="primary" icon={<Icon.Plus size={14} />}>Generate This Month</Button></>}
      />

      <div className="kpi-row">
        <KPI label="Issued" value={INVOICES.length} foot="3 months" icon={<Icon.Receipt size={18} />} />
        <KPI label="Pending Verification" value={INVOICES.filter(i => i.status === 'pending_verification').length} icon={<Icon.Clock size={18} />} tone="amber" foot="needs admin action" />
        <KPI label="Overdue" value={INVOICES.filter(i => i.status === 'overdue').length} icon={<Icon.Alert size={18} />} tone="red" foot="past due date" />
        <KPI label="Paid This Month" value={fmtSDG(INVOICES.filter(i => i.status === 'paid').reduce((s, i) => s + i.total, 0))}
          icon={<Icon.Wallet size={18} />} tone="green" foot="collected" />
      </div>

      <Card padded={false}>
        <div className="filters">
          <div className="input">
            <Icon.Search size={14} />
            <input placeholder="Search by invoice ID…" value={q} onChange={e => setQ(e.target.value)} />
          </div>
          <div className="select">
            <select value={tenant} onChange={e => setTenant(e.target.value)}>
              <option value="all">All Tenants</option>
              {TENANTS.map(t => <option key={t.id} value={t.id}>{t.name}</option>)}
            </select>
            <Icon.ChevronD size={14} />
          </div>
          <div className="select">
            <select value={status} onChange={e => setStatus(e.target.value)}>
              <option value="all">All Statuses</option>
              <option value="draft">Draft</option>
              <option value="pending_payment">Pending Payment</option>
              <option value="pending_verification">Pending Verification</option>
              <option value="overdue">Overdue</option>
              <option value="paid">Paid</option>
            </select>
            <Icon.ChevronD size={14} />
          </div>
          <div className="grow"></div>
          <span className="muted" style={{ fontSize: 12 }}>{filtered.length} of {INVOICES.length}</span>
        </div>
        <table className="tbl">
          <thead>
            <tr>
              <th>Invoice</th>
              <th>Tenant</th>
              <th>Period</th>
              <th>Devices</th>
              <th className="num">Total</th>
              <th>Status</th>
              <th>Due</th>
              <th></th>
            </tr>
          </thead>
          <tbody>
            {filtered.map((inv, i) => {
              const t = TENANTS.find(x => x.id === inv.tenantId);
              return (
                <tr key={inv.id}>
                  <td className="pri mono">{inv.id}</td>
                  <td><TenantChip tenant={t} variant={tenantVariant(TENANTS.findIndex(x=>x.id===t.id))} /></td>
                  <td className="mono">{monthNames[inv.month - 1]} {inv.year}</td>
                  <td>{inv.devices}</td>
                  <td className="num bb">{fmtSDG(inv.total)}</td>
                  <td><StatusBadge status={inv.status} /></td>
                  <td className="mono meta">{inv.dueDate}</td>
                  <td>
                    {inv.status === 'pending_verification' ? (
                      <Button size="sm" variant="primary">Verify</Button>
                    ) : (
                      <button className="btn ghost sm"><Icon.More size={14} /></button>
                    )}
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </Card>
    </>
  );
};

// ============= Settings (light page) =============
const AdminSettings = () => (
  <>
    <PageHead title="Settings"
      subtitle="Platform configuration, API keys, and operator accounts" />
    <div className="grid-2">
      <Card title="Platform"
        action={<Button size="sm" variant="ghost">Edit</Button>}>
        <div className="kv">
          <span className="k">Org name</span><span className="v" style={{fontFamily:'var(--font-sans)'}}>Bleu Energy SDN</span>
          <span className="k">Region</span><span className="v" style={{fontFamily:'var(--font-sans)'}}>Sudan (UTC+3)</span>
          <span className="k">Default currency</span><span className="v">SDG</span>
          <span className="k">Telemetry tick</span><span className="v">3,000 ms</span>
          <span className="k">Simulator</span><span className="v" style={{fontFamily:'var(--font-sans)', color:'var(--green-700)'}}>● Enabled</span>
        </div>
      </Card>
      <Card title="Operator accounts" action={<Button size="sm" variant="primary" icon={<Icon.Plus size={14}/>}>Invite</Button>}>
        <div className="stack">
          <OperatorRow name="Bleu Operator" email="admin@bleu.energy" role="Super Admin" me />
          <OperatorRow name="Tariq Hamid" email="t.hamid@bleu.sd" role="Operations" />
          <OperatorRow name="Amna Salah" email="finance@bleu.sd" role="Finance" />
        </div>
      </Card>
    </div>
    <div style={{height: 20}}/>
    <Card title="API & Integrations" subtitle="Supabase keys, payment gateway, alerts">
      <div className="kv">
        <span className="k">Supabase project</span><span className="v">bleu-prod-eu-west-1</span>
        <span className="k">RLS enforcement</span><span className="v" style={{fontFamily:'var(--font-sans)', color:'var(--green-700)'}}>● Strict</span>
        <span className="k">Realtime channels</span><span className="v">{DEVICES.filter(d=>d.status==='active').length} active</span>
        <span className="k">Payment gateway</span><span className="v" style={{fontFamily:'var(--font-sans)'}}>Bankak (test mode)</span>
      </div>
    </Card>
  </>
);

const OperatorRow = ({ name, email, role, me }) => (
  <div className="row" style={{padding: '8px 0'}}>
    <div className="userchip" style={{cursor:'default'}}>
      <span className="av">{name.split(' ').map(x=>x[0]).join('')}</span>
    </div>
    <div style={{marginLeft:8}}>
      <div className="bb" style={{fontSize:13}}>{name} {me && <span style={{fontSize:11, color:'var(--navy-700)'}}>(you)</span>}</div>
      <div className="muted" style={{fontSize:12}}>{email}</div>
    </div>
    <div className="spacer"/>
    <Badge tone="blue">{role}</Badge>
    <button className="btn ghost sm"><Icon.More size={14}/></button>
  </div>
);

Object.assign(window, {
  AdminOverview, AdminTenants, AdminDevices, AdminPackages, AdminInvoices, AdminSettings
});