// ELS HRM — Module 02: RBAC shared UI components (FLAT model)
// PermissionItem (5 trạng thái) · DataScopeControl (segmented) · RBACSubNav

// ─── Sub-navigation: Danh sách / Ma trận ────────────────────────────────────────
const RBAC_NAV_TABS = [
  { id:'core/list',   label:'Danh sách vai trò', icon:'users'        },
  { id:'core/matrix', label:'Ma trận quyền',     icon:'check-circle' },
];
const RBACSubNav = ({ active }) => (
  <div className="mb-4 flex items-center gap-0.5 border-b border-border">
    {RBAC_NAV_TABS.map(t => {
      const on = t.id === active;
      return (
        <button key={t.id}
          onClick={() => window.postMessage({ type:'__dc_navigate', slotId:t.id }, '*')}
          className={"-mb-px flex cursor-pointer items-center gap-1.5 border-b-2 bg-transparent px-3.5 py-[9px] text-sm "
            + (on ? "border-primary font-semibold text-foreground" : "border-transparent font-medium text-muted-foreground")}>
          <Icon name={t.icon} size={14} />{t.label}
        </button>
      );
    })}
  </div>
);

// ─── DataScopeControl — segmented 4 nút: Không · Của mình · Phòng ban · Toàn bộ ──
const SCOPE_ORDER = ['none','own','dept','all'];
const DataScopeControl = ({ value='none', onChange, disabled=false, readOnly=false }) => {
  return (
    <div className="inline-flex gap-0.5 rounded-md border border-border bg-muted p-0.5"
      style={{ opacity: disabled ? 0.55 : 1 }}>
      {SCOPE_ORDER.map(key => {
        const m = SCOPE_META[key];
        const on = value === key;
        const interactive = !disabled && !readOnly;
        return (
          <button key={key} type="button"
            onClick={() => interactive && onChange && onChange(key)}
            disabled={disabled}
            className={"flex items-center gap-[5px] whitespace-nowrap rounded-sm border-0 px-[11px] py-[5px] text-xs transition-colors "
              + (on ? "font-semibold shadow-xs" : "font-medium")}
            style={{
              cursor: interactive ? 'pointer' : 'default',
              background: on ? 'var(--color-card)' : 'transparent',
              color: on ? (key==='none' ? 'var(--color-muted-foreground)' : m.color) : 'var(--color-muted-foreground)',
            }}>
            {key!=='none' && <Icon name={m.icon} size={11} style={{ color: on ? m.color : 'var(--color-muted-foreground)' }} />}
            {m.label}
          </button>
        );
      })}
    </div>
  );
};

// ─── ScopeBadge — hiển thị mức scope (đọc-only, dùng trong matrix/sidebar) ───────
const ScopeBadge = ({ scope, dark=false }) => {
  const m = SCOPE_META[scope] || SCOPE_META.none;
  if (scope === 'none') return <Icon name="x" size={13} style={{ color:'var(--color-border)', opacity:0.6 }} />;
  const bg = dark && m.dbg ? m.dbg : m.bg;
  const fg = dark && m.dfg ? m.dfg : m.color;
  return (
    <span className="inline-flex items-center gap-1 rounded-full px-[9px] py-0.5"
      style={{ background:bg, border:`1px solid ${fg}28` }}>
      <Icon name={m.icon} size={10} style={{ color:fg }} />
      <span className="whitespace-nowrap text-xs font-semibold" style={{ color:fg }}>{m.short}</span>
    </span>
  );
};

// ─── PermissionItem — MỘT DÒNG QUYỀN, bỏ hoàn toàn khái niệm kế thừa ────────────
// state: 'granted' | 'denied' | 'baseline' | 'guardrail' | 'readonly'
//   granted   — được cấp; có nút bỏ chọn (X) nếu editable
//   denied    — không cấp; click để cấp nếu editable
//   baseline  — sàn EMPLOYEE: bật & khóa, badge "Nền tảng"
//   guardrail — không khả dụng: disabled, nhãn "Chỉ vai trò hệ thống"
//   readonly  — system role: hiển thị trạng thái, không tương tác
const PermissionItem = ({ label, code, state, granted, note, onToggle }) => {
  const isGuard = state === 'guardrail';
  const isBase  = state === 'baseline';
  const isRO    = state === 'readonly';
  const isOn    = isBase || (state==='granted') || (isRO && granted);
  const editable = state === 'granted' || state === 'denied';

  // Visual config
  let boxBg, boxBorder, checkBg, checkBorder, checkIcon, checkColor, rowOpacity = 1, cursor = 'default';
  if (isGuard) {
    boxBg='transparent'; boxBorder='1px dashed var(--color-border)'; checkBg='var(--color-muted)'; checkBorder='var(--color-border)';
    checkIcon='x'; checkColor='var(--color-muted-foreground)'; rowOpacity=0.65;
  } else if (isBase) {
    boxBg='var(--color-success-soft)'; boxBorder='1px solid color-mix(in oklab, var(--color-success) 22%, transparent)';
    checkBg='var(--color-success)'; checkBorder='var(--color-success)'; checkIcon='check'; checkColor='#fff';
  } else if (isOn) {
    boxBg='var(--color-muted)'; boxBorder='1px solid var(--color-border)'; checkBg='var(--color-primary)'; checkBorder='var(--color-primary)';
    checkIcon='check'; checkColor='var(--color-primary-foreground)'; cursor = editable ? 'pointer' : 'default';
  } else {
    boxBg='transparent'; boxBorder='1px solid transparent'; checkBg='transparent'; checkBorder='var(--color-border-strong)';
    checkIcon=null; checkColor='transparent'; rowOpacity = isRO ? 0.5 : 0.9; cursor = editable ? 'pointer' : 'default';
  }

  return (
    <div
      onClick={() => editable && onToggle && onToggle()}
      title={isGuard ? 'Chỉ dành cho vai trò hệ thống' : isBase ? 'Quyền nền tảng — luôn được bao gồm, không thể bỏ' : ''}
      className="flex items-center gap-[11px] rounded-md px-[11px] py-2 transition-colors"
      style={{ background:boxBg, border:boxBorder, opacity:rowOpacity, cursor }}>
      {/* Check box */}
      <div className="grid size-[17px] shrink-0 place-items-center rounded-[5px]"
        style={{ background:checkBg, border:`1.5px solid ${checkBorder}` }}>
        {checkIcon && <Icon name={checkIcon} size={11} style={{ color:checkColor }} />}
      </div>

      {/* Label + code */}
      <div className="min-w-0 flex-1">
        <div className={"text-sm font-medium leading-[1.3] " + (isGuard ? 'text-muted-foreground' : 'text-foreground')}>{label}</div>
        {code && <div className="mt-px font-mono text-2xs text-muted-foreground">{code}</div>}
      </div>

      {/* Right side: note / state tag / remove */}
      <div className="flex shrink-0 items-center gap-[7px]">
        {note && !isGuard && (
          <span className="rounded-full bg-info-soft px-2 py-px text-xs font-semibold text-info">{note}</span>
        )}
        {isManagePermission(code) && (
          <span className="rounded-full bg-info-soft px-2 py-px text-xs font-semibold text-info">manage</span>
        )}
        {isBase && (
          <span className="inline-flex items-center gap-1 rounded-full bg-success-soft px-2 py-0.5 text-xs font-semibold text-success">
            <Icon name="lock" size={10} />Nền tảng
          </span>
        )}
        {isGuard && (
          <span className="inline-flex items-center gap-1 rounded-full bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground">
            <Icon name="lock" size={10} />Chỉ vai trò hệ thống
          </span>
        )}
        {state==='granted' && (
          <button onClick={(e)=>{ e.stopPropagation(); onToggle && onToggle(); }}
            className="grid size-6 cursor-pointer place-items-center rounded-sm border-0 bg-transparent text-muted-foreground"
            title="Bỏ quyền">
            <Icon name="x" size={13} />
          </button>
        )}
      </div>
    </div>
  );
};

// lock icon (không có trong shared Icon set) — inject vào svg paths runtime
// shared Icon falls back to help-circle; ta vẽ ổ khóa riêng qua wrapper khi cần.
const LockGlyph = ({ size=11, color='currentColor' }) => (
  <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <rect x="3" y="11" width="18" height="11" rx="2" /><path d="M7 11V7a5 5 0 0 1 10 0v4" />
  </svg>
);

Object.assign(window, { RBACSubNav, DataScopeControl, ScopeBadge, PermissionItem, LockGlyph });