// Audit log — satisfies Brief §6 Auditability: "Log admin actions, role changes,
// content changes, report submissions, campaign launches, exports". Events are
// static mock rows that cover every category the brief enumerates.
function AuditPage({ onNavigate, toast }) {
  const [filter, setFilter] = useState('all');

  const events = [
    { ts: '2026-04-19 09:12:04', actor: 'Dr. E. Papadaki',     action: 'Signed in',             object: 'Session · MFA verified',           outcome: 'ok',     cat: 'access' },
    { ts: '2026-04-19 09:04:41', actor: 'system',              action: 'Policy acknowledged',    object: 'Acceptable Use v4.0 · N. Kakabadze', outcome: 'ok',     cat: 'content' },
    { ts: '2026-04-19 08:41:17', actor: 'Dr. M. Beridze',      action: 'Content published',      object: 'Lesson · Recognizing phishing (v2.3)', outcome: 'ok',   cat: 'content' },
    { ts: '2026-04-19 08:37:02', actor: 'Dr. E. Papadaki',     action: 'Report submitted',       object: '#INC-2026-0427 · Suspicious email',   outcome: 'ok',    cat: 'reports' },
    { ts: '2026-04-19 08:22:58', actor: 'Dr. M. Beridze',      action: 'Content moved to Review', object: 'Lesson · Secure texting (v0.6)',     outcome: 'ok',    cat: 'content' },
    { ts: '2026-04-19 07:58:30', actor: 'Dr. T. Meladze',      action: 'Campaign launched',      object: 'Phishing · Q2 Wave 3 · 142 recipients', outcome: 'ok', cat: 'content' },
    { ts: '2026-04-19 07:40:12', actor: 'S. Kipiani',          action: 'Failed login',           object: 'Session · 3 attempts rate-limited',   outcome: 'warn',  cat: 'access' },
    { ts: '2026-04-18 17:02:47', actor: 'Dr. M. Beridze',      action: 'CSV export',             object: 'Compliance dashboard · 142 learners', outcome: 'ok',    cat: 'exports' },
    { ts: '2026-04-18 16:28:19', actor: 'Dr. M. Beridze',      action: 'PDF export',             object: 'Audit evidence · Q2 2026',            outcome: 'ok',    cat: 'exports' },
    { ts: '2026-04-18 14:11:06', actor: 'admin',               action: 'Role changed',           object: 'I. Maisuradze · Learner → Manager',   outcome: 'ok',    cat: 'access' },
    { ts: '2026-04-18 11:35:50', actor: 'Dr. M. Beridze',      action: 'Report triaged',         object: '#INC-2026-0421 · escalated to SOC',   outcome: 'ok',    cat: 'reports' },
    { ts: '2026-04-18 10:04:23', actor: 'admin',               action: 'User added',             object: 'G. Tsereteli · Admissions',           outcome: 'ok',    cat: 'access' },
    { ts: '2026-04-18 09:22:11', actor: 'Dr. M. Beridze',      action: 'Department tag added',   object: 'Lesson PHI-201 → Cardiology-3B',      outcome: 'ok',    cat: 'content' },
    { ts: '2026-04-17 22:04:55', actor: 'Dr. M. Beridze',      action: 'Content deleted',        object: 'Scenario draft · Vendor invoice v0.1', outcome: 'ok',   cat: 'content' },
  ];

  const filters = [
    { id: 'all',     label: 'All events' },
    { id: 'content', label: 'Content' },
    { id: 'access',  label: 'Access & roles' },
    { id: 'reports', label: 'Reports' },
    { id: 'exports', label: 'Exports' },
  ];

  const visible = events.filter(e => filter === 'all' || e.cat === filter);

  const outcomeChip = (o) => {
    if (o === 'warn') return <span className="chip chip-amber"><I.AlertTriangle size={10}/> Blocked</span>;
    return <span className="chip chip-green"><I.CheckCircle size={10}/> OK</span>;
  };

  return (
    <div className="page-enter">
      <div className="breadcrumbs">
        <a href="#" onClick={e => {e.preventDefault(); onNavigate('dashboard');}}>Home</a>
        <I.ChevronRight size={10}/>
        <span>Audit log</span>
      </div>

      <div className="row-between" style={{marginBottom: 16, alignItems: 'flex-start'}}>
        <div>
          <h1>Audit log</h1>
          <p className="muted" style={{fontSize: 12.5}}>Sensitive administrative actions · Q2 2026 · Retained 7 years</p>
        </div>
        <div style={{display: 'flex', gap: 8, alignItems: 'center'}}>
          <button className="btn btn-outline" onClick={() => toast(`Audit-ready evidence exported · ${visible.length} rows (CSV)`, 'success')}>
            <I.Download size={14}/> CSV
          </button>
          <button className="btn btn-outline" onClick={() => toast(`Audit-ready evidence exported · ${visible.length} rows (PDF)`, 'success')}>
            <I.FileText size={14}/> PDF
          </button>
        </div>
      </div>

      <div style={{display: 'flex', gap: 6, marginBottom: 16, flexWrap: 'wrap'}}>
        {filters.map(f => (
          <button
            key={f.id}
            className={`chip ${filter === f.id ? 'chip-navy' : 'chip-outline'}`}
            onClick={() => setFilter(f.id)}
            style={{cursor: 'pointer', textTransform: 'none', letterSpacing: 0, padding: '4px 10px', fontSize: 12}}
          >
            {f.label}
            <span style={{marginLeft: 6, opacity: 0.7}}>
              {f.id === 'all' ? events.length : events.filter(e => e.cat === f.id).length}
            </span>
          </button>
        ))}
      </div>

      <div className="card">
        <table className="data-table">
          <thead>
            <tr>
              <th style={{width: 180}}>Timestamp</th>
              <th style={{width: 180}}>Actor</th>
              <th style={{width: 220}}>Action</th>
              <th>Object</th>
              <th style={{width: 120, textAlign: 'right'}}>Outcome</th>
            </tr>
          </thead>
          <tbody>
            {visible.map((e, i) => (
              <tr key={i}>
                <td><span className="mono" style={{fontSize: 11.5, color: 'var(--ink-3)'}}>{e.ts}</span></td>
                <td><span style={{fontSize: 12.5, color: 'var(--ink-2)'}}>{e.actor}</span></td>
                <td><span style={{fontWeight: 600, color: 'var(--navy)'}}>{e.action}</span></td>
                <td className="muted" style={{fontSize: 12.5}}>{e.object}</td>
                <td style={{textAlign: 'right'}}>{outcomeChip(e.outcome)}</td>
              </tr>
            ))}
            {visible.length === 0 && (
              <tr><td colSpan={5} style={{textAlign: 'center', padding: 28, color: 'var(--ink-3)'}}>No events match this filter.</td></tr>
            )}
          </tbody>
        </table>
      </div>

      <div className="callout callout-gray" style={{marginTop: 18}}>
        <I.ShieldCheck size={16} style={{flexShrink: 0, marginTop: 1}}/>
        <div style={{fontSize: 12.5}}>
          <div className="callout-title">Audit independence</div>
          Audit records are stored separately from content and model outputs. Future AI features never write to this log.
        </div>
      </div>
    </div>
  );
}

window.AuditPage = AuditPage;