/**
 * QRQQ 官网 - 前端交互脚本
 */

const navbar = document.getElementById('navbar');
const navLinks = document.getElementById('navLinks');
const mobileToggle = document.getElementById('mobileToggle');
const simFeatures = document.getElementById('simFeatures');
const toyFeatures = document.getElementById('toyFeatures');
const faqList = document.getElementById('faqList');
const contactForm = document.getElementById('contactForm');
const toast = document.getElementById('toast');

// ===== 流量卡 - 优势数据 =====
const SIM_FEATURES = [
    {
        title: '5G 极速网络',
        desc: '支持 5G 高速网络，下行速率可达 1Gbps，看视频、打游戏、直播畅快无阻。'
    },
    {
        title: '超值套餐',
        desc: '低至 19 元/月，海量通用流量，不限应用，无隐形消费，性价比拉满。'
    },
    {
        title: '正规运营商',
        desc: '与中国移动、联通、电信等头部运营商深度合作，正规出卡，售后有保障。'
    },
    {
        title: '免费包邮',
        desc: '在线下单即可免费包邮到家，足不出户完成办理，省时省力更省心。'
    },
    {
        title: '全国通用',
        desc: '流量全国通用（港澳台除外），出差旅行不断网，随时随地畅快上网。'
    },
    {
        title: '在线客服',
        desc: '专业客服团队在线答疑，从选卡到激活全程指导，让你办卡无忧。'
    }
];

// ===== 智能体对话玩具 - 优势数据 =====
const TOY_FEATURES = [
    {
        title: '自然对话',
        desc: '基于大语言模型，实现自然流畅的语音对话，孩子可以像和朋友聊天一样自由交流。'
    },
    {
        title: '智能学习',
        desc: '记录用户偏好与习惯，个性化推荐内容，不断优化交互体验，越用越懂你。'
    },
    {
        title: '寓教于乐',
        desc: '内置海量教育内容，涵盖百科、故事、英语、数学等，让孩子在玩乐中学习。'
    },
    {
        title: '语音交互',
        desc: '高拟真语音合成，多种个性化音色，给孩子温暖亲切的声音陪伴。'
    },
    {
        title: '云端 OTA',
        desc: '持续空中升级，不断获得新技能和新内容，玩具永不落伍。'
    },
    {
        title: '安全守护',
        desc: '多层内容过滤，严格保护儿童隐私，让家长放心，让孩子开心。'
    }
];

// ===== FAQ 数据 =====
const FAQS = [
    {
        q: '如何办理流量卡？',
        a: '您可以在本页流量卡板块浏览套餐信息，选择适合您的套餐后点击办理链接，按照提示填写信息完成申请即可。'
    },
    {
        q: '流量卡激活后多久生效？',
        a: '流量卡激活后一般 24 小时内生效，具体时间取决于运营商处理速度。激活后您会收到短信通知。'
    },
    {
        q: '流量卡支持 5G 网络吗？',
        a: '是的，我们提供的流量卡均支持 5G 网络，但需要您的设备和所在区域有 5G 网络覆盖。'
    },
    {
        q: '如何查询流量卡订单状态？',
        a: '您可以在流量卡板块的「订单查询」区域输入下单手机号，即可查询您的订单状态和物流信息。'
    },
    {
        q: '智能体适合什么年龄段？',
        a: '我们的智能体覆盖全年龄段，不同产品适配不同年龄段，具体请查看产品详情页说明。'
    },
    {
        q: '智能体需要联网吗？',
        a: '是的，智能对话、内容更新等功能需要网络连接。建议配合我们的流量卡使用，体验更佳。'
    },
    {
        q: '如何保护孩子的隐私安全？',
        a: '我们严格遵守儿童隐私保护法规，所有语音数据加密传输，不收集无关个人信息，家长可通过管理端控制权限。'
    },
    {
        q: '智能体可以持续更新内容吗？',
        a: '可以。我们的产品支持 OTA 在线升级，会持续通过云端推送新故事、新知识、新技能，让智能体不断成长。'
    }
];

// ===== 渲染优势卡片 =====
function renderFeatures() {
    if (simFeatures) {
        simFeatures.innerHTML = SIM_FEATURES.map(f =>
            `<div class="feature-card">
                <h3>${f.title}</h3>
                <p>${f.desc}</p>
            </div>`
        ).join('');
    }
    if (toyFeatures) {
        toyFeatures.innerHTML = TOY_FEATURES.map(f =>
            `<div class="feature-card">
                <h3>${f.title}</h3>
                <p>${f.desc}</p>
            </div>`
        ).join('');
    }
}

// ===== 渲染 FAQ =====
function renderFAQ() {
    if (!faqList) return;
    faqList.innerHTML = FAQS.map((item, i) =>
        `<div class="faq-item" data-index="${i}">
            <button class="faq-question" onclick="toggleFAQ(${i})">
                <span>${item.q}</span>
                <span class="faq-arrow">▼</span>
            </button>
            <div class="faq-answer">${item.a}</div>
        </div>`
    ).join('');
}

// ===== FAQ 切换 =====
function toggleFAQ(index) {
    document.querySelectorAll('.faq-item').forEach((item, i) => {
        item.classList.toggle('active', i === index ? !item.classList.contains('active') : false);
    });
}

// ===== 导航栏滚动效果 =====
function setupNavbarScroll() {
    const sections = document.querySelectorAll('section[id]');
    const navAnchors = document.querySelectorAll('.nav-links a');

    function updateActiveLink() {
        let current = '';
        const scrollY = window.scrollY + 120;
        sections.forEach(s => {
            const top = s.offsetTop;
            const height = s.offsetHeight;
            if (scrollY >= top && scrollY < top + height) {
                current = s.getAttribute('id');
            }
        });
        navAnchors.forEach(a => {
            a.classList.toggle('active', a.getAttribute('href') === `#${current}`);
        });
    }

    window.addEventListener('scroll', () => {
        navbar.classList.toggle('scrolled', window.scrollY > 40);
        updateActiveLink();
    }, { passive: true });
}

// ===== 移动端菜单 =====
function setupMobileMenu() {
    if (!mobileToggle || !navLinks) return;
    mobileToggle.addEventListener('click', () => {
        mobileToggle.classList.toggle('active');
        navLinks.classList.toggle('open');
    });
    navLinks.querySelectorAll('a').forEach(link => {
        link.addEventListener('click', () => {
            mobileToggle.classList.remove('active');
            navLinks.classList.remove('open');
        });
    });
}

// ===== 滚动 =====
function scrollToSection(id) {
    const el = document.getElementById(id);
    if (el) {
        window.scrollTo({ top: el.offsetTop - 64, behavior: 'smooth' });
    }
}

// ===== Toast =====
function showToast(message, type = '') {
    if (!toast) return;
    toast.textContent = message;
    toast.className = 'toast ' + type;
    void toast.offsetWidth;
    toast.classList.add('show');
    clearTimeout(toast._hideTimer);
    toast._hideTimer = setTimeout(() => toast.classList.remove('show'), 3000);
}

// ===== 订单查询 =====
async function queryOrder() {
    const phoneInput = document.getElementById('orderPhone');
    const resultEl = document.getElementById('orderResult');
    const btn = document.getElementById('orderBtn');
    const btnText = btn.querySelector('.btn-text');
    const btnLoading = btn.querySelector('.btn-loading');
    const phone = phoneInput.value.trim();

    if (!phone || !/^1\d{10}$/.test(phone)) {
        showToast('请输入正确的手机号', 'error');
        return;
    }

    btn.disabled = true;
    btnText.style.display = 'none';
    btnLoading.style.display = 'inline';
    resultEl.style.display = 'none';

    try {
        const resp = await fetch('/api/order', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ phone })
        });
        const data = await resp.json();

        if (resp.ok && data.found) {
            const statusMap = {
                processing: { text: '处理中', cls: 'processing' },
                shipping: { text: '已发货', cls: 'shipping' },
                delivered: { text: '已签收', cls: 'delivered' }
            };
            const st = statusMap[data.status] || statusMap.processing;

            resultEl.innerHTML = `
                <div class="order-result-content">
                    <div class="order-result-text">
                        <h4>订单查询结果</h4>
                        <p>手机号：${data.phone}</p>
                        <p>套餐：${data.plan}</p>
                        <p>下单时间：${data.orderTime}</p>
                        <span class="order-status ${st.cls}">${st.text}</span>
                    </div>
                </div>`;
        } else {
            resultEl.innerHTML = `<div class="order-error"><p>${data.message || '未找到该手机号的订单信息'}</p></div>`;
        }
    } catch {
        resultEl.innerHTML = `<div class="order-error"><p>网络异常，请稍后重试</p></div>`;
    } finally {
        btn.disabled = false;
        btnText.style.display = 'inline';
        btnLoading.style.display = 'none';
        resultEl.style.display = 'block';
    }
}

// ===== 联系表单 =====
function setupContactForm() {
    if (!contactForm) return;
    contactForm.addEventListener('submit', async (e) => {
        e.preventDefault();
        const btn = contactForm.querySelector('.btn-submit');
        const btnText = btn.querySelector('.btn-text');
        const btnLoading = btn.querySelector('.btn-loading');
        const formData = new FormData(contactForm);

        const email = formData.get('email');
        if (email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
            showToast('请输入有效的邮箱地址', 'error');
            return;
        }

        btn.disabled = true;
        btnText.style.display = 'none';
        btnLoading.style.display = 'inline';

        try {
            const data = Object.fromEntries(formData.entries());
            const resp = await fetch('/api/contact', {
                method: 'POST', headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify(data)
            });
            if (resp.ok) {
                showToast('留言已收到，我们会尽快回复！', 'success');
                contactForm.reset();
            } else {
                const err = await resp.json();
                showToast(err.error || '提交失败', 'error');
            }
        } catch {
            showToast('网络异常', 'error');
        } finally {
            btn.disabled = false;
            btnText.style.display = 'inline';
            btnLoading.style.display = 'none';
        }
    });
}

// ===== 初始化 =====
function init() {
    renderFeatures();
    renderFAQ();
    setupNavbarScroll();
    setupMobileMenu();
    setupContactForm();
}

if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
} else {
    init();
}