<template>
  <div class="p-4">
    <h4>Test API SugStaff</h4>
    
    <div class="mb-3">
      <label>Nhập từ khóa để test:</label>
      <input 
        v-model="keyword" 
        @input="testAPI" 
        class="form-control" 
        placeholder="Nhập tên hoặc username..."
      >
    </div>
    
    <div v-if="loading" class="text-info">
      Đang tìm kiếm...
    </div>
    
    <div v-if="error" class="alert alert-danger">
      Lỗi: {{ error }}
    </div>
    
    <div v-if="results.length > 0" class="mt-3">
      <h6>Kết quả ({{ results.length }} người):</h6>
      <ul class="list-group">
        <li v-for="user in results" :key="user.Id" class="list-group-item">
          <strong>{{ user.FullName }}</strong> 
          <small class="text-muted">(@{{ user.UserName }}) - ID: {{ user.Id }}</small>
        </li>
      </ul>
    </div>
    
    <div v-else-if="!loading && keyword.length >= 2" class="text-muted">
      Không tìm thấy kết quả nào
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import userService from '@/services/userService';

const keyword = ref('');
const results = ref([]);
const loading = ref(false);
const error = ref('');

const testAPI = async () => {
  if (keyword.value.length < 2) {
    results.value = [];
    return;
  }
  
  loading.value = true;
  error.value = '';
  
  try {
    const result = await userService.sugStaff(keyword.value);
    console.log('API Response:', result);
    results.value = result || [];
  } catch (err) {
    console.error('API Error:', err);
    error.value = err.message || 'Có lỗi xảy ra khi gọi API';
    results.value = [];
  } finally {
    loading.value = false;
  }
};
</script>
