'use client';

import { useState, useEffect } from 'react';
import { Header } from '../../components/Header';
import { Footer } from '../../components/Footer';

export default function ContactPage() {
    const [currentLang, setCurrentLang] = useState('zh-CN');
    const [isLoading, setIsLoading] = useState(true);
    const [formData, setFormData] = useState({
        name: '',
        email: '',
        company: '',
        message: '',
    });

    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();
    }, []);

    const content = {
        'zh-CN': {
            title: '联系我们',
            subtitle: '我们很乐意为您提供帮助和支持',
            nav: {
                home: '首页',
                docs: '文档',
                about: '关于',
                contact: '联系我们',
            },
            form: {
                title: '发送消息',
                name: '姓名',
                email: '邮箱',
                company: '公司',
                message: '消息',
                submit: '发送消息',
                namePlaceholder: '请输入您的姓名',
                emailPlaceholder: '请输入您的邮箱地址',
                companyPlaceholder: '请输入您的公司名称（可选）',
                messagePlaceholder: '请描述您的需求或问题...',
            },
            contact: {
                title: '联系方式',
                email: {
                    title: '邮箱',
                    value: 'contact@multisite.com',
                },
                phone: {
                    title: '电话',
                    value: '+86 400-123-4567',
                },
                address: {
                    title: '地址',
                    value: '北京市朝阳区科技园区创新大厦 A 座 1001 室',
                },
                hours: {
                    title: '工作时间',
                    value: '周一至周五 9:00 - 18:00',
                },
            },
            support: {
                title: '技术支持',
                items: [
                    {
                        title: '在线文档',
                        description: '查看详细的使用指南和 API 文档',
                        link: '/docs',
                    },
                    {
                        title: 'GitHub',
                        description: '访问我们的开源项目和代码示例',
                        link: 'https://github.com',
                    },
                    {
                        title: '社区论坛',
                        description: '与其他开发者交流经验和解决方案',
                        link: '#',
                    },
                ],
            },
        },
        'zh-TW': {
            title: '聯繫我們',
            subtitle: '我們很樂意為您提供幫助和支援',
            nav: {
                home: '首頁',
                docs: '文檔',
                about: '關於',
                contact: '聯繫我們',
            },
            form: {
                title: '發送消息',
                name: '姓名',
                email: '郵箱',
                company: '公司',
                message: '消息',
                submit: '發送消息',
                namePlaceholder: '請輸入您的姓名',
                emailPlaceholder: '請輸入您的郵箱地址',
                companyPlaceholder: '請輸入您的公司名稱（可選）',
                messagePlaceholder: '請描述您的需求或問題...',
            },
            contact: {
                title: '聯繫方式',
                email: {
                    title: '郵箱',
                    value: 'contact@multisite.com',
                },
                phone: {
                    title: '電話',
                    value: '+86 400-123-4567',
                },
                address: {
                    title: '地址',
                    value: '北京市朝陽區科技園區創新大廈 A 座 1001 室',
                },
                hours: {
                    title: '工作時間',
                    value: '週一至週五 9:00 - 18:00',
                },
            },
            support: {
                title: '技術支援',
                items: [
                    {
                        title: '在線文檔',
                        description: '查看詳細的使用指南和 API 文檔',
                        link: '/docs',
                    },
                    {
                        title: 'GitHub',
                        description: '訪問我們的開源項目和代碼示例',
                        link: 'https://github.com',
                    },
                    {
                        title: '社區論壇',
                        description: '與其他開發者交流經驗和解決方案',
                        link: '#',
                    },
                ],
            },
        },
        en: {
            title: 'Contact Us',
            subtitle: "We'd love to help and support you",
            nav: {
                home: 'Home',
                docs: 'Docs',
                about: 'About',
                contact: 'Contact',
            },
            form: {
                title: 'Send Message',
                name: 'Name',
                email: 'Email',
                company: 'Company',
                message: 'Message',
                submit: 'Send Message',
                namePlaceholder: 'Enter your name',
                emailPlaceholder: 'Enter your email address',
                companyPlaceholder: 'Enter your company name (optional)',
                messagePlaceholder: 'Describe your needs or questions...',
            },
            contact: {
                title: 'Contact Information',
                email: {
                    title: 'Email',
                    value: 'contact@multisite.com',
                },
                phone: {
                    title: 'Phone',
                    value: '+86 400-123-4567',
                },
                address: {
                    title: 'Address',
                    value: 'Room 1001, Building A, Innovation Tower, Tech Park, Chaoyang District, Beijing',
                },
                hours: {
                    title: 'Business Hours',
                    value: 'Monday - Friday 9:00 AM - 6:00 PM',
                },
            },
            support: {
                title: 'Technical Support',
                items: [
                    {
                        title: 'Documentation',
                        description: 'View detailed usage guides and API documentation',
                        link: '/docs',
                    },
                    {
                        title: 'GitHub',
                        description: 'Access our open source projects and code examples',
                        link: 'https://github.com',
                    },
                    {
                        title: 'Community Forum',
                        description: 'Exchange experiences and solutions with other developers',
                        link: '#',
                    },
                ],
            },
        },
    };

    const currentContent = content[currentLang];

    const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
        const { name, value } = e.target;
        setFormData((prev) => ({
            ...prev,
            [name]: value,
        }));
    };

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        // 这里可以添加表单提交逻辑
        console.log('Form submitted:', formData);
        alert(currentLang === 'en' ? 'Message sent successfully!' : '消息发送成功！');
    };

    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
                currentLang={currentLang}
                setCurrentLang={setCurrentLang}
                currentPage="contact"
                navContent={currentContent.nav}
            />

            {/* Hero Section */}
            <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>
                    </div>
                </div>
            </section>

            {/* Main Content */}
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
                <div className="grid grid-cols-1 lg:grid-cols-2 gap-12">
                    {/* Contact Form */}
                    <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
                        <h2 className="text-2xl font-bold text-gray-900 mb-6">
                            {currentContent.form.title}
                        </h2>
                        <form onSubmit={handleSubmit} className="space-y-6">
                            <div>
                                <label
                                    htmlFor="name"
                                    className="block text-sm font-medium text-gray-700 mb-2"
                                >
                                    {currentContent.form.name}
                                </label>
                                <input
                                    type="text"
                                    id="name"
                                    name="name"
                                    value={formData.name}
                                    onChange={handleInputChange}
                                    placeholder={currentContent.form.namePlaceholder}
                                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                    required
                                />
                            </div>
                            <div>
                                <label
                                    htmlFor="email"
                                    className="block text-sm font-medium text-gray-700 mb-2"
                                >
                                    {currentContent.form.email}
                                </label>
                                <input
                                    type="email"
                                    id="email"
                                    name="email"
                                    value={formData.email}
                                    onChange={handleInputChange}
                                    placeholder={currentContent.form.emailPlaceholder}
                                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                    required
                                />
                            </div>
                            <div>
                                <label
                                    htmlFor="company"
                                    className="block text-sm font-medium text-gray-700 mb-2"
                                >
                                    {currentContent.form.company}
                                </label>
                                <input
                                    type="text"
                                    id="company"
                                    name="company"
                                    value={formData.company}
                                    onChange={handleInputChange}
                                    placeholder={currentContent.form.companyPlaceholder}
                                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                />
                            </div>
                            <div>
                                <label
                                    htmlFor="message"
                                    className="block text-sm font-medium text-gray-700 mb-2"
                                >
                                    {currentContent.form.message}
                                </label>
                                <textarea
                                    id="message"
                                    name="message"
                                    rows={4}
                                    value={formData.message}
                                    onChange={handleInputChange}
                                    placeholder={currentContent.form.messagePlaceholder}
                                    className="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                                    required
                                ></textarea>
                            </div>
                            <button
                                type="submit"
                                className="w-full bg-blue-600 text-white px-6 py-3 rounded-md font-medium hover:bg-blue-700 transition-colors"
                            >
                                {currentContent.form.submit}
                            </button>
                        </form>
                    </div>

                    {/* Contact Information */}
                    <div className="space-y-8">
                        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
                            <h2 className="text-2xl font-bold text-gray-900 mb-6">
                                {currentContent.contact.title}
                            </h2>
                            <div className="space-y-6">
                                <div className="flex items-start">
                                    <div className="flex-shrink-0">
                                        <svg
                                            className="w-6 h-6 text-blue-600"
                                            fill="none"
                                            stroke="currentColor"
                                            viewBox="0 0 24 24"
                                        >
                                            <path
                                                strokeLinecap="round"
                                                strokeLinejoin="round"
                                                strokeWidth={2}
                                                d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
                                            />
                                        </svg>
                                    </div>
                                    <div className="ml-4">
                                        <h3 className="text-lg font-medium text-gray-900">
                                            {currentContent.contact.email.title}
                                        </h3>
                                        <p className="text-gray-600">
                                            {currentContent.contact.email.value}
                                        </p>
                                    </div>
                                </div>
                                <div className="flex items-start">
                                    <div className="flex-shrink-0">
                                        <svg
                                            className="w-6 h-6 text-blue-600"
                                            fill="none"
                                            stroke="currentColor"
                                            viewBox="0 0 24 24"
                                        >
                                            <path
                                                strokeLinecap="round"
                                                strokeLinejoin="round"
                                                strokeWidth={2}
                                                d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"
                                            />
                                        </svg>
                                    </div>
                                    <div className="ml-4">
                                        <h3 className="text-lg font-medium text-gray-900">
                                            {currentContent.contact.phone.title}
                                        </h3>
                                        <p className="text-gray-600">
                                            {currentContent.contact.phone.value}
                                        </p>
                                    </div>
                                </div>
                                <div className="flex items-start">
                                    <div className="flex-shrink-0">
                                        <svg
                                            className="w-6 h-6 text-blue-600"
                                            fill="none"
                                            stroke="currentColor"
                                            viewBox="0 0 24 24"
                                        >
                                            <path
                                                strokeLinecap="round"
                                                strokeLinejoin="round"
                                                strokeWidth={2}
                                                d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
                                            />

                                            <path
                                                strokeLinecap="round"
                                                strokeLinejoin="round"
                                                strokeWidth={2}
                                                d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
                                            />
                                        </svg>
                                    </div>
                                    <div className="ml-4">
                                        <h3 className="text-lg font-medium text-gray-900">
                                            {currentContent.contact.address.title}
                                        </h3>
                                        <p className="text-gray-600">
                                            {currentContent.contact.address.value}
                                        </p>
                                    </div>
                                </div>
                                <div className="flex items-start">
                                    <div className="flex-shrink-0">
                                        <svg
                                            className="w-6 h-6 text-blue-600"
                                            fill="none"
                                            stroke="currentColor"
                                            viewBox="0 0 24 24"
                                        >
                                            <path
                                                strokeLinecap="round"
                                                strokeLinejoin="round"
                                                strokeWidth={2}
                                                d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
                                            />
                                        </svg>
                                    </div>
                                    <div className="ml-4">
                                        <h3 className="text-lg font-medium text-gray-900">
                                            {currentContent.contact.hours.title}
                                        </h3>
                                        <p className="text-gray-600">
                                            {currentContent.contact.hours.value}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        {/* Technical Support */}
                        <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-8">
                            <h2 className="text-2xl font-bold text-gray-900 mb-6">
                                {currentContent.support.title}
                            </h2>
                            <div className="space-y-4">
                                {currentContent.support.items.map((item, index) => (
                                    <div key={index} className="border-l-4 border-blue-600 pl-4">
                                        <h3 className="text-lg font-medium text-gray-900 mb-1">
                                            {item.title}
                                        </h3>
                                        <p className="text-gray-600 text-sm mb-2">
                                            {item.description}
                                        </p>
                                        <a
                                            href={item.link}
                                            className="text-blue-600 hover:text-blue-700 text-sm font-medium"
                                        >
                                            {currentLang === 'en' ? 'Learn more →' : '了解更多 →'}
                                        </a>
                                    </div>
                                ))}
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <Footer
                currentLang={currentLang}
                navContent={{
                    docs: currentContent.nav.docs,
                    contact: currentContent.nav.contact,
                }}
            />
        </div>
    );
}