// Compliance — the wedge: AS 1851 / AFSS tracker, ranked, audit-ready.
function Compliance({ onBuilding, persona }) {
  const [tab, setTab] = React.useState('Open');
  const tabs = ['Open', 'Due ≤ 30d', 'Overdue', 'Complete'];
  const allRows = [
    ['Emergency lighting', 'Adelaide Central', 'AS 2293 · Six-monthly', '3 days overdue', '$4,000/wk', 'urgent', 'Overdue'],
    ['Fire panel & detection', 'Harbourview', 'AS 1851 · Monthly', 'In 2 days', '$2,500/wk', 'urgent', 'Due soon'],
    ['AFSS annual statement', 'The Lumen', 'Council · Annual', 'In 6 days', '$1,800/wk', 'warning', 'Due soon'],
    ['Mechanical ventilation', 'Adelaide Central', 'AS 1851 · Annual', 'In 9 days', '$1,200/wk', 'warning', 'Due soon'],
    ['Hydrant & booster', 'Cove Apartments', 'AS 1851 · Yearly', 'In 12 days', '$900/wk', 'warning', 'Due soon'],
    ['Sprinkler system', 'Parkside Gardens', 'AS 1851 · Six-monthly', 'In 28 days', 'On track', 'resolved', 'On track'],
    ['Fire doors & exits', 'Stirling House', 'AS 1851 · Annual', 'Lodged', 'Cleared', 'resolved', 'Complete'],
  ];
  const pid = persona && persona.id;
  const scopeBldg = pid === 'treasurer' ? 'Harbourview' : pid === 'building' ? 'The Lumen' : null;
  const scopeSp   = pid === 'treasurer' ? 'SP 84021'    : pid === 'building' ? 'SP 67203' : null;
  const rows = scopeBldg ? allRows.filter(r => r[1] === scopeBldg) : allRows;
  const intro = scopeBldg
    ? `${rows.length} item${rows.length===1?'':'s'} need attention at ${scopeBldg} · ${scopeSp}, ranked by days-to-deadline. Reminders escalate automatically, and the audit trail answers ${pid==='treasurer' ? 'the committee' : 'residents and the chair'} before the next meeting.`
    : '23 items need attention across your 127 schemes, ranked by days-to-deadline. Reminders escalate automatically, and the audit trail answers the committee before the meeting starts.';
  const aiBasis = scopeBldg
    ? `For ${scopeBldg}, deadlines cleared 3+ days early avoided a penalty 96% of the time.`
    : 'Across 127 schemes, deadlines cleared 3+ days early avoided a penalty 96% of the time; the two flagged here both slipped last quarter.';
  return (
    <div className="view"><div className="wrap">
      <div className="eyebrow">{scopeBldg ? `Compliance · ${scopeBldg} · ${scopeSp}` : 'Compliance · NSW · VIC · QLD'}</div>
      <h1 className="h-serif" style={{ fontSize: 28, margin: '12px 0 4px' }}>Every deadline, <em>tracked.</em></h1>
      <p style={{ color: 'var(--fg-2)', fontSize: 13.5, margin: '0 0 18px' }}>{intro}</p>
      <AiBlock title="Opsmera AI · what to do this week"
        body="Two items carry live weekly exposure. Clear Adelaide Central's emergency lighting first - it is overdue at $4,000/wk and one denied invoice is the only blocker. Then book Harbourview's fire panel before its routine date in 2 days."
        basis={aiBasis}
        actions={[['Fix Adelaide Central', 'shield-alert'], ['Book Harbourview', 'calendar']]} />
      <div style={{ height: 18 }} />
      <div className="toolbar">
        <div className="seg">{tabs.map(t => <button key={t} className={t === tab ? 'on' : ''} onClick={() => setTab(t)}>{t}</button>)}</div>
        <button className="btn btn-ghost btn-sm" style={{ marginLeft: 'auto' }} onClick={() => act('Export audit pack', { kind: 'auto', icon: 'download', sub: 'Compiling AS 1851 / AFSS evidence' })}><Icon name="download" />Export audit pack</button>
        <button className="btn btn-primary btn-sm" onClick={() => act('Sending logbook to print', { kind: 'info', icon: 'printer' })}><Icon name="printer" />Print logbook</button>
      </div>
      <div className="card">
        <table className="tbl">
          <thead><tr><th>Asset / measure</th><th>Site</th><th>Schedule</th><th>Next due</th><th>Weekly exposure</th><th>Status</th></tr></thead>
          <tbody>
            {rows.map((r, i) => (
              <tr key={i} onClick={() => onBuilding(r[1])}>
                <td className="asset">{r[0]}</td>
                <td>
                  <div style={{ color: 'var(--fg-1)' }}>{siteOf(r[1]).short}</div>
                  <div style={{ fontSize: 11.5, color: 'var(--fg-3)', marginTop: 2 }}>{siteOf(r[1]).sp}</div>
                </td>
                <td className="mono">{r[2]}</td>
                <td className="mono" style={{ color: r[5] === 'urgent' ? '#f0938a' : 'var(--fg-2)' }}>{r[3]}</td>
                <td className={r[5] === 'resolved' ? 'mono' : 'exposure'}>{r[4]}</td>
                <td><Tag track={
                  r[6] === 'Overdue' ? 'breached'
                  : r[6] === 'Due soon' ? 'at-risk'
                  : r[6] === 'On track' ? 'on-track'
                  : 'done'
                } sub={r[6]} /></td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div></div>
  );
}
Object.assign(window, { Compliance });