// DOM元素
const elements = {
    // 主题切换
    themeToggle: document.getElementById('themeToggle'),
    // 移动端菜单
    mobileMenuBtn: document.getElementById('mobileMenuBtn'),
    mobileMenu: document.getElementById('mobileMenu'),
    // 高级选项切换
    advancedOptionsToggle: document.getElementById('advancedOptionsToggle'),
    advancedOptions: document.getElementById('advancedOptions'),
    // 生成器元素
    prompt: document.getElementById('prompt'),
    size: document.getElementById('size'),
    style: document.getElementById('style'),
    negativePrompt: document.getElementById('negativePrompt'),
    guidanceScale: document.getElementById('guidanceScale'),
    guidanceScaleValue: document.getElementById('guidanceScaleValue'),
    generateBtn: document.getElementById('generateBtn'),
    randomPromptBtn: document.getElementById('randomPromptBtn'),
    clearPromptBtn: document.getElementById('clearPromptBtn'),
    // 状态元素
    loadingState: document.getElementById('loadingState'),
    progressBar: document.getElementById('progressBar'),
    progressText: document.getElementById('progressText'),
    errorState: document.getElementById('errorState'),
    errorMessage: document.getElementById('errorMessage'),
    resultState: document.getElementById('resultState'),
    resultImage: document.getElementById('resultImage'),
    // 结果操作按钮
    retryBtn: document.getElementById('retryBtn'),
    downloadBtn: document.getElementById('downloadBtn'),
    regenerateBtn: document.getElementById('regenerateBtn'),
    saveToHistoryBtn: document.getElementById('saveToHistoryBtn'),
    // 历史记录
    historyContainer: document.getElementById('historyContainer')
};

// 示例提示词库
const examplePrompts = [
    "一副典雅庄重的对联悬挂于厅堂之中，房间是个安静古典的中式布置，桌子上放着一些青花瓷，对联上左书“云端书声琅琅跨山海”，右书“智脉笔影翩翩启星辰”， 横批“东师理想”，字体飘逸，中间挂在一着一副中国风的画作，内容是岳阳楼。",
    "未来城市的夜景，赛博朋克风格，霓虹灯，雨天，反射效果",
    "一片宁静美丽的松林，阳光透过树叶，雾气弥漫，油画风格",
    "一个穿着中世纪盔甲的骑士，站在山顶上，背景是龙和城堡",
    "海底世界，五彩斑斓的珊瑚和鱼群，梦幻光影效果",
    "一只戴着宇航员头盔的柴犬，站在火星表面，日落时分"
];

// 初始化函数
function init() {
    // 初始化主题
    initTheme();
    // 加载历史记录
    // loadHistory(); // 移除未定义函数调用
    // 绑定事件监听器
    bindEventListeners();
}

// 获取随机提示词
function getRandomPrompt() {
    return examplePrompts[Math.floor(Math.random() * examplePrompts.length)];
}

// 初始化主题
function initTheme() {
    // 检查本地存储
    const savedTheme = localStorage.getItem('theme');
    const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    
    // 设置初始主题
    if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
        document.documentElement.classList.add('dark');
    }
}

// 切换主题
function toggleTheme() {
    document.documentElement.classList.toggle('dark');
    const isDark = document.documentElement.classList.contains('dark');
    localStorage.setItem('theme', isDark ? 'dark' : 'light');
}

// 切换移动端菜单
function toggleMobileMenu() {
    elements.mobileMenu.classList.toggle('hidden');
}

// 切换高级选项
function toggleAdvancedOptions() {
    elements.advancedOptions.classList.toggle('hidden');
    const icon = elements.advancedOptionsToggle.querySelector('i');
    icon.classList.toggle('rotate-180');
}

// 更新引导力度显示
function updateGuidanceScale() {
    elements.guidanceScaleValue.textContent = elements.guidanceScale.value;
}

// 显示加载状态
function showLoadingState() {
    elements.generateBtn.disabled = true;
    elements.loadingState.classList.remove('hidden');
    elements.errorState.classList.add('hidden');
    elements.resultState.classList.add('hidden');
}

// 更新进度
function updateProgress(percent) {
    elements.progressBar.style.width = `${percent}%`;
    elements.progressText.textContent = `进度: ${percent}%`;
}

// 显示错误状态
function showErrorState(message) {
    elements.loadingState.classList.add('hidden');
    elements.errorState.classList.remove('hidden');
    elements.errorMessage.textContent = message;
    elements.generateBtn.disabled = false;
}

// 显示结果状态
function showResultState(imageUrl) {
    elements.loadingState.classList.add('hidden');
    elements.resultState.classList.remove('hidden');
    elements.resultImage.src = imageUrl;
    elements.generateBtn.disabled = false;
}

// 生成图像
async function generateImage() {
    const prompt = elements.prompt.value.trim();
    
    // 验证输入
    if (!prompt) {
        showErrorState('请输入图像描述词');
        return;
    }
    
    // 显示加载状态
    showLoadingState();
    updateProgress(10);
    
    try {
        // 构建请求数据
        const requestData = {
            prompt: prompt,
            size: elements.size.value,
        };
        
        // 模拟进度更新
        const progressInterval = setInterval(() => {
            const currentWidth = parseInt(elements.progressBar.style.width);
            if (currentWidth < 90) {
                updateProgress(currentWidth + Math.random() * 10);
            }
        }, 500);
        
        // 调用API生成图像 (参考TestQWen3Image.py中的接口)
        console.log('请求URL:', '/api/qwenImage/generate');
        console.log('请求参数:', JSON.stringify(requestData, null, 2));
        const response = await fetch('/api/qwenImage/generate', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(requestData)
        });
        
        clearInterval(progressInterval);
        updateProgress(100);
        
        if (!response.ok) {
            // 尝试解析错误响应
            const errorDetails = await response.json().catch(() => ({}));
            const errorMsg = errorDetails.message || `API请求失败: ${response.status} ${response.statusText}`;
            throw new Error(errorMsg);
        }
        
        const result = await response.json();
        
        // 检查API返回状态 (参考TestQWen3Image.py中的响应处理)
        if (result.code !== 200 || !result.data || !result.data.images || result.data.images.length === 0) {
            throw new Error(result.message || '未获取到生成的图像');
        }
        
        // 显示结果
        showResultState(result.data.images[0]);
        
    } catch (error) {
        console.error('生成图像失败:', error);
        showErrorState(error.message || '生成图像时发生错误，请重试');
    }
}

// 下载图像
function downloadImage() {
    if (!elements.resultImage.src) return;
    
    const link = document.createElement('a');
    link.href = elements.resultImage.src;
    link.download = `qwen-image-${new Date().getTime()}.png`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

// 保存到历史记录
function saveToHistory() {
    if (!elements.resultImage.src || !elements.prompt.value.trim()) return;
    
    const historyItem = {
        id: Date.now(),
        prompt: elements.prompt.value.trim(),
        size: elements.size.value,
        style: elements.style.value,
        imageUrl: elements.resultImage.src,
        timestamp: new Date().toISOString()
    };
    
    // 获取现有历史记录
    const history = JSON.parse(localStorage.getItem('qwenImageHistory') || '[]');
    // 添加新记录
    history.unshift(historyItem);
    // 限制历史记录数量
    if (history.length > 20) history.pop();
    // 保存到本地存储
    localStorage.setItem('qwenImageHistory', JSON.stringify(history));
    // 更新历史记录显示
    renderHistory();
    
    // 显示提示
    alert('已保存到历史记录');
}

// 渲染历史记录
function renderHistory() {
    const history = JSON.parse(localStorage.getItem('qwenImageHistory') || '[]');
    
    if (history.length === 0) {
        elements.historyContainer.innerHTML = `
            <div class="text-center py-12 text-gray-500 dark:text-gray-400 col-span-full">
                <i class="fa fa-history text-4xl mb-4"></i>
                <p>暂无生成历史</p>
                <p class="text-sm mt-2">生成图像后，历史记录将显示在这里</p>
            </div>
        `;
        return;
    }
    
    // 生成历史记录项
    elements.historyContainer.innerHTML = history.map(item => `
        <div class="bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-md transition-all duration-300 hover:shadow-lg">
            <img src="${item.imageUrl}" alt="${item.prompt.substring(0, 30)}..." class="w-full h-48 object-cover">
            <div class="p-3">
                <p class="text-sm font-medium truncate" title="${item.prompt}">${item.prompt}</p>
                <div class="flex justify-between items-center mt-2 text-xs text-gray-500 dark:text-gray-400">
                    <span>${item.size}</span>
                    <span>${new Date(item.timestamp).toLocaleString()}</span>
                </div>
            </div>
        </div>
    `).join('');
}

// 绑定事件监听器
function bindEventListeners() {
    // 主题切换
    elements.themeToggle.addEventListener('click', toggleTheme);
    
    // 移动端菜单
    elements.mobileMenuBtn.addEventListener('click', toggleMobileMenu);
    
    // 高级选项切换
    elements.advancedOptionsToggle.addEventListener('click', toggleAdvancedOptions);
    
    // 引导力度滑块
    elements.guidanceScale.addEventListener('input', updateGuidanceScale);
    
    // 随机提示词
    elements.randomPromptBtn.addEventListener('click', () => {
        elements.prompt.value = getRandomPrompt();
    });
    
    // 清空提示词
    elements.clearPromptBtn.addEventListener('click', () => {
        elements.prompt.value = '';
    });
    
    // 生成按钮
    elements.generateBtn.addEventListener('click', generateImage);
    
    // 重试按钮
    elements.retryBtn.addEventListener('click', generateImage);
    
    // 重新生成按钮
    elements.regenerateBtn.addEventListener('click', generateImage);
    
    // 下载按钮
    elements.downloadBtn.addEventListener('click', downloadImage);
    
    // 保存到历史
    elements.saveToHistoryBtn.addEventListener('click', saveToHistory);
}

// 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', init);