// Permissions.jsx — Role × Feature access matrix
function PermissionsPage() {
  const features = [
    { id: 'dashboard',     label: 'Dashboard' },
    { id: 'workorders',    label: 'Work Orders' },
    { id: 'create',        label: 'Create Work Order' },
    { id: 'mobile',        label: 'Mobile Job View' },
    { id: 'completion',    label: 'Job Completion' },
    { id: 'notifications', label: 'Notifications' },
    { id: 'repairs',       label: 'Repair Tickets' },
    { id: 'analytics',     label: 'Analytics' },
    { id: 'export',        label: 'AutoCount Export' },
    { id: 'users',         label: 'User Management' },
    { id: 'settings',      label: 'Settings' },
    { id: 'permissions',   label: 'Role Permissions' },
  ];

  const cellStyle = (lvl) => {
    if (lvl === 'edit') return { background: 'rgba(34,197,94,0.12)', color: '#15803d' };
    if (lvl === 'view') return { background: 'rgba(37,99,235,0.10)', color: '#1d4ed8' };
    return { background: 'rgba(148,163,184,0.12)', color: '#64748b' };
  };
  const cellLabel = (lvl) => lvl === 'edit' ? 'Edit' : lvl === 'view' ? 'View' : '—';

  return (
    <div className="content">
      <div className="card">
        <div className="card__head" style={{justifyContent: 'space-between', flexWrap: 'wrap', gap: 12}}>
          <div>
            <div className="card__title">Role × Feature Access Matrix</div>
            <div style={{fontSize: 13, color: 'var(--color-grey-500)', marginTop: 2}}>Single source of truth for what each role can see and do across the system.</div>
          </div>
          <div style={{display: 'flex', gap: 12, alignItems: 'center', fontSize: 12}}>
            <span style={{display: 'flex', alignItems: 'center', gap: 6}}><span style={{width: 14, height: 14, borderRadius: 3, ...cellStyle('edit')}}/> Edit</span>
            <span style={{display: 'flex', alignItems: 'center', gap: 6}}><span style={{width: 14, height: 14, borderRadius: 3, ...cellStyle('view')}}/> View only</span>
            <span style={{display: 'flex', alignItems: 'center', gap: 6}}><span style={{width: 14, height: 14, borderRadius: 3, ...cellStyle('none')}}/> No access</span>
          </div>
        </div>

        <div style={{overflowX: 'auto', border: '1px solid var(--border-default)', borderRadius: 8}}>
          <table style={{width: '100%', borderCollapse: 'collapse', fontSize: 13, minWidth: 720}}>
            <thead style={{background: 'var(--color-grey-50)'}}>
              <tr>
                <th style={{padding: '12px 14px', textAlign: 'left', fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--color-grey-500)', position: 'sticky', left: 0, background: 'var(--color-grey-50)', minWidth: 200}}>Feature</th>
                {ROLES.map(r => (
                  <th key={r} style={{padding: '12px 8px', textAlign: 'center', fontSize: 11, fontWeight: 700, letterSpacing: '0.08em', textTransform: 'uppercase', color: 'var(--color-grey-500)'}}>{r}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {features.map(f => (
                <tr key={f.id} style={{borderTop: '1px solid var(--border-default)'}}>
                  <td style={{padding: '12px 14px', fontWeight: 600, color: 'var(--color-navy)', position: 'sticky', left: 0, background: 'white'}}>{f.label}</td>
                  {ROLES.map(r => {
                    const lvl = can(r, f.id);
                    return (
                      <td key={r} style={{padding: '8px', textAlign: 'center'}}>
                        <span style={{display: 'inline-block', padding: '4px 10px', borderRadius: 4, fontSize: 11, fontWeight: 700, ...cellStyle(lvl)}}>{cellLabel(lvl)}</span>
                      </td>
                    );
                  })}
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        <div style={{marginTop: 16, padding: 14, background: 'var(--color-grey-50)', borderRadius: 8, fontSize: 13, color: 'var(--color-grey-700)', lineHeight: 1.55}}>
          <strong style={{color: 'var(--color-navy)'}}>How this is enforced:</strong> the same matrix lives on the FastAPI backend. Every API endpoint checks the requester's role against this table — the frontend hiding a button is for UX, but the backend's check is what actually keeps data safe. Frontend and backend pull from one shared <code style={{fontFamily: 'var(--font-mono)', background: 'white', padding: '1px 5px', borderRadius: 3}}>permissions.json</code> so the two never drift.
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { PermissionsPage });