document.addEventListener('DOMContentLoaded', function() {
    const convertForm = document.getElementById('convertForm');
    const resultCard = document.getElementById('resultCard');
    const convertResult = document.getElementById('convertResult');
    const copyBtn = document.getElementById('copyBtn');
    const toast = document.getElementById('toast');
    
    // 表单提交事件
    convertForm.addEventListener('submit', function(e) {
        e.preventDefault();
        
        // 获取表单数据
        const formData = new FormData(convertForm);
        
        // 显示加载提示
        showToast('正在处理，请稍候...');
        
        // 发送 AJAX 请求
        fetch('/convert', {
            method: 'POST',
            body: formData
        })
        .then(response => response.json())
        .then(data => {
            if (data.status === 'success') {
                // 显示结果
                convertResult.value = data.result;
                resultCard.style.display = 'block';
                
                // 滚动到结果区域
                resultCard.scrollIntoView({ behavior: 'smooth' });
            } else {
                showToast('错误: ' + data.message, 'error');
            }
        })
        .catch(error => {
            showToast('请求失败: ' + error, 'error');
        });
    });
    
    // 复制按钮事件
    copyBtn.addEventListener('click', function() {
        convertResult.select();
        document.execCommand('copy');
        
        // 不选中文本
        window.getSelection().removeAllRanges();
        
        showToast('已复制到剪贴板！');
    });
    
    // 显示提示消息
    function showToast(message, type = 'info') {
        toast.textContent = message;
        toast.className = 'toast show ' + type;
        
        // 3秒后隐藏
        setTimeout(function() {
            toast.className = 'toast';
        }, 3000);
    }
    
    // 输入框聚焦动画
    const inputs = document.querySelectorAll('input, textarea, select');
    inputs.forEach(input => {
        input.addEventListener('focus', function() {
            this.parentElement.classList.add('focused');
        });
        
        input.addEventListener('blur', function() {
            this.parentElement.classList.remove('focused');
        });
    });
});