/* roles.jsx — Quản trị → Vai trò (RBAC). window.RolesAdmin.
   Tạo vai trò = tổ hợp quyền, gán vai trò cho thành viên. Chỉ admin. */
(function () {
  const { useState, useEffect } = React;
  const Icon = window.Icon;

  function RolesAdmin() {
    const auth = (typeof useAuthCtx === "function") ? useAuthCtx() : null;
    const isAdmin = !!(auth && (auth.profile && auth.profile.role === "admin" || (auth.perms || []).includes("manage")));
    const PERMS = window.CDE_PERMS || [];
    const [roles, setRoles] = useState([]);
    const [members, setMembers] = useState([]);
    const [loading, setLoading] = useState(true);

    const reload = () => {
      if (!window.cdeRoles) { setLoading(false); return; }
      Promise.all([window.cdeRoles.list(), window.cdeRoles.membersWithRoles()])
        .then(([r, m]) => { setRoles(r || []); setMembers(m || []); })
        .catch(() => {}).finally(() => setLoading(false));
    };
    useEffect(reload, []);

    const addRole = async () => {
      try { await window.cdeRoles.create("Vai trò mới", ["view"]); reload(); }
      catch (e) { alert("Tạo vai trò thất bại: " + (e.message || e)); }
    };
    const delRole = async (r) => {
      if (!window.confirm('Xoá vai trò "' + r.name + '"? Các gán cho thành viên & cổng sẽ mất.')) return;
      try { await window.cdeRoles.remove(r.id); reload(); } catch (e) { alert(e.message || e); }
    };
    const rename = (r, name) => setRoles(rs => rs.map(x => x.id === r.id ? { ...x, name } : x));
    const saveName = (r) => { window.cdeRoles.update(r.id, { name: r.name }).catch(() => {}); };
    const togglePerm = (r, permId) => {
      const has = (r.permissions || []).includes(permId);
      const next = has ? r.permissions.filter(p => p !== permId) : [...(r.permissions || []), permId];
      setRoles(rs => rs.map(x => x.id === r.id ? { ...x, permissions: next } : x));
      window.cdeRoles.update(r.id, { permissions: next }).catch(() => {});
    };
    const toggleMember = (m, roleId) => {
      const has = (m.roleIds || []).includes(roleId);
      setMembers(ms => ms.map(x => x.id === m.id ? { ...x, roleIds: has ? x.roleIds.filter(r => r !== roleId) : [...x.roleIds, roleId] } : x));
      (has ? window.cdeRoles.unassign(m.id, roleId) : window.cdeRoles.assign(m.id, roleId)).catch(() => reload());
    };

    if (loading) return <div className="content"><div className="ph-loading">Đang tải…</div></div>;
    if (!isAdmin) return <div className="content"><div className="empty-note">Chỉ quản trị viên mới cấu hình được vai trò.</div></div>;

    return (
      <div className="roles content" style={{ overflowY: "auto" }}>
        {/* ----- Vai trò = tổ hợp quyền ----- */}
        <div className="ae2-lib-head">
          <div>
            <div className="card-title">Vai trò & phân quyền</div>
            <div className="card-sub">Mỗi vai trò là một <b>tổ hợp quyền</b>. Gán cho thành viên, và gán cho cổng duyệt trong Luồng phê duyệt.</div>
          </div>
          <button className="btn sm primary" onClick={addRole}><Icon.plus size={14} /> Tạo vai trò</button>
        </div>

        {!roles.length && <div className="rl-empty"><Icon.shield size={26} /><div>Chưa có vai trò nào. Tạo vai trò đầu tiên (vd: Chủ trì, Trưởng phòng).</div></div>}

        <div className="rl-grid">
          {roles.map(r => (
            <div className="card card-pad rl-card" key={r.id}>
              <div className="rl-card-head">
                <span className="rl-ico"><Icon.shield size={16} /></span>
                <input className="rl-name" value={r.name} onChange={(e) => rename(r, e.target.value)} onBlur={() => saveName(r)} />
                <button className="icon-btn ae2-trash" title="Xoá vai trò" onClick={() => delRole(r)}><Icon.trash size={14} /></button>
              </div>
              <div className="rl-perm-lbl">Quyền ({(r.permissions || []).length})</div>
              <div className="rl-perms">
                {PERMS.map(p => { const on = (r.permissions || []).includes(p.id); return (
                  <button key={p.id} className={"rl-perm" + (on ? " on" : "")} onClick={() => togglePerm(r, p.id)}>
                    {on && <Icon.check size={11} />} {p.label}
                  </button>
                ); })}
              </div>
            </div>
          ))}
        </div>

        {/* ----- Gán vai trò cho thành viên ----- */}
        <div className="ae2-lib-head" style={{ marginTop: 26 }}>
          <div>
            <div className="card-title">Gán vai trò cho thành viên</div>
            <div className="card-sub">Một người có thể giữ nhiều vai trò. Bấm để bật/tắt.</div>
          </div>
        </div>

        {!members.length && <div className="rl-empty"><Icon.users size={24} /><div>Chưa có thành viên.</div></div>}
        {members.length > 0 && roles.length > 0 && (
          <div className="card rl-matrix-wrap">
            <table className="rl-matrix">
              <thead>
                <tr>
                  <th className="rl-mx-name">Thành viên</th>
                  {roles.map(r => <th key={r.id}>{r.name}</th>)}
                </tr>
              </thead>
              <tbody>
                {members.map(m => (
                  <tr key={m.id}>
                    <td className="rl-mx-name">
                      <div className="rl-mx-person">
                        <span className="rl-avatar">{(m.name || "?").slice(0, 1).toUpperCase()}</span>
                        <div>
                          <div className="rl-mx-pname">{m.name}</div>
                          <div className="rl-mx-psub">TK: {m.accountRole || "viewer"}</div>
                        </div>
                      </div>
                    </td>
                    {roles.map(r => { const on = (m.roleIds || []).includes(r.id); return (
                      <td key={r.id} className="rl-mx-cell">
                        <button className={"rl-check" + (on ? " on" : "")} onClick={() => toggleMember(m, r.id)} title={on ? "Bỏ gán" : "Gán"}>
                          {on && <Icon.check size={13} />}
                        </button>
                      </td>
                    ); })}
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
        {members.length > 0 && !roles.length && <div className="rl-empty-sm">Tạo vai trò trước để gán cho thành viên.</div>}
      </div>
    );
  }

  window.RolesAdmin = RolesAdmin;
})();