// ELS HRM — Module 04: Quản Lý Người Dùng — All Screens — Tailwind utility classes

// shadcn table styling reproduced via arbitrary child variants (1 className, structure untouched)
const TABLE_CLS = "w-full border-collapse text-sm "
  + "[&_thead_th]:border-b [&_thead_th]:border-border [&_thead_th]:bg-muted [&_thead_th]:px-3.5 [&_thead_th]:py-2.5 [&_thead_th]:text-left [&_thead_th]:text-xs [&_thead_th]:font-semibold [&_thead_th]:uppercase [&_thead_th]:tracking-[0.04em] [&_thead_th]:text-muted-foreground [&_thead_th]:whitespace-nowrap "
  + "[&_tbody_td]:border-b [&_tbody_td]:border-border [&_tbody_td]:px-3.5 [&_tbody_td]:py-3 [&_tbody_td]:align-middle [&_tbody_td]:text-foreground "
  + "[&_tbody_tr:last-child_td]:border-0 [&_tbody_tr:hover]:bg-muted";

const CARD = "rounded-xl border border-border bg-card shadow-xs";
const INPUT_SM = "h-8 w-full rounded-md border border-input bg-transparent px-3 text-xs text-foreground shadow-xs transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring";
const INPUT = "h-9 w-full rounded-md border border-input bg-transparent px-3 text-base text-foreground shadow-xs transition-colors placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-[3px] focus:ring-ring";

// extra = số vai trò phụ (để hiển thị chỉ báo "+N"). role/rv = vai trò CHÍNH.
const UM_USERS = [
{ id: 1, name: 'Hồ Văn Minh', un: 'minh.ho', email: 'minh.ho@els.tech', role: 'Admin', rv: 'info', extra: 0, st: 'ACTIVE', ll: '13/05/2026 08:32', dept: 'IT', emp: 'EMP-2024-0001' },
{ id: 2, name: 'Nguyễn Thị Lan', un: 'lan.nguyen', email: 'lan.nguyen@els.tech', role: 'HR Manager', rv: 'primary', extra: 2, st: 'ACTIVE', ll: '13/05/2026 09:15', dept: 'Nhân sự', emp: 'EMP-2024-0008' },
{ id: 3, name: 'Trần Minh Tuấn', un: 'tuan.tran', email: 'tuan.tran@els.tech', role: 'Dept. Manager', rv: 'neutral', extra: 1, st: 'ACTIVE', ll: '12/05/2026 17:45', dept: 'Engineering', emp: 'EMP-2024-0015' },
{ id: 4, name: 'Lê Thị Phương', un: 'phuong.le', email: 'phuong.le@els.tech', role: 'Employee', rv: 'neutral', extra: 0, st: 'ACTIVE', ll: '13/05/2026 08:55', dept: 'Marketing', emp: 'EMP-2025-0032' },
{ id: 5, name: 'Phạm Đức Long', un: 'long.pham', email: 'long.pham@els.tech', role: 'Employee', rv: 'neutral', extra: 0, st: 'INACTIVE', ll: '20/04/2026 14:22', dept: 'Kinh doanh', emp: 'EMP-2025-0041' },
{ id: 6, name: 'Võ Thị Thu', un: 'thu.vo', email: 'thu.vo@els.tech', role: null, rv: null, extra: 0, st: 'PENDING', ll: null, dept: 'Tài chính', emp: 'EMP-2026-0002' },
{ id: 7, name: 'Đỗ Văn Hùng', un: 'hung.do', email: 'hung.do@els.tech', role: 'Employee', rv: 'neutral', extra: 0, st: 'LOCKED', ll: '10/05/2026 11:30', dept: 'Engineering', emp: 'EMP-2025-0028' },
{ id: 8, name: 'Bùi Thị Linh', un: 'linh.bui', email: 'linh.bui@els.tech', role: 'HR Manager', rv: 'primary', extra: 1, st: 'ACTIVE', ll: '13/05/2026 07:48', dept: 'Nhân sự', emp: 'EMP-2024-0009' }];


const UM_ST = {
  ACTIVE: { label: 'Hoạt động', v: 'success' },
  INACTIVE: { label: 'Vô hiệu', v: 'neutral' },
  PENDING: { label: 'Chờ duyệt', v: 'warning' },
  LOCKED: { label: 'Bị khóa', v: 'danger' }
};

// màu chấm theo trạng thái — khớp dot của Badge
const UM_ST_DOT = {
  ACTIVE: 'var(--color-success)',
  INACTIVE: 'var(--color-muted-foreground)',
  PENDING: 'oklch(0.55 0.158 65)',
  LOCKED: 'var(--color-destructive)'
};
const UM_ST_ORDER = ['ACTIVE', 'PENDING', 'INACTIVE', 'LOCKED'];

// ─── Dropdown đổi trạng thái tài khoản ───────────────────────────────────────
const UMStatusMenu = ({ current, onChange, defaultOpen = false }) => {
  const [open, setOpen] = React.useState(defaultOpen);
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (!open) return;
    const h = (e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); };
    document.addEventListener('pointerdown', h, true);
    return () => document.removeEventListener('pointerdown', h, true);
  }, [open]);
  // [HRM-305] Khi tài khoản đang LOCKED, KHÔNG cho đổi thẳng sang ACTIVE qua menu này —
  // gỡ khóa phải dùng nút "Mở khóa tài khoản" (bắn AccountUnlockedEvent + audit ACCOUNT_UNLOCKED).
  const options = UM_ST_ORDER.filter((k) => k !== current && !(current === 'LOCKED' && k === 'ACTIVE'));
  return (
    <div ref={ref} className="relative">
      <Btn variant="outline" size="sm" icon="check-circle" iconRight="chevron-down"
        onClick={() => setOpen((o) => !o)}>Đổi trạng thái</Btn>
      {open &&
      <div className="absolute right-0 top-[calc(100%+6px)] z-[60] min-w-[190px] rounded-lg border border-border bg-popover p-[5px] shadow-lg">
          {options.map((k) => {
          const st = UM_ST[k];
          return (
            <div key={k} onClick={() => { onChange && onChange(k); setOpen(false); }}
              onMouseEnter={(e) => e.currentTarget.style.background = 'var(--color-accent)'}
              onMouseLeave={(e) => e.currentTarget.style.background = 'transparent'}
              className="flex cursor-pointer items-center gap-[9px] rounded-sm px-[11px] py-2 text-sm">
                <span className="size-[7px] shrink-0 rounded-full" style={{ background: UM_ST_DOT[k] }} />
                {st.label}
              </div>);
        })}
        </div>}
    </div>);
};

// ─── Skeleton box ───────────────────────────────────────────────────────────
const SkelBox = ({ w = '100%', h = 14, r = 5 }) =>
<div style={{ width: w, height: h, borderRadius: r, background: 'var(--color-muted)', opacity: 0.7,
  animation: 'skel 1.4s ease-in-out infinite',
  backgroundImage: 'linear-gradient(90deg,var(--color-muted) 25%,var(--color-accent) 50%,var(--color-muted) 75%)',
  backgroundSize: '200% 100%'
}} />;


// ─── Stats row shared ────────────────────────────────────────────────────────
const UMStats = ({ active = 231, pending = 8, locked = 3, total = 247 }) =>
<div className="mb-[18px] grid grid-cols-4 gap-3">
    {[
  { label: 'Tổng tài khoản', value: String(total), delta: '+12 tháng này', dir: 'up', icon: 'users', ib: 'var(--color-info-soft)', ic: 'var(--color-info)' },
  { label: 'Đang hoạt động', value: String(active), delta: '93.5%', dir: 'up', icon: 'check-circle', ib: 'var(--color-success-soft)', ic: 'var(--color-success)' },
  { label: 'Chờ phê duyệt', value: String(pending), delta: `${pending} mới`, dir: 'up', icon: 'clock', ib: 'var(--color-warning-soft)', ic: 'var(--color-warning)' },
  { label: 'Tài khoản bị khóa', value: String(locked), delta: 'Cần xử lý', dir: 'down', icon: 'x-circle', ib: 'var(--color-destructive-soft)', ic: 'var(--color-destructive)' }].
  map((s, i) => <StatCard key={i} label={s.label} value={s.value} delta={s.delta} deltaDir={s.dir} icon={s.icon} iconBg={s.ib} iconColor={s.ic} />)}
  </div>;


// ─── 01 · User List ──────────────────────────────────────────────────────────
const UMListScreen = ({ dark = false }) =>
<HRMShell active="users" dark={dark}
title="Quản lý người dùng" meta="247 tài khoản"
crumbs={['Người dùng']}
actions={<>
      <Btn variant="outline" size="sm" icon="download">Xuất Excel</Btn>
      <Btn variant="primary" size="sm" icon="plus">Thêm người dùng</Btn>
    </>}>
    <UMStats />

    {/* Filter bar */}
    <div className={CARD + " mb-3.5 flex items-center gap-2.5 px-3.5 py-2.5"}>
      <div className="relative flex w-[260px] items-center">
        <Icon name="search" size={13} className="pointer-events-none absolute left-2.5 size-3.5 text-muted-foreground" />
        <input className={INPUT_SM + " pl-8"} placeholder="Tìm người dùng..." />
      </div>
      <Select className="h-8 text-xs w-[148px] cursor-pointer"
        options={['Tất cả vai trò', 'Admin', 'HR Manager', 'Dept. Manager', 'Employee']}
        defaultValue="Tất cả vai trò" />
      <Select className="h-8 text-xs w-[148px] cursor-pointer"
        options={['Tất cả trạng thái', 'Hoạt động', 'Vô hiệu', 'Chờ duyệt', 'Bị khóa']}
        defaultValue="Tất cả trạng thái" />
      <Btn variant="outline" size="sm" icon="filter">Lọc thêm</Btn>
      <div className="flex-1" />
      <span className="text-xs text-muted-foreground">1–8 / 247 người dùng</span>
    </div>

    {/* Table */}
    <div className="overflow-hidden rounded-lg border border-border bg-card">
      <table className={TABLE_CLS}>
        <thead>
          <tr>
            <th style={{ width: 40 }}><input type="checkbox" /></th>
            <th>Người dùng</th>
            <th>Email</th>
            <th>Vai trò</th>
            <th>Trạng thái</th>
            <th>Đăng nhập lần cuối</th>
            <th style={{ width: 90 }}>Thao tác</th>
          </tr>
        </thead>
        <tbody>
          {UM_USERS.map((u) => {
          const s = UM_ST[u.st];
          return (
            <tr key={u.id}>
                <td><input type="checkbox" /></td>
                <td>
                  <div className="flex items-center gap-2.5">
                    <Avatar name={u.name} />
                    <div>
                      <div className="font-medium text-foreground">{u.name}</div>
                      <div className="text-xs text-muted-foreground">@{u.un} · {u.emp}</div>
                    </div>
                  </div>
                </td>
                <td className="text-sm text-muted-foreground">{u.email}</td>
                <td>{u.role
                  ? <RoleCell role={u.role} variant={u.rv} extra={u.extra} title={u.extra > 0 ? `${u.role} + ${u.extra} vai trò phụ` : u.role} />
                  : <span className="text-xs italic text-muted-foreground">Chưa gán</span>}</td>
                <td><Badge variant={s.v} dot>{s.label}</Badge></td>
                <td className="text-xs text-muted-foreground">{u.ll || '—'}</td>
                <td>
                  <div className="flex gap-[3px]">
                    <Btn variant="ghost" size="sm" iconOnly icon="edit" />
                    <Btn variant="ghost" size="sm" iconOnly icon="more-vertical" />
                  </div>
                </td>
              </tr>);

        })}
        </tbody>
      </table>
      <div className="flex items-center justify-between border-t border-border px-4 py-2.5">
        <span className="text-xs text-muted-foreground">Trang 1 / 31 · 247 người dùng</span>
        <div className="flex gap-1">
          <Btn variant="outline" size="xs" iconOnly icon="chevron-left" />
          {[1, 2, 3, '…', 31].map((p, i) =>
        <button key={i}
          className={"h-7 min-w-7 rounded-sm border px-[7px] text-xs " + (p === 1 ? "border-primary bg-primary font-semibold text-white" : "border-border bg-card text-foreground")}
          style={{ cursor: 'pointer' }}>{p}</button>
        )}
          <Btn variant="outline" size="xs" iconOnly icon="chevron-right" />
        </div>
      </div>
    </div>
  </HRMShell>;


// ─── 02 · User Detail ────────────────────────────────────────────────────────
const UMDetailScreen = ({ uid = 2, initialTab = 'roles', dialogOpen = false, roleError = false, resetOpen = false, resetDone = false, editOpen = false, statusOpen = false, emailVerified = true }) => {
  const emailVerifiedAtStr = '01/03/2024 09:02';
  const [tab, setTab] = React.useState(initialTab);
  const [dlg, setDlg] = React.useState(dialogOpen);
  const [err, setErr] = React.useState(roleError);
  const [reset, setReset] = React.useState(resetOpen);
  const [editing, setEditing] = React.useState(editOpen);
  const u = UM_USERS.find((x) => x.id === uid) || UM_USERS[1];
  const [status, setStatus] = React.useState(u.st);
  const s = UM_ST[status];
  const roles = UM_USER_ROLES[u.id] || [];
  const primaryRole = roles.find((r) => r.primary);

  const TABS = [
  { id: 'info', label: 'Thông tin' },
  { id: 'roles', label: 'Vai trò' },
  { id: 'sessions', label: 'Phiên đăng nhập' },
  { id: 'history', label: 'Lịch sử' }];

  const HeaderRoles = () => roles.length === 0
    ? <Badge variant="warning" dot>Chưa gán vai trò</Badge>
    : <RoleCell role={roleMeta(primaryRole.key).name} variant={u.rv || 'primary'} extra={roles.length - 1} />;

  return (
    <div className="relative size-full">
    {editing
    ? <UMEditScreen uid={u.id} onBack={() => setEditing(false)} onReset={() => setReset(true)} />
    : <HRMShell active="users"
    title={u.name} meta={<Badge variant={s.v} dot>{s.label}</Badge>}
    crumbs={['Người dùng', u.name]}
    actions={<>
        <Btn variant="outline" size="sm" icon="edit" onClick={() => setEditing(true)}>Chỉnh sửa</Btn>
        <Btn variant="outline" size="sm" icon="settings" onClick={() => setReset(true)}>Đặt lại MK</Btn>
        <UMStatusMenu current={status} defaultOpen={statusOpen} onChange={setStatus} />
      </>}>
      {/* [HRM-304] Banner + nút Mở khóa khi tài khoản LOCKED — gỡ khóa qua endpoint unlock riêng
          của @hrm/auth (bắn AccountUnlockedEvent + audit ACCOUNT_UNLOCKED), không dùng change-status. */}
      {status === 'LOCKED' &&
      <div className="mb-[18px] flex items-start gap-3 rounded-md bg-destructive-soft px-4 py-3" style={{ border: '1px solid oklch(0.601 0.215 12 / 0.3)' }}>
        <Icon name="lock" size={16} className="mt-0.5 shrink-0 text-destructive" />
        <div className="flex-1">
          <div className="text-sm font-semibold text-destructive">Tài khoản đang bị khóa</div>
          <div className="mt-0.5 text-xs leading-[1.55] text-destructive opacity-90">
            Bị khóa tự động do nhập sai mật khẩu quá giới hạn. Nhấn “Mở khóa tài khoản” để khôi phục đăng nhập — thao tác ghi nhật ký <span className="font-medium">ACCOUNT_UNLOCKED</span> và phát sự kiện mở khóa (khác với đổi trạng thái thủ công).
          </div>
        </div>
        <Btn variant="primary" size="sm" icon="key" onClick={() => setStatus('ACTIVE')}>Mở khóa tài khoản</Btn>
      </div>}
      <div className="grid grid-cols-[280px_1fr] gap-[18px]">

        {/* Left */}
        <div className="flex flex-col gap-3">
          <div className={CARD + " p-5"}>
            <div className="mb-3.5 border-b border-border pb-4 text-center">
              <div className="mb-2.5 flex justify-center">
                <Avatar name={u.name} size="xl" />
              </div>
              <div className="text-md font-bold">{u.name}</div>
              <div className="mt-0.5 text-xs text-muted-foreground">@{u.un}</div>
              <div className="mt-2 flex flex-wrap justify-center gap-1.5">
                <Badge variant={s.v} dot>{s.label}</Badge>
                <HeaderRoles />
              </div>
            </div>
            {[
            { icon: 'mail', label: 'Email', val: (
              <div className="flex flex-col items-start gap-1">
                <span>{u.email}</span>
                {emailVerified
                  ? <Badge variant="success" dot>Đã xác thực</Badge>
                  : <Badge variant="warning" dot>Chưa xác thực</Badge>}
              </div>
            ) },
            { icon: 'building', label: 'Phòng ban', val: u.dept },
            { icon: 'user', label: 'Mã nhân viên', val: u.emp },
            { icon: 'clock', label: 'Lần cuối', val: u.ll },
            { icon: 'calendar', label: 'Ngày tạo', val: '01/03/2024' }].
            map((it, i) =>
            <div key={i} className="mb-2.5 flex gap-[9px]">
                <Icon name={it.icon} size={13} className="mt-[3px] shrink-0 text-muted-foreground" />
                <div>
                  <div className="text-xs text-muted-foreground">{it.label}</div>
                  <div className="text-xs font-medium">{it.val}</div>
                </div>
              </div>
            )}
          </div>
          <div className={CARD + " p-3.5"}>
            <div className="mb-2 text-2xs font-bold uppercase tracking-[0.07em] text-muted-foreground">Thao tác nhanh</div>
            {[
            { icon: 'settings', label: 'Đặt lại mật khẩu', color: 'var(--color-info)', onClick: () => setReset(true) },
            { icon: 'inbox', label: 'Gửi lại email chào mừng', color: 'var(--color-primary)' },
            ...(emailVerified ? [] : [{ icon: 'send', label: 'Gửi lại email xác thực', color: 'oklch(0.55 0.158 65)' }])].
            map((a, i) =>
            <div key={i} onClick={a.onClick} className="flex cursor-pointer items-center gap-2 rounded-sm px-1.5 py-[7px] text-sm">
                <Icon name={a.icon} size={14} className="shrink-0" style={{ color: a.color }} />
                <span>{a.label}</span>
              </div>
            )}

            {/* Vùng nguy hiểm — vô hiệu hóa (change-status) tách khỏi xóa mềm (DELETE) */}
            <div className="mt-2.5 border-t border-border pt-2.5">
              <div className="mb-1.5 text-2xs font-bold uppercase tracking-[0.07em] text-destructive">Vùng nguy hiểm</div>
              {[
              { icon: 'x-circle', label: 'Vô hiệu hóa tài khoản', sub: 'Chặn đăng nhập · có thể kích hoạt lại' },
              { icon: 'trash', label: 'Xóa tài khoản', sub: 'Xóa mềm · trạng thái cuối, không khôi phục' }].
              map((a, i) =>
              <div key={i} className="flex cursor-pointer items-start gap-2 rounded-sm px-1.5 py-[7px]">
                  <Icon name={a.icon} size={14} className="mt-0.5 shrink-0 text-destructive" />
                  <div>
                    <div className="text-sm text-destructive">{a.label}</div>
                    <div className="mt-px text-2xs text-muted-foreground">{a.sub}</div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </div>

        {/* Right — tabs */}
        <div className={CARD + " overflow-hidden"}>
          <div className="flex gap-0 border-b border-border px-5">
            {TABS.map((t) =>
            <div key={t.id}
              className={"-mb-px cursor-pointer border-b-2 px-4 py-3 text-base font-medium " + (tab === t.id ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground")}
              onClick={() => setTab(t.id)}>
                {t.label}
              </div>
            )}
          </div>
          <div className="p-5">
            {tab === 'info' &&
            <div className="grid grid-cols-2 gap-x-6 gap-y-0">
                {[
              ['Tên đăng nhập', `@${u.un}`],
              ['Email công ty', u.email],
              ['Email đã xác thực', emailVerified
                ? <Badge variant="success" dot>{`Đã xác thực · ${emailVerifiedAtStr}`}</Badge>
                : <Badge variant="warning" dot>Chưa xác thực</Badge>],
              ['Trạng thái', <Badge variant={s.v} dot>{s.label}</Badge>],
              ['Số lần đăng nhập lỗi', '0'],
              ['Ngày tạo tài khoản', '01/03/2024 09:00'],
              ['Người tạo', 'Hồ Văn Minh (Sys Admin)'],
              ['Đăng nhập lần cuối', u.ll],
              ['Liên kết nhân viên', u.emp],
              ['Phải đổi MK lần đầu', 'Đã hoàn tất'],
              ['Phòng ban', u.dept]].
              map(([label, val], i) =>
              <div key={i} className="border-b border-border py-[9px]">
                    <div className="mb-[3px] text-xs text-muted-foreground">{label}</div>
                    <div className="text-sm font-medium">{val}</div>
                  </div>
              )}
              </div>
            }
            {tab === 'roles' &&
            <UMRoleManager name={u.name} roles={roles}
              error={err}
              onToggleError={() => setErr(false)}
              onAssignClick={() => setDlg(true)} />
            }
            {tab === 'sessions' &&
            <div>
                <div className="mb-3.5 flex justify-between">
                  <div className="text-base font-semibold">2 phiên hoạt động</div>
                  <Btn variant="outline-primary" size="sm" icon="x">Kết thúc tất cả</Btn>
                </div>
                {[
              { device: 'Chrome 124 · macOS Sonoma', ip: '103.21.45.12', loc: 'Hà Nội, VN', start: '13/05 09:15', last: '3 phút trước', cur: true },
              { device: 'Mobile Safari · iOS 17.5', ip: '1.54.218.9', loc: 'Hà Nội, VN', start: '12/05 17:30', last: '22 giờ trước', cur: false }].
              map((ses, i) =>
              <div key={i} className={"mb-2 flex items-center gap-3 rounded-md border border-border p-3 " + (ses.cur ? "bg-primary-soft" : "")}>
                    <Icon name={ses.device.includes('Mobile') ? 'phone' : 'globe'} size={18} className={"shrink-0 " + (ses.cur ? "text-primary" : "text-muted-foreground")} />
                    <div className="flex-1">
                      <div className="flex items-center gap-1.5 text-sm font-medium">
                        {ses.device}
                        {ses.cur && <Badge variant="success" dot>Hiện tại</Badge>}
                      </div>
                      <div className="mt-0.5 text-xs text-muted-foreground">{ses.ip} · {ses.loc} · {ses.last}</div>
                    </div>
                    {!ses.cur && <Btn variant="outline" size="xs">Kết thúc</Btn>}
                  </div>
              )}
              </div>
            }
            {tab === 'history' &&
            <div>
                <div className="mb-3.5 text-base font-semibold">Lịch sử thay đổi tài khoản</div>
                {[
              { icon: 'award', color: 'var(--color-primary)', action: 'Vai trò được gán', desc: 'HR Manager được gán bởi Hồ Văn Minh', time: '01/03/2024 09:05' },
              { icon: 'check-circle', color: 'var(--color-success)', action: 'Tài khoản được kích hoạt', desc: 'Email đã xác thực thành công', time: '01/03/2024 09:02' },
              { icon: 'user', color: 'var(--color-info)', action: 'Tài khoản được tạo', desc: 'Tạo bởi Hồ Văn Minh (Admin)', time: '01/03/2024 09:00' }].
              map((ev, i) =>
              <div key={i} className={"mb-3 flex gap-3 pb-3 " + (i < 2 ? "border-b border-border" : "")}>
                    <div className="grid size-8 shrink-0 place-items-center rounded-full bg-muted">
                      <Icon name={ev.icon} size={14} style={{ color: ev.color }} />
                    </div>
                    <div>
                      <div className="text-sm font-semibold">{ev.action}</div>
                      <div className="mt-0.5 text-xs text-muted-foreground">{ev.desc}</div>
                      <div className="mt-1 text-xs text-muted-foreground">{ev.time}</div>
                    </div>
                  </div>
              )}
              </div>
            }
          </div>
        </div>
      </div>
    </HRMShell>}

      {dlg &&
        <UMAssignRoleDialog name={u.name} currentRoles={roles}
          initialSelected={dialogOpen ? ['payroll_officer', 'recruiter'] : []}
          onClose={() => setDlg(false)} />}
      {reset &&
        <UMResetPasswordDialog name={u.name} done={resetDone} onClose={() => setReset(false)} />}
    </div>);

};

// ─── 03 · Create User Form ───────────────────────────────────────────────────
const UMCreateScreen = () =>
<HRMShell active="users"
title="Thêm người dùng mới"
crumbs={['Người dùng', 'Thêm mới']}
actions={<>
      <Btn variant="outline" size="sm">Hủy</Btn>
      <Btn variant="primary" size="sm">Tạo tài khoản</Btn>
    </>}>
    <div className="grid max-w-full grid-cols-[1fr_340px] gap-[18px]">

      {/* Form */}
      <div className={CARD + " p-6"}>
        {/* Thông tin tài khoản */}
        <div className="mb-[18px] flex items-center gap-2">
          <div className="grid size-7 place-items-center rounded-md bg-primary-soft"><Icon name="user" size={14} className="text-primary" /></div>
          <span className="text-base font-bold">Thông tin tài khoản</span>
        </div>
        <div className="mb-4 grid grid-cols-2 gap-3.5">
          {[
        { label: 'Tên đăng nhập *', ph: 'vd: nguyen.van.an', ic: 'user' },
        { label: 'Email công ty *', ph: 'nguyen.van.an@els.tech', ic: 'mail' }].
        map((f, i) =>
        <div key={i}>
              <label className="mb-[5px] block text-xs font-medium">{f.label}</label>
              <div className="relative flex items-center">
                <Icon name={f.ic} size={13} className="pointer-events-none absolute left-2.5 size-3.5 text-muted-foreground" />
                <input className={INPUT + " pl-8"} placeholder={f.ph} />
              </div>
            </div>
        )}
        </div>
        <div className="mb-4 grid grid-cols-2 gap-3.5">
          {[
        { label: 'Mật khẩu tạm thời *', type: 'password', ph: 'Tối thiểu 8 ký tự' },
        { label: 'Xác nhận mật khẩu *', type: 'password', ph: 'Nhập lại mật khẩu' }].
        map((f, i) =>
        <div key={i}>
              <label className="mb-[5px] block text-xs font-medium">{f.label}</label>
              <input className={INPUT} type={f.type} placeholder={f.ph} />
            </div>
        )}
        </div>
        <div className="mb-5 flex gap-2 rounded-md bg-info-soft px-3.5 py-2.5">
          <Icon name="alert-circle" size={14} className="mt-0.5 shrink-0 text-info" />
          <div className="text-xs" style={{ color: 'oklch(0.385 0.062 222)' }}>
            Người dùng sẽ được yêu cầu đổi mật khẩu khi đăng nhập lần đầu. Mật khẩu tạm thời sẽ được gửi qua email.
          </div>
        </div>

        {/* Phân quyền */}
        <div className="mb-4 border-t border-border pt-5">
          <div className="mb-3.5 flex items-center gap-2">
            <div className="grid size-7 place-items-center rounded-md bg-primary-soft"><Icon name="award" size={14} className="text-primary" /></div>
            <span className="text-base font-bold">Phân quyền</span>
          </div>
          <div className="grid grid-cols-2 gap-3.5">
            <div>
              <label className="mb-[5px] block text-xs font-medium">Vai trò chính *</label>
              <Select className="cursor-pointer" placeholder="— Chọn vai trò —"
                options={['Admin', 'HR Manager', 'Dept. Manager', 'Employee']} />
            </div>
            <div>
              <label className="mb-[5px] block text-xs font-medium">Trạng thái ban đầu</label>
              <Select className="cursor-pointer" defaultValue="pending"
                options={[{ value: 'pending', label: 'Chờ xác thực email (mặc định)' }, { value: 'active', label: 'Kích hoạt ngay' }]} />
            </div>
          </div>
          <div className="mt-2.5 flex items-start gap-1.5 text-xs leading-[1.5] text-muted-foreground">
            <Icon name="info" size={12} className="mt-0.5 shrink-0" />
            <span>Tài khoản mới cần ít nhất một vai trò khởi tạo. Có thể <strong>gán thêm vai trò phụ</strong> sau khi tạo, tại tab <strong>Vai trò</strong> trong trang chi tiết người dùng.</span>
          </div>
        </div>

        {/* Liên kết nhân viên */}
        <div className="border-t border-border pt-[18px]">
          <div className="mb-3.5 flex items-center gap-2">
            <div className="grid size-7 place-items-center rounded-md bg-primary-soft"><Icon name="users" size={14} className="text-primary" /></div>
            <span className="text-base font-bold">Liên kết hồ sơ nhân viên <span className="text-xs font-normal text-muted-foreground">(tùy chọn)</span></span>
          </div>
          <div className="relative flex items-center">
            <Icon name="search" size={13} className="pointer-events-none absolute left-2.5 size-3.5 text-muted-foreground" />
            <input className={INPUT + " pl-8"} placeholder="Tìm theo tên hoặc mã nhân viên (EMP-XXXX-XXXX)..." />
          </div>
          <div className="mt-1.5 text-xs text-muted-foreground">
            Để trống nếu là tài khoản kỹ thuật (Admin, Bot) không cần liên kết hồ sơ nhân sự.
          </div>
        </div>
      </div>

      {/* Right sidebar */}
      <div className="flex flex-col gap-3">
        <div className={CARD + " p-[18px]"}>
          <div className="mb-3 text-sm font-bold">Xem trước tài khoản</div>
          {[
        { label: 'Tên đăng nhập', val: '—' },
        { label: 'Email', val: '—' },
        { label: 'Vai trò', val: 'Employee' },
        { label: 'Trạng thái', val: <Badge variant="warning" dot>Chờ xác thực</Badge> }].
        map((f, i) =>
        <div key={i} className="flex items-center justify-between border-b border-border py-[7px]">
              <span className="text-xs text-muted-foreground">{f.label}</span>
              <span className="text-sm font-medium">{f.val}</span>
            </div>
        )}
        </div>
        <div className={CARD + " p-4"}>
          <div className="mb-2.5 text-2xs font-bold uppercase tracking-[0.07em] text-muted-foreground">Quy trình sau khi tạo</div>
          {[
        { n: '1', label: 'Email chào mừng được gửi', ic: 'mail' },
        { n: '2', label: 'Người dùng xác minh email', ic: 'check-circle' },
        { n: '3', label: 'Đổi mật khẩu lần đầu', ic: 'settings' },
        { n: '4', label: 'Truy cập ELS HRM', ic: 'layout-dashboard' }].
        map((s, i) =>
        <div key={i} className={"flex gap-2.5 py-[7px] " + (i < 3 ? "border-b border-dashed border-border" : "")}>
              <div className="grid size-[22px] shrink-0 place-items-center rounded-full bg-primary-soft text-xs font-bold text-primary">{s.n}</div>
              <div className="flex items-center gap-1.5 text-xs">
                <Icon name={s.ic} size={12} className="text-muted-foreground" />
                {s.label}
              </div>
            </div>
        )}
        </div>
        <div className={CARD + " bg-muted p-4"}>
          <div className="mb-1.5 flex items-center gap-1.5 text-xs font-semibold">
            <Icon name="help-circle" size={13} className="text-primary" />
            Về quyền truy cập
          </div>
          <div className="text-xs leading-[1.55] text-muted-foreground">
            Vai trò xác định những gì người dùng <strong>có thể xem và làm</strong> sau khi đăng nhập. Vai trò có thể thay đổi sau khi tạo tài khoản.
          </div>
        </div>
      </div>
    </div>
  </HRMShell>;


// ─── 03b · Edit User Form (KHÔNG có ô chọn vai trò) ──────────────────────────
const UMEditScreen = ({ uid = 2, onBack, onReset }) => {
  const u = UM_USERS.find((x) => x.id === uid) || UM_USERS[1];
  const roles = UM_USER_ROLES[u.id] || [];
  const primary = roles.find((r) => r.primary);
  const [reset, setReset] = React.useState(false);
  const openReset = onReset || (() => setReset(true));
  const back = onBack || (() => {});
  return (
    <div className="relative size-full">
    <HRMShell active="users"
      title="Chỉnh sửa tài khoản"
      crumbs={['Người dùng', u.name, 'Chỉnh sửa']}
      actions={<>
        <Btn variant="outline" size="sm" onClick={back}>Hủy</Btn>
        <Btn variant="primary" size="sm" icon="check" onClick={back}>Lưu thay đổi</Btn>
      </>}>
      <div className="grid grid-cols-[1fr_340px] gap-[18px]">

        {/* Form */}
        <div className={CARD + " p-6"}>
          {/* Thông tin tài khoản */}
          <div className="mb-[18px] flex items-center gap-2">
            <div className="grid size-7 place-items-center rounded-md bg-primary-soft"><Icon name="user" size={14} className="text-primary" /></div>
            <span className="text-base font-bold">Thông tin tài khoản</span>
          </div>
          <div className="mb-4 grid grid-cols-2 gap-3.5">
            <div>
              <label className="mb-[5px] block text-xs font-medium">Tên đăng nhập *</label>
              <div className="relative flex items-center">
                <Icon name="user" size={13} className="pointer-events-none absolute left-2.5 size-3.5 text-muted-foreground" />
                <input className={INPUT + " pl-8"} defaultValue={u.un} />
              </div>
            </div>
            <div>
              <label className="mb-[5px] block text-xs font-medium">Email công ty *</label>
              <div className="relative flex items-center">
                <Icon name="mail" size={13} className="pointer-events-none absolute left-2.5 size-3.5 text-muted-foreground" />
                <input className={INPUT + " pl-8"} defaultValue={u.email} />
              </div>
            </div>
          </div>
          <div className="mb-5 flex items-center gap-2 rounded-md bg-muted px-3.5 py-2.5">
            <Icon name="lock" size={14} className="shrink-0 text-muted-foreground" />
            <div className="flex-1 text-xs text-muted-foreground">
              Mật khẩu không sửa tại đây. Dùng <strong className="text-foreground">Đặt lại mật khẩu</strong> để cấp mật khẩu tạm mới.
            </div>
            <Btn variant="outline" size="sm" icon="settings" onClick={openReset}>Đặt lại mật khẩu</Btn>
          </div>

          {/* Vai trò — CHỈ ĐỌC tại form, quản lý ở tab Vai trò */}
          <div className="mb-4 border-t border-border pt-5">
            <div className="mb-3.5 flex items-center gap-2">
              <div className="grid size-7 place-items-center rounded-md bg-primary-soft"><Icon name="award" size={14} className="text-primary" /></div>
              <span className="text-base font-bold">Vai trò &amp; quyền</span>
            </div>
            <div className="flex items-center gap-3.5 rounded-md border border-border p-4">
              <div className="flex-1">
                <div className="mb-[7px] text-xs text-muted-foreground">Đang gán {roles.length} vai trò</div>
                <div className="flex flex-wrap items-center gap-1.5">
                  {[...roles].sort((a, b) => (b.primary ? 1 : 0) - (a.primary ? 1 : 0)).map((r) =>
                    r.primary
                      ? <Badge key={r.key} variant="solid-primary">{roleMeta(r.key).name} · Chính</Badge>
                      : <Badge key={r.key} variant="neutral">{roleMeta(r.key).name}</Badge>
                  )}
                </div>
              </div>
              <Btn variant="outline-primary" size="sm" icon="settings" iconRight="arrow-right" onClick={back}>Quản lý vai trò</Btn>
            </div>
            <div className="mt-2.5 flex items-start gap-1.5 text-xs leading-[1.5] text-muted-foreground">
              <Icon name="info" size={12} className="mt-0.5 shrink-0" />
              <span>Vai trò được quản lý tập trung tại tab <strong>Vai trò</strong> để tránh hai chỗ chỉnh sửa mâu thuẫn. Tại đó có thể gán thêm, gỡ, hoặc đổi vai trò chính.</span>
            </div>
          </div>

          {/* Liên kết nhân viên */}
          <div className="border-t border-border pt-[18px]">
            <div className="mb-3.5 flex items-center gap-2">
              <div className="grid size-7 place-items-center rounded-md bg-primary-soft"><Icon name="users" size={14} className="text-primary" /></div>
              <span className="text-base font-bold">Liên kết hồ sơ nhân viên</span>
            </div>
            <div className="relative flex items-center">
              <Icon name="user" size={13} className="pointer-events-none absolute left-2.5 size-3.5 text-muted-foreground" />
              <input className={INPUT + " pl-8"} defaultValue={`${u.name} · ${u.emp}`} />
            </div>
          </div>
        </div>

        {/* Right sidebar */}
        <div className="flex flex-col gap-3">
          <div className={CARD + " p-[18px]"}>
            <div className="mb-3 text-sm font-bold">Tài khoản</div>
            {[
              ['Trạng thái', <Badge variant="success" dot>Hoạt động</Badge>],
              ['Vai trò chính', <Badge variant="solid-primary">{primary ? roleMeta(primary.key).name : '—'}</Badge>],
              ['Tổng vai trò', String(roles.length)],
              ['Ngày tạo', '01/03/2024']].
            map((f, i) =>
              <div key={i} className="flex items-center justify-between border-b border-border py-[7px]">
                <span className="text-xs text-muted-foreground">{f[0]}</span>
                <span className="text-sm font-medium">{f[1]}</span>
              </div>
            )}
          </div>
          <div className={CARD + " bg-muted p-4"}>
            <div className="mb-1.5 flex items-center gap-1.5 text-xs font-semibold">
              <Icon name="help-circle" size={13} className="text-primary" />
              Vì sao tách riêng?
            </div>
            <div className="text-xs leading-[1.55] text-muted-foreground">
              Form này chỉ lo <strong>thông tin tài khoản</strong>. Việc gán/gỡ vai trò nằm ở tab Vai trò nên một user có thể mang nhiều vai trò mà không có ô chọn vai trò đơn lẻ gây nhầm lẫn.
            </div>
          </div>
        </div>
      </div>
    </HRMShell>
    {reset &&
      <UMResetPasswordDialog name={u.name} onClose={() => setReset(false)} />}
    </div>);
};

// ─── 04 · Empty State ────────────────────────────────────────────────────────
const UMEmptyScreen = () =>
<HRMShell active="users"
title="Quản lý người dùng"
crumbs={['Người dùng']}
actions={<Btn variant="primary" size="sm" icon="plus">Thêm người dùng</Btn>}>
    <div className="mb-[18px] grid grid-cols-4 gap-3">
      {[
    { label: 'Tổng tài khoản', icon: 'users', ib: 'var(--color-info-soft)', ic: 'var(--color-info)' },
    { label: 'Đang hoạt động', icon: 'check-circle', ib: 'var(--color-success-soft)', ic: 'var(--color-success)' },
    { label: 'Chờ phê duyệt', icon: 'clock', ib: 'var(--color-warning-soft)', ic: 'var(--color-warning)' },
    { label: 'Tài khoản bị khóa', icon: 'x-circle', ib: 'var(--color-destructive-soft)', ic: 'var(--color-destructive)' }].
    map((s, i) => <StatCard key={i} label={s.label} value="0" icon={s.icon} iconBg={s.ib} iconColor={s.ic} />)}
    </div>
    <div className="flex min-h-[380px] flex-col items-center justify-center overflow-hidden rounded-lg border border-border bg-card p-12">
      <svg width="72" height="72" viewBox="0 0 72 72" fill="none" style={{ marginBottom: 20 }}>
        <circle cx="36" cy="36" r="36" fill="var(--color-muted)" />
        <circle cx="36" cy="27" r="12" fill="none" stroke="var(--color-muted-foreground)" strokeWidth="2.5" />
        <path d="M14 62c0-12.15 9.85-22 22-22s22 9.85 22 22" stroke="var(--color-muted-foreground)" strokeWidth="2.5" fill="none" strokeLinecap="round" />
        <circle cx="54" cy="50" r="10" fill="var(--color-primary-soft)" stroke="var(--color-primary)" strokeWidth="2" />
        <path d="M50 50h8M54 46v8" stroke="var(--color-primary)" strokeWidth="2" strokeLinecap="round" />
      </svg>
      <div className="mb-2 text-lg font-bold">Chưa có tài khoản nào</div>
      <div className="mb-6 max-w-[420px] text-center text-base leading-[1.65] text-muted-foreground">
        Tạo tài khoản đầu tiên để nhân viên có thể đăng nhập vào hệ thống ELS HRM. Tài khoản Admin được tạo tự động trong quá trình cài đặt ban đầu.
      </div>
      <div className="flex gap-2.5">
        <Btn variant="outline" icon="upload">Nhập từ file CSV</Btn>
        <Btn variant="primary" icon="plus">Tạo người dùng đầu tiên</Btn>
      </div>
    </div>
  </HRMShell>;


// ─── 05 · Loading Skeleton ───────────────────────────────────────────────────
const UMLoadingScreen = () =>
<HRMShell active="users" title="Quản lý người dùng" crumbs={['Người dùng']}>
    <style>{`@keyframes skel{0%{background-position:200% 0}100%{background-position:-200% 0}}`}</style>
    <div className="mb-[18px] grid grid-cols-4 gap-3">
      {[1, 2, 3, 4].map((i) =>
    <div key={i} className="flex flex-col gap-2 rounded-lg border border-border bg-card p-4">
          <div className="flex items-center justify-between"><SkelBox w="60%" h={12} /><SkelBox w={36} h={36} r={8} /></div>
          <SkelBox w="40%" h={28} /><SkelBox w="55%" h={12} />
        </div>
    )}
    </div>
    <div className={CARD + " mb-3.5 flex gap-2.5 px-3.5 py-2.5"}>
      <SkelBox w={260} h={32} r={6} /><SkelBox w={148} h={32} r={6} /><SkelBox w={148} h={32} r={6} />
    </div>
    <div className="overflow-hidden rounded-lg border border-border bg-card">
      <table className={TABLE_CLS}>
        <thead>
          <tr>{[40, '20%', '18%', '11%', '10%', '14%', 90].map((w, i) => <th key={i} style={{ width: w }}><SkelBox h={10} w="70%" /></th>)}</tr>
        </thead>
        <tbody>
          {[1, 2, 3, 4, 5, 6, 7].map((r) =>
        <tr key={r}>
              <td><SkelBox w={16} h={16} r={3} /></td>
              <td><div className="flex items-center gap-2.5">
                <SkelBox w={32} h={32} r={999} />
                <div className="flex flex-col gap-[5px]"><SkelBox w={120} h={12} /><SkelBox w={90} h={10} /></div>
              </div></td>
              <td><SkelBox w={150} h={12} /></td>
              <td><SkelBox w={80} h={22} r={11} /></td>
              <td><SkelBox w={72} h={22} r={11} /></td>
              <td><SkelBox w={110} h={12} /></td>
              <td><div className="flex gap-1"><SkelBox w={28} h={28} r={6} /><SkelBox w={28} h={28} r={6} /></div></td>
            </tr>
        )}
        </tbody>
      </table>
    </div>
  </HRMShell>;


// ─── 06 · Validation Errors ──────────────────────────────────────────────────
const UMValidationScreen = () =>
<HRMShell active="users"
title="Thêm người dùng mới"
crumbs={['Người dùng', 'Thêm mới']}
actions={<>
      <Btn variant="outline" size="sm">Hủy</Btn>
      <Btn variant="primary" size="sm" disabled>Tạo tài khoản</Btn>
    </>}>
    <div className="max-w-[680px]">
      {/* Error banner */}
      <div className="mb-5 flex gap-2.5 rounded-md bg-destructive-soft px-4 py-3" style={{ border: '1px solid oklch(0.601 0.215 12 / 0.3)' }}>
        <Icon name="alert-circle" size={16} className="mt-0.5 shrink-0 text-destructive" />
        <div>
          <div className="mb-1 text-sm font-semibold text-destructive">3 lỗi cần sửa trước khi tạo tài khoản</div>
          <div className="text-xs leading-[1.55] text-destructive opacity-90">
            • Tên đăng nhập <strong>"tuan.tran"</strong> đã tồn tại trong hệ thống<br />
            • Mật khẩu không đủ mạnh — cần ít nhất 8 ký tự, bao gồm chữ hoa, số và ký tự đặc biệt<br />
            • Vai trò chính là bắt buộc
          </div>
        </div>
      </div>

      <div className={CARD + " p-6"}>
        <div className="flex flex-col gap-4">
          {/* Username — error */}
          <div>
            <label className="mb-[5px] block text-xs font-medium">Tên đăng nhập *</label>
            <div className="relative flex items-center">
              <Icon name="user" size={13} className="pointer-events-none absolute left-2.5 size-3.5 text-muted-foreground" />
              <input className={INPUT + " pl-8"} aria-invalid="true" defaultValue="tuan.tran" />
            </div>
            <div className="mt-[5px] flex items-center gap-1 text-xs text-destructive">
              <Icon name="x-circle" size={12} />
              Tên đăng nhập "tuan.tran" đã được sử dụng. Thử "tuan.tran2" hoặc "tuan.m.tran".
            </div>
          </div>

          {/* Email — ok */}
          <div>
            <label className="mb-[5px] block text-xs font-medium">Email công ty *</label>
            <div className="relative">
              <input className={INPUT + " pr-9"} defaultValue="tuan.tran2@els.tech" />
              <Icon name="check-circle" size={14} className="absolute right-2.5 top-1/2 -translate-y-1/2 text-success" />
            </div>
          </div>

          {/* Password — strength error */}
          <div>
            <label className="mb-[5px] block text-xs font-medium">Mật khẩu tạm thời *</label>
            <input className={INPUT} aria-invalid="true" type="password" defaultValue="abc123" />
            <div className="mt-2 flex flex-wrap gap-[5px]">
              {[
            { ok: false, label: '8+ ký tự' },
            { ok: true, label: 'Chữ thường' },
            { ok: false, label: 'Chữ hoa (A-Z)' },
            { ok: true, label: 'Số (0-9)' },
            { ok: false, label: 'Ký tự đặc biệt' }].
            map((r, i) =>
            <span key={i} className={"rounded-full px-[9px] py-[3px] text-xs font-medium " + (r.ok ? "bg-success-soft text-success" : "bg-destructive-soft text-destructive")}>
                  {r.ok ? '✓' : ''} {r.label}
                </span>
            )}
            </div>
          </div>

          {/* Role — required error */}
          <div>
            <label className="mb-[5px] block text-xs font-medium">Vai trò chính *</label>
            <Select className="cursor-pointer" aria-invalid="true" placeholder="— Chọn vai trò —" options={[]} />
            <div className="mt-[5px] flex items-center gap-1 text-xs text-destructive">
              <Icon name="x-circle" size={12} />
              Vui lòng chọn một vai trò để xác định quyền hạn cho tài khoản này.
            </div>
          </div>
        </div>
      </div>
    </div>
  </HRMShell>;


// ─── 07 · Dark Mode ──────────────────────────────────────────────────────────
const UMDarkScreen = () => <UMListScreen dark />;

Object.assign(window, {
  UMListScreen, UMDetailScreen, UMCreateScreen, UMEditScreen,
  UMEmptyScreen, UMLoadingScreen, UMValidationScreen, UMDarkScreen,
  SkelBox
});