'use client';

import { useState, useEffect } from 'react';
import { Header } from '../../components/Header';
import { Footer } from '../../components/Footer';
import { DocumentList } from '../../components/DocumentList';
import { ContentItem } from '../../lib/content';
import Link from 'next/link';

export default function DocsPage() {
    const [currentLang, setCurrentLang] = useState('zh-CN');
    const [isLoading, setIsLoading] = useState(true);
    const [documents, setDocuments] = useState<ContentItem[]>([]);

    useEffect(() => {
        const detectLanguage = () => {
            const browserLang = navigator.language || navigator.languages[0];
            if (browserLang.startsWith('zh-TW') || browserLang.startsWith('zh-HK')) {
                setCurrentLang('zh-TW');
            } else if (browserLang.startsWith('en')) {
                setCurrentLang('en');
            } else {
                setCurrentLang('zh-CN');
            }
            setIsLoading(false);
        };

        detectLanguage();
    }, []);

    useEffect(() => {
        const loadDocuments = () => {
            // 创建模拟文档数据
            const mockDocuments: ContentItem[] = [
                {
                    slug: 'getting-started',
                    metadata: {
                        title: currentLang === 'en' ? 'Getting Started' : '快速开始',
                        description:
                            currentLang === 'en'
                                ? 'Learn how to quickly get started with MultiSite for building multi-language websites'
                                : '学习如何快速开始使用 MultiSite 构建多语言网站',
                        date: '2024-01-15',
                        author: currentLang === 'en' ? 'MultiSite Team' : 'MultiSite 团队',
                        category: currentLang === 'en' ? 'Getting Started' : '入门指南',
                        tags:
                            currentLang === 'en'
                                ? ['getting-started', 'installation', 'setup']
                                : ['快速开始', '安装', '设置'],
                    },
                    content: '',
                },
                {
                    slug: 'configuration',
                    metadata: {
                        title: currentLang === 'en' ? 'Configuration Guide' : '配置指南',
                        description:
                            currentLang === 'en'
                                ? 'Learn how to configure MultiSite to meet your project requirements'
                                : '了解如何配置 MultiSite 以满足您的项目需求',
                        date: '2024-01-16',
                        author: currentLang === 'en' ? 'MultiSite Team' : 'MultiSite 团队',
                        category: currentLang === 'en' ? 'Configuration' : '配置',
                        tags:
                            currentLang === 'en'
                                ? ['configuration', 'setup', 'customization']
                                : ['配置', '设置', '自定义'],
                    },
                    content: '',
                },
                {
                    slug: 'content-management',
                    metadata: {
                        title: currentLang === 'en' ? 'Content Management' : '内容管理',
                        description:
                            currentLang === 'en'
                                ? 'Learn how to manage and organize your content in MultiSite'
                                : '学习如何在 MultiSite 中管理和组织您的内容',
                        date: '2024-01-17',
                        author: currentLang === 'en' ? 'MultiSite Team' : 'MultiSite 团队',
                        category: currentLang === 'en' ? 'Content' : '内容',
                        tags:
                            currentLang === 'en'
                                ? ['content', 'management', 'markdown']
                                : ['内容', '管理', 'markdown'],
                    },
                    content: '',
                },
                {
                    slug: 'deployment',
                    metadata: {
                        title: currentLang === 'en' ? 'Deployment Guide' : '部署指南',
                        description:
                            currentLang === 'en'
                                ? 'Learn how to deploy your MultiSite project to production'
                                : '了解如何将您的 MultiSite 项目部署到生产环境',
                        date: '2024-01-18',
                        author: currentLang === 'en' ? 'MultiSite Team' : 'MultiSite 团队',
                        category: currentLang === 'en' ? 'Deployment' : '部署',
                        tags:
                            currentLang === 'en'
                                ? ['deployment', 'production', 'CI/CD']
                                : ['部署', '生产', 'CI/CD'],
                    },
                    content: '',
                },
            ];

            setDocuments(mockDocuments);
        };

        if (!isLoading) {
            loadDocuments();
        }
    }, [currentLang, isLoading]);

    const content = {
        'zh-CN': {
            title: '文档',
            subtitle: '完整的多语言静态站点开发指南',
            description: '了解如何使用我们的多语言静态站点解决方案构建现代化的网站。',
            nav: {
                home: '首页',
                docs: '文档',
                about: '关于',
                contact: '联系我们',
            },
        },
        'zh-TW': {
            title: '文檔',
            subtitle: '完整的多語言靜態站點開發指南',
            description: '了解如何使用我們的多語言靜態站點解決方案構建現代化的網站。',
            nav: {
                home: '首頁',
                docs: '文檔',
                about: '關於',
                contact: '聯繫我們',
            },
        },
        en: {
            title: 'Documentation',
            subtitle: 'Complete guide for multi-language static site development',
            description:
                'Learn how to build modern websites using our multi-language static site solution.',
            nav: {
                home: 'Home',
                docs: 'Docs',
                about: 'About',
                contact: 'Contact',
            },
        },
    };

    const currentContent = content[currentLang];

    if (isLoading) {
        return (
            <div className="min-h-screen bg-gray-50 flex items-center justify-center">
                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
            </div>
        );
    }

    return (
        <div className="min-h-screen bg-white">
            <header className="bg-white shadow-sm border-b border-gray-200">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="flex justify-between items-center h-16">
                        <div className="flex items-center">
                            <div className="h-8 w-8 bg-blue-600 rounded-lg flex items-center justify-center">
                                <span className="text-white font-bold text-sm">MS</span>
                            </div>
                            <div className="ml-4">
                                <span className="text-xl font-semibold text-gray-900">
                                    MultiSite
                                </span>
                            </div>
                        </div>

                        <nav className="hidden md:flex space-x-8">
                            <Link
                                href="/"
                                className="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium"
                            >
                                {currentLang === 'en' ? 'Home' : '首页'}
                            </Link>
                            <Link
                                href="/docs"
                                className="text-blue-600 px-3 py-2 text-sm font-medium border-b-2 border-blue-600"
                            >
                                {currentLang === 'en' ? 'Docs' : '文档'}
                            </Link>
                            <Link
                                href="/about"
                                className="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium"
                            >
                                {currentLang === 'en' ? 'About' : '关于'}
                            </Link>
                            <Link
                                href="/contact"
                                className="text-gray-700 hover:text-blue-600 px-3 py-2 text-sm font-medium"
                            >
                                {currentLang === 'en' ? 'Contact' : '联系我们'}
                            </Link>
                        </nav>

                        <div className="flex items-center space-x-4">
                            <select
                                value={currentLang}
                                onChange={(e) => setCurrentLang(e.target.value)}
                                className="appearance-none bg-white border border-gray-300 rounded-md px-3 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                            >
                                <option value="zh-CN">简体中文</option>
                                <option value="zh-TW">繁體中文</option>
                                <option value="en">English</option>
                            </select>
                        </div>
                    </div>
                </div>
            </header>

            <section className="bg-gradient-to-br from-blue-50 to-indigo-100 py-16">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="text-center">
                        <h1 className="text-4xl md:text-5xl font-bold text-gray-900 mb-4">
                            {currentContent.title}
                        </h1>
                        <p className="text-xl text-gray-600 mb-8 max-w-3xl mx-auto">
                            {currentContent.subtitle}
                        </p>
                        <p className="text-lg text-gray-500 max-w-2xl mx-auto">
                            {currentContent.description}
                        </p>
                    </div>
                </div>
            </section>

            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
                {/* Quick Start Section */}
                <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-8 mb-12">
                    <h2 className="text-2xl font-bold text-gray-900 mb-6">
                        {currentLang === 'en' ? 'Getting Started' : '快速开始'}
                    </h2>
                    <div className="prose prose-lg max-w-none">
                        <p className="text-gray-600 mb-4">
                            {currentLang === 'en'
                                ? 'Welcome to the MultiSite documentation. This guide will help you get started with building multi-language static websites.'
                                : '欢迎使用 MultiSite 文档。本指南将帮助您开始构建多语言静态网站。'}
                        </p>
                        <h3 className="text-xl font-semibold text-gray-800 mb-3">
                            {currentLang === 'en' ? 'Features' : '特性'}
                        </h3>
                        <ul className="list-disc list-inside text-gray-600 space-y-2">
                            <li>
                                {currentLang === 'en' ? 'Multi-language support' : '多语言支持'}
                            </li>
                            <li>
                                {currentLang === 'en' ? 'Static site generation' : '静态站点生成'}
                            </li>
                            <li>{currentLang === 'en' ? 'SEO optimization' : 'SEO 优化'}</li>
                            <li>{currentLang === 'en' ? 'Responsive design' : '响应式设计'}</li>
                        </ul>
                    </div>
                </div>

                {/* Documentation Cards Section */}
                <div className="mb-12">
                    <div className="flex items-center justify-between mb-8">
                        <h2 className="text-3xl font-bold text-gray-900">
                            {currentLang === 'en' ? 'Documentation' : '文档列表'}
                        </h2>
                        <div className="text-sm text-gray-500">
                            {currentLang === 'en'
                                ? `${documents.length} documents available`
                                : `共 ${documents.length} 篇文档`}
                        </div>
                    </div>

                    {isLoading ? (
                        <div className="flex items-center justify-center py-12">
                            <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
                            <span className="ml-3 text-gray-600">
                                {currentLang === 'en' ? 'Loading documents...' : '加载文档中...'}
                            </span>
                        </div>
                    ) : (
                        <DocumentList documents={documents} currentLang={currentLang} />
                    )}
                </div>
            </div>

            <footer className="bg-gray-900 text-white py-12 mt-16">
                <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                    <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
                        <div className="col-span-1 md:col-span-2">
                            <div className="flex items-center mb-4">
                                <div className="h-8 w-8 bg-blue-600 rounded-lg flex items-center justify-center">
                                    <span className="text-white font-bold text-sm">MS</span>
                                </div>
                                <span className="ml-3 text-xl font-semibold">MultiSite</span>
                            </div>
                            <p className="text-gray-400 mb-4">
                                {currentLang === 'en'
                                    ? 'Enterprise-grade multi-language static site solution powered by React/Next.js'
                                    : '基于 React/Next.js 的企业级多语言静态站点解决方案'}
                            </p>
                        </div>

                        <div>
                            <h3 className="text-lg font-semibold mb-4">
                                {currentLang === 'en' ? 'Resources' : '资源'}
                            </h3>
                            <ul className="space-y-2 text-gray-400">
                                <li>
                                    <Link href="/docs" className="hover:text-white transition-colors">
                                        {currentLang === 'en' ? 'Docs' : '文档'}
                                    </Link>
                                </li>
                                <li>
                                    <Link href="#" className="hover:text-white transition-colors">
                                        API
                                    </Link>
                                </li>
                                <li>
                                    <Link href="#" className="hover:text-white transition-colors">
                                        {currentLang === 'en' ? 'Examples' : '示例'}
                                    </Link>
                                </li>
                            </ul>
                        </div>

                        <div>
                            <h3 className="text-lg font-semibold mb-4">
                                {currentLang === 'en' ? 'Support' : '支持'}
                            </h3>
                            <ul className="space-y-2 text-gray-400">
                                <li>
                                    <Link
                                        href="/contact"
                                        className="hover:text-white transition-colors"
                                    >
                                        {currentLang === 'en' ? 'Contact' : '联系我们'}
                                    </Link>
                                </li>
                                <li>
                                    <Link href="#" className="hover:text-white transition-colors">
                                        GitHub
                                    </Link>
                                </li>
                                <li>
                                    <Link href="#" className="hover:text-white transition-colors">
                                        {currentLang === 'en' ? 'Community' : '社区'}
                                    </Link>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div className="border-t border-gray-800 mt-8 pt-8 text-center text-gray-400">
                        <p>
                            &copy; 2024 MultiSite.{' '}
                            {currentLang === 'en' ? 'All rights reserved.' : '保留所有权利。'}
                        </p>
                    </div>
                </div>
            </footer>
        </div>
    );
}