// A9 — Audit log view. Dense table + filters + export.
const A9Audit = () => {
  const [expanded, setExpanded] = React.useState(null);
  const [filters, setFilters] = React.useState(['sidste 7 dage']);

  const rows = [
    { t: '2026-04-23 14:32:08', u: 'anders.n@horsens.dk', r: 'medarbejder', a: 'Spurgte AI', res: 'chat/s-8f2a', ip: '80.62.•••.42', cat: 'ai' },
    { t: '2026-04-23 14:28:41', u: 'morten.h@horsens.dk', r: 'tenant_admin', a: 'Godkendte dokument', res: 'doc/Brandprocedure-2024.pdf', ip: '80.62.116.8', cat: 'approve' },
    { t: '2026-04-23 14:24:02', u: 'louise.b@horsens.dk', r: 'kontrollant', a: 'Uploadede dokument', res: 'doc/ATEX-vejl-2025.pdf', ip: '80.62.116.14', cat: 'upload' },
    { t: '2026-04-23 14:12:55', u: 'jens.k@horsens.dk', r: 'medarbejder', a: 'Spurgte AI', res: 'chat/s-8f1c', ip: '80.62.•••.88', cat: 'ai' },
    { t: '2026-04-23 14:04:10', u: 'morten.h@horsens.dk', r: 'tenant_admin', a: 'Ændrede kategori', res: 'cat/Brandsikring', ip: '80.62.116.8', cat: 'update' },
    { t: '2026-04-23 13:58:22', u: 'maja.p@horsens.dk', r: 'medarbejder', a: 'Loggede ind', res: 'auth/magic', ip: '80.62.•••.19', cat: 'auth' },
    { t: '2026-04-23 13:45:01', u: 'morten.h@horsens.dk', r: 'tenant_admin', a: 'Slettede bruger', res: 'user/kim.s@horsens.dk', ip: '80.62.116.8', cat: 'delete' },
    { t: '2026-04-23 13:31:48', u: 'anders.n@horsens.dk', r: 'medarbejder', a: 'Spurgte AI', res: 'chat/s-8ef0', ip: '80.62.•••.42', cat: 'ai' },
    { t: '2026-04-23 13:22:14', u: 'louise.b@horsens.dk', r: 'kontrollant', a: 'Uploadede dokument', res: 'doc/Kemi-datablad-12.pdf', ip: '80.62.116.14', cat: 'upload' },
    { t: '2026-04-23 13:11:03', u: 'morten.h@horsens.dk', r: 'tenant_admin', a: 'Loggede ind', res: 'auth/entra', ip: '80.62.116.8', cat: 'auth' },
    { t: '2026-04-23 12:58:32', u: 'anders.n@horsens.dk', r: 'medarbejder', a: 'Loggede ud', res: 'auth/session', ip: '80.62.•••.42', cat: 'auth' },
    { t: '2026-04-23 12:47:17', u: 'jens.k@horsens.dk', r: 'medarbejder', a: 'Spurgte AI', res: 'chat/s-8ed2', ip: '80.62.•••.88', cat: 'ai' },
  ];

  const badge = { auth: 'neutral', upload: 'blue', delete: 'red', ai: 'green', approve: 'green', update: 'amber' };

  return (
    <div className="vault" style={{ width: '100%', height: '100%', display: 'flex', flexDirection: 'column', background: 'var(--bg-0)' }}>
      {/* Header */}
      <div style={{ padding: '16px 20px', borderBottom: '1px solid var(--line-soft)', display: 'flex', alignItems: 'center', gap: 12 }}>
        <div>
          <h2 style={{ fontSize: 18, marginBottom: 2 }}>Audit log</h2>
          <p style={{ fontSize: 12, color: 'var(--fg-3)' }}>8.412 events · sidste 30 dage · tenant_id <span className="mono">hrs_01jd8...</span></p>
        </div>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
          <button className="btn btn-ghost btn-sm"><I name="refresh" className="icon-sm"/> Opdatér</button>
          <button className="btn btn-soft btn-sm"><I name="download" className="icon-sm"/> Eksportér CSV</button>
          <button className="btn btn-primary btn-sm"><I name="download" className="icon-sm"/> Eksportér PDF-rapport</button>
        </div>
      </div>

      {/* Filter bar */}
      <div style={{ padding: '12px 20px', borderBottom: '1px solid var(--line-soft)', background: 'var(--bg-1)', display: 'flex', alignItems: 'center', gap: 10, flexWrap: 'wrap' }}>
        <div className="input" style={{ width: 280, height: 30, fontSize: 12 }}>
          <I name="search" className="icon-sm" style={{ color: 'var(--fg-3)' }}/>
          <input placeholder="Søg efter bruger, resource, action..."/>
        </div>
        {[
          { l: 'Rolle', v: 'Alle' },
          { l: 'Action', v: 'Alle' },
          { l: 'Resource', v: 'Alle' },
          { l: 'Dato', v: 'Sidste 7 dage' },
        ].map(f => (
          <button key={f.l} className="btn btn-soft btn-sm" style={{ fontSize: 12 }}>
            <span style={{ color: 'var(--fg-3)' }}>{f.l}:</span> {f.v} <I name="chevronDown" className="icon-sm" style={{ color: 'var(--fg-3)' }}/>
          </button>
        ))}
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 6, alignItems: 'center', fontSize: 12, color: 'var(--fg-3)' }}>
          <span className="chip blue" style={{ gap: 4 }}>dato: sidste 7 dage <button style={{ color: 'inherit', padding: 0 }}><I name="close" className="icon-sm"/></button></span>
          <button style={{ color: 'var(--primary-strong)', textDecoration: 'underline', fontSize: 12 }}>Nulstil filtre</button>
        </div>
      </div>

      {/* Table */}
      <div style={{ flex: 1, overflow: 'auto' }}>
        <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 12 }}>
          <thead style={{ position: 'sticky', top: 0, background: 'var(--bg-1)', zIndex: 1 }}>
            <tr style={{ borderBottom: '1px solid var(--line-soft)' }}>
              {['Tidsstempel', 'Bruger', 'Rolle', 'Action', 'Resource', 'IP', ''].map(h => (
                <th key={h} style={{ textAlign: 'left', padding: '10px 14px', fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--fg-3)', fontWeight: 500 }}>
                  {h} {h && h !== '' && <I name="chevronDown" className="icon-sm" style={{ opacity: 0.4, verticalAlign: 'middle' }}/>}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {rows.map((r, i) => (
              <React.Fragment key={i}>
                <tr onClick={() => setExpanded(expanded === i ? null : i)}
                    style={{ borderBottom: '1px solid var(--line-soft)', cursor: 'pointer', background: expanded === i ? 'var(--bg-2)' : i % 2 === 0 ? 'transparent' : 'color-mix(in oklch, var(--bg-1) 50%, transparent)' }}>
                  <td style={{ padding: '10px 14px', fontFamily: 'var(--font-mono)', color: 'var(--fg-2)' }}>{r.t}</td>
                  <td style={{ padding: '10px 14px', color: 'var(--fg-0)' }}>{r.u}</td>
                  <td style={{ padding: '10px 14px' }}><span className="chip neutral" style={{ height: 20, fontSize: 10 }}>{r.r}</span></td>
                  <td style={{ padding: '10px 14px' }}>
                    <span className={`chip ${badge[r.cat]}`} style={{ height: 20, fontSize: 10 }}>{r.a}</span>
                  </td>
                  <td style={{ padding: '10px 14px', fontFamily: 'var(--font-mono)', color: 'var(--primary-strong)' }}>{r.res}</td>
                  <td style={{ padding: '10px 14px', fontFamily: 'var(--font-mono)', color: 'var(--fg-3)' }}>{r.ip}</td>
                  <td style={{ padding: '10px 14px', color: 'var(--fg-3)' }}>
                    <I name={expanded === i ? 'chevronUp' : 'chevronDown'} className="icon-sm"/>
                  </td>
                </tr>
                {expanded === i && (
                  <tr style={{ background: 'var(--bg-2)', borderBottom: '1px solid var(--line-soft)' }}>
                    <td colSpan="7" style={{ padding: '14px 14px 18px 14px' }}>
                      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 20, marginBottom: 12 }}>
                        {[
                          ['Event ID', 'evt_01jd8m2x4n'], ['Session', 'sess_01jd7k...'], ['Bruger-agent', 'Safari 17.4 / iOS 18.1'],
                          ['Tenant', 'hrs_01jd8m2x...'], ['Duration', '142 ms'], ['Result', 'success'],
                        ].map(([k, v]) => (
                          <div key={k}>
                            <div style={{ fontSize: 10, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 3 }}>{k}</div>
                            <div className="mono" style={{ fontSize: 12, color: 'var(--fg-0)' }}>{v}</div>
                          </div>
                        ))}
                      </div>
                      <div style={{ fontSize: 10, color: 'var(--fg-3)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 6 }}>details_json</div>
                      <pre style={{ background: 'var(--bg-0)', border: '1px solid var(--line-soft)', borderRadius: 6, padding: 12, fontFamily: 'var(--font-mono)', fontSize: 11, color: 'var(--fg-1)', overflow: 'auto', margin: 0, lineHeight: 1.55 }}>{`{
  "query_tokens": 14,
  "answer_tokens": 186,
  "mode": "curated",
  "citations": ["Brandprocedure-2024#p12", "Kemi-datablad-klor#p3"],
  "confidence": 0.94,
  "model": "claude-haiku-4-5",
  "latency_ms": 2142
}`}</pre>
                    </td>
                  </tr>
                )}
              </React.Fragment>
            ))}
          </tbody>
        </table>
      </div>

      {/* Pagination */}
      <div style={{ padding: '10px 20px', borderTop: '1px solid var(--line-soft)', display: 'flex', alignItems: 'center', gap: 10, fontSize: 12, color: 'var(--fg-2)' }}>
        <span>Viser 1–12 af 8.412</span>
        <div style={{ marginLeft: 'auto', display: 'flex', gap: 4 }}>
          <button className="btn btn-ghost btn-sm" style={{ padding: '0 8px' }}><I name="chevronLeft" className="icon-sm"/></button>
          {[1, 2, 3, '...', 168].map((p, i) => (
            <button key={i} className={`btn btn-sm ${p === 1 ? 'btn-primary' : 'btn-ghost'}`} style={{ padding: '0 10px', minWidth: 28 }}>{p}</button>
          ))}
          <button className="btn btn-ghost btn-sm" style={{ padding: '0 8px' }}><I name="chevronRight" className="icon-sm"/></button>
        </div>
      </div>
    </div>
  );
};
window.A9Audit = A9Audit;