// 全局變數
let currentPage = 1;
let totalPages = 1;
let limit = 10;
let minAge = null;
let maxAge = null;
let editMode = false;
let users = [];

// API 基礎 URL
const API_BASE_URL = '/v1/users';

// DOM 元素
const usersList = document.getElementById('users-list');
const userForm = document.getElementById('user-form');
const formTitle = document.getElementById('form-title');
const userIdInput = document.getElementById('user-id');
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
const ageInput = document.getElementById('age');
const saveBtn = document.getElementById('save-btn');
const cancelBtn = document.getElementById('cancel-btn');
const minAgeInput = document.getElementById('min-age');
const maxAgeInput = document.getElementById('max-age');
const filterBtn = document.getElementById('filter-btn');
const resetFilterBtn = document.getElementById('reset-filter-btn');
const prevPageBtn = document.getElementById('prev-page');
const nextPageBtn = document.getElementById('next-page');
const currentPageSpan = document.getElementById('current-page');
const totalPagesSpan = document.getElementById('total-pages');
const pageLimitSelect = document.getElementById('page-limit');
const messageDiv = document.getElementById('message');
const importForm = document.getElementById('import-form');
const importFileInput = document.getElementById('import-file');

// 頁面載入時獲取用戶列表
document.addEventListener('DOMContentLoaded', () => {
    fetchUsers();
    setupEventListeners();
});

// 設置事件監聽器
function setupEventListeners() {
    // 表單提交事件
    userForm.addEventListener('submit', handleFormSubmit);
    
    // 取消按鈕事件
    cancelBtn.addEventListener('click', resetForm);
    
    // 過濾按鈕事件
    filterBtn.addEventListener('click', () => {
        minAge = minAgeInput.value ? parseInt(minAgeInput.value) : null;
        maxAge = maxAgeInput.value ? parseInt(maxAgeInput.value) : null;
        currentPage = 1;
        fetchUsers();
    });
    
    // 重置過濾按鈕事件
    resetFilterBtn.addEventListener('click', () => {
        minAgeInput.value = '';
        maxAgeInput.value = '';
        minAge = null;
        maxAge = null;
        currentPage = 1;
        fetchUsers();
    });
    
    // 分頁按鈕事件
    prevPageBtn.addEventListener('click', () => {
        if (currentPage > 1) {
            currentPage--;
            fetchUsers();
        }
    });
    
    nextPageBtn.addEventListener('click', () => {
        if (currentPage < totalPages) {
            currentPage++;
            fetchUsers();
        }
    });
    
    // 每頁顯示數量變更事件
    pageLimitSelect.addEventListener('change', () => {
        limit = parseInt(pageLimitSelect.value);
        currentPage = 1;
        fetchUsers();
    });
    
    // 檔案匯入表單提交事件
    importForm.addEventListener('submit', handleImportSubmit);
}

// 獲取用戶列表
async function fetchUsers() {
    try {
        // 構建 URL 查詢參數
        const params = new URLSearchParams();
        params.append('page', currentPage);
        params.append('limit', limit);
        
        if (minAge !== null) params.append('min_age', minAge);
        if (maxAge !== null) params.append('max_age', maxAge);
        
        const response = await fetch(`${API_BASE_URL}?${params.toString()}`);
        const result = await response.json();
        
        if (result.status === 'success') {
            users = result.data.users;
            renderUsers(users);
            
            // 更新分頁信息
            const meta = result.data.meta;
            totalPages = meta.total_pages;
            currentPageSpan.textContent = meta.page;
            totalPagesSpan.textContent = totalPages;
            
            // 更新分頁按鈕狀態
            prevPageBtn.disabled = meta.page <= 1;
            nextPageBtn.disabled = meta.page >= totalPages;
        } else {
            showMessage(result.message, 'error');
        }
    } catch (error) {
        console.error('獲取用戶列表失敗:', error);
        showMessage('獲取用戶列表失敗', 'error');
    }
}

// 渲染用戶列表
function renderUsers(users) {
    usersList.innerHTML = '';
    
    if (users.length === 0) {
        const emptyRow = document.createElement('tr');
        emptyRow.innerHTML = `<td colspan="5" style="text-align: center;">沒有找到用戶</td>`;
        usersList.appendChild(emptyRow);
        return;
    }
    
    users.forEach(user => {
        const row = document.createElement('tr');
        row.innerHTML = `
            <td>${user.id}</td>
            <td>${user.name}</td>
            <td>${user.email}</td>
            <td>${user.age}</td>
            <td>
                <button class="action-btn edit-btn" data-id="${user.id}">編輯</button>
                <button class="action-btn delete-btn" data-id="${user.id}">刪除</button>
            </td>
        `;
        usersList.appendChild(row);
    });
    
    // 添加編輯和刪除按鈕的事件監聽器
    document.querySelectorAll('.edit-btn').forEach(btn => {
        btn.addEventListener('click', () => editUser(parseInt(btn.dataset.id)));
    });
    
    document.querySelectorAll('.delete-btn').forEach(btn => {
        btn.addEventListener('click', () => deleteUser(parseInt(btn.dataset.id)));
    });
}

// 處理表單提交
async function handleFormSubmit(event) {
    event.preventDefault();
    
    // 如果不是編輯模式，重定向到新增用戶頁面
    if (!editMode) {
        window.location.href = 'add_user.html';
        return;
    }
    
    const userData = {
        name: nameInput.value.trim(),
        email: emailInput.value.trim(),
        age: parseInt(ageInput.value)
    };
    
    try {
        // 更新用戶
        const userId = parseInt(userIdInput.value);
        const url = `${API_BASE_URL}/${userId}`;
        const method = 'PATCH';
        
        const response = await fetch(url, {
            method: method,
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(userData)
        });
        
        const result = await response.json();
        
        if (result.status === 'success') {
            showMessage(editMode ? '用戶更新成功' : '用戶創建成功', 'success');
            resetForm();
            fetchUsers();
        } else {
            showMessage(result.message, 'error');
        }
    } catch (error) {
        console.error('保存用戶失敗:', error);
        showMessage('保存用戶失敗', 'error');
    }
}

// 編輯用戶
async function editUser(userId) {
    try {
        const response = await fetch(`${API_BASE_URL}/${userId}`);
        const result = await response.json();
        
        if (result.status === 'success') {
            const user = result.data.user;
            
            // 填充表單
            userIdInput.value = user.id;
            nameInput.value = user.name;
            emailInput.value = user.email;
            ageInput.value = user.age;
            
            // 切換到編輯模式
            editMode = true;
            
            // 顯示編輯表單
            const editFormContainer = document.getElementById('edit-form-container');
            editFormContainer.style.display = 'block';
            
            // 滾動到表單
            editFormContainer.scrollIntoView({ behavior: 'smooth' });
        } else {
            showMessage(result.message, 'error');
        }
    } catch (error) {
        console.error('獲取用戶詳情失敗:', error);
        showMessage('獲取用戶詳情失敗', 'error');
    }
}

// 刪除用戶
async function deleteUser(userId) {
    if (!confirm(`確定要刪除 ID 為 ${userId} 的用戶嗎？`)) {
        return;
    }
    
    try {
        const response = await fetch(`${API_BASE_URL}/${userId}`, {
            method: 'DELETE'
        });
        
        if (response.status === 204) {
            showMessage('用戶刪除成功', 'success');
            fetchUsers();
        } else {
            const result = await response.json();
            showMessage(result.message, 'error');
        }
    } catch (error) {
        console.error('刪除用戶失敗:', error);
        showMessage('刪除用戶失敗', 'error');
    }
}

// 重置表單
function resetForm() {
    userForm.reset();
    userIdInput.value = '';
    editMode = false;
    
    // 隱藏編輯表單
    const editFormContainer = document.getElementById('edit-form-container');
    editFormContainer.style.display = 'none';
}

// 顯示訊息
function showMessage(message, type) {
    messageDiv.textContent = message;
    messageDiv.className = `message ${type}`;
    
    // 5 秒後自動隱藏訊息
    setTimeout(() => {
        messageDiv.className = 'message';
    }, 5000);
}

// 處理檔案匯入
async function handleImportSubmit(event) {
    event.preventDefault();
    
    if (!importFileInput.files || importFileInput.files.length === 0) {
        showMessage('請選擇檔案', true);
        return;
    }
    
    const file = importFileInput.files[0];
    const formData = new FormData();
    formData.append('file', file);
    
    try {
        showMessage('正在匯入資料，請稍候...');
        
        const response = await fetch(`${API_BASE_URL}/import`, {
            method: 'POST',
            body: formData
        });
        
        const result = await response.json();
        
        if (result.status === 'success') {
            // 顯示匯入結果
            const successCount = result.data.success_count;
            const errorCount = result.data.error_count;
            let message = `匯入成功: ${successCount} 筆資料`;
            
            if (errorCount > 0) {
                message += `, 失敗: ${errorCount} 筆資料`;
            }
            
            showMessage(message);
            
            // 重新載入用戶列表
            fetchUsers();
            
            // 重置表單
            importForm.reset();
        } else {
            showMessage(`匯入失敗: ${result.message}`, true);
        }
    } catch (error) {
        console.error('匯入錯誤:', error);
        showMessage('匯入過程中發生錯誤，請稍後再試', true);
    }
}