(function() {
  const { useState, useEffect } = React;

  function UsersPage({ user: currentUser, route, navigate, t }) {
    const [tab, setTab] = useState('team');   // team = จัดการทีมงาน · permissions = สิทธิ์การใช้งาน
    const [users, setUsers] = useState([]);
    const [loading, setLoading] = useState(true);
    const [roleModal, setRoleModal] = useState(null);
    const [newRole, setNewRole] = useState('');
    const [addModal, setAddModal] = useState(false);
    const [addForm, setAddForm] = useState({ email: '', display_name: '', role: 'marketing' });
    const [refreshing, setRefreshing] = useState(false);
    async function refreshNames() {
      setRefreshing(true);
      try {
        const d = await window.api.post('/admin/users/refresh-names');
        if (d && d.error) alert('ดึงชื่อไม่สำเร็จ: ' + d.error);
        else { alert('ดึงชื่อจาก Google แล้ว — อัปเดต ' + (d.updated||0) + '/' + (d.total||0) + ' คน' + (d.failed ? ' · ล้มเหลว ' + d.failed : '')); loadUsers(); }
      } catch (e) { alert('เกิดข้อผิดพลาด: ' + (e.message || e)); }
      setRefreshing(false);
    }
    const [addError, setAddError] = useState('');

    function loadUsers() {
      setLoading(true);
      // หน้านี้จัดการเฉพาะ "ทีมงาน"
      window.api.staffUsers().then(d => { setUsers(d.users || []); setLoading(false); }).catch(() => setLoading(false));
    }

    useEffect(() => { loadUsers(); }, []);

    async function toggleBan(u) {
      try {
        if (u.is_banned) await window.api.unbanUser(u.id); else await window.api.banUser(u.id);
        loadUsers();
      } catch (e) { alert('ทำรายการไม่สำเร็จ: ' + (e.message || e)); }
    }
    async function changeRole() {
      try {
        await window.api.changeRole(roleModal.id, newRole);
        setRoleModal(null); loadUsers();
      } catch (e) { alert('เปลี่ยนสิทธิ์ไม่สำเร็จ: ' + (e.message || e)); }
    }
    async function deleteUser(u) {
      if (!window.confirm('ลบ user ' + u.email + '?')) return;
      try {
        const token = await window.firebaseAuth.currentUser?.getIdToken();
        const res = await fetch(window.ADMIN_CONFIG.apiUrl + '/admin/users/' + u.id, { method: 'DELETE', headers: { Authorization: 'Bearer ' + token } });
        const data = await res.json().catch(() => ({}));
        if (!res.ok) { alert('ลบไม่สำเร็จ: ' + (data.error || ('HTTP ' + res.status))); return; }
        loadUsers();
      } catch (e) { alert('ลบไม่สำเร็จ: ' + (e.message || e)); }
    }
    async function addUser() {
      if (!addForm.email) { setAddError('กรุณาใส่อีเมล'); return; }
      if (!addForm.email.trim().toLowerCase().endsWith('@carfinn.com')) {
        setAddError('อีเมลทีมงานต้องเป็นโดเมน @carfinn.com เท่านั้น'); return;
      }
      setAddError('');
      try {
        const token = await window.firebaseAuth.currentUser?.getIdToken();
        const res = await fetch(window.ADMIN_CONFIG.apiUrl + '/admin/users', {
          method: 'POST', headers: { Authorization: 'Bearer ' + token, 'Content-Type': 'application/json' },
          body: JSON.stringify(addForm),
        });
        const data = await res.json();
        if (data.error) { setAddError(data.error); return; }
        const invited = addForm.email;
        setAddModal(false); setAddForm({ email: '', display_name: '', role: 'marketing' }); loadUsers();
        alert('เพิ่มทีมงานแล้ว — ระบบส่งอีเมลเชิญพร้อมลิงก์เข้าระบบไปที่ ' + invited + ' เรียบร้อย');
      } catch { setAddError('เกิดข้อผิดพลาด'); }
    }

    // เปลี่ยน role ได้เฉพาะระดับทีมงาน
    const roles = ['marketing', 'admin', 'super_admin'];

    // ===== Users Tab =====
    const userCols = [
      { label: t('email'), sortKey: 'email', render: r => r.email },
      { label: t('name'), sortKey: 'display_name', render: r => r.display_name || '-' },
      { label: t('users_role'), sortKey: 'role', render: r => <Badge status={r.role} /> },
      { label: t('status'), sortKey: 'is_banned', render: r => r.is_banned ? <span className="badge badge-red">{t('users_banned')}</span> : <span className="badge badge-green">{t('users_normal')}</span> },
      { label: t('users_registered'), sortKey: 'created_at', render: r => new Date(r.created_at).toLocaleDateString('th-TH') },
      { label: t('actions'), render: r => (
        <div className="row gap-6">
          <button className="btn btn-sm btn-ghost" onClick={() => { setRoleModal(r); setNewRole(r.role); }}>{t('users_change_role')}</button>
          {r.id !== currentUser?.id && (
            <button className={'btn btn-sm ' + (r.is_banned ? 'btn-success' : 'btn-danger')} onClick={() => toggleBan(r)}>
              {r.is_banned ? t('users_unban') : t('users_ban')}
            </button>
          )}
          {r.id !== currentUser?.id && r.role !== 'super_admin' && (
            <window.DeleteBtn onClick={() => deleteUser(r)} />
          )}
        </div>
      )},
    ];

    const us = window.useTableSort(users, 'created_at', 'desc');

    const seg = (id, label) => (
      <button onClick={() => setTab(id)}
        style={{ display: 'inline-flex', alignItems: 'center', gap: 7, padding: '9px 18px', border: 'none',
          borderRadius: 9, cursor: 'pointer', fontSize: 14.5, fontWeight: 700, fontFamily: 'inherit',
          background: tab === id ? '#fff' : 'transparent', color: tab === id ? 'var(--navy, #102E54)' : 'var(--text-2, #6B7280)',
          boxShadow: tab === id ? '0 2px 8px rgba(0,0,0,.08)' : 'none' }}>{label}</button>
    );
    return (
      <div className="page">
        <div className="page-header">
          <h1><i className="ph ph-users-three" style={{marginRight:8,color:'#4A6079'}}></i>{t('users_title')}</h1>
          {tab === 'team' && <div className="row gap-8">
            <button className="btn btn-ghost" onClick={refreshNames} disabled={refreshing} title="ดึงชื่อ+รูปจริงจากบัญชี Google ให้ทีมงานที่ล็อกอินแล้ว">{refreshing ? 'กำลังดึง...' : <><i className="ph ph-arrows-clockwise" style={{marginRight:5}}></i>ดึงชื่อจาก Google</>}</button>
            <button className="btn btn-primary" onClick={() => setAddModal(true)}>{t('users_add_team')}</button>
          </div>}
        </div>

        {/* แท็บ: จัดการทีมงาน + สิทธิ์การใช้งาน (ย้ายมาจากเมนู "โครงสร้างระบบ" เดิม) */}
        <div style={{ display: 'inline-flex', background: 'rgba(0,0,0,.05)', borderRadius: 12, padding: 4, gap: 4, marginBottom: 18 }}>
          {seg('team', t('users_title'))}
          {seg('permissions', 'สิทธิ์การใช้งาน')}
        </div>

        {tab === 'permissions'
          ? <window.PermissionsPage t={t} embedded />
          : (
          /* ทีมงาน (เอาแท็บ "คำขอเป็นตัวแทน" ออกแล้ว — โมเดลใหม่ไม่มีตัวแทน) */
          <div className="card">
            <Table columns={userCols} data={us.sorted} loading={loading} sort={us.sort} onSort={us.onSort} />
          </div>
        )}

        {/* Add User Modal */}
        {addModal && <Modal title={t('users_add_title')} onClose={() => { setAddModal(false); setAddError(''); }}>
          <p style={{fontSize:13,color:'#6B7280',marginBottom:16}}>{t('users_add_desc')}</p>
          {addError && <div className="alert alert-error" style={{marginBottom:12}}>{addError}</div>}
          <div className="form-group"><label>{t('email')} *</label><input className="input" type="email" value={addForm.email} onChange={e => setAddForm({...addForm, email: e.target.value})} placeholder="user@carfinn.com" />
            <span style={{fontSize:12,color:'#8A8F98'}}>ชื่อ + รูปจะดึงจากบัญชี Google ให้อัตโนมัติตอนล็อกอินครั้งแรก</span></div>
          <div className="form-group"><label>{t('users_role')}</label><select className="input" value={addForm.role} onChange={e => setAddForm({...addForm, role: e.target.value})}>
            <option value="marketing">{t('role_marketing')}</option><option value="admin">{t('role_admin')}</option><option value="super_admin">{t('role_super_admin')}</option>
          </select></div>
          <div className="row gap-10" style={{marginTop:16}}>
            <button className="btn btn-primary" onClick={addUser}>{t('users_add_team')}</button>
            <button className="btn btn-ghost" onClick={() => { setAddModal(false); setAddError(''); }}>{t('cancel')}</button>
          </div>
        </Modal>}

        {/* Change Role Modal */}
        {roleModal && <Modal title={t('users_change_role') + ': ' + roleModal.email} onClose={() => setRoleModal(null)}>
          <select className="input" value={newRole} onChange={e => setNewRole(e.target.value)}>
            {roles.map(r => <option key={r} value={r}>{t('role_'+r) || r}</option>)}
          </select>
          <div className="row gap-10" style={{marginTop:16}}>
            <button className="btn btn-primary" onClick={changeRole}>{t('save')}</button>
            <button className="btn btn-ghost" onClick={() => setRoleModal(null)}>{t('cancel')}</button>
          </div>
        </Modal>}
      </div>
    );
  }

  window.UsersPage = UsersPage;
})();