'use client';

import { useState, useEffect } from 'react';
import { useTDK } from '../../../lib/useTDK';
import { useRouter, usePathname } from 'next/navigation';
import Navigation from '../../../components/Navigation';
import Footer from '../../../components/Footer';
import BackgroundElements from '../../../components/BackgroundElements';

interface PageProps {
    params: { locale: string };
}

export default function ContactPage({ params }: PageProps) {
    const [currentLang, setCurrentLang] = useState(params.locale);
    const [isLoaded, setIsLoaded] = useState(false);
    const [formData, setFormData] = useState({
        name: '',
        email: '',
        subject: '',
        message: '',
    });
    const router = useRouter();
    const pathname = usePathname();

    // Update TDK when language changes
    useTDK(currentLang, 'contact');

    const translations = {
        'zh-CN': {
            nav: {
                home: '首页',
                products: '产品',
                pricing: '价格',
                support: '支持',
                contact: '联系我们',
            },
            contact: {
                title: '联系我们',
                subtitle: '随时与我们取得联系',
                description: '有任何问题或建议？我们很乐意听到您的声音',
                form: {
                    name: '姓名',
                    email: '邮箱',
                    subject: '主题',
                    message: '消息',
                    send: '发送消息',
                    namePlaceholder: '请输入您的姓名',
                    emailPlaceholder: '请输入您的邮箱',
                    subjectPlaceholder: '请输入主题',
                    messagePlaceholder: '请输入您的消息...',
                },
                info: {
                    title: '联系信息',
                    address: '地址',
                    phone: '电话',
                    email: '邮箱',
                    hours: '工作时间',
                },
            },
            footer: {
                copyright: `© ${new Date().getFullYear()} CloudProxy. 版权所有.`,
            },
        },
        'zh-TW': {
            nav: {
                home: '首頁',
                products: '產品',
                pricing: '價格',
                support: '支援',
                contact: '聯絡我們',
            },
            contact: {
                title: '聯絡我們',
                subtitle: '隨時與我們取得聯絡',
                description: '有任何問題或建議？我們很樂意聽到您的聲音',
                form: {
                    name: '姓名',
                    email: '郵箱',
                    subject: '主題',
                    message: '訊息',
                    send: '發送訊息',
                    namePlaceholder: '請輸入您的姓名',
                    emailPlaceholder: '請輸入您的郵箱',
                    subjectPlaceholder: '請輸入主題',
                    messagePlaceholder: '請輸入您的訊息...',
                },
                info: {
                    title: '聯絡資訊',
                    address: '地址',
                    phone: '電話',
                    email: '郵箱',
                    hours: '工作時間',
                },
            },
            footer: {
                copyright: `© ${new Date().getFullYear()} CloudProxy. 版權所有.`,
            },
        },
        en: {
            nav: {
                home: 'Home',
                products: 'Products',
                pricing: 'Pricing',
                support: 'Support',
                contact: 'Contact',
            },
            contact: {
                title: 'Contact Us',
                subtitle: 'Get in touch with us',
                description: "Have any questions or suggestions? We'd love to hear from you",
                form: {
                    name: 'Name',
                    email: 'Email',
                    subject: 'Subject',
                    message: 'Message',
                    send: 'Send Message',
                    namePlaceholder: 'Enter your name',
                    emailPlaceholder: 'Enter your email',
                    subjectPlaceholder: 'Enter subject',
                    messagePlaceholder: 'Enter your message...',
                },
                info: {
                    title: 'Contact Information',
                    address: 'Address',
                    phone: 'Phone',
                    email: 'Email',
                    hours: 'Business Hours',
                },
            },
            footer: {
                copyright: `© ${new Date().getFullYear()} CloudProxy. All rights reserved.`,
            },
        },
        ko: {
            nav: {
                home: '홈',
                products: '제품',
                pricing: '가격',
                support: '지원',
                contact: '연락처',
            },
            contact: {
                title: '연락처',
                subtitle: '언제든지 연락하세요',
                description: '질문이나 제안이 있으신가요? 여러분의 의견을 듣고 싶습니다',
                form: {
                    name: '이름',
                    email: '이메일',
                    subject: '제목',
                    message: '메시지',
                    send: '메시지 보내기',
                    namePlaceholder: '이름을 입력하세요',
                    emailPlaceholder: '이메일을 입력하세요',
                    subjectPlaceholder: '제목을 입력하세요',
                    messagePlaceholder: '메시지를 입력하세요...',
                },
                info: {
                    title: '연락처 정보',
                    address: '주소',
                    phone: '전화',
                    email: '이메일',
                    hours: '영업시간',
                },
            },
            footer: {
                copyright: `© ${new Date().getFullYear()} CloudProxy. 모든 권리 보유.`,
            },
        },
        ja: {
            nav: {
                home: 'ホーム',
                products: '製品',
                pricing: '価格',
                support: 'サポート',
                contact: 'お問い合わせ',
            },
            contact: {
                title: 'お問い合わせ',
                subtitle: 'いつでもご連絡ください',
                description: 'ご質問やご提案はありませんか？ぜひお聞かせください',
                form: {
                    name: '名前',
                    email: 'メール',
                    subject: '件名',
                    message: 'メッセージ',
                    send: 'メッセージを送信',
                    namePlaceholder: 'お名前を入力してください',
                    emailPlaceholder: 'メールアドレスを入力してください',
                    subjectPlaceholder: '件名を入力してください',
                    messagePlaceholder: 'メッセージを入力してください...',
                },
                info: {
                    title: '連絡先情報',
                    address: '住所',
                    phone: '電話',
                    email: 'メール',
                    hours: '営業時間',
                },
            },
            footer: {
                copyright: `© ${new Date().getFullYear()} CloudProxy. 全著作権所有.`,
            },
        },
    };

    const t = translations[currentLang as keyof typeof translations] || translations['zh-CN'];

    useEffect(() => {
        setIsLoaded(true);
        setCurrentLang(params.locale);
    }, [params.locale]);

    const handleLanguageChange = (newLang: string) => {
        const currentPath = pathname.replace(`/${currentLang}`, '');
        router.push(`/${newLang}${currentPath}`);
    };

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

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        // Handle form submission here
        console.log('Form submitted:', formData);
    };

    return (
        <div className="min-h-screen bg-gray-900 text-white overflow-hidden" data-oid="e2g2plg">
            <BackgroundElements data-oid="x0r:.zw" />

            <Navigation
                t={t}
                currentLang={currentLang}
                onLanguageChange={handleLanguageChange}
                isLoaded={isLoaded}
                data-oid="yje2h5y"
            />

            <main className="relative z-10 max-w-7xl mx-auto px-6 py-12" data-oid="-jf-oim">
                {/* Header */}
                <div
                    className={`text-center mb-16 transition-all duration-1000 delay-300 ${isLoaded ? 'translate-y-0 opacity-100' : 'translate-y-20 opacity-0'}`}
                    data-oid="0r4y9a7"
                >
                    <h1 className="text-5xl lg:text-6xl font-bold mb-6" data-oid="m.2gm4l">
                        <span
                            className="bg-gradient-to-r from-white via-purple-200 to-pink-200 bg-clip-text text-transparent"
                            data-oid="prajcaz"
                        >
                            {t.contact.title}
                        </span>
                    </h1>
                    <p className="text-xl text-purple-300 mb-4" data-oid="3u2uzr6">
                        {t.contact.subtitle}
                    </p>
                    <p className="text-lg text-gray-300 max-w-3xl mx-auto" data-oid="pematyd">
                        {t.contact.description}
                    </p>
                </div>

                <div className="grid grid-cols-1 lg:grid-cols-2 gap-12" data-oid="wdab9hb">
                    {/* Contact Form */}
                    <div
                        className={`transition-all duration-1000 delay-500 ${isLoaded ? 'translate-x-0 opacity-100' : '-translate-x-20 opacity-0'}`}
                        data-oid="dv8s:ac"
                    >
                        <form
                            onSubmit={handleSubmit}
                            className="bg-gray-800/50 backdrop-blur-sm p-8 rounded-2xl border border-gray-700"
                            data-oid="4cc4x_b"
                        >
                            <div
                                className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6"
                                data-oid="hh_am2a"
                            >
                                <div data-oid="8tks16h">
                                    <label
                                        className="block text-sm font-medium text-gray-300 mb-2"
                                        data-oid="m0_foq5"
                                    >
                                        {t.contact.form.name}
                                    </label>
                                    <input
                                        type="text"
                                        name="name"
                                        value={formData.name}
                                        onChange={handleInputChange}
                                        placeholder={t.contact.form.namePlaceholder}
                                        className="w-full px-4 py-3 bg-gray-700/50 border border-gray-600 rounded-lg focus:outline-none focus:border-purple-500 transition-colors duration-300"
                                        required
                                        data-oid="b:xvny1"
                                    />
                                </div>
                                <div data-oid="2rlrjyb">
                                    <label
                                        className="block text-sm font-medium text-gray-300 mb-2"
                                        data-oid="_x1m00."
                                    >
                                        {t.contact.form.email}
                                    </label>
                                    <input
                                        type="email"
                                        name="email"
                                        value={formData.email}
                                        onChange={handleInputChange}
                                        placeholder={t.contact.form.emailPlaceholder}
                                        className="w-full px-4 py-3 bg-gray-700/50 border border-gray-600 rounded-lg focus:outline-none focus:border-purple-500 transition-colors duration-300"
                                        required
                                        data-oid="2o7vy3q"
                                    />
                                </div>
                            </div>

                            <div className="mb-6" data-oid="3o7fipp">
                                <label
                                    className="block text-sm font-medium text-gray-300 mb-2"
                                    data-oid="j1-i3dl"
                                >
                                    {t.contact.form.subject}
                                </label>
                                <input
                                    type="text"
                                    name="subject"
                                    value={formData.subject}
                                    onChange={handleInputChange}
                                    placeholder={t.contact.form.subjectPlaceholder}
                                    className="w-full px-4 py-3 bg-gray-700/50 border border-gray-600 rounded-lg focus:outline-none focus:border-purple-500 transition-colors duration-300"
                                    required
                                    data-oid="aksv1l0"
                                />
                            </div>

                            <div className="mb-6" data-oid="vj4r0v2">
                                <label
                                    className="block text-sm font-medium text-gray-300 mb-2"
                                    data-oid="9h.geih"
                                >
                                    {t.contact.form.message}
                                </label>
                                <textarea
                                    name="message"
                                    value={formData.message}
                                    onChange={handleInputChange}
                                    placeholder={t.contact.form.messagePlaceholder}
                                    rows={6}
                                    className="w-full px-4 py-3 bg-gray-700/50 border border-gray-600 rounded-lg focus:outline-none focus:border-purple-500 transition-colors duration-300 resize-none"
                                    required
                                    data-oid="_bqls44"
                                ></textarea>
                            </div>

                            <button
                                type="submit"
                                className="w-full px-6 py-3 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg font-semibold hover:from-purple-700 hover:to-pink-700 transition-all duration-300 transform hover:scale-105"
                                data-oid="v1h8.8x"
                            >
                                {t.contact.form.send}
                            </button>
                        </form>
                    </div>

                    {/* Contact Information */}
                    <div
                        className={`transition-all duration-1000 delay-700 ${isLoaded ? 'translate-x-0 opacity-100' : 'translate-x-20 opacity-0'}`}
                        data-oid="0ewm0hn"
                    >
                        <h2
                            className="text-3xl font-bold mb-8 bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent"
                            data-oid="zi0xqmk"
                        >
                            {t.contact.info.title}
                        </h2>
                        <div className="space-y-6" data-oid="ob0sw2h">
                            {[
                                {
                                    title: t.contact.info.address,
                                    icon: (
                                        <svg
                                            className="w-6 h-6 text-purple-400"
                                            fill="none"
                                            stroke="currentColor"
                                            viewBox="0 0 24 24"
                                            data-oid="bb.g2rm"
                                        >
                                            <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"
                                                data-oid=":4:ylr9"
                                            />

                                            <path
                                                strokeLinecap="round"
                                                strokeLinejoin="round"
                                                strokeWidth={2}
                                                d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
                                                data-oid="n80pg4t"
                                            />
                                        </svg>
                                    ),

                                    content: '123 Cloud Street, Tech City, TC 12345',
                                },
                                {
                                    title: t.contact.info.phone,
                                    icon: (
                                        <svg
                                            className="w-6 h-6 text-purple-400"
                                            fill="none"
                                            stroke="currentColor"
                                            viewBox="0 0 24 24"
                                            data-oid="2v:ut:g"
                                        >
                                            <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"
                                                data-oid="p3clg87"
                                            />
                                        </svg>
                                    ),

                                    content: '+1 (555) 123-4567',
                                },
                                {
                                    title: t.contact.info.email,
                                    icon: (
                                        <svg
                                            className="w-6 h-6 text-purple-400"
                                            fill="none"
                                            stroke="currentColor"
                                            viewBox="0 0 24 24"
                                            data-oid="bi1w.q1"
                                        >
                                            <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"
                                                data-oid="2118m5a"
                                            />
                                        </svg>
                                    ),

                                    content: 'contact@cloudproxy.com',
                                },
                                {
                                    title: t.contact.info.hours,
                                    icon: (
                                        <svg
                                            className="w-6 h-6 text-purple-400"
                                            fill="none"
                                            stroke="currentColor"
                                            viewBox="0 0 24 24"
                                            data-oid="feq06:n"
                                        >
                                            <path
                                                strokeLinecap="round"
                                                strokeLinejoin="round"
                                                strokeWidth={2}
                                                d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
                                                data-oid="p.0i:j2"
                                            />
                                        </svg>
                                    ),

                                    content: 'Mon - Fri: 9:00 AM - 6:00 PM',
                                },
                            ].map((info, index) => (
                                <div
                                    key={index}
                                    className="bg-gray-800/50 backdrop-blur-sm p-6 rounded-xl border border-gray-700"
                                    data-oid="vncfoiq"
                                >
                                    <div className="flex items-start space-x-4" data-oid="oaa2spe">
                                        <div
                                            className="flex-shrink-0 w-12 h-12 bg-purple-500/20 rounded-lg flex items-center justify-center"
                                            data-oid="rivomz7"
                                        >
                                            {info.icon}
                                        </div>
                                        <div data-oid="nmnaut9">
                                            <h3
                                                className="text-lg font-semibold text-white mb-2"
                                                data-oid="i5od13."
                                            >
                                                {info.title}
                                            </h3>
                                            <p className="text-gray-300" data-oid="i5t:oeh">
                                                {info.content}
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>
                </div>
            </main>

            <Footer t={t} data-oid="b6s6ap1" />
        </div>
    );
}