/**
 * Watermelon Cinema - Vanilla JS Implementation
 * This file replaces the React entry point to handle pure JS routing and DOM manipulation.
 */

// Fix: Import constants from the central constants file to avoid "Cannot redeclare block-scoped variable 'MOVIES'" error.
import { MOVIES, TEAM, NEWS } from './constants';

// --- Router and View Rendering ---

const appRoot = document.getElementById('app-root');

// Define categories for filtering
const CATEGORIES = ['全部', '动作', '科幻', '悬疑', '爱情', '动画', '剧情'];

const routes: Record<string, () => void> = {
    '/': renderHome,
    '/products': renderProducts,
    '/about': renderAbout,
    '/contact': renderContact
};

function handleRouting() {
    const hash = window.location.hash || '#/';
    const path = hash.slice(1);
    const renderer = routes[path] || renderHome;
    
    if (!appRoot) return;

    // Smooth transition
    appRoot.classList.remove('fade-in');
    void appRoot.offsetWidth; // Trigger reflow
    appRoot.innerHTML = '';
    renderer();
    appRoot.classList.add('fade-in');

    // Update nav active states
    document.querySelectorAll('.nav-link').forEach(link => {
        const navLink = link as HTMLElement;
        if (navLink.dataset.path === path) {
            navLink.classList.add('active-nav');
        } else {
            navLink.classList.remove('active-nav');
        }
    });

    // Close mobile menu
    const mobileMenu = document.getElementById('mobile-menu');
    if (mobileMenu) mobileMenu.classList.add('hidden');
    window.scrollTo(0, 0);
}

// --- Page Renderers ---

function renderHome() {
    if (!appRoot) return;
    appRoot.innerHTML = `
        <div class="space-y-0">
            <!-- Hero -->
            <section class="relative h-[80vh] flex items-center justify-center overflow-hidden bg-black">
                <div class="absolute inset-0 opacity-60">
                    <img src="https://tse-mm.bing.com/th?q=Cinema+Theater+Inside" alt="Hero Background" class="w-full h-full object-cover" />
                </div>
                <div class="relative z-10 text-center text-white px-4">
                    <h1 class="text-4xl md:text-7xl font-black mb-6 tracking-tight">每一秒，都是<span class="text-red-500">高清</span></h1>
                    <p class="text-lg md:text-2xl mb-8 text-gray-200 max-w-2xl mx-auto">西瓜影院提供全网最新、最好看的高清电影与电视剧全集，手机免费在线观看。</p>
                    <div class="flex flex-col sm:flex-row justify-center gap-4">
                        <a href="#/products" class="bg-red-600 hover:bg-red-700 text-white px-8 py-4 rounded-full font-bold text-lg transition-transform hover:scale-105 shadow-lg shadow-red-900/40">开启观影之旅</a>
                        <a href="#/about" class="bg-white/10 hover:bg-white/20 backdrop-blur-md text-white px-8 py-4 rounded-full font-bold text-lg border border-white/30 transition-all">了解我们的技术</a>
                    </div>
                </div>
            </section>

            <!-- Company Intro -->
            <section class="py-20 bg-white">
                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div class="flex flex-col md:flex-row items-center gap-12">
                        <div class="flex-1">
                            <img src="https://tse-mm.bing.com/th?q=Modern+Media+Office" alt="Office" class="rounded-2xl shadow-2xl transform -rotate-2" />
                        </div>
                        <div class="flex-1">
                            <span class="text-red-500 font-bold tracking-widest uppercase">品牌实力</span>
                            <h2 class="text-3xl md:text-4xl font-bold mt-2 mb-6">定义流媒体新标准</h2>
                            <p class="text-gray-600 text-lg leading-relaxed mb-6">西瓜影院成立于2015年，是国内领先的数字化视频服务商。我们拥有海量授权，核心技术“西瓜极速解码”引擎让流畅观影成为可能。</p>
                            <div class="grid grid-cols-2 gap-6">
                                <div class="border-l-4 border-red-500 pl-4">
                                    <h3 class="text-2xl font-bold text-gray-900">4K</h3>
                                    <p class="text-gray-500">超清画质普及者</p>
                                </div>
                                <div class="border-l-4 border-red-500 pl-4">
                                    <h3 class="text-2xl font-bold text-gray-900">10ms</h3>
                                    <p class="text-gray-500">极低加载延迟</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Featured -->
            <section class="py-20 bg-gray-50">
                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div class="text-center mb-16">
                        <h2 class="text-3xl md:text-4xl font-bold">热门推荐</h2>
                        <p class="text-gray-500 mt-4">同步更新全网最新院线大片与热播剧</p>
                    </div>
                    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
                        ${MOVIES.map(movie => `
                            <div class="group relative overflow-hidden rounded-xl shadow-md transition-all hover:-translate-y-2 cursor-pointer">
                                <div class="aspect-[2/3] overflow-hidden">
                                    <img src="${movie.imageUrl}" alt="${movie.title}" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
                                </div>
                                <div class="absolute inset-0 bg-gradient-to-t from-black/90 via-transparent to-transparent opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-end p-4">
                                    <span class="text-red-500 font-bold mb-1 text-xs">${movie.category}</span>
                                    <h3 class="text-white font-bold leading-tight text-sm">${movie.title}</h3>
                                    <p class="text-gray-300 text-[10px] mt-1">评分: ${movie.rating}</p>
                                </div>
                            </div>
                        `).join('')}
                    </div>
                    <div class="mt-12 text-center">
                        <a href="#/products" class="inline-flex items-center text-red-600 font-bold hover:underline">查看完整影视库 <svg class="w-5 h-5 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path></svg></a>
                    </div>
                </div>
            </section>

            <!-- News -->
            <section class="py-20 bg-white">
                <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <h2 class="text-3xl font-bold mb-12">新闻动态</h2>
                    <div class="space-y-6">
                        ${NEWS.map(item => `
                            <div class="flex flex-col md:flex-row gap-6 p-6 rounded-2xl hover:bg-gray-50 transition-colors border border-gray-100">
                                <div class="md:w-32 flex-shrink-0">
                                    <span class="text-red-600 font-bold text-lg">${item.date.split('-')[1]}/${item.date.split('-')[2]}</span>
                                    <p class="text-gray-400 text-sm">${item.date.split('-')[0]}</p>
                                </div>
                                <div>
                                    <h3 class="text-xl font-bold hover:text-red-600 cursor-pointer mb-2">${item.title}</h3>
                                    <p class="text-gray-600">${item.summary}</p>
                                </div>
                            </div>
                        `).join('')}
                    </div>
                </div>
            </section>
        </div>
    `;
}

function renderProducts() {
    if (!appRoot) return;
    appRoot.innerHTML = `
        <div class="bg-gray-50 min-h-screen py-12">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-12">
                    <h1 class="text-4xl font-black text-gray-900 mb-4">西瓜影视库</h1>
                    <p class="text-gray-500">精选全网最新高清电影与电视剧，手机端极速畅看</p>
                </div>
                
                <div class="flex flex-wrap justify-center gap-4 mb-12" id="category-filter">
                    ${CATEGORIES.map(cat => `
                        <button class="filter-btn px-6 py-2 rounded-full font-medium transition-all bg-white text-gray-600 hover:bg-gray-100" data-cat="${cat}">${cat}</button>
                    `).join('')}
                </div>

                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8" id="movie-grid">
                    <!-- Movies injected here -->
                </div>
            </div>
        </div>
    `;

    const filterContainer = document.getElementById('category-filter');
    const movieGrid = document.getElementById('movie-grid');

    function displayMovies(cat = '全部') {
        const filtered = cat === '全部' ? MOVIES : MOVIES.filter(m => m.category === cat);
        
        // Update button styles
        filterContainer?.querySelectorAll('.filter-btn').forEach(btn => {
            const button = btn as HTMLElement;
            if (button.dataset.cat === cat) {
                button.classList.add('bg-red-600', 'text-white', 'shadow-lg');
                button.classList.remove('bg-white', 'text-gray-600');
            } else {
                button.classList.remove('bg-red-600', 'text-white', 'shadow-lg');
                button.classList.add('bg-white', 'text-gray-600');
            }
        });

        if (movieGrid) {
            movieGrid.innerHTML = filtered.map(movie => `
                <div class="bg-white rounded-2xl overflow-hidden shadow-sm hover:shadow-xl transition-shadow border border-gray-100 group">
                    <div class="relative aspect-[2/3] overflow-hidden">
                        <img src="${movie.imageUrl}" alt="${movie.title}" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-700" />
                        <div class="absolute top-4 right-4 bg-red-600 text-white px-3 py-1 rounded-lg text-sm font-bold shadow-lg">${movie.rating} 分</div>
                    </div>
                    <div class="p-6">
                        <div class="flex justify-between items-start mb-2">
                            <h3 class="text-xl font-bold group-hover:text-red-600 transition-colors">${movie.title}</h3>
                            <span class="bg-gray-100 text-gray-500 text-xs px-2 py-1 rounded">${movie.year}</span>
                        </div>
                        <p class="text-gray-500 text-sm mb-4">类型：${movie.category}</p>
                        <button class="w-full bg-gray-900 hover:bg-red-600 text-white py-3 rounded-xl font-bold transition-colors flex items-center justify-center space-x-2">
                            <span>立即播放</span>
                            <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"></path></svg>
                        </button>
                    </div>
                </div>
            `).join('');
        }
    }

    filterContainer?.addEventListener('click', (e) => {
        const target = e.target as HTMLElement;
        if (target.classList.contains('filter-btn')) {
            displayMovies(target.dataset.cat);
        }
    });

    displayMovies();
}

function renderAbout() {
    if (!appRoot) return;
    appRoot.innerHTML = `
        <div class="bg-white">
            <section class="relative py-24 bg-gray-900 text-white overflow-hidden">
                <div class="absolute inset-0 opacity-30">
                    <img src="https://tse-mm.bing.com/th?q=Abstract+Film+Waves" alt="BG" class="w-full h-full object-cover" />
                </div>
                <div class="relative z-10 max-w-7xl mx-auto px-4 text-center">
                    <h1 class="text-4xl md:text-6xl font-black mb-8">我们的故事</h1>
                    <p class="text-xl text-gray-300 max-w-3xl mx-auto">领先的全网最新高清电影与热播电视剧观看平台，致力于普惠高质量视听体验。</p>
                </div>
            </section>

            <section class="py-20">
                <div class="max-w-7xl mx-auto px-4 grid grid-cols-1 md:grid-cols-3 gap-12">
                    <div class="p-8 bg-gray-50 rounded-3xl border border-gray-100">
                        <span class="text-4xl font-black text-red-500">2015</span>
                        <h3 class="text-xl font-bold mt-4 mb-3">种子萌发</h3>
                        <p class="text-gray-600 italic text-sm">西瓜影院前身成立，开启手机端播放器研发。</p>
                    </div>
                    <div class="p-8 bg-gray-50 rounded-3xl border border-gray-100">
                        <span class="text-4xl font-black text-red-500">2019</span>
                        <h3 class="text-xl font-bold mt-4 mb-3">破茧成蝶</h3>
                        <p class="text-gray-600 italic text-sm">品牌正式升级，订阅用户突破1000万。</p>
                    </div>
                    <div class="p-8 bg-gray-50 rounded-3xl border border-gray-100">
                        <span class="text-4xl font-black text-red-500">2024</span>
                        <h3 class="text-xl font-bold mt-4 mb-3">星辰大海</h3>
                        <p class="text-gray-600 italic text-sm">自研AI超分画质技术上线，打造极致观影生态。</p>
                    </div>
                </div>
            </section>

            <section class="py-20 bg-gray-50">
                <div class="max-w-7xl mx-auto px-4">
                    <div class="text-center mb-16">
                        <h2 class="text-3xl font-bold">核心管理团队</h2>
                    </div>
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-12">
                        ${TEAM.map(m => `
                            <div class="bg-white p-8 rounded-3xl shadow-sm text-center">
                                <div class="w-32 h-32 mx-auto mb-6 rounded-full overflow-hidden border-4 border-red-100">
                                    <img src="${m.imageUrl}" alt="${m.name}" class="w-full h-full object-cover" />
                                </div>
                                <h3 class="text-2xl font-bold">${m.name}</h3>
                                <p class="text-red-500 font-medium mb-4">${m.role}</p>
                                <p class="text-gray-500 text-sm leading-relaxed">${m.bio}</p>
                            </div>
                        `).join('')}
                    </div>
                </div>
            </section>
        </div>
    `;
}

function renderContact() {
    if (!appRoot) return;
    appRoot.innerHTML = `
        <div class="bg-gray-50 min-h-screen py-20">
            <div class="max-w-7xl mx-auto px-4">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-16">
                    <div>
                        <h1 class="text-4xl font-black mb-8">联系我们</h1>
                        <p class="text-gray-600 text-lg mb-12">期待您的每一份建议，共同打造更好的西瓜影院。</p>
                        
                        <div class="space-y-8">
                            <div class="flex items-start space-x-4">
                                <div class="bg-red-100 p-3 rounded-lg text-red-600 font-bold">📍</div>
                                <div>
                                    <h3 class="font-bold">公司总部</h3>
                                    <p class="text-gray-500">上海市徐汇区西瓜数字大厦 8-12 层</p>
                                </div>
                            </div>
                            <div class="flex items-start space-x-4">
                                <div class="bg-red-100 p-3 rounded-lg text-red-600 font-bold">📧</div>
                                <div>
                                    <h3 class="font-bold">电子邮箱</h3>
                                    <p class="text-gray-500">support@xigua-cinema.com</p>
                                </div>
                            </div>
                        </div>

                        <div class="mt-12 rounded-2xl overflow-hidden h-64 grayscale shadow-xl">
                            <img src="https://tse-mm.bing.com/th?q=Shanghai+Map+Flat+Graphic" alt="Map" class="w-full h-full object-cover" />
                        </div>
                    </div>

                    <div class="bg-white p-8 md:p-12 rounded-3xl shadow-xl shadow-gray-200/50" id="contact-form-container">
                        <form id="contact-form" class="space-y-6">
                            <div class="grid grid-cols-1 sm:grid-cols-2 gap-6">
                                <div>
                                    <label class="block text-sm font-bold text-gray-700 mb-2">姓名</label>
                                    <input required type="text" class="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl focus:ring-2 focus:ring-red-500 focus:outline-none" placeholder="您的称呼" />
                                </div>
                                <div>
                                    <label class="block text-sm font-bold text-gray-700 mb-2">邮箱</label>
                                    <input required type="email" class="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl focus:ring-2 focus:ring-red-500 focus:outline-none" placeholder="your@email.com" />
                                </div>
                            </div>
                            <div>
                                <label class="block text-sm font-bold text-gray-700 mb-2">主题</label>
                                <select class="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl focus:ring-2 focus:ring-red-500 focus:outline-none">
                                    <option>观影问题反馈</option>
                                    <option>商务合作洽谈</option>
                                    <option>内容版权咨询</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-bold text-gray-700 mb-2">留言内容</label>
                                <textarea required rows="5" class="w-full px-4 py-3 bg-gray-50 border border-gray-100 rounded-xl focus:ring-2 focus:ring-red-500 focus:outline-none" placeholder="请详细描述您的需求..."></textarea>
                            </div>
                            <button type="submit" class="w-full bg-red-600 hover:bg-red-700 text-white font-bold py-4 rounded-xl shadow-lg transition-all active:scale-95">发送留言</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    `;

    const form = document.getElementById('contact-form');
    form?.addEventListener('submit', (e) => {
        e.preventDefault();
        const container = document.getElementById('contact-form-container');
        if (container) {
            container.innerHTML = `
                <div class="h-full flex flex-col items-center justify-center text-center py-12 fade-in">
                    <div class="w-16 h-16 bg-green-100 text-green-600 rounded-full flex items-center justify-center mb-6">
                        <svg class="w-8 h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7"></path></svg>
                    </div>
                    <h3 class="text-2xl font-bold mb-2">提交成功</h3>
                    <p class="text-gray-500">感谢您的留言，我们将尽快联系您。</p>
                    <button onclick="location.reload()" class="mt-8 text-red-600 font-bold underline">返回</button>
                </div>
            `;
        }
    });
}

// --- Initialization ---

window.addEventListener('hashchange', handleRouting);
window.addEventListener('load', handleRouting);

// Mobile menu toggle
document.getElementById('mobile-menu-btn')?.addEventListener('click', () => {
    document.getElementById('mobile-menu')?.classList.toggle('hidden');
});