// ELS HRM — Module 02: RBAC screens — Danh sách vai trò (A) + Ma trận quyền
// Mô hình FLAT: không kế thừa · level ẩn khỏi UI · scope suy từ data:* explicit.

const CARD = "rounded-xl border border-border bg-card shadow-xs";

// ─── Flat-model banner (tái sử dụng) ────────────────────────────────────────────
const FlatNote = () => (
  <div className="mb-4 flex gap-2.5 rounded-lg bg-info-soft px-3.5 py-[11px]"
    style={{ border:'1px solid color-mix(in oklab, var(--color-info) 22%, transparent)' }}>
    <Icon name="info" size={16} className="mt-px shrink-0" style={{ color:'var(--color-info)' }} />
    <div className="text-xs leading-[1.6] text-foreground">
      <strong>Mô hình phẳng (flat) — không kế thừa.</strong> Quyền hiệu lực của một vai trò là <strong>đúng tập quyền được gán tường minh</strong> cho nó.
      Vai trò cấp cao <em>không</em> tự động có quyền của cấp thấp. Phạm vi dữ liệu được suy trực tiếp từ các quyền <code className="font-mono">data:*</code> mà vai trò đang giữ.
    </div>
  </div>
);

const TypeBadge = ({ isSystem }) => isSystem
  ? <span className="inline-flex items-center gap-1 rounded-full border border-border bg-muted px-[9px] py-0.5 text-xs font-semibold text-muted-foreground"><Icon name="lock" size={10} />Hệ thống</span>
  : <span className="inline-flex items-center gap-1 rounded-full px-[9px] py-0.5 text-xs font-semibold" style={{ background:'oklch(0.96 0.03 300)', color:'oklch(0.5 0.16 300)', border:'1px solid color-mix(in oklab, oklch(0.55 0.16 300) 26%, transparent)' }}><Icon name="edit" size={10} />Tùy chỉnh</span>;

// ─── A. Danh sách vai trò (/roles) — dạng BẢNG ──────────────────────────────────
function RBACListScreen({ dark=false }) {
  const stats = [
    { label:'Tổng vai trò',      val:String(RBAC_ROLES.length),        icon:'shield',   color:'var(--color-primary)'     },
    { label:'Vai trò hệ thống',  val:String(RBAC_SYSTEM_ROLES.length), icon:'lock',     color:'var(--color-info)'        },
    { label:'Vai trò tùy chỉnh', val:String(RBAC_CUSTOM_ROLES.length), icon:'edit',     color:'oklch(0.55 0.16 300)' },
    { label:'Tổng người dùng',   val:String(RBAC_TOTAL_USERS),         icon:'users',    color:'var(--color-success)'     },
  ];
  return (
    <HRMShell active="rbac" dark={dark}
      title="Phân quyền (RBAC)" crumbs={['Hệ thống','Phân quyền']}
      subtitle={`${RBAC_ROLES.length} vai trò · ${RBAC_TOTAL_USERS} người dùng`}
      actions={<>
        <Btn variant="outline" size="sm" icon="file-text">Xuất báo cáo</Btn>
        <Btn variant="primary"  size="sm" icon="plus">Tạo vai trò mới</Btn>
      </>}>

      <RBACSubNav active="core/list" />

      <div className="mb-4 grid grid-cols-4 gap-3">
        {stats.map((s,i)=>(
          <div key={i} className="flex flex-col gap-2 rounded-lg border border-border bg-card px-4 py-3.5">
            <div className="flex items-center justify-between">
              <span className="text-xs font-medium uppercase tracking-[0.04em] text-muted-foreground">{s.label}</span>
              <span className="grid size-9 place-items-center rounded-md" style={{ background:'var(--color-muted)', color:s.color }}><Icon name={s.icon} size={14} /></span>
            </div>
            <div className="text-2xl font-bold leading-none tabular-nums text-foreground">{s.val}</div>
          </div>
        ))}
      </div>

      <FlatNote />

      {/* Bảng vai trò */}
      <div className={CARD + " overflow-hidden"}>
        <div className="overflow-x-auto">
          <table className="w-full border-collapse text-sm">
            <thead>
              <tr className="bg-muted">
                {['Vai trò','Loại','Cấp độ','Người dùng','Số quyền','Phạm vi dữ liệu',''].map((h,i)=>(
                  <th key={i} className="whitespace-nowrap border-b border-border px-[18px] py-2.5 text-xs font-bold uppercase tracking-[0.05em] text-muted-foreground"
                    style={{ textAlign: i>=2 && i<6 ? 'center' : 'left' }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {RBAC_ROLES.map((role, ri) => {
                const summary = dataScopeSummary(role);
                return (
                  <tr key={role.id}
                    onClick={()=>window.postMessage({ type:'__dc_navigate', slotId: role.isSystem ? 'core/detail-system' : 'core/detail-custom' }, '*')}
                    className={"cursor-pointer hover:bg-muted " + (ri<RBAC_ROLES.length-1 ? "border-b border-border" : "")}>
                    <td className="px-[18px] py-[13px]">
                      <div className="flex items-center gap-3">
                        <div className="grid size-9 shrink-0 place-items-center rounded-md" style={{ background:role.bg }}>
                          <Icon name={role.icon} size={16} style={{ color:role.color }} />
                        </div>
                        <div className="min-w-0">
                          <div className="text-sm font-semibold text-foreground">{role.displayName}</div>
                          <div className="mt-px font-mono text-2xs text-muted-foreground">{role.code}</div>
                        </div>
                      </div>
                    </td>
                    <td className="px-[18px] py-[13px]"><TypeBadge isSystem={role.isSystem} /></td>
                    <td className="px-[18px] py-[13px] text-center">
                      <span className="inline-flex min-w-[34px] items-center justify-center rounded-md border border-border bg-muted px-2 py-0.5 text-xs font-bold tabular-nums text-foreground" title="Cấp độ (level) — trần khi gán vai trò">{role.level}</span>
                    </td>
                    <td className="px-[18px] py-[13px] text-center">
                      <span className="inline-flex items-center gap-[5px] text-sm font-semibold">
                        <Icon name="users" size={12} style={{ color:'var(--color-muted-foreground)' }} />{role.users}
                      </span>
                    </td>
                    <td className="px-[18px] py-[13px] text-center">
                      <span className="text-sm font-semibold">{role.full ? 'Toàn bộ' : permCount(role)}</span>
                    </td>
                    <td className="px-[18px] py-[13px] text-center">
                      <ScopeBadge scope={summary.key} dark={dark} />
                    </td>
                    <td className="px-[18px] py-[13px] text-right">
                      <Icon name="chevron-right" size={15} style={{ color:'var(--color-muted-foreground)' }} />
                    </td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>

      <div className="mt-2.5 pl-0.5 text-xs text-muted-foreground">
        Vai trò hệ thống chỉ-đọc (không sửa được quyền). Chỉ vai trò tùy chỉnh mới tạo/sửa được.
      </div>
    </HRMShell>
  );
}

// ─── Ma trận quyền (vai trò × quyền) — EXPLICIT, không kế thừa ───────────────────
const RBACMatrixScreen = () => {
  const [tab, setTab] = React.useState('screen');
  const [hover, setHover] = React.useState(null);

  const TABS = [
    { id:'screen', label:'Màn hình',  icon:'layout-dashboard', count:SCREEN_PERMS.length },
    { id:'data',   label:'Dữ liệu',   icon:'users',            count:DATA_DOMAINS.length },
    { id:'action', label:'Hành động', icon:'check-circle',     count:ACTION_PERMS.length },
  ];

  const BoolCell = ({ on }) => on
    ? <span className="inline-flex items-center gap-1 rounded-full bg-success-soft px-[9px] py-0.5" style={{ border:'1px solid color-mix(in oklab, var(--color-success) 22%, transparent)' }}>
        <Icon name="check" size={11} style={{ color:'var(--color-success)' }} /><span className="text-xs font-semibold text-success">Có</span>
      </span>
    : <Icon name="x" size={13} style={{ color:'var(--color-border)', opacity:0.6 }} />;

  const rows = tab==='screen' ? SCREEN_PERMS : tab==='data' ? DATA_DOMAINS : ACTION_PERMS;

  return (
    <HRMShell active="rbac"
      title="Ma trận phân quyền" crumbs={['Hệ thống','Phân quyền','Ma trận quyền']}
      actions={<Btn variant="outline" size="sm" icon="download">Xuất Excel</Btn>}>

      <RBACSubNav active="core/matrix" />

      <div className={CARD + " overflow-hidden"}>
        {/* Tabs */}
        <div className="flex border-b border-border bg-card px-1.5">
          {TABS.map(t=>(
            <button key={t.id} onClick={()=>setTab(t.id)}
              className={"-mb-px flex cursor-pointer items-center gap-1.5 border-b-2 bg-transparent px-4 py-[11px] text-sm "
                + (tab===t.id ? "border-primary font-semibold text-foreground" : "border-transparent font-medium text-muted-foreground")}>
              <Icon name={t.icon} size={13} />{t.label}
              <span className="rounded-full px-1.5 py-px text-xs font-bold"
                style={{ background: tab===t.id?'var(--color-primary)':'var(--color-muted)', color: tab===t.id?'var(--color-primary-foreground)':'var(--color-muted-foreground)' }}>{t.count}</span>
            </button>
          ))}
        </div>

        {/* Note */}
        <div className="flex items-center gap-2 border-b border-border bg-muted px-[18px] py-2.5 text-xs text-muted-foreground">
          <Icon name="info" size={13} className="shrink-0" style={{ color:'var(--color-info)' }} />
          {tab==='data'
            ? <span>Ô phạm vi dữ liệu hiển thị <strong>mức cao nhất</strong> mà vai trò có cho mỗi domain (Toàn bộ &gt; Phòng ban &gt; Của mình &gt; —). Suy trực tiếp từ quyền <code className="font-mono">data:*</code>, không tô màu kế thừa.</span>
            : <span>Ma trận phản ánh quyền <strong>tường minh (explicit)</strong> của từng vai trò — không có quyền nào được tô màu do kế thừa.</span>}
        </div>

        <div className="overflow-x-auto">
          <table className="w-full border-collapse">
            <thead>
              <tr className="bg-card">
                <th className="sticky left-0 min-w-[240px] border-b border-border bg-card px-[18px] py-2.5 text-left text-xs font-bold uppercase tracking-[0.05em] text-muted-foreground">
                  {tab==='screen'?'Màn hình':tab==='data'?'Domain dữ liệu':'Hành động'}
                </th>
                {RBAC_ROLES.map(role=>(
                  <th key={role.id} className="min-w-[112px] border-b border-border px-3 py-2.5 text-center">
                    <div className="flex flex-col items-center gap-1">
                      <div className="grid size-7 place-items-center rounded-sm" style={{ background:role.bg }}>
                        <Icon name={role.icon} size={13} style={{ color:role.color }} />
                      </div>
                      <span className="text-center text-xs font-semibold leading-[1.15] text-foreground">{role.displayName}</span>
                      {!role.isSystem && <span className="text-2xs font-semibold" style={{ color:'oklch(0.55 0.16 300)' }}>Tùy chỉnh</span>}
                    </div>
                  </th>
                ))}
              </tr>
            </thead>
            <tbody>
              {rows.map((row, i)=>{
                const code = row.code || `data:${row.domain}`;
                const adminOnly = !!row.admin;
                return (
                  <tr key={code} onMouseEnter={()=>setHover(code)} onMouseLeave={()=>setHover(null)}
                    className="border-b border-border" style={{ background: hover===code?'var(--color-muted)':'' }}>
                    <td className="sticky left-0 px-[18px] py-2.5" style={{ background: hover===code?'var(--color-muted)':'var(--color-card)' }}>
                      <div className="flex items-center gap-2">
                        <div>
                          <div className="text-sm font-medium">{row.label}</div>
                          <div className="mt-px font-mono text-2xs text-muted-foreground">{tab==='data' ? `data:${row.domain}:*` : code}</div>
                        </div>
                        {adminOnly && <span className="rounded-full bg-destructive-soft px-[7px] py-px text-2xs font-semibold text-destructive">Chỉ hệ thống</span>}
                        {row.sensitive && <span className="inline-flex items-center gap-[3px] rounded-full bg-warning-soft px-[7px] py-px text-2xs font-semibold" style={{ color:'oklch(0.5 0.12 65)' }}><Icon name="lock" size={9} />Nhạy cảm</span>}
                        {isManagePermission(code) && <span className="inline-flex items-center gap-[3px] rounded-full bg-info-soft px-[7px] py-px text-2xs font-semibold text-info"><Icon name="settings" size={9} />manage</span>}
                      </div>
                    </td>
                    {RBAC_ROLES.map(role=>(
                      <td key={role.id} className="px-3 py-[9px] text-center">
                        {tab==='data'
                          ? <ScopeBadge scope={domainScope(role, row.domain)} />
                          : <BoolCell on={roleHas(role, code)} />}
                      </td>
                    ))}
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>

        {/* Legend */}
        <div className="flex flex-wrap items-center gap-2 border-t border-border px-[18px] py-[11px]">
          <span className="mr-1 text-xs font-semibold text-muted-foreground">Chú thích:</span>
          {tab==='data'
            ? ['all','dept','own','none'].map(k=>(
                <div key={k} className="flex items-center gap-[5px]"><ScopeBadge scope={k} /></div>
              ))
            : <>
                <span className="inline-flex items-center gap-1 rounded-full bg-success-soft px-[9px] py-0.5" style={{ border:'1px solid color-mix(in oklab, var(--color-success) 22%, transparent)' }}><Icon name="check" size={11} style={{ color:'var(--color-success)' }} /><span className="text-xs font-semibold text-success">Có</span></span>
                <span className="inline-flex items-center gap-1"><Icon name="x" size={12} style={{ color:'var(--color-border-strong)' }} /><span className="text-xs text-muted-foreground">Không cấp</span></span>
              </>}
        </div>
      </div>
    </HRMShell>
  );
};

Object.assign(window, { RBACListScreen, RBACMatrixScreen, FlatNote, TypeBadge });