// ELS HRM — Module 04: Dialog "Gỡ vai trò" (multi-role RBAC)
// Bổ sung theo HRM-365 / TC-RBAC-G07: gỡ vai trò phụ có ô "Lý do gỡ (tùy chọn)"
// (hợp G08 — lý do không bắt buộc) và ghi vết audit ROLE_REVOKED đủ trường
// (người thực hiện · thời điểm · IP · lý do). Đồng bộ phong cách với dialog
// "Gán thêm vai trò" (Lý do gán) và "Đặt lại mật khẩu" (Lý do) trong module này.

// ─── Dialog xác nhận gỡ vai trò + lý do tùy chọn ─────────────────────────────
const UMRemoveRoleDialog = ({ name = 'Nguyễn Thị Lan', roleName = 'Dept. Manager', onClose = () => {} }) => (
  <div className="absolute inset-0 z-[60] grid place-items-center bg-black/50" onClick={onClose}>
    <div onClick={(e) => e.stopPropagation()}
      className="flex max-h-[90%] w-[480px] max-w-[92%] flex-col rounded-lg bg-popover shadow-2xl outline outline-4 outline-[oklch(0.92_0_0_/_0.6)]">
      {/* Header */}
      <div className="flex items-start justify-between border-b border-border px-[22px] pb-3.5 pt-[18px]">
        <div className="flex gap-[11px]">
          <div className="grid size-[34px] shrink-0 place-items-center rounded-md bg-destructive-soft">
            <Icon name="trash" size={17} className="text-destructive" />
          </div>
          <div>
            <div className="text-md font-bold">Gỡ vai trò</div>
            <div className="mt-[3px] text-xs text-muted-foreground">
              Gỡ <strong className="text-foreground">{roleName}</strong> khỏi <strong className="text-foreground">{name}</strong>
            </div>
          </div>
        </div>
        <Btn variant="ghost" size="sm" iconOnly icon="x" onClick={onClose} />
      </div>

      {/* Body */}
      <div className="flex-1 overflow-y-auto px-[22px] py-4">
        {/* Hệ quả */}
        <div className="mb-[18px] flex gap-2 rounded-md bg-destructive-soft px-3.5 py-3">
          <Icon name="alert-circle" size={14} className="mt-px shrink-0 text-destructive" />
          <div className="text-xs leading-[1.5] text-destructive">
            Người dùng sẽ mất các quyền do vai trò này cấp (trừ khi trùng với vai trò khác đang giữ). Thao tác ghi nhật ký <span className="font-semibold">ROLE_REVOKED</span> kèm người thực hiện, thời điểm và IP.
          </div>
        </div>

        {/* Lý do gỡ (tùy chọn) */}
        <div className="mb-1.5 text-xs font-semibold">
          Lý do gỡ <span className="font-normal text-muted-foreground">(tùy chọn)</span>
        </div>
        <textarea rows={2} placeholder="vd: Chuyển bộ phận, kết thúc dự án..."
          className="w-full resize-none rounded-md border border-input bg-transparent px-[11px] py-2 text-base leading-[1.5] text-foreground shadow-xs transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring" />
        <div className="mt-1.5 flex items-start gap-1.5 text-2xs leading-[1.5] text-muted-foreground">
          <Icon name="info" size={11} className="mt-0.5 shrink-0" />
          <span>Lý do là tùy chọn (đồng nhất G08). Để trống thì nhật ký hiển thị “Không có”.</span>
        </div>
      </div>

      {/* Footer */}
      <div className="flex items-center justify-end gap-2 border-t border-border px-[22px] py-3">
        <Btn variant="outline" size="sm" onClick={onClose}>Hủy</Btn>
        <Btn variant="destructive" size="sm" icon="trash" onClick={onClose}>Gỡ vai trò</Btn>
      </div>
    </div>
  </div>
);

// Wrapper cho canvas — dialog gỡ hiển thị trên nền trang chi tiết (tab Vai trò).
// Nguyễn Thị Lan (uid 2) có Dept. Manager là vai trò phụ → gỡ được.
const UMRemoveRoleScreen = () => (
  <div className="relative size-full">
    <UMDetailScreen uid={2} initialTab="roles" />
    <UMRemoveRoleDialog name="Nguyễn Thị Lan" roleName="Dept. Manager" onClose={() => {}} />
  </div>
);

Object.assign(window, { UMRemoveRoleDialog, UMRemoveRoleScreen });