// A10 — Platform-Admin Tenant Drilldown (admin.coremindvault.com)
const A10Platform = () => {
  return (
    <div className="vault" style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', background: 'var(--bg-0)' }}>
      {/* Top-nav */}
      <div style={{ borderBottom: '1px solid var(--line-soft)', background: 'var(--bg-1)' }}>
        <div style={{ padding: '10px 20px', display: 'flex', alignItems: 'center', gap: 16 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            <CMMark/>
            <span style={{ fontWeight: 600, color: 'var(--fg-0)', fontSize: 13 }}>CoreMind · Platform Admin</span>
            <span className="chip amber" style={{ height: 20, fontSize: 10 }}><I name="lock" className="icon-sm"/>ZT-beskyttet</span>
          </div>
          <div style={{ marginLeft: 'auto', display: 'flex', alignItems: 'center', gap: 10, fontSize: 12, color: 'var(--fg-2)' }}>
            <span className="mono">ian@coremindx.com</span>
            <div style={{ width: 24, height: 24, borderRadius: '50%', background: 'var(--primary)', color: 'var(--primary-fg)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, fontWeight: 700 }}>IB</div>
          </div>
        </div>
        <div style={{ padding: '0 20px', display: 'flex', gap: 2 }}>
          {['Tenants', 'Tenant drilldown', 'System', 'AI-forbrug', 'Billing', 'Feature flags', 'Platform audit'].map((t, i) => (
            <button key={t} style={{
              padding: '10px 14px', fontSize: 12, fontWeight: i === 1 ? 600 : 400,
              color: i === 1 ? 'var(--fg-0)' : 'var(--fg-2)',
              borderBottom: i === 1 ? '2px solid var(--primary)' : '2px solid transparent', marginBottom: -1,
            }}>{t}</button>
          ))}
        </div>
      </div>

      {/* Privacy banner */}
      <div style={{ padding: '8px 20px', background: 'color-mix(in oklch, var(--mode-blue) 8%, transparent)', borderBottom: '1px solid color-mix(in oklch, var(--mode-blue) 20%, transparent)', fontSize: 12, color: 'var(--fg-1)', display: 'flex', alignItems: 'center', gap: 10 }}>
        <I name="shield" className="icon-sm" style={{ color: 'var(--mode-blue)' }}/>
        <span><strong style={{ color: 'var(--fg-0)' }}>Privacy mode:</strong> Du ser kun metadata. Chat-indhold er krypteret og utilgængeligt fra platform-admin.</span>
        <span className="mono" style={{ marginLeft: 'auto', color: 'var(--fg-3)' }}>session zt-3412 · udløber 01:42</span>
      </div>

      <div style={{ flex: 1, overflow: 'auto', padding: 20 }}>
        {/* Tenant header */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: 20 }}>
          <ShieldMark size={40}/>
          <div>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
              <h1 style={{ fontSize: 22 }}>Demo Beredskab</h1>
              <span className="chip green"><I name="dot" className="icon-sm"/>Aktiv</span>
              <span className="chip neutral">Beredskab-plan</span>
            </div>
            <div style={{ fontSize: 12, color: 'var(--fg-3)', marginTop: 4, display: 'flex', gap: 14 }}>
              <span className="mono">tenant_id: hrs_01jd8m2x4n3p8r</span>
              <span>·</span>
              <span>demo-beredskab.coremindvault.com</span>
              <span>·</span>
              <span>Oprettet 14 jan 2026 (99 dage)</span>
            </div>
          </div>
          <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
            <button className="btn btn-soft btn-sm"><I name="external" className="icon-sm"/>Åbn Stripe</button>
            <button className="btn btn-soft btn-sm"><I name="copy" className="icon-sm"/>Kopiér tenant_id</button>
            <button className="btn btn-primary btn-sm"><I name="user" className="icon-sm"/>Impersonate</button>
          </div>
        </div>

        {/* Metrics row */}
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: 12, marginBottom: 16 }}>
          {[
            { l: 'Brugere', v: '41', s: 'af 200 max' },
            { l: 'Dokumenter', v: '2.047', s: '18.412 chunks' },
            { l: 'Chats (30d)', v: '5.208', s: 'Ø 174 / dag' },
            { l: 'AI-forbrug (30d)', v: '2.460 kr', s: 'af 3.000 · 82%' },
            { l: 'Sidste login', v: '2 min', s: 'morten.h@..' },
          ].map(k => (
            <div key={k.l} className="card" style={{ padding: 12 }}>
              <div style={{ fontSize: 10, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 4 }}>{k.l}</div>
              <div style={{ fontSize: 20, fontWeight: 600, color: 'var(--fg-0)', letterSpacing: '-0.02em' }}>{k.v}</div>
              <div style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 2 }}>{k.s}</div>
            </div>
          ))}
        </div>

        {/* 3 columns */}
        <div style={{ display: 'grid', gridTemplateColumns: '1.3fr 1fr 1fr', gap: 12, marginBottom: 16 }}>
          {/* Activity timeline (metadata only) */}
          <div className="card" style={{ padding: 0 }}>
            <div style={{ padding: '12px 14px', borderBottom: '1px solid var(--line-soft)', display: 'flex', alignItems: 'center' }}>
              <h3 style={{ fontSize: 13 }}>Aktivitet</h3>
              <span className="chip blue" style={{ marginLeft: 8, height: 20, fontSize: 10 }}><I name="lock" className="icon-sm"/>metadata only</span>
            </div>
            <div style={{ padding: 14 }}>
              {[
                { t: '2 min', a: 'morten.h logged in', c: 'auth' },
                { t: '14 min', a: '12 chats i seneste time', c: 'ai' },
                { t: '1 t', a: 'louise.b uploadede 2 docs', c: 'upload' },
                { t: '3 t', a: 'AI-budget passerede 80%', c: 'warn' },
                { t: '8 t', a: 'morten.h inviterede 3 brugere', c: 'user' },
                { t: '1 d', a: 'Ny kategori oprettet: Miljø', c: 'update' },
                { t: '2 d', a: 'Feature flag curated_v2 aktiveret', c: 'flag' },
              ].map((e, i) => (
                <div key={i} style={{ display: 'flex', gap: 10, padding: '8px 0', borderBottom: i < 6 ? '1px solid var(--line-soft)' : 'none', alignItems: 'center', fontSize: 12 }}>
                  <span className="mono" style={{ color: 'var(--fg-3)', width: 40, fontSize: 11 }}>{e.t}</span>
                  <span style={{ width: 8, height: 8, borderRadius: '50%', background: e.c === 'warn' ? 'var(--mode-amber)' : e.c === 'ai' ? 'var(--mode-green)' : 'var(--mode-blue)' }}/>
                  <span style={{ color: 'var(--fg-1)', flex: 1 }}>{e.a}</span>
                </div>
              ))}
            </div>
          </div>

          {/* Onboarding status */}
          <div className="card" style={{ padding: 0 }}>
            <div style={{ padding: '12px 14px', borderBottom: '1px solid var(--line-soft)' }}>
              <h3 style={{ fontSize: 13 }}>Onboarding · 5 / 6 gennemført</h3>
            </div>
            <div style={{ padding: 14 }}>
              <div style={{ height: 6, background: 'var(--bg-2)', borderRadius: 3, marginBottom: 14, overflow: 'hidden' }}>
                <div style={{ width: '83%', height: '100%', background: 'var(--mode-green)' }}/>
              </div>
              {[
                ['Velkommen', true, '14 jan'], ['Branding', true, '14 jan'], ['Auth (Entra+Magic)', true, '14 jan'],
                ['Kategorier (8)', true, '15 jan'], ['Inviterede brugere', true, '15 jan'], ['Upload 1. dokument', false, null],
              ].map(([n, done, date], i) => (
                <div key={n} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '7px 0', fontSize: 12 }}>
                  <div style={{ width: 18, height: 18, borderRadius: '50%', background: done ? 'var(--mode-green)' : 'var(--bg-2)', color: done ? 'oklch(0.15 0.02 160)' : 'var(--fg-3)', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
                    {done ? <I name="check" className="icon-sm"/> : <span style={{ fontSize: 10 }}>{i+1}</span>}
                  </div>
                  <span style={{ color: done ? 'var(--fg-1)' : 'var(--fg-3)', flex: 1 }}>{n}</span>
                  {date && <span className="mono" style={{ color: 'var(--fg-3)', fontSize: 11 }}>{date}</span>}
                </div>
              ))}
            </div>
          </div>

          {/* Quick actions */}
          <div className="card" style={{ padding: 0 }}>
            <div style={{ padding: '12px 14px', borderBottom: '1px solid var(--line-soft)' }}>
              <h3 style={{ fontSize: 13 }}>Quick actions</h3>
            </div>
            <div style={{ padding: 14, display: 'flex', flexDirection: 'column', gap: 8 }}>
              <button className="btn btn-soft btn-sm" style={{ width: '100%', justifyContent: 'flex-start' }}><I name="refresh" className="icon-sm"/> Nulstil AI-budget</button>
              <button className="btn btn-soft btn-sm" style={{ width: '100%', justifyContent: 'flex-start' }}><I name="mail" className="icon-sm"/> Udsend ny magisk link</button>
              <button className="btn btn-soft btn-sm" style={{ width: '100%', justifyContent: 'flex-start' }}><I name="key" className="icon-sm"/> Nulstil admin-password</button>
              <button className="btn btn-soft btn-sm" style={{ width: '100%', justifyContent: 'flex-start' }}><I name="download" className="icon-sm"/> Eksportér GDPR-bundle</button>
              <div style={{ height: 1, background: 'var(--line-soft)', margin: '4px 0' }}/>
              <button className="btn btn-sm" style={{ width: '100%', justifyContent: 'flex-start', color: 'var(--mode-amber)', background: 'color-mix(in oklch, var(--mode-amber) 10%, transparent)', border: '1px solid color-mix(in oklch, var(--mode-amber) 30%, transparent)' }}><I name="warn" className="icon-sm"/> Suspendér tenant</button>
              <button className="btn btn-danger btn-sm" style={{ width: '100%', justifyContent: 'flex-start' }}><I name="trash" className="icon-sm"/> Refund + slet (kræver dobbelt-bekræft)</button>
            </div>
          </div>
        </div>

        {/* Platform audit (bottom) */}
        <div className="card" style={{ padding: 0 }}>
          <div style={{ padding: '12px 14px', borderBottom: '1px solid var(--line-soft)', display: 'flex', alignItems: 'center' }}>
            <h3 style={{ fontSize: 13 }}>Platform-actions for denne tenant</h3>
            <span style={{ marginLeft: 8, fontSize: 11, color: 'var(--fg-3)' }}>(kun CoreMind-side ændringer — ikke tenant-interne)</span>
            <button className="btn btn-ghost btn-sm" style={{ marginLeft: 'auto' }}>Se alle</button>
          </div>
          <div style={{ fontSize: 12 }}>
            {[
              ['2026-04-22 09:14', 'ian@coremindx.com', 'Feature flag aktiveret', 'flags/curated_v2'],
              ['2026-04-20 16:03', 'system', 'Månedlig billing kørt', 'billing/inv_8f2a1'],
              ['2026-04-18 11:42', 'ian@coremindx.com', 'Impersonation session', 'zt/session-4411'],
              ['2026-04-14 14:02', 'system', 'Tenant provisioneret', 'stripe/checkout.session_01jd8m'],
            ].map((r, i, arr) => (
              <div key={i} style={{ display: 'grid', gridTemplateColumns: '140px 220px 1fr 1.2fr', padding: '10px 14px', gap: 12, borderBottom: i < arr.length - 1 ? '1px solid var(--line-soft)' : 'none', alignItems: 'center' }}>
                <span className="mono" style={{ color: 'var(--fg-2)' }}>{r[0]}</span>
                <span className="mono" style={{ color: 'var(--fg-1)' }}>{r[1]}</span>
                <span className="chip blue" style={{ height: 20, fontSize: 10, justifySelf: 'start' }}>{r[2]}</span>
                <span className="mono" style={{ color: 'var(--primary-strong)' }}>{r[3]}</span>
              </div>
            ))}
          </div>
        </div>
      </div>
    </div>
  );
};
window.A10Platform = A10Platform;