// A8 — Tenant-admin dashboard (sidebar + KPI + charts). Stripe-density.
const A8Dashboard = () => {
  const [tab, setTab] = React.useState('Statistik');
  const tabs = ['Chat', 'Søg', 'Dokumenter', 'Brugere', 'Kategorier', 'Curated Q&A', 'Statistik', 'Indstillinger', 'Audit'];
  const kpis = [
    { label: 'Aktive brugere i dag', value: '34', delta: '+12%', up: true, sub: 'af 41 total' },
    { label: 'Chats i dag', value: '287', delta: '+8%', up: true, sub: '1.842 denne uge' },
    { label: 'Dokumenter klar', value: '2.041', delta: '+6', up: true, sub: '6 behandles' },
    { label: 'Low-confidence svar', value: '4', delta: '−2', up: false, sub: 'sidste 24 t' },
  ];
  // Chart data: chats per day last 7 days
  const chart = [142, 198, 165, 241, 203, 287, 180];
  const max = Math.max(...chart);
  const cats = [
    { k: 'Brandsikring', n: 412, p: 0.32 },
    { k: 'Kemi & datablade', n: 287, p: 0.22 },
    { k: 'Sikkerhed & ATEX', n: 214, p: 0.17 },
    { k: 'Drift & vagt', n: 168, p: 0.13 },
    { k: 'HR & overenskomst', n: 98, p: 0.08 },
    { k: 'Evakuering', n: 71, p: 0.06 },
  ];
  const users = [
    { n: 'Morten Højgaard', r: 'tenant_admin', chats: 87 },
    { n: 'Louise Berg', r: 'kontrollant', chats: 64 },
    { n: 'Anders Nielsen', r: 'medarbejder', chats: 52 },
    { n: 'Jens Krogh', r: 'medarbejder', chats: 41 },
    { n: 'Maja Poulsen', r: 'medarbejder', chats: 38 },
  ];

  return (
    <div className="vault" style={{ width: '100%', height: '100%', display: 'flex', background: 'var(--bg-0)' }}>
      {/* Sidebar */}
      <aside style={{ width: 220, background: 'var(--bg-1)', borderRight: '1px solid var(--line-soft)', display: 'flex', flexDirection: 'column', padding: '14px 10px' }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '4px 8px 16px', borderBottom: '1px solid var(--line-soft)' }}>
          <ShieldMark size={26}/>
          <div style={{ lineHeight: 1.2, minWidth: 0 }}>
            <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--fg-0)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>Demo Beredskab</div>
            <div style={{ fontSize: 10, color: 'var(--fg-3)' }}>Beredskab-plan</div>
          </div>
          <I name="chevronDown" className="icon-sm" style={{ color: 'var(--fg-3)', marginLeft: 'auto' }}/>
        </div>

        <nav style={{ flex: 1, display: 'flex', flexDirection: 'column', gap: 1, paddingTop: 10 }}>
          {tabs.map(t => {
            const cur = t === tab;
            const icons = { Chat: 'chat', 'Søg': 'search', 'Dokumenter': 'file', 'Brugere': 'users', 'Kategorier': 'folder', 'Curated Q&A': 'sparkle', 'Statistik': 'chart', 'Indstillinger': 'settings', 'Audit': 'eye' };
            return (
              <button key={t} onClick={() => setTab(t)} style={{
                display: 'flex', alignItems: 'center', gap: 10, padding: '7px 10px', borderRadius: 6,
                background: cur ? 'var(--bg-2)' : 'transparent', color: cur ? 'var(--fg-0)' : 'var(--fg-2)',
                fontSize: 12, fontWeight: cur ? 500 : 400, textAlign: 'left',
                borderLeft: cur ? '2px solid var(--primary)' : '2px solid transparent',
                paddingLeft: 10,
              }}>
                <I name={icons[t]} className="icon-sm"/> {t}
              </button>
            );
          })}
        </nav>

        <div style={{ padding: 10, borderTop: '1px solid var(--line-soft)', display: 'flex', alignItems: 'center', gap: 8 }}>
          <div style={{ width: 28, height: 28, borderRadius: '50%', background: 'var(--primary-soft)', color: 'var(--primary-strong)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 11, fontWeight: 600 }}>MH</div>
          <div style={{ minWidth: 0, flex: 1 }}>
            <div style={{ fontSize: 11, color: 'var(--fg-0)', fontWeight: 500, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>Morten Højgaard</div>
            <div style={{ fontSize: 10, color: 'var(--fg-3)' }}>tenant_admin</div>
          </div>
          <button style={{ color: 'var(--fg-3)', padding: 4 }}><I name="more" className="icon-sm"/></button>
        </div>
      </aside>

      {/* Main */}
      <main style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
        {/* Top bar */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 12, padding: '10px 20px', borderBottom: '1px solid var(--line-soft)' }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, color: 'var(--fg-2)' }}>
            <span>Admin</span>
            <I name="chevronRight" className="icon-sm" style={{ opacity: 0.5 }}/>
            <span style={{ color: 'var(--fg-0)', fontWeight: 500 }}>Statistik</span>
          </div>
          <div className="input" style={{ marginLeft: 16, height: 30, width: 260, fontSize: 12 }}>
            <I name="search" className="icon-sm" style={{ color: 'var(--fg-3)' }}/>
            <input placeholder="Søg brugere, dokumenter..."/>
            <span className="kbd">⌘K</span>
          </div>
          <div style={{ marginLeft: 'auto', display: 'flex', gap: 4 }}>
            <button className="btn btn-ghost btn-sm" style={{ padding: '0 8px' }}><I name="help" className="icon-sm"/></button>
            <button className="btn btn-ghost btn-sm" style={{ padding: '0 8px', position: 'relative' }}>
              <I name="bell" className="icon-sm"/>
              <span style={{ position: 'absolute', top: 3, right: 3, width: 6, height: 6, borderRadius: '50%', background: 'var(--err)' }}/>
            </button>
          </div>
        </div>

        <div style={{ flex: 1, overflow: 'auto', padding: 20 }}>
          {/* Budget banner */}
          <div style={{ background: 'color-mix(in oklch, var(--mode-amber) 10%, transparent)', border: '1px solid color-mix(in oklch, var(--mode-amber) 30%, transparent)', borderRadius: 8, padding: '10px 14px', display: 'flex', alignItems: 'center', gap: 12, marginBottom: 16, fontSize: 13 }}>
            <I name="warn" className="icon" style={{ color: 'var(--mode-amber)' }}/>
            <span style={{ color: 'var(--fg-0)', fontWeight: 500 }}>AI-budget: 82 % brugt</span>
            <span style={{ color: 'var(--fg-2)' }}>· 2.460 af 3.000 kr. Ved 100 % skifter alle chats til "kun kilder"-mode.</span>
            <button className="btn btn-soft btn-sm" style={{ marginLeft: 'auto' }}>Opgradér plan</button>
            <button style={{ color: 'var(--fg-3)' }}><I name="close" className="icon-sm"/></button>
          </div>

          {/* KPIs */}
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12, marginBottom: 16 }}>
            {kpis.map(k => (
              <div key={k.label} className="card" style={{ padding: 14, cursor: 'pointer' }}>
                <div style={{ fontSize: 11, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 6 }}>{k.label}</div>
                <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
                  <span style={{ fontSize: 28, fontWeight: 600, color: 'var(--fg-0)', letterSpacing: '-0.02em' }}>{k.value}</span>
                  <span style={{ fontSize: 11, color: k.up ? 'var(--mode-green)' : 'var(--err)', fontWeight: 500 }}>{k.delta}</span>
                </div>
                <div style={{ fontSize: 11, color: 'var(--fg-3)', marginTop: 4 }}>{k.sub}</div>
              </div>
            ))}
          </div>

          {/* Charts row */}
          <div style={{ display: 'grid', gridTemplateColumns: '1.5fr 1fr', gap: 12, marginBottom: 16 }}>
            <div className="card" style={{ padding: 16 }}>
              <div style={{ display: 'flex', alignItems: 'center', marginBottom: 16 }}>
                <h3 style={{ fontSize: 13 }}>Chats pr. dag</h3>
                <div style={{ marginLeft: 'auto', display: 'flex', gap: 4, background: 'var(--bg-2)', borderRadius: 6, padding: 2 }}>
                  {['7d', '30d', '90d'].map((x, i) => (
                    <button key={x} style={{ padding: '4px 10px', fontSize: 11, borderRadius: 4, color: i === 0 ? 'var(--fg-0)' : 'var(--fg-3)', background: i === 0 ? 'var(--bg-1)' : 'transparent' }}>{x}</button>
                  ))}
                </div>
              </div>
              <div style={{ height: 160, display: 'flex', gap: 8, alignItems: 'flex-end' }}>
                {chart.map((v, i) => {
                  const days = ['Tor', 'Fre', 'Lør', 'Søn', 'Man', 'Tir', 'Ons'];
                  const h = (v / max) * 100;
                  return (
                    <div key={i} style={{ flex: 1, display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 6 }}>
                      <div style={{ width: '100%', height: `${h}%`, background: i === chart.length - 1 ? 'var(--primary)' : 'color-mix(in oklch, var(--primary) 40%, var(--bg-2))', borderRadius: '4px 4px 0 0', position: 'relative' }}>
                        {i === chart.length - 1 && (
                          <div style={{ position: 'absolute', bottom: '100%', left: '50%', transform: 'translateX(-50%)', marginBottom: 6, background: 'var(--bg-3)', padding: '3px 6px', borderRadius: 4, fontSize: 10, fontWeight: 600, color: 'var(--fg-0)', whiteSpace: 'nowrap' }}>{v}</div>
                        )}
                      </div>
                      <span style={{ fontSize: 10, color: 'var(--fg-3)' }}>{days[i]}</span>
                    </div>
                  );
                })}
              </div>
            </div>
            <div className="card" style={{ padding: 16 }}>
              <h3 style={{ fontSize: 13, marginBottom: 16 }}>Top kategorier</h3>
              <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
                {cats.map(c => (
                  <div key={c.k}>
                    <div style={{ display: 'flex', fontSize: 12, marginBottom: 4 }}>
                      <span style={{ color: 'var(--fg-1)' }}>{c.k}</span>
                      <span className="mono" style={{ marginLeft: 'auto', color: 'var(--fg-3)' }}>{c.n}</span>
                    </div>
                    <div style={{ height: 4, background: 'var(--bg-2)', borderRadius: 2, overflow: 'hidden' }}>
                      <div style={{ width: `${c.p * 100}%`, height: '100%', background: 'var(--primary)', borderRadius: 2 }}/>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          </div>

          {/* Users + recent chats */}
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1.5fr', gap: 12 }}>
            <div className="card" style={{ padding: 0 }}>
              <div style={{ padding: '14px 16px', borderBottom: '1px solid var(--line-soft)', display: 'flex', alignItems: 'center' }}>
                <h3 style={{ fontSize: 13 }}>Top brugere</h3>
                <button className="btn btn-ghost btn-sm" style={{ marginLeft: 'auto' }}>Se alle</button>
              </div>
              {users.map((u, i) => (
                <div key={u.n} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '10px 16px', borderBottom: i < users.length - 1 ? '1px solid var(--line-soft)' : 'none' }}>
                  <div style={{ width: 24, height: 24, borderRadius: '50%', background: 'var(--bg-3)', color: 'var(--fg-0)', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 10, fontWeight: 600 }}>{u.n.split(' ').map(x=>x[0]).join('')}</div>
                  <div style={{ flex: 1, minWidth: 0 }}>
                    <div style={{ fontSize: 12, color: 'var(--fg-0)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{u.n}</div>
                    <div style={{ fontSize: 10, color: 'var(--fg-3)' }}>{u.r}</div>
                  </div>
                  <span className="mono" style={{ fontSize: 12, color: 'var(--fg-2)' }}>{u.chats}</span>
                </div>
              ))}
            </div>

            <div className="card" style={{ padding: 0 }}>
              <div style={{ padding: '14px 16px', borderBottom: '1px solid var(--line-soft)', display: 'flex', alignItems: 'center' }}>
                <h3 style={{ fontSize: 13 }}>Sidste 10 chats</h3>
                <span className="chip amber" style={{ marginLeft: 8 }}>4 low-confidence</span>
                <button className="btn btn-ghost btn-sm" style={{ marginLeft: 'auto' }}>Se alle</button>
              </div>
              {[
                { u: 'Anders N.', q: 'Hvad gør jeg ved klor-udslip?', m: 'grøn', t: '2 min siden', conf: 0.94 },
                { u: 'Louise B.', q: 'ATEX-zone definition for tankgård', m: 'blå', t: '12 min', conf: 0.87 },
                { u: 'Jens K.', q: 'Overarbejde-procedure weekend', m: 'grøn', t: '24 min', conf: 0.52, low: true },
                { u: 'Maja P.', q: 'Evakuering af plejehjem', m: 'gul', t: '38 min', conf: 0.91 },
                { u: 'Anders N.', q: 'Kemi-datablad natriumhydroxid', m: 'blå', t: '1 t', conf: 0.88 },
              ].map((c, i) => (
                <div key={i} style={{ display: 'grid', gridTemplateColumns: '100px 1fr 70px 70px 70px', gap: 10, padding: '10px 16px', borderBottom: i < 4 ? '1px solid var(--line-soft)' : 'none', fontSize: 12, alignItems: 'center' }}>
                  <span style={{ color: 'var(--fg-2)' }}>{c.u}</span>
                  <span style={{ color: 'var(--fg-0)', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>"{c.q}"</span>
                  <span className={`chip ${c.m === 'grøn' ? 'green' : c.m === 'blå' ? 'blue' : 'amber'}`} style={{ height: 20, fontSize: 10, justifySelf: 'start' }}>{c.m}</span>
                  <span className="mono" style={{ color: c.low ? 'var(--err)' : 'var(--fg-2)', fontSize: 11 }}>{(c.conf * 100).toFixed(0)}%</span>
                  <span style={{ color: 'var(--fg-3)', fontSize: 11, textAlign: 'right' }}>{c.t}</span>
                </div>
              ))}
            </div>
          </div>
        </div>
      </main>
    </div>
  );
};
window.A8Dashboard = A8Dashboard;