/* ============================================================
   usermanage.jsx — admin-only user management (Users tab in GAS).
   List / add / edit role / deactivate users.
   ============================================================ */
const UM_ROLES = [
  { key: 'admin', label: 'ผู้ดูแลระบบ' },
  { key: 'user', label: 'ผู้ใช้ทั่วไป' },
];

function UserManage({ users: initialUsers, departments, onUsersChange }) {
  const [users, setUsers] = useState(initialUsers || []);
  const [q, setQ] = useState('');
  const [adding, setAdding] = useState(false);
  const [editing, setEditing] = useState(null);
  const [busy, setBusy] = useState(null);
  const [toast, setToast] = useState(null);

  useEffect(() => { setUsers(initialUsers || []); }, [initialUsers]);

  const flash = (msg) => { setToast(msg); setTimeout(() => setToast(null), 2600); };

  const filtered = useMemo(() => {
    const ql = q.trim().toLowerCase();
    if (!ql) return users;
    return users.filter(u => `${u.email} ${u.name} ${u.role} ${u.dept}`.toLowerCase().includes(ql));
  }, [users, q]);

  const activeUsers = useMemo(() => users.filter(u => String(u.active).toUpperCase() !== 'FALSE'), [users]);

  const addUser = async (form) => {
    setBusy('add');
    const optimistic = { ...form, active: 'TRUE' };
    setUsers(prev => [optimistic, ...prev]);
    try {
      const res = await window.Backend.userAdd(form);
      if (!res.ok) throw new Error(res.message || 'error');
      flash('เพิ่มผู้ใช้แล้ว · ' + form.email);
      if (onUsersChange) onUsersChange();
    } catch (e) {
      setUsers(prev => prev.filter(u => u.email !== form.email));
      alert('เพิ่มผู้ใช้ล้มเหลว: ' + e.message);
    }
    setBusy(null);
  };

  const updateUser = async (email, patch) => {
    setBusy(email);
    setUsers(prev => prev.map(u => u.email === email ? { ...u, ...patch } : u));
    try {
      const res = await window.Backend.userUpdate(email, patch);
      if (!res.ok) throw new Error(res.message || 'error');
      flash('อัปเดตผู้ใช้แล้ว · ' + email);
      if (onUsersChange) onUsersChange();
    } catch (e) {
      alert('อัปเดตล้มเหลว: ' + e.message);
    }
    setBusy(null);
    setEditing(null);
  };

  const deactivateUser = async (email) => {
    if (!window.confirm('ระงับสิทธิ์ผู้ใช้ ' + email + ' ?')) return;
    setBusy(email);
    setUsers(prev => prev.map(u => u.email === email ? { ...u, active: 'FALSE' } : u));
    try {
      const res = await window.Backend.userRemove(email);
      if (!res.ok) throw new Error(res.message || 'error');
      flash('ระงับสิทธิ์แล้ว · ' + email);
      if (onUsersChange) onUsersChange();
    } catch (e) {
      alert('ระงับสิทธิ์ล้มเหลว: ' + e.message);
    }
    setBusy(null);
  };

  const reactivateUser = async (email) => {
    setBusy(email);
    setUsers(prev => prev.map(u => u.email === email ? { ...u, active: 'TRUE' } : u));
    try {
      const res = await window.Backend.userUpdate(email, { active: 'TRUE' });
      if (!res.ok) throw new Error(res.message || 'error');
      flash('เปิดใช้งานแล้ว · ' + email);
      if (onUsersChange) onUsersChange();
    } catch (e) {
      alert('เปิดใช้งานล้มเหลว: ' + e.message);
    }
    setBusy(null);
  };

  const deptList = Object.entries(DEPT_META).map(([name, m]) => ({ value: name, label: m.short || name }));

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
      <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexWrap: 'wrap' }}>
        <div className="search" style={{ flex: '1 1 260px', maxWidth: 420 }}>
          <I.search className="ico" size={17} />
          <input placeholder="ค้นหาอีเมล / ชื่อ / แผนก…" value={q} onChange={e => setQ(e.target.value)} />
        </div>
        <div style={{ flex: 1 }} />
        <div style={{ fontSize: 12.5, color: 'var(--ink-3)' }}>ผู้ใช้ที่ใช้งานอยู่ <b className="tnum" style={{ color: 'var(--ink)' }}>{activeUsers.length}</b> / ทั้งหมด {users.length}</div>
        <button className="btn btn-primary btn-sm" onClick={() => setAdding(true)}><I.plus size={15} /> เพิ่มผู้ใช้</button>
      </div>

      <div className="card" style={{ overflow: 'hidden' }}>
        <table className="tbl" style={{ width: '100%' }}>
          <thead>
            <tr>
              <th style={{ textAlign: 'left', padding: '10px 16px' }}>อีเมล</th>
              <th style={{ textAlign: 'left', padding: '10px 12px' }}>ชื่อ</th>
              <th style={{ textAlign: 'center', padding: '10px 12px' }}>บทบาท</th>
              <th style={{ textAlign: 'left', padding: '10px 12px' }}>แผนก</th>
              <th style={{ textAlign: 'center', padding: '10px 12px' }}>สถานะ</th>
              <th style={{ textAlign: 'center', padding: '10px 16px' }}>จัดการ</th>
            </tr>
          </thead>
          <tbody>
            {filtered.length === 0 && (
              <tr><td colSpan={6} style={{ textAlign: 'center', padding: 32, color: 'var(--ink-3)' }}>ไม่พบผู้ใช้</td></tr>
            )}
            {filtered.map(u => {
              const isActive = String(u.active).toUpperCase() !== 'FALSE';
              return (
                <tr key={u.email} style={{ opacity: isActive ? 1 : 0.5 }}>
                  <td style={{ padding: '10px 16px', fontSize: 13, fontFamily: 'var(--mono)' }}>{u.email}</td>
                  <td style={{ padding: '10px 12px', fontSize: 13 }}>{u.name || '—'}</td>
                  <td style={{ padding: '10px 12px', textAlign: 'center' }}>
                    <span className={`pill ${u.role === 'admin' ? 'accent' : 'none'}`} style={{ fontSize: 11 }}>
                      <span className="dot"></span>{u.role === 'admin' ? 'Admin' : 'User'}
                    </span>
                  </td>
                  <td style={{ padding: '10px 12px', fontSize: 12.5 }}>{u.dept || '—'}</td>
                  <td style={{ padding: '10px 12px', textAlign: 'center' }}>
                    <span className={`pill ${isActive ? 'ok' : 'danger'}`} style={{ fontSize: 11 }}>
                      <span className="dot"></span>{isActive ? 'ใช้งาน' : 'ระงับ'}
                    </span>
                  </td>
                  <td style={{ padding: '10px 16px', textAlign: 'center' }}>
                    <div style={{ display: 'flex', gap: 6, justifyContent: 'center' }}>
                      <button className="btn btn-sm btn-ghost" title="แก้ไข" onClick={() => setEditing(u)} disabled={busy === u.email}><I.edit size={14} /></button>
                      {isActive ? (
                        <button className="btn btn-sm btn-ghost" title="ระงับสิทธิ์" onClick={() => deactivateUser(u.email)} disabled={busy === u.email} style={{ color: 'var(--danger)' }}><I.close size={14} /></button>
                      ) : (
                        <button className="btn btn-sm btn-ghost" title="เปิดใช้งาน" onClick={() => reactivateUser(u.email)} disabled={busy === u.email} style={{ color: 'var(--ok)' }}><I.check size={14} /></button>
                      )}
                    </div>
                  </td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>

      {toast && <div className="toast enter"><I.check size={17} /> {toast}</div>}

      {adding && <UserAddModal deptList={deptList} onClose={() => setAdding(false)} onSave={addUser} />}
      {editing && <UserEditModal user={editing} deptList={deptList} onClose={() => setEditing(null)} onSave={updateUser} />}
    </div>
  );
}

function UserAddModal({ deptList, onClose, onSave }) {
  const [f, setF] = useState({ email: '', name: '', role: 'user', dept: '' });
  const set = (k, v) => setF(s => ({ ...s, [k]: v }));
  const submit = (e) => {
    e.preventDefault();
    if (!f.email.trim() || !f.email.includes('@')) { alert('กรุณากรอกอีเมลให้ถูกต้อง'); return; }
    onSave(f);
    onClose();
  };
  return (
    <>
      <div className="scrim" onClick={onClose} />
      <div className="modal" style={{ maxWidth: 420, maxHeight: '90vh', overflowY: 'auto', top: '5vh', transform: 'translate(-50%, 0)' }}>
        <div className="modal-ic"><I.user size={26} /></div>
        <h3 style={{ margin: 0, fontSize: 19, fontWeight: 600 }}>เพิ่มผู้ใช้ใหม่</h3>
        <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 16, width: '100%' }}>
          <div><label className="field-label">อีเมล Google</label><input className="input" type="email" value={f.email} onChange={e => set('email', e.target.value)} placeholder="user@gmail.com" autoFocus required /></div>
          <div><label className="field-label">ชื่อ-สกุล</label><input className="input" value={f.name} onChange={e => set('name', e.target.value)} placeholder="ชื่อ นามสกุล" /></div>
          <div>
            <label className="field-label">บทบาท</label>
            <div className="seg" style={{ display: 'flex' }}>
              {UM_ROLES.map(r => <button type="button" key={r.key} className={f.role === r.key ? 'on' : ''} style={{ flex: 1 }} onClick={() => set('role', r.key)}>{r.label}</button>)}
            </div>
          </div>
          <div>
            <label className="field-label">แผนก</label>
            <select className="input" value={f.dept} onChange={e => set('dept', e.target.value)}>
              <option value="">— ไม่ระบุ —</option>
              {deptList.map(d => <option key={d.value} value={d.value}>{d.label}</option>)}
            </select>
          </div>
          <div style={{ display: 'flex', gap: 10, marginTop: 4 }}>
            <button type="button" className="btn" style={{ flex: 1 }} onClick={onClose}>ยกเลิก</button>
            <button type="submit" className="btn btn-primary" style={{ flex: 1 }}><I.check size={16} /> เพิ่มผู้ใช้</button>
          </div>
        </form>
      </div>
    </>
  );
}

function UserEditModal({ user, deptList, onClose, onSave }) {
  const [f, setF] = useState({ role: user.role || 'user', dept: user.dept || '', name: user.name || '' });
  const set = (k, v) => setF(s => ({ ...s, [k]: v }));
  const submit = (e) => {
    e.preventDefault();
    onSave(user.email, f);
  };
  return (
    <>
      <div className="scrim" onClick={onClose} />
      <div className="modal" style={{ maxWidth: 420, maxHeight: '90vh', overflowY: 'auto', top: '5vh', transform: 'translate(-50%, 0)' }}>
        <div className="modal-ic"><I.edit size={26} /></div>
        <h3 style={{ margin: 0, fontSize: 19, fontWeight: 600 }}>แก้ไขผู้ใช้</h3>
        <div style={{ fontSize: 13, color: 'var(--ink-3)', marginTop: 4, fontFamily: 'var(--mono)' }}>{user.email}</div>
        <form onSubmit={submit} style={{ display: 'flex', flexDirection: 'column', gap: 12, marginTop: 16, width: '100%' }}>
          <div><label className="field-label">ชื่อ-สกุล</label><input className="input" value={f.name} onChange={e => set('name', e.target.value)} /></div>
          <div>
            <label className="field-label">บทบาท</label>
            <div className="seg" style={{ display: 'flex' }}>
              {UM_ROLES.map(r => <button type="button" key={r.key} className={f.role === r.key ? 'on' : ''} style={{ flex: 1 }} onClick={() => set('role', r.key)}>{r.label}</button>)}
            </div>
          </div>
          <div>
            <label className="field-label">แผนก</label>
            <select className="input" value={f.dept} onChange={e => set('dept', e.target.value)}>
              <option value="">— ไม่ระบุ —</option>
              {deptList.map(d => <option key={d.value} value={d.value}>{d.label}</option>)}
            </select>
          </div>
          <div style={{ display: 'flex', gap: 10, marginTop: 4 }}>
            <button type="button" className="btn" style={{ flex: 1 }} onClick={onClose}>ยกเลิก</button>
            <button type="submit" className="btn btn-primary" style={{ flex: 1 }}><I.check size={16} /> บันทึก</button>
          </div>
        </form>
      </div>
    </>
  );
}

window.UserManage = UserManage;