'use client';

import { useParams, useRouter } from 'next/navigation';
import { useState, useEffect } from 'react';
import PageLayout from '../../../components/PageLayout';
import Icon from '../../../components/Icon';
import { content } from '../../../data/content';
import { contactContent } from '../../../data/pageContent';

export default function ContactPage() {
    const router = useRouter();
    const params = useParams();
    const currentLang = typeof params.lang === 'string' ? params.lang : 'en';

    // Form state
    const [formData, setFormData] = useState({
        name: '',
        email: '',
        phone: '',
        company: '',
        subject: '',
        message: '',
    });
    const [formSubmitted, setFormSubmitted] = useState(false);
    const [isClient, setIsClient] = useState(false);

    // Set client-side flag
    useEffect(() => {
        setIsClient(true);
    }, []);

    // Validate language and redirect if invalid
    useEffect(() => {
        const supportedLangs = ['zh-CN', 'zh-TW', 'en', 'ko', 'ja'];
        if (!supportedLangs.includes(currentLang)) {
            router.push('/en/contact');
        }
    }, [currentLang, router]);

    const currentContent = content[currentLang as keyof typeof content] || content.en;
    const pageContent =
        contactContent[currentLang as keyof typeof contactContent] || contactContent.en;

    const handleLanguageChange = (lang: string) => {
        router.push(`/${lang}/contact`);
    };

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

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        // Here you would typically send the form data to your backend
        console.log('Form submitted:', formData);
        setFormSubmitted(true);

        // Reset form after submission
        setTimeout(() => {
            setFormData({
                name: '',
                email: '',
                phone: '',
                company: '',
                subject: '',
                message: '',
            });
            setFormSubmitted(false);
        }, 5000);
    };

    return (
        <PageLayout
            title={pageContent.title}
            description={pageContent.description}
            keywords={pageContent.keywords}
            currentLang={currentLang}
            currentContent={currentContent}
            handleLanguageChange={handleLanguageChange}
        >
            <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
                {/* Page Header */}
                <div className="text-center mb-16">
                    <h1 className="text-4xl font-bold text-gray-900 mb-4">{pageContent.heading}</h1>
                    <p className="text-xl text-gray-600 max-w-3xl mx-auto">
                        {pageContent.subheading}
                    </p>
                </div>

                <div className="grid md:grid-cols-2 gap-12">
                    {/* Contact Information */}
                    <div className="bg-white rounded-lg shadow-lg p-8">
                        <h2 className="text-2xl font-bold text-gray-900 mb-6">
                            {currentLang === 'en'
                                ? 'Contact Information'
                                : currentLang === 'zh-CN'
                                  ? '联系信息'
                                  : currentLang === 'zh-TW'
                                    ? '聯繫信息'
                                    : currentLang === 'ko'
                                      ? '연락처 정보'
                                      : '連絡先情報'}
                        </h2>

                        <div className="space-y-6">
                            <div className="flex items-start">
                                <div className="flex-shrink-0 mt-1">
                                    <Icon name="map-pin" className="w-6 h-6 text-blue-600" />
                                </div>
                                <div className="ml-4">
                                    <h3 className="font-semibold text-gray-900">
                                        {currentLang === 'en'
                                            ? 'Address'
                                            : currentLang === 'zh-CN'
                                              ? '地址'
                                              : currentLang === 'zh-TW'
                                                ? '地址'
                                                : currentLang === 'ko'
                                                  ? '주소'
                                                  : '住所'}
                                    </h3>
                                    <p className="text-gray-600">
                                        {pageContent.contactInfo.address}
                                    </p>
                                </div>
                            </div>

                            <div className="flex items-start">
                                <div className="flex-shrink-0 mt-1">
                                    <Icon name="phone" className="w-6 h-6 text-blue-600" />
                                </div>
                                <div className="ml-4">
                                    <h3 className="font-semibold text-gray-900">
                                        {currentLang === 'en'
                                            ? 'Phone'
                                            : currentLang === 'zh-CN'
                                              ? '电话'
                                              : currentLang === 'zh-TW'
                                                ? '電話'
                                                : currentLang === 'ko'
                                                  ? '전화'
                                                  : '電話'}
                                    </h3>
                                    <p className="text-gray-600">{pageContent.contactInfo.phone}</p>
                                </div>
                            </div>

                            <div className="flex items-start">
                                <div className="flex-shrink-0 mt-1">
                                    <Icon name="mail" className="w-6 h-6 text-blue-600" />
                                </div>
                                <div className="ml-4">
                                    <h3 className="font-semibold text-gray-900">
                                        {currentLang === 'en'
                                            ? 'Email'
                                            : currentLang === 'zh-CN'
                                              ? '电子邮箱'
                                              : currentLang === 'zh-TW'
                                                ? '電子郵箱'
                                                : currentLang === 'ko'
                                                  ? '이메일'
                                                  : 'メール'}
                                    </h3>
                                    <p className="text-gray-600">{pageContent.contactInfo.email}</p>
                                </div>
                            </div>

                            <div className="flex items-start">
                                <div className="flex-shrink-0 mt-1">
                                    <Icon name="clock" className="w-6 h-6 text-blue-600" />
                                </div>
                                <div className="ml-4">
                                    <h3 className="font-semibold text-gray-900">
                                        {currentLang === 'en'
                                            ? 'Business Hours'
                                            : currentLang === 'zh-CN'
                                              ? '营业时间'
                                              : currentLang === 'zh-TW'
                                                ? '營業時間'
                                                : currentLang === 'ko'
                                                  ? '영업 시간'
                                                  : '営業時間'}
                                    </h3>
                                    <p className="text-gray-600">{pageContent.contactInfo.hours}</p>
                                </div>
                            </div>
                        </div>

                        {/* Map Placeholder */}
                        <div className="mt-8 bg-gray-200 rounded-lg h-64 flex items-center justify-center">
                            <p className="text-gray-500">
                                {currentLang === 'en'
                                    ? 'Map will be displayed here'
                                    : currentLang === 'zh-CN'
                                      ? '地图将显示在这里'
                                      : currentLang === 'zh-TW'
                                        ? '地圖將顯示在這裡'
                                        : currentLang === 'ko'
                                          ? '지도가 여기에 표시됩니다'
                                          : '地図がここに表示されます'}
                            </p>
                        </div>
                    </div>

                    {/* Contact Form */}
                    <div className="bg-white rounded-lg shadow-lg p-8">
                        <h2 className="text-2xl font-bold text-gray-900 mb-6">
                            {pageContent.formTitle}
                        </h2>

                        {!isClient ? (
                            <div className="space-y-6">
                                <div className="grid md:grid-cols-2 gap-6">
                                    <div>
                                        <div className="block text-sm font-medium text-gray-700 mb-1">
                                            {pageContent.formFields.name.label}
                                        </div>
                                        <div className="w-full px-4 py-2 border border-gray-300 rounded-md bg-gray-100">
                                            {pageContent.formFields.name.placeholder}
                                        </div>
                                    </div>
                                    <div>
                                        <div className="block text-sm font-medium text-gray-700 mb-1">
                                            {pageContent.formFields.email.label}
                                        </div>
                                        <div className="w-full px-4 py-2 border border-gray-300 rounded-md bg-gray-100">
                                            {pageContent.formFields.email.placeholder}
                                        </div>
                                    </div>
                                </div>
                                <div className="text-center py-8">
                                    <div className="text-gray-500">Loading form...</div>
                                </div>
                            </div>
                        ) : formSubmitted ? (
                            <div className="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative mb-6">
                                <strong className="font-bold">
                                    {currentLang === 'en'
                                        ? 'Thank you!'
                                        : currentLang === 'zh-CN'
                                          ? '谢谢！'
                                          : currentLang === 'zh-TW'
                                            ? '謝謝！'
                                            : currentLang === 'ko'
                                              ? '감사합니다!'
                                              : 'ありがとうございます！'}
                                </strong>
                                <span className="block sm:inline">
                                    {' '}
                                    {currentLang === 'en'
                                        ? 'Your message has been sent. We will contact you soon.'
                                        : currentLang === 'zh-CN'
                                          ? '您的消息已发送。我们将尽快与您联系。'
                                          : currentLang === 'zh-TW'
                                            ? '您的訊息已發送。我們將盡快與您聯繫。'
                                            : currentLang === 'ko'
                                              ? '메시지가 전송되었습니다. 곧 연락 드리겠습니다.'
                                              : 'メッセージが送信されました。すぐにご連絡いたします。'}
                                </span>
                            </div>
                        ) : (
                            <form
                                onSubmit={handleSubmit}
                                className="space-y-6"
                            >
                                <div className="grid md:grid-cols-2 gap-6">
                                    <div>
                                        <label
                                            htmlFor="name"
                                            className="block text-sm font-medium text-gray-700 mb-1"
                                        >
                                            {pageContent.formFields.name.label}
                                        </label>
                                        <input
                                            type="text"
                                            id="name"
                                            name="name"
                                            value={formData.name}
                                            onChange={handleInputChange}
                                            placeholder={pageContent.formFields.name.placeholder}
                                            required
                                            className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        />
                                    </div>

                                    <div>
                                        <label
                                            htmlFor="email"
                                            className="block text-sm font-medium text-gray-700 mb-1"
                                        >
                                            {pageContent.formFields.email.label}
                                        </label>
                                        <input
                                            type="email"
                                            id="email"
                                            name="email"
                                            value={formData.email}
                                            onChange={handleInputChange}
                                            placeholder={pageContent.formFields.email.placeholder}
                                            required
                                            className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        />
                                    </div>
                                </div>

                                <div className="grid md:grid-cols-2 gap-6">
                                    <div>
                                        <label
                                            htmlFor="phone"
                                            className="block text-sm font-medium text-gray-700 mb-1"
                                        >
                                            {pageContent.formFields.phone.label}
                                        </label>
                                        <input
                                            type="tel"
                                            id="phone"
                                            name="phone"
                                            value={formData.phone}
                                            onChange={handleInputChange}
                                            placeholder={pageContent.formFields.phone.placeholder}
                                            className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        />
                                    </div>

                                    <div>
                                        <label
                                            htmlFor="company"
                                            className="block text-sm font-medium text-gray-700 mb-1"
                                        >
                                            {pageContent.formFields.company.label}
                                        </label>
                                        <input
                                            type="text"
                                            id="company"
                                            name="company"
                                            value={formData.company}
                                            onChange={handleInputChange}
                                            placeholder={pageContent.formFields.company.placeholder}
                                            className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                        />
                                    </div>
                                </div>

                                <div>
                                    <label
                                        htmlFor="subject"
                                        className="block text-sm font-medium text-gray-700 mb-1"
                                    >
                                        {pageContent.formFields.subject.label}
                                    </label>
                                    <select
                                        id="subject"
                                        name="subject"
                                        value={formData.subject}
                                        onChange={handleInputChange}
                                        required
                                        className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                    >
                                        <option value="" disabled>
                                            {pageContent.formFields.subject.placeholder}
                                        </option>
                                        {pageContent.formFields.subject.options.map(
                                            (option, index) => (
                                                <option key={index} value={option}>
                                                    {option}
                                                </option>
                                            ),
                                        )}
                                    </select>
                                </div>

                                <div>
                                    <label
                                        htmlFor="message"
                                        className="block text-sm font-medium text-gray-700 mb-1"
                                    >
                                        {pageContent.formFields.message.label}
                                    </label>
                                    <textarea
                                        id="message"
                                        name="message"
                                        value={formData.message}
                                        onChange={handleInputChange}
                                        placeholder={pageContent.formFields.message.placeholder}
                                        required
                                        rows={5}
                                        className="w-full px-4 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
                                    ></textarea>
                                </div>

                                <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"
                                    >
                                        {pageContent.formFields.submit}
                                    </button>
                                </div>
                            </form>
                        )}
                    </div>
                </div>
            </div>
        </PageLayout>
    );
}