// roles.jsx — Roles & Permissions admin panel

const { ROLES: ROLES_R, ROLE_ORDER: ORDER_R, PERMISSIONS: PERMS_R, USERS: USERS_R } = window.SEED;

// permission lookup: can a role do a given permission key?
window.can = (roleId, key) => {
  for (const g of PERMS_R) for (const it of g.items) if (it.key === key) return !!it.roles[roleId];
  return false;
};
const totalPerms = PERMS_R.reduce((n, g) => n + g.items.length, 0);
const allowedCount = (roleId) => PERMS_R.reduce((n, g) => n + g.items.filter((it) => it.roles[roleId]).length, 0);

function RolePill({ roleId, size = 'md' }) {
  const r = ROLES_R[roleId];
  return (
    <span className={'role-pill ' + size} style={{
      color: `oklch(0.4 0.13 ${r.hue})`, background: `oklch(0.95 0.05 ${r.hue})`,
    }}>
      <span className="role-dot" style={{ background: `oklch(0.55 0.16 ${r.hue})` }} />{r.label}
    </span>
  );
}

function RolesView({ roles, setRoles, me }) {
  const myRole = roles[me];
  const canManage = myRole === 'owner';
  const countByRole = (rid) => Object.values(roles).filter((r) => r === rid).length;

  return (
    <div className="view-pad">
      <div className="view-head">
        <div>
          <h1 className="view-title">Roles &amp; Permissions</h1>
          <p className="view-sub">Control what each teammate can see and do across the workspace.</p>
        </div>
        <RolePill roleId={myRole} size="lg" />
      </div>

      {!canManage && (
        <div className="perm-banner">
          <window.Icon name="user" size={16} />
          You're signed in as <strong>{ROLES_R[myRole].label}</strong>. Only an <strong>Owner</strong> can change member roles — the matrix below is read-only for you.
        </div>
      )}

      {/* role summary cards */}
      <div className="role-cards">
        {ORDER_R.map((rid) => {
          const r = ROLES_R[rid];
          return (
            <div key={rid} className="role-card" style={{ borderTopColor: `oklch(0.62 0.15 ${r.hue})` }}>
              <RolePill roleId={rid} />
              <p className="role-desc">{r.desc}</p>
              <div className="role-stats">
                <span><strong>{countByRole(rid)}</strong> {countByRole(rid) === 1 ? 'member' : 'members'}</span>
                <span className="dot-sep" />
                <span><strong>{allowedCount(rid)}</strong>/{totalPerms} permissions</span>
              </div>
            </div>
          );
        })}
      </div>

      {/* members & roles */}
      <div className="roles-section">
        <h2 className="roles-h">Team members</h2>
        <div className="report-table-card">
          <table className="roles-table">
            <thead><tr><th>Member</th><th>Email</th><th>Workspace role</th></tr></thead>
            <tbody>
              {USERS_R.map((u) => (
                <tr key={u.id}>
                  <td>
                    <span className="rt-owner">
                      <window.Avatar id={u.id} size={30} />
                      <span><span className="rmember-name">{u.name}{u.id === me && <span className="rmember-you">You</span>}</span>
                        <span className="rmember-role">{u.role}</span></span>
                    </span>
                  </td>
                  <td className="rmember-email">{u.email}</td>
                  <td>
                    {canManage ? (
                      <select className="role-select" value={roles[u.id]}
                        onChange={(e) => setRoles({ ...roles, [u.id]: e.target.value })}>
                        {ORDER_R.map((rid) => <option key={rid} value={rid}>{ROLES_R[rid].label}</option>)}
                      </select>
                    ) : (
                      <RolePill roleId={roles[u.id]} />
                    )}
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* permission matrix */}
      <div className="roles-section">
        <h2 className="roles-h">Permission matrix</h2>
        <div className="report-table-card">
          <table className="perm-matrix">
            <thead>
              <tr>
                <th className="pm-perm">Permission</th>
                {ORDER_R.map((rid) => (
                  <th key={rid} className="pm-role"><RolePill roleId={rid} /></th>
                ))}
              </tr>
            </thead>
            {PERMS_R.map((g) => (
              <tbody key={g.group}>
                <tr className="pm-group"><td colSpan={ORDER_R.length + 1}>{g.group}</td></tr>
                {g.items.map((it) => (
                  <tr key={it.key}>
                    <td className="pm-perm">{it.key}</td>
                    {ORDER_R.map((rid) => (
                      <td key={rid} className="pm-cell">
                        {it.roles[rid]
                          ? <span className="pm-yes" style={{ color: `oklch(0.55 0.15 ${ROLES_R[rid].hue})` }}><window.Icon name="check" size={16} stroke={2.6} /></span>
                          : <span className="pm-no">—</span>}
                      </td>
                    ))}
                  </tr>
                ))}
              </tbody>
            ))}
          </table>
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { RolesView, RolePill });