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

// DOM 元素
const addUserForm = document.getElementById('add-user-form');
const nameInput = document.getElementById('name');
const emailInput = document.getElementById('email');
const ageInput = document.getElementById('age');
const saveBtn = document.getElementById('save-btn');
const resetBtn = document.getElementById('reset-btn');
const cancelBtn = document.getElementById('cancel-btn');
const messageDiv = document.getElementById('message');
const importForm = document.getElementById('import-form');
const importFileInput = document.getElementById('import-file');

// 頁面載入時設置事件監聽器
document.addEventListener('DOMContentLoaded', () => {
    setupEventListeners();
});

// 設置事件監聽器
function setupEventListeners() {
    // 表單提交事件
    addUserForm.addEventListener('submit', handleFormSubmit);
    
    // 重置按鈕事件
    resetBtn.addEventListener('click', resetForm);
    
    // 取消按鈕事件
    cancelBtn.addEventListener('click', () => {
        window.location.href = 'index.html';
    });
    
    // 檔案匯入表單提交事件
    importForm.addEventListener('submit', handleImportSubmit);
}

// 處理表單提交
async function handleFormSubmit(event) {
    event.preventDefault();
    
    const userData = {
        name: nameInput.value.trim(),
        email: emailInput.value.trim(),
        age: parseInt(ageInput.value)
    };
    
    try {
        const response = await fetch(API_BASE_URL, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(userData)
        });
        
        const result = await response.json();
        
        if (result.status === 'success') {
            showMessage('用戶創建成功', 'success');
            resetForm();
            
            // 延遲後跳轉回用戶列表頁面
            setTimeout(() => {
                window.location.href = 'index.html';
            }, 2000);
        } else {
            showMessage(result.message, 'error');
        }
    } catch (error) {
        console.error('保存用戶失敗:', error);
        showMessage('保存用戶失敗', 'error');
    }
}

// 重置表單
function resetForm() {
    addUserForm.reset();
}

// 顯示訊息
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('請選擇檔案', 'error');
        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, 'success');
            
            // 重置表單
            importForm.reset();
            
            // 延遲後跳轉回用戶列表頁面
            setTimeout(() => {
                window.location.href = 'index.html';
            }, 3000);
        } else {
            showMessage(`匯入失敗: ${result.message}`, 'error');
        }
    } catch (error) {
        console.error('匯入錯誤:', error);
        showMessage('匯入過程中發生錯誤，請稍後再試', 'error');
    }
}