// ============================================================
//  USERS PAGE (Admin only)
// ============================================================
window.UsersPage = function() {
  const [users, setUsers] = React.useState([]);
  const [loading, setLoading] = React.useState(true);
  const [showAdd, setShowAdd] = React.useState(false);
  const [editUser, setEditUser] = React.useState(null);
  const [deleteUser, setDeleteUser] = React.useState(null);
  const currentUser = Store.getUser();

  React.useEffect(() => { load(); }, []);

  const load = async () => {
    setLoading(true);
    try {
      const res = await API.get('users', { limit:200 });
      setUsers(res.data || []);
    } catch(e) { toast('Lỗi tải users', 'error'); }
    setLoading(false);
  };

  const UserModal = ({ user: u, onClose }) => {
    const editing = !!u;
    const [form, setForm] = React.useState(u ? { ...u, password: '' } : {
      username: '', password: '', full_name: '', email: '', role: 'member', status: 'active', avatar: ''
    });
    const [saving, setSaving] = React.useState(false);
    const set = (k, v) => setForm(f => ({ ...f, [k]: v }));

    const save = async () => {
      if (!form.username || !form.full_name || (!editing && !form.password)) {
        toast('Vui lòng nhập đầy đủ thông tin bắt buộc', 'warning'); return;
      }
      if (!form.avatar) form.avatar = form.full_name.split(' ').map(w => w[0]).slice(-2).join('').toUpperCase();
      setSaving(true);
      try {
        const data = { ...form };
        if (editing && !form.password) delete data.password;
        if (editing) {
          const upd = await API.patch('users', u.id, data);
          setUsers(prev => prev.map(x => x.id === upd.id ? upd : x));
          await logAction('update_user', `Cập nhật user: ${form.full_name}`);
          toast('Đã cập nhật user', 'success');
        } else {
          const n = await API.post('users', { ...data, id: uuid() });
          setUsers(prev => [...prev, n]);
          await logAction('create_user', `Tạo user mới: ${form.full_name} (${form.role})`);
          toast('Đã thêm user', 'success');
        }
        onClose();
      } catch(e) { toast('Lỗi lưu user', 'error'); }
      setSaving(false);
    };

    return (
      <Modal title={editing ? 'Chỉnh sửa User' : 'Thêm User mới'} onClose={onClose}>
        <div className="mo-body">
          <div className="fr2">
            <div className="fg">
              <label className="fl">Họ tên đầy đủ <span style={{color:'var(--red)'}}>*</span></label>
              <input className="fc" value={form.full_name} onChange={e => set('full_name', e.target.value)} placeholder="VD: Nguyễn Văn SEO"/>
            </div>
            <div className="fg">
              <label className="fl">Username <span style={{color:'var(--red)'}}>*</span></label>
              <input className="fc" value={form.username} onChange={e => set('username', e.target.value)} placeholder="VD: seo_member1"/>
            </div>
          </div>
          <div className="fr2">
            <div className="fg">
              <label className="fl">{editing ? 'Mật khẩu mới (để trống = giữ nguyên)' : 'Mật khẩu *'}</label>
              <input className="fc" type="password" value={form.password} onChange={e => set('password', e.target.value)} placeholder={editing ? 'Để trống nếu không đổi' : 'Nhập mật khẩu'}/>
            </div>
            <div className="fg">
              <label className="fl">Email</label>
              <input className="fc" type="email" value={form.email} onChange={e => set('email', e.target.value)} placeholder="email@company.vn"/>
            </div>
          </div>
          <div className="fr2">
            <div className="fg">
              <label className="fl">Role</label>
              <select className="fc" value={form.role} onChange={e => set('role', e.target.value)}>
                <option value="member">👤 Member (SEO)</option>
                <option value="admin">⚡ Admin (Quản trị)</option>
              </select>
            </div>
            <div className="fg">
              <label className="fl">Trạng thái</label>
              <select className="fc" value={form.status} onChange={e => set('status', e.target.value)}>
                <option value="active">Đang hoạt động</option>
                <option value="inactive">Tạm khoá</option>
              </select>
            </div>
          </div>
        </div>
        <div className="mo-foot">
          <button className="btn btn-ghost btn-sm" onClick={onClose}>Huỷ</button>
          <button className="btn btn-primary btn-sm" onClick={save} disabled={saving}>
            {saving ? <><i className="fas fa-spinner fa-spin"/> Đang lưu...</> : (editing ? 'Cập nhật' : 'Thêm User')}
          </button>
        </div>
      </Modal>
    );
  };

  const confirmDelete = async () => {
    try {
      await API.patch('users', deleteUser.id, { status: 'inactive' });
      setUsers(prev => prev.map(u => u.id === deleteUser.id ? { ...u, status: 'inactive' } : u));
      await logAction('deactivate_user', `Khoá tài khoản: ${deleteUser.full_name}`);
      toast('Đã khoá tài khoản', 'success');
    } catch(e) { toast('Lỗi khoá tài khoản', 'error'); }
    setDeleteUser(null);
  };

  if (loading) return <Spinner/>;

  const admins = users.filter(u => u.role === 'admin');
  const members = users.filter(u => u.role === 'member');

  return (
    <div className="fade-in">
      <div className="ph">
        <div>
          <div className="ph-title"><i className="fas fa-users" style={{ marginRight:8,color:'var(--primary)' }}/>Quản lý User</div>
          <div className="ph-sub">{admins.length} admin · {members.length} member</div>
        </div>
        <button className="btn btn-primary btn-sm" onClick={() => setShowAdd(true)}>
          <i className="fas fa-user-plus"/> Thêm User
        </button>
      </div>

      {/* STATS */}
      <div className="stats-row" style={{marginBottom:16}}>
        {[
          {ico:'fa-users',cls:'blue',val:users.length,lbl:'Tổng tài khoản'},
          {ico:'fa-shield-alt',cls:'orange',val:admins.length,lbl:'Admins'},
          {ico:'fa-user',cls:'green',val:members.length,lbl:'Members'},
          {ico:'fa-user-check',cls:'cyan',val:users.filter(u=>u.status==='active').length,lbl:'Đang hoạt động'},
        ].map((s,i)=>(
          <div key={i} className="sc">
            <div className={`sc-ico ${s.cls}`}><i className={`fas ${s.ico}`}/></div>
            <div><div className="sc-val">{s.val}</div><div className="sc-lbl">{s.lbl}</div></div>
          </div>
        ))}
      </div>

      <div className="card">
        <div className="tbl-wrap">
          <table>
            <thead>
              <tr>
                <th>Thành viên</th><th>Username</th><th>Email</th><th>Role</th>
                <th>Trạng thái</th><th>Đăng nhập cuối</th><th>Ngày tạo</th><th></th>
              </tr>
            </thead>
            <tbody>
              {users.map(u => (
                <tr key={u.id}>
                  <td>
                    <div style={{ display:'flex', alignItems:'center', gap:10 }}>
                      <AvatarChip name={u.full_name} size={32}/>
                      <span style={{ fontWeight:600 }}>{u.full_name}</span>
                    </div>
                  </td>
                  <td style={{ fontFamily:'monospace', fontSize:'.84rem', color:'var(--primary)' }}>{u.username}</td>
                  <td style={{ fontSize:'.84rem', color:'var(--t3)' }}>{u.email || '—'}</td>
                  <td><Badge cls={u.role==='admin'?'b-danger':'b-primary'} label={u.role==='admin'?'⚡ Admin':'👤 Member'}/></td>
                  <td>
                    <div style={{ display:'flex', alignItems:'center', gap:6 }}>
                      <span style={{ width:8,height:8,borderRadius:'50%',background:u.status==='active'?'var(--green)':'var(--red)',display:'inline-block',flexShrink:0 }}/>
                      <span style={{ fontSize:'.84rem' }}>{u.status==='active'?'Hoạt động':'Khoá'}</span>
                    </div>
                  </td>
                  <td style={{ fontSize:'.8rem', color:'var(--t3)' }}>{u.last_login ? formatDateShort(u.last_login) : '—'}</td>
                  <td style={{ fontSize:'.8rem', color:'var(--t3)' }}>{formatDateShort(u.created_at)}</td>
                  <td>
                    <div style={{ display:'flex', gap:4 }}>
                      <button className="icon-btn" onClick={() => setEditUser(u)} title="Sửa"><i className="fas fa-edit"/></button>
                      {u.id !== currentUser?.id && u.status === 'active' && (
                        <button className="icon-btn danger" onClick={() => setDeleteUser(u)} title="Khoá tài khoản"><i className="fas fa-ban"/></button>
                      )}
                    </div>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>

      {showAdd && <UserModal onClose={() => setShowAdd(false)}/>}
      {editUser && <UserModal user={editUser} onClose={() => setEditUser(null)}/>}
      {deleteUser && <ConfirmModal title="Khoá tài khoản" message={`Bạn có muốn khoá tài khoản "${deleteUser.full_name}"? User sẽ không thể đăng nhập.`}
        danger onConfirm={confirmDelete} onClose={() => setDeleteUser(null)}/>}
    </div>
  );
};