// 显示图片模态框函数移到全局作用域
function showImageModal(imgElement) {
    const modal = document.getElementById('imageModal');
    const modalImg = document.getElementById('modalImage');
    modalImg.src = imgElement.src;
    modalImg.alt = imgElement.alt;
    
    const bsModal = new bootstrap.Modal(modal);
    bsModal.show();
}

document.addEventListener('DOMContentLoaded', function() {
    // 初始化工具提示
    var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    });

    const form = document.getElementById('dataAccessForm');
    const steps = document.querySelectorAll('.form-step');
    const progressSteps = document.querySelectorAll('.step');
    const prevBtn = document.getElementById('prevBtn');
    const nextBtn = document.getElementById('nextBtn');
    let currentStep = 0;

    // 更新步骤显示
    function updateSteps() {
        steps.forEach((step, index) => {
            if (index === currentStep) {
                step.classList.remove('d-none');
            } else {
                step.classList.add('d-none');
            }
        });

        // 更新进度指示器
        progressSteps.forEach((step, index) => {
            if (index === currentStep) {
                step.classList.add('active');
            } else if (index < currentStep) {
                step.classList.add('completed');
                step.classList.remove('active');
            } else {
                step.classList.remove('active', 'completed');
            }
        });

        // 更新按钮状态
        prevBtn.disabled = currentStep === 0;
        if (currentStep === steps.length - 1) {
            nextBtn.textContent = '提交';
        } else {
            nextBtn.textContent = '下一步';
        }
    }

    // 处理接入方式选择
    const accessMethodSelect = document.querySelector('select');
    const accessMethodForms = document.getElementById('accessMethodForms');

    accessMethodSelect.addEventListener('change', function(e) {
        const method = e.target.value;
        accessMethodForms.innerHTML = '';

        if (method === 'file') {
            accessMethodForms.innerHTML = `
                <div class="mb-3">
                    <label class="form-label">选择文件</label>
                    <input type="file" class="form-control" required>
                    <div class="form-text">支持的格式：CSV, Excel, JSON</div>
                </div>
            `;
        } else if (method === 'api') {
            accessMethodForms.innerHTML = `
                <div class="mb-3">
                    <label class="form-label">API 地址</label>
                    <input type="url" class="form-control" required>
                </div>
                <div class="mb-3">
                    <label class="form-label">认证令牌</label>
                    <input type="text" class="form-control" required>
                </div>
                <button type="button" class="btn btn-outline-primary" onclick="testConnection()">测试连接</button>
            `;
        } else if (method === 'database') {
            accessMethodForms.innerHTML = `
                <div class="mb-3">
                    <label class="form-label">数据库类型</label>
                    <select class="form-select" required>
                        <option value="mysql">MySQL</option>
                        <option value="postgresql">PostgreSQL</option>
                        <option value="sqlserver">SQL Server</option>
                    </select>
                </div>
                <div class="mb-3">
                    <label class="form-label">连接字符串</label>
                    <input type="text" class="form-control" required>
                </div>
                <button type="button" class="btn btn-outline-primary" onclick="testConnection()">测试连接</button>
            `;
        }
    });

    // 测试连接
    window.testConnection = function() {
        // 显示加载状态
        const btn = event.target;
        const originalText = btn.textContent;
        btn.disabled = true;
        btn.innerHTML = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span> 测试中...';

        // 模拟API调用
        setTimeout(() => {
            btn.disabled = false;
            btn.textContent = originalText;
            alert('连接测试成功！');
        }, 2000);
    };

    // 表单验证
    function validateCurrentStep() {
        const currentStepElement = steps[currentStep];
        const inputs = currentStepElement.querySelectorAll('input, select');
        let isValid = true;

        inputs.forEach(input => {
            if (input.hasAttribute('required') && !input.value) {
                isValid = false;
                input.classList.add('is-invalid');
            } else {
                input.classList.remove('is-invalid');
            }
        });

        return isValid;
    }

    // 按钮事件监听
    prevBtn.addEventListener('click', () => {
        if (currentStep > 0) {
            currentStep--;
            updateSteps();
        }
    });

    nextBtn.addEventListener('click', () => {
        if (!validateCurrentStep()) {
            return;
        }

        if (currentStep < steps.length - 1) {
            currentStep++;
            updateSteps();
        } else {
            // 提交表单
            if (form.checkValidity()) {
                alert('表单提交成功！');
                // 这里添加实际的表单提交逻辑
            }
        }
    });

    // 初始化显示
    updateSteps();
});