/* global React */
// ============================================
// Admin backend — system overview + user management
// ============================================

const ROLE_PILL = {
  admin:    { bg: 'var(--red-soft)',    fg: 'var(--red)',         icon: 'shield' },
  clerk:    { bg: 'var(--green-soft)',  fg: 'var(--green-deep)',  icon: 'fileText' },
  director: { bg: 'var(--purple-soft)', fg: 'oklch(0.38 0.13 295)', icon: 'pen' },
  teacher:  { bg: 'var(--blue-soft)',   fg: 'oklch(0.36 0.12 245)', icon: 'user' },
};

function RolePill({ role }) {
  const p = ROLE_PILL[role] || ROLE_PILL.teacher;
  return React.createElement('span', {
    style: {
      display: 'inline-flex', alignItems: 'center', gap: 5,
      padding: '3px 9px', borderRadius: 999, fontSize: 12, fontWeight: 600,
      background: p.bg, color: p.fg,
    }
  },
    React.createElement(Icon, { name: p.icon, size: 12 }),
    ROLE_LABEL[role] || role,
  );
}

function StatusPill({ status }) {
  const on = status === 'active';
  return React.createElement('span', {
    style: {
      display: 'inline-flex', alignItems: 'center', gap: 5,
      padding: '3px 9px', borderRadius: 999, fontSize: 12, fontWeight: 600,
      background: on ? 'var(--green-soft)' : 'var(--bg-deep)',
      color: on ? 'var(--green-deep)' : 'var(--ink-3)',
    }
  },
    React.createElement('span', {
      style: { width: 6, height: 6, borderRadius: '50%', background: on ? 'var(--green)' : 'var(--muted)' }
    }),
    on ? 'ใช้งานอยู่' : 'ระงับชั่วคราว',
  );
}

// --------------------------------------------
// Admin overview / dashboard
// --------------------------------------------
function AdminOverviewView() {
  const { sysUsers, docs, setActiveView, dataSource, settings, notifications, getDocFileUrl, toast } = useStore();
  const fileCount = useMemo(() => docs.reduce((n, d) => n + ((d.files || []).length), 0), [docs]);
  const onSupabase = dataSource === 'supabase';
  const [zipBusy, setZipBusy] = useState(false);

  // ---- Backup helpers ----
  const stamp = () => new Date().toISOString().slice(0, 10);
  const downloadBlob = (blob, name) => {
    const u = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = u; a.download = name;
    document.body.appendChild(a); a.click(); document.body.removeChild(a);
    setTimeout(() => URL.revokeObjectURL(u), 1000);
  };

  const exportJson = () => {
    const data = {
      exportedAt: new Date().toISOString(),
      school: settings,
      users: sysUsers,
      documents: docs,
      notifications: notifications || [],
    };
    downloadBlob(new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' }), `backup-${stamp()}.json`);
    toast('ดาวน์โหลดสำรองข้อมูลทั้งหมด (JSON) แล้ว');
  };

  const exportRegisterCsv = () => {
    const esc = (v) => '"' + String(v == null ? '' : v).replace(/"/g, '""') + '"';
    const header = ['เลขรับ', 'เลขที่หนังสือ', 'วันที่รับ', 'ลงวันที่', 'เรื่อง', 'จาก', 'ความเร่งด่วน', 'สถานะ', 'ผู้รับมอบหมาย', 'กำหนดส่ง'];
    const rows = [...docs]
      .sort((a, b) => new Date(a.receivedDate) - new Date(b.receivedDate))
      .map(d => [
        d.docNumber, d.refNumber, formatThaiDate(d.receivedDate), formatThaiDate(d.docDate),
        d.subject, d.from, (URGENCY[d.urgency] || {}).label || d.urgency,
        (STATUS[d.status] || {}).label || d.status,
        (d.assignedTo || []).map(id => getUserById(id).name).join(', '),
        d.dueDate ? formatThaiDate(d.dueDate) : '',
      ]);
    const csv = '' + [header, ...rows].map(r => r.map(esc).join(',')).join('\r\n');
    downloadBlob(new Blob([csv], { type: 'text/csv;charset=utf-8;' }), `ทะเบียนหนังสือรับ-${stamp()}.csv`);
    toast('ดาวน์โหลดทะเบียนหนังสือรับ (CSV) แล้ว');
  };

  const downloadAllPdfs = async () => {
    if (zipBusy) return;
    if (typeof JSZip === 'undefined') { toast('ไลบรารี ZIP ยังโหลดไม่เสร็จ ลองรีเฟรชหน้า', 'amber'); return; }
    setZipBusy(true);
    try {
      const zip = new JSZip();
      let n = 0;
      for (const d of docs) {
        const kinds = [...new Set((d.files || []).map(f => f.kind))];
        const safe = String(d.docNumber).replace(/\//g, '-');
        for (const kind of kinds) {
          const url = await getDocFileUrl(d, kind);
          if (!url) continue;
          const res = await fetch(url);
          if (!res.ok) continue;
          zip.file(`${safe}/${safe}_${kind}.pdf`, await res.arrayBuffer());
          n++;
        }
      }
      if (n === 0) { toast('ยังไม่มีไฟล์ PDF ให้สำรอง', 'amber'); setZipBusy(false); return; }
      const blob = await zip.generateAsync({ type: 'blob' });
      downloadBlob(blob, `backup-pdf-${stamp()}.zip`);
      toast(`สำรองไฟล์ PDF ${n} ไฟล์เรียบร้อย`);
    } catch (e) {
      console.error('[kachai] backup zip', e);
      toast('สำรองไฟล์ PDF ไม่สำเร็จ', 'amber');
    } finally {
      setZipBusy(false);
    }
  };

  const byRole = useMemo(() => {
    const c = { admin: 0, clerk: 0, director: 0, teacher: 0 };
    sysUsers.forEach(u => { c[u.role] = (c[u.role] || 0) + 1; });
    return c;
  }, [sysUsers]);

  const activeCount = sysUsers.filter(u => u.status === 'active').length;

  const recent = useMemo(() => [...sysUsers]
    .filter(u => u.lastLogin)
    .sort((a, b) => new Date(b.lastLogin) - new Date(a.lastLogin))
    .slice(0, 5), [sysUsers]);

  return React.createElement('div', { className: 'page' },
    React.createElement('div', { className: 'page__head' },
      React.createElement('div', { className: 'page__title' },
        React.createElement('h1', null, 'ภาพรวมระบบ'),
        React.createElement('p', null, 'แดชบอร์ดผู้ดูแลระบบ — จัดการผู้ใช้งานและการตั้งค่าทั้งหมด'),
      ),
      React.createElement('button', {
        className: 'btn btn--primary btn--lg',
        onClick: () => setActiveView('admin_users'),
      },
        React.createElement(Icon, { name: 'users', size: 16 }), 'จัดการผู้ใช้งาน',
      ),
    ),

    React.createElement('div', { className: 'stats-grid' },
      React.createElement(StatTile, { label: 'ผู้ใช้งานทั้งหมด', value: sysUsers.length, sub: `ใช้งานอยู่ ${activeCount} บัญชี`, accent: 'accent', icon: 'users' }),
      React.createElement(StatTile, { label: 'ผู้ดูแล / ผอ.', value: byRole.admin + byRole.director, sub: `ผู้ดูแล ${byRole.admin} · ผอ. ${byRole.director}`, icon: 'shield' }),
      React.createElement(StatTile, { label: 'ธุรการ', value: byRole.clerk, sub: 'เจ้าหน้าที่สารบรรณ', icon: 'fileText' }),
      React.createElement(StatTile, { label: 'ครู / บุคลากร', value: byRole.teacher, sub: 'ผู้รับมอบหมายงาน', icon: 'user' }),
    ),

    React.createElement('div', { className: 'dashboard-grid' },
      // System status
      React.createElement('div', { className: 'card' },
        React.createElement('div', { className: 'card__head' },
          React.createElement('h3', null, 'สถานะระบบ'),
          React.createElement('span', { className: 'badge sent_to_teacher' }, React.createElement('span', { className: 'dot' }), 'ทำงานปกติ'),
        ),
        React.createElement('div', { className: 'card__body' },
          React.createElement('div', { className: 'meta-list' },
            [
              ['หนังสือในระบบ', `${docs.length} ฉบับ`],
              ['ไฟล์แนบในระบบ', `${fileCount} ไฟล์`],
              ['ฐานข้อมูล', onSupabase ? '🟢 เชื่อมต่อ Supabase (ข้อมูลจริง)' : '⚪ โหมดจำลอง (localStorage)'],
              ['ไฟล์ PDF', onSupabase ? '🟢 Supabase Storage' : '⚪ เก็บชั่วคราวในเบราว์เซอร์'],
              ['Telegram Bot', '⚪ ยังไม่ได้ตั้งค่า'],
              ['สำรองข้อมูล', onSupabase ? 'จัดการโดย Supabase อัตโนมัติ' : '—'],
              ['เวอร์ชันระบบ', 'v1.0.0 (prototype)'],
            ].map(([k, v]) => React.createElement('div', { key: k, className: 'meta-row', style: { gridTemplateColumns: '180px 1fr' } },
              React.createElement('span', { className: 'k' }, k),
              React.createElement('span', { className: 'v' }, v),
            ))
          ),
          React.createElement('div', { className: 'divider' }),
          React.createElement('div', { style: { display: 'flex', gap: 8, flexWrap: 'wrap' } },
            React.createElement('button', { className: 'btn btn--sm', onClick: () => setActiveView('telegram') },
              React.createElement(Icon, { name: 'telegram', size: 12 }), 'ตั้งค่า Telegram'),
            React.createElement('button', { className: 'btn btn--sm', onClick: () => setActiveView('settings') },
              React.createElement(Icon, { name: 'settings', size: 12 }), 'การตั้งค่าระบบ'),
            React.createElement('button', { className: 'btn btn--sm', onClick: () => setActiveView('all_docs') },
              React.createElement(Icon, { name: 'layers', size: 12 }), 'หนังสือทั้งหมด'),
          ),
        ),
      ),

      // Recent logins
      React.createElement('div', { className: 'card' },
        React.createElement('div', { className: 'card__head' },
          React.createElement('h3', null, 'เข้าสู่ระบบล่าสุด'),
          React.createElement('button', { className: 'btn btn--ghost btn--sm', onClick: () => setActiveView('admin_users') },
            'ดูทั้งหมด', React.createElement(Icon, { name: 'arrowRight', size: 13 })),
        ),
        React.createElement('div', null,
          recent.map(u => React.createElement('div', {
            key: u.id,
            style: { display: 'flex', alignItems: 'center', gap: 12, padding: '12px 18px', borderBottom: '1px solid var(--line)' },
          },
            React.createElement('div', { className: 'admin-avatar' }, u.initial),
            React.createElement('div', { style: { flex: 1, minWidth: 0 } },
              React.createElement('div', { style: { fontWeight: 600, fontSize: 13.5 } }, u.name),
              React.createElement('div', { style: { fontSize: 12, color: 'var(--ink-3)' } }, '@', u.username),
            ),
            React.createElement('div', { style: { fontSize: 12, color: 'var(--ink-3)', whiteSpace: 'nowrap' } }, relativeThai(u.lastLogin)),
          ))
        ),
      ),
    ),

    // ---- สำรองข้อมูล (Backup) ----
    React.createElement('div', { className: 'card', style: { marginTop: 16 } },
      React.createElement('div', { className: 'card__head' },
        React.createElement('h3', null, 'สำรองข้อมูล (Backup)'),
        React.createElement('span', { style: { fontSize: 11.5, color: 'var(--ink-3)' } }, `${docs.length} ฉบับ · ${fileCount} ไฟล์`),
      ),
      React.createElement('div', { className: 'card__body' },
        React.createElement('div', { className: 'hint', style: { marginBottom: 12 } },
          'ดาวน์โหลดเก็บไว้เป็นระยะ — โหมดฟรีไม่มีสำรองอัตโนมัติ แนะนำสำรองอย่างน้อยเดือนละครั้ง'),
        React.createElement('div', { style: { display: 'flex', gap: 8, flexWrap: 'wrap' } },
          React.createElement('button', { className: 'btn', onClick: exportRegisterCsv },
            React.createElement(Icon, { name: 'fileText', size: 14 }), 'ทะเบียนหนังสือรับ (CSV)'),
          React.createElement('button', { className: 'btn', onClick: exportJson },
            React.createElement(Icon, { name: 'download', size: 14 }), 'ข้อมูลทั้งหมด (JSON)'),
          React.createElement('button', { className: 'btn btn--primary', onClick: downloadAllPdfs, disabled: zipBusy },
            React.createElement(Icon, { name: 'archive', size: 14 }), zipBusy ? 'กำลังรวมไฟล์…' : 'ไฟล์ PDF ทั้งหมด (ZIP)'),
        ),
        React.createElement('div', { className: 'hint', style: { marginTop: 10 } },
          '• CSV = ทะเบียนรับเปิดด้วย Excel · JSON = ข้อมูลทั้งหมดสำหรับเก็บกู้คืน · ZIP = ไฟล์ PDF ต้นฉบับ/เกษียณ/ส่งครู ทุกฉบับ'),
      ),
    ),
  );
}

// --------------------------------------------
// User management
// --------------------------------------------
function AdminUsersView() {
  const { sysUsers, updateSysUser, addSysUser, deleteSysUser, currentUser, toast } = useStore();
  const [query, setQuery] = useState('');
  const [roleFilter, setRoleFilter] = useState('all');
  const [adding, setAdding] = useState(false);
  const [addBusy, setAddBusy] = useState(false);
  const [form, setForm] = useState({ name: '', username: '', role: 'teacher' });
  const [editId, setEditId] = useState(null);
  const [editForm, setEditForm] = useState({ name: '', username: '', role: 'teacher', status: 'active' });
  const [confirmDeleteId, setConfirmDeleteId] = useState(null);

  const filtered = useMemo(() => sysUsers.filter(u => {
    if (roleFilter !== 'all' && u.role !== roleFilter) return false;
    if (query) {
      const q = query.toLowerCase();
      return u.name.toLowerCase().includes(q) || u.username.toLowerCase().includes(q);
    }
    return true;
  }), [sysUsers, query, roleFilter]);

  const toggleStatus = (u) => {
    const next = u.status === 'active' ? 'suspended' : 'active';
    updateSysUser(u.id, { status: next });
    toast(next === 'active' ? `เปิดใช้งานบัญชี ${u.name} แล้ว` : `ระงับบัญชี ${u.name} แล้ว`, next === 'active' ? 'success' : 'amber');
  };

  const resetPw = (u) => toast(`รีเซ็ตรหัสผ่านของ ${u.name} แล้ว — รหัสชั่วคราว: 1234`);

  const doDelete = (u) => {
    deleteSysUser(u.id);
    if (editId === u.id) setEditId(null);
    setConfirmDeleteId(null);
    toast(`ลบผู้ใช้ ${u.name} แล้ว`, 'amber');
  };

  const submitAdd = async (e) => {
    e.preventDefault();
    if (addBusy) return;
    if (!form.name.trim() || !form.username.trim()) { toast('กรุณากรอกชื่อและชื่อผู้ใช้', 'amber'); return; }
    const initial = form.name.trim().replace(/^(อ\.|นาย|นาง|นางสาว|คุณ)\s*/, '').slice(0, 2);
    const name = form.name.trim();
    setAddBusy(true);
    let res;
    try {
      res = await addSysUser({ name, username: form.username.trim(), role: form.role, initial });
    } catch (err) {
      res = { ok: false, error: 'เพิ่มผู้ใช้ไม่สำเร็จ' };
    }
    setAddBusy(false);
    if (res && !res.ok) { toast(res.error || 'เพิ่มผู้ใช้ไม่สำเร็จ', 'amber'); return; }
    toast(`เพิ่มผู้ใช้ ${name} แล้ว`);
    setForm({ name: '', username: '', role: 'teacher' });
    setAdding(false);
  };

  const startEdit = (u) => {
    setAdding(false);
    setEditId(u.id);
    setEditForm({ name: u.name, username: u.username, role: u.role, status: u.status });
  };

  const cancelEdit = () => setEditId(null);

  const submitEdit = (e) => {
    e.preventDefault();
    if (!editForm.name.trim() || !editForm.username.trim()) { toast('กรุณากรอกชื่อและชื่อผู้ใช้', 'amber'); return; }
    const initial = editForm.name.trim().replace(/^(อ\.|นาย|นาง|นางสาว|คุณ)\s*/, '').slice(0, 2);
    updateSysUser(editId, { name: editForm.name.trim(), username: editForm.username.trim(), role: editForm.role, status: editForm.status, initial });
    toast(`บันทึกข้อมูล ${editForm.name.trim()} แล้ว`);
    setEditId(null);
  };

  const roleFilters = [
    { id: 'all', label: 'ทั้งหมด' },
    { id: 'admin', label: 'ผู้ดูแล' },
    { id: 'clerk', label: 'ธุรการ' },
    { id: 'director', label: 'ผอ.' },
    { id: 'teacher', label: 'ครู' },
  ];

  return React.createElement('div', { className: 'page' },
    React.createElement('div', { className: 'page__head' },
      React.createElement('div', { className: 'page__title' },
        React.createElement('h1', null, 'จัดการผู้ใช้งาน'),
        React.createElement('p', null, `ทั้งหมด ${sysUsers.length} บัญชี · กำหนดสิทธิ์ เปิด/ระงับ และรีเซ็ตรหัสผ่าน`),
      ),
      React.createElement('button', {
        className: 'btn btn--primary btn--lg',
        onClick: () => { setEditId(null); setAdding(a => !a); },
      },
        React.createElement(Icon, { name: adding ? 'x' : 'userPlus', size: 16 }),
        adding ? 'ยกเลิก' : 'เพิ่มผู้ใช้',
      ),
    ),

    adding && React.createElement('div', { className: 'card', style: { marginBottom: 16 } },
      React.createElement('div', { className: 'card__head' }, React.createElement('h3', null, 'เพิ่มผู้ใช้งานใหม่')),
      React.createElement('form', { className: 'card__body', onSubmit: submitAdd },
        React.createElement('div', { className: 'form-grid' },
          React.createElement('div', { className: 'field-row' },
            React.createElement('label', null, 'ชื่อ–นามสกุล ', React.createElement('span', { className: 'req' }, '*')),
            React.createElement('input', { className: 'input', value: form.name, placeholder: 'เช่น อ.สมชาย ใจดี', onChange: e => setForm(f => ({ ...f, name: e.target.value })) }),
          ),
          React.createElement('div', { className: 'field-row' },
            React.createElement('label', null, 'ชื่อผู้ใช้ ', React.createElement('span', { className: 'req' }, '*')),
            React.createElement('input', { className: 'input mono', value: form.username, placeholder: 'เช่น somchai', onChange: e => setForm(f => ({ ...f, username: e.target.value })) }),
          ),
          React.createElement('div', { className: 'field-row' },
            React.createElement('label', null, 'บทบาท'),
            React.createElement('select', { className: 'input', value: form.role, onChange: e => setForm(f => ({ ...f, role: e.target.value })) },
              React.createElement('option', { value: 'teacher' }, 'ครู / บุคลากร'),
              React.createElement('option', { value: 'clerk' }, 'เจ้าหน้าที่ธุรการ'),
              React.createElement('option', { value: 'director' }, 'ผู้อำนวยการ'),
              React.createElement('option', { value: 'admin' }, 'ผู้ดูแลระบบ'),
            ),
          ),
          React.createElement('div', { className: 'field-row', style: { justifyContent: 'flex-end' } },
            React.createElement('label', { style: { visibility: 'hidden' } }, '.'),
            React.createElement('button', { type: 'submit', className: 'btn btn--primary', disabled: addBusy },
              React.createElement(Icon, { name: 'check', size: 14 }), addBusy ? 'กำลังสร้างบัญชี…' : 'บันทึกผู้ใช้'),
          ),
        ),
        React.createElement('div', { className: 'hint', style: { marginTop: 10 } }, 'รหัสผ่านเริ่มต้นคือ 1234 ผู้ใช้ควรเปลี่ยนเมื่อเข้าสู่ระบบครั้งแรก'),
      ),
    ),

    editId && React.createElement('div', { className: 'card', style: { marginBottom: 16 } },
      React.createElement('div', { className: 'card__head' },
        React.createElement('h3', null, 'แก้ไขผู้ใช้งาน'),
        React.createElement('span', { className: 'mono', style: { fontSize: 12, color: 'var(--ink-3)' } }, '@', editForm.username),
      ),
      React.createElement('form', { className: 'card__body', onSubmit: submitEdit },
        React.createElement('div', { className: 'form-grid' },
          React.createElement('div', { className: 'field-row' },
            React.createElement('label', null, 'ชื่อ–นามสกุล ', React.createElement('span', { className: 'req' }, '*')),
            React.createElement('input', { className: 'input', value: editForm.name, onChange: e => setEditForm(f => ({ ...f, name: e.target.value })) }),
          ),
          React.createElement('div', { className: 'field-row' },
            React.createElement('label', null, 'ชื่อผู้ใช้ ', React.createElement('span', { className: 'req' }, '*')),
            React.createElement('input', { className: 'input mono', value: editForm.username, onChange: e => setEditForm(f => ({ ...f, username: e.target.value })) }),
          ),
          React.createElement('div', { className: 'field-row' },
            React.createElement('label', null, 'บทบาท'),
            React.createElement('select', { className: 'input', value: editForm.role, onChange: e => setEditForm(f => ({ ...f, role: e.target.value })) },
              React.createElement('option', { value: 'teacher' }, 'ครู / บุคลากร'),
              React.createElement('option', { value: 'clerk' }, 'เจ้าหน้าที่ธุรการ'),
              React.createElement('option', { value: 'director' }, 'ผู้อำนวยการ'),
              React.createElement('option', { value: 'admin' }, 'ผู้ดูแลระบบ'),
            ),
          ),
          React.createElement('div', { className: 'field-row' },
            React.createElement('label', null, 'สถานะ'),
            React.createElement('select', {
              className: 'input',
              value: editForm.status,
              disabled: currentUser && currentUser.id === editId,
              onChange: e => setEditForm(f => ({ ...f, status: e.target.value })),
            },
              React.createElement('option', { value: 'active' }, 'ใช้งานอยู่'),
              React.createElement('option', { value: 'suspended' }, 'ระงับชั่วคราว'),
            ),
            (currentUser && currentUser.id === editId) ? React.createElement('span', { className: 'hint' }, 'ไม่สามารถระงับบัญชีตนเองได้') : null,
          ),
        ),
        React.createElement('div', { style: { display: 'flex', gap: 8, justifyContent: 'flex-end', marginTop: 12 } },
          React.createElement('button', { type: 'button', className: 'btn', onClick: cancelEdit }, 'ยกเลิก'),
          React.createElement('button', { type: 'submit', className: 'btn btn--primary' },
            React.createElement(Icon, { name: 'save', size: 14 }), 'บันทึกการแก้ไข'),
        ),
      ),
    ),

    React.createElement('div', { className: 'card' },
      React.createElement('div', { className: 'card__head', style: { flexWrap: 'wrap', gap: 10 } },
        React.createElement('div', { className: 'topbar__search', style: { width: 280 } },
          React.createElement(Icon, { name: 'search', size: 14 }),
          React.createElement('input', { placeholder: 'ค้นหาชื่อ หรือชื่อผู้ใช้...', value: query, onChange: e => setQuery(e.target.value), style: { border: 'none', background: 'transparent', outline: 'none', width: '100%', color: 'var(--ink)' } }),
        ),
        React.createElement('div', { style: { display: 'flex', gap: 6, flexWrap: 'wrap' } },
          roleFilters.map(rf => React.createElement('button', {
            key: rf.id,
            className: `chip-toggle ${roleFilter === rf.id ? 'on' : ''}`,
            onClick: () => setRoleFilter(rf.id),
          }, rf.label)),
        ),
      ),

      React.createElement('div', { className: 'admin-table-wrap' },
        React.createElement('table', { className: 'admin-table' },
          React.createElement('thead', null,
            React.createElement('tr', null,
              React.createElement('th', null, 'ผู้ใช้งาน'),
              React.createElement('th', null, 'บทบาท'),
              React.createElement('th', null, 'สถานะ'),
              React.createElement('th', null, 'เข้าระบบล่าสุด'),
              React.createElement('th', { style: { textAlign: 'right' } }, 'จัดการ'),
            ),
          ),
          React.createElement('tbody', null,
            filtered.length === 0
              ? React.createElement('tr', null, React.createElement('td', { colSpan: 5, style: { padding: 40, textAlign: 'center', color: 'var(--ink-3)' } }, 'ไม่พบผู้ใช้งานที่ตรงกับเงื่อนไข'))
              : filtered.map(u => {
                const isSelf = currentUser && currentUser.id === u.id;
                return React.createElement('tr', { key: u.id },
                  React.createElement('td', null,
                    React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 11 } },
                      React.createElement('div', { className: 'admin-avatar' }, u.initial),
                      React.createElement('div', { style: { minWidth: 0 } },
                        React.createElement('div', { style: { fontWeight: 600, fontSize: 13.5 } }, u.name,
                          isSelf ? React.createElement('span', { style: { marginLeft: 6, fontSize: 11, color: 'var(--accent-deep)', fontWeight: 700 } }, '(คุณ)') : null),
                        React.createElement('div', { style: { fontSize: 12, color: 'var(--ink-3)' }, className: 'mono' }, '@', u.username),
                      ),
                    ),
                  ),
                  React.createElement('td', null, React.createElement(RolePill, { role: u.role })),
                  React.createElement('td', null, React.createElement(StatusPill, { status: u.status })),
                  React.createElement('td', { style: { fontSize: 12.5, color: 'var(--ink-3)' } }, u.lastLogin ? relativeThai(u.lastLogin) : 'ยังไม่เคยเข้า'),
                  React.createElement('td', null,
                    confirmDeleteId === u.id
                      ? React.createElement('div', { style: { display: 'flex', gap: 6, justifyContent: 'flex-end', alignItems: 'center' } },
                          React.createElement('span', { style: { fontSize: 12, color: 'var(--red)', fontWeight: 600 } }, 'ลบผู้ใช้นี้?'),
                          React.createElement('button', { className: 'btn btn--sm btn--danger', onClick: () => doDelete(u) }, 'ยืนยันลบ'),
                          React.createElement('button', { className: 'btn btn--sm', onClick: () => setConfirmDeleteId(null) }, 'ยกเลิก'),
                        )
                      : React.createElement('div', { style: { display: 'flex', gap: 6, justifyContent: 'flex-end' } },
                          React.createElement('button', { className: `btn btn--sm ${editId === u.id ? 'btn--primary' : ''}`, onClick: () => startEdit(u), title: 'แก้ไขผู้ใช้' },
                            React.createElement(Icon, { name: 'edit3', size: 13 })),
                          React.createElement('button', { className: 'btn btn--sm', onClick: () => resetPw(u), title: 'รีเซ็ตรหัสผ่าน' },
                            React.createElement(Icon, { name: 'key', size: 13 })),
                          React.createElement('button', {
                            className: `btn btn--sm ${u.status === 'active' ? 'btn--danger' : ''}`,
                            onClick: () => toggleStatus(u),
                            disabled: isSelf,
                            title: isSelf ? 'ไม่สามารถระงับบัญชีตนเองได้' : (u.status === 'active' ? 'ระงับการใช้งาน' : 'เปิดใช้งาน'),
                          }, u.status === 'active' ? 'ระงับ' : 'เปิดใช้'),
                          React.createElement('button', {
                            className: 'btn btn--sm',
                            onClick: () => { setConfirmDeleteId(u.id); },
                            disabled: isSelf,
                            title: isSelf ? 'ไม่สามารถลบบัญชีตนเองได้' : 'ลบผู้ใช้',
                          }, React.createElement(Icon, { name: 'trash', size: 13 })),
                        ),
                  ),
                );
              })
          ),
        ),
      ),
    ),
  );
}

Object.assign(window, { AdminOverviewView, AdminUsersView, RolePill, StatusPill });