'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 { productsContent } from '../../../data/pageContent';

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

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

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

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

    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">
                {/* 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>

                {/* Product Categories */}
                <div className="space-y-16">
                    {pageContent.categories.map((category, index) => (
                        <div key={index} className="bg-white rounded-lg shadow-lg overflow-hidden">
                            <div className="bg-blue-600 text-white px-6 py-4">
                                <h2 className="text-2xl font-bold">{category.title}</h2>
                                <p className="mt-1">{category.description}</p>
                            </div>
                            <div className="grid md:grid-cols-3 gap-6 p-6">
                                {category.products.map((product, productIndex) => (
                                    <div
                                        key={productIndex}
                                        className="border border-gray-200 rounded-lg p-6 hover:shadow-md transition-shadow"
                                    >
                                        <div className="w-12 h-12 bg-blue-100 text-blue-600 rounded-lg flex items-center justify-center mb-4">
                                            <Icon name={product.icon} />
                                        </div>
                                        <h3 className="text-xl font-semibold mb-2">
                                            {product.name}
                                        </h3>
                                        <p className="text-gray-600">{product.description}</p>
                                    </div>
                                ))}
                            </div>
                        </div>
                    ))}
                </div>

                {/* CTA Section */}
                <div className="mt-16 bg-gradient-to-r from-blue-600 to-indigo-700 rounded-lg shadow-xl text-white p-8 text-center">
                    <h2 className="text-3xl font-bold mb-4">{currentContent.hero.cta}</h2>
                    <p className="text-lg mb-6 max-w-2xl mx-auto">
                        {currentLang === 'en'
                            ? 'Contact our AWS experts to discuss your specific cloud computing needs and requirements.'
                            : currentLang === 'zh-CN'
                              ? '联系我们的AWS专家，讨论您的特定云计算需求和要求。'
                              : currentLang === 'zh-TW'
                                ? '聯繫我們的AWS專家，討論您的特定雲計算需求和要求。'
                                : currentLang === 'ko'
                                  ? 'AWS 전문가에게 문의하여 특정 클라우드 컴퓨팅 요구 사항에 대해 논의하세요.'
                                  : '特定のクラウドコンピューティングのニーズと要件について、AWS専門家にお問い合わせください。'}
                    </p>
                    <button
                        onClick={() => router.push(`/${currentLang}/contact`)}
                        className="bg-white text-blue-600 px-8 py-3 rounded-lg font-medium hover:bg-blue-50 transition-colors"
                    >
                        {currentLang === 'en'
                            ? 'Contact Us'
                            : currentLang === 'zh-CN'
                              ? '联系我们'
                              : currentLang === 'zh-TW'
                                ? '聯繫我們'
                                : currentLang === 'ko'
                                  ? '문의하기'
                                  : 'お問い合わせ'}
                    </button>
                </div>
            </div>
        </PageLayout>
    );
}