/* ============================================================
   PermissionMatrix — RBAC matrix + ISO 19650 role mapping
   ============================================================ */

const PERM_ROWS = [
  { cap: "Xem trực tuyến · đo · markup riêng tư", lv: [1, 1, 0, 1, 1] },
  { cap: "Tải bản sao về máy (PDF/DWG)", lv: [0, 1, 0, 1, 1] },
  { cap: "Nạp tài liệu (thư mục chỉ định)", lv: [0, 0, 1, 1, 1] },
  { cap: "Đổi tên · cập nhật metadata · Published markup", lv: [0, 0, 0, 1, 1] },
  { cap: "Quản trị người dùng · cấu hình · workflow", lv: [0, 0, 0, 0, 1] },
];
const PERM_LEVELS = ["View", "View+DL", "Upload", "Edit", "Full"];
const PERM_HOLDERS = [
  "View · Chủ đầu tư cấp cao",
  "View+DL · Nhà thầu phụ hiện trường",
  "Upload · Đơn vị đệ trình / đấu thầu",
  "Edit · KS thiết kế · BIM Coordinator",
  "Full · CDE / BIM Manager",
];

const ISO_ROLES = [
  { role: "Task Team Member", desc: "Tác nghiệp WIP trong nhóm bộ môn", grant: "Edit · WIP" },
  { role: "Task Team Manager / Approver", desc: "Phê duyệt nội bộ WIP → Shared", grant: "Edit + Duyệt" },
  { role: "Lead Appointed Party", desc: "Kiểm soát vùng Shared, điều phối liên ngành", grant: "Edit · Shared" },
  { role: "Appointing Party (Chủ đầu tư)", desc: "Uỷ quyền phát hành Published", grant: "View + Uỷ quyền" },
  { role: "CDE / BIM Manager", desc: "Toàn quyền hệ thống & cấu hình", grant: "Full Control" },
];

function PermissionMatrix() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: 18 }}>
      {/* ---- Matrix ---- */}
      <div className="card card-pad">
        <div className="card-title">Ma trận phân quyền</div>
        <div className="card-sub">Theo cấp truy cập · ISO 19650 §6.2</div>
        <table className="tbl" style={{ marginTop: 14 }}>
          <thead><tr>
            <th style={{ paddingLeft: 4 }}>Hành động</th>
            {PERM_LEVELS.map(l => <th key={l} style={{ textAlign: "center" }}>{l}</th>)}
          </tr></thead>
          <tbody>
            {PERM_ROWS.map(row => (
              <tr key={row.cap}>
                <td className="t-strong" style={{ paddingLeft: 4 }}>{row.cap}</td>
                {row.lv.map((val, i) => (
                  <td key={i} style={{ textAlign: "center" }}>
                    {val
                      ? <Icon.check size={15} color="var(--ok)" />
                      : <span style={{ color: "var(--ink-4)" }}>—</span>}
                  </td>
                ))}
              </tr>
            ))}
          </tbody>
        </table>
        <div style={{ display: "flex", flexWrap: "wrap", gap: 14, marginTop: 14, fontSize: 12, color: "var(--ink-3)", fontWeight: 600 }}>
          {PERM_HOLDERS.map(h => <span key={h}>{h}</span>)}
        </div>
      </div>

      {/* ---- ISO role mapping ---- */}
      <div className="card card-pad">
        <div className="card-title">Ánh xạ vai trò ISO 19650</div>
        <div className="card-sub">Vai trò → cấp quyền theo thư mục / trạng thái</div>
        <div style={{ marginTop: 6 }}>
          {ISO_ROLES.map((item, i) => (
            <div key={item.role} style={{ display: "flex", alignItems: "center", gap: 12, padding: "12px 0", borderTop: i ? "1px solid var(--line-soft)" : "none" }}>
              <span style={{ width: 34, height: 34, borderRadius: 9, flex: "none", display: "grid", placeItems: "center", background: "var(--accent-soft)", color: "var(--accent)" }}>
                <Icon.shield size={17} />
              </span>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="t-strong">{item.role}</div>
                <div style={{ fontSize: 12, color: "var(--ink-3)", fontWeight: 500 }}>{item.desc}</div>
              </div>
              <span className="chip">{item.grant}</span>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* ---- Full screen wrapper (Quản trị → Phân quyền) ---- */
function Permissions() {
  return (
    <div className="content">
      <PageHead title="Phân quyền & Vai trò"
        sub="Ma trận RBAC · Ánh xạ vai trò ISO 19650 · Hợp đồng CP-02">
        <button className="btn sm"><Icon.download size={14} /> Xuất ma trận</button>
        <button className="btn sm primary"><Icon.shield size={14} /> Tạo vai trò</button>
      </PageHead>
      <PermissionMatrix />
    </div>
  );
}

window.PermissionMatrix = PermissionMatrix;
window.Permissions = Permissions;