'use client';

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

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

export default function SitemapPage({ params }: PageProps) {
    const [currentLang, setCurrentLang] = useState(params.locale);
    const [isLoaded, setIsLoaded] = useState(false);
    const router = useRouter();
    const pathname = usePathname();

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

    const translations = {
        'zh-CN': {
            nav: {
                home: '首页',
                products: '产品',
                pricing: '价格',
                support: '支持',
                contact: '联系我们',
            },
            sitemap: {
                title: '网站地图',
                subtitle: '浏览我们的所有页面',
                description: '查找您需要的页面和内容',
                languages: '语言版本',
                pages: '页面',
                pageNames: {
                    '': '首页',
                    '/products': '产品',
                    '/pricing': '价格',
                    '/support': '支持',
                    '/contact': '联系我们',
                },
                languageNames: {
                    'zh-CN': '简体中文',
                    'zh-TW': '繁体中文',
                    en: 'English',
                    ko: '한국어',
                    ja: '日本語',
                },
            },
            footer: {
                copyright: `© ${new Date().getFullYear()} CloudProxy. 版权所有.`,
            },
        },
        'zh-TW': {
            nav: {
                home: '首頁',
                products: '產品',
                pricing: '價格',
                support: '支援',
                contact: '聯絡我們',
            },
            sitemap: {
                title: '網站地圖',
                subtitle: '瀏覽我們的所有頁面',
                description: '查找您需要的頁面和內容',
                languages: '語言版本',
                pages: '頁面',
                pageNames: {
                    '': '首頁',
                    '/products': '產品',
                    '/pricing': '價格',
                    '/support': '支援',
                    '/contact': '聯絡我們',
                },
                languageNames: {
                    'zh-CN': '簡體中文',
                    'zh-TW': '繁體中文',
                    en: 'English',
                    ko: '한국어',
                    ja: '日本語',
                },
            },
            footer: {
                copyright: `© ${new Date().getFullYear()} CloudProxy. 版權所有.`,
            },
        },
        en: {
            nav: {
                home: 'Home',
                products: 'Products',
                pricing: 'Pricing',
                support: 'Support',
                contact: 'Contact',
            },
            sitemap: {
                title: 'Sitemap',
                subtitle: 'Browse all our pages',
                description: 'Find the pages and content you need',
                languages: 'Language Versions',
                pages: 'Pages',
                pageNames: {
                    '': 'Home',
                    '/products': 'Products',
                    '/pricing': 'Pricing',
                    '/support': 'Support',
                    '/contact': 'Contact',
                },
                languageNames: {
                    'zh-CN': '简体中文',
                    'zh-TW': '繁体中文',
                    en: 'English',
                    ko: '한국어',
                    ja: '日本語',
                },
            },
            footer: {
                copyright: `© ${new Date().getFullYear()} CloudProxy. All rights reserved.`,
            },
        },
        ko: {
            nav: {
                home: '홈',
                products: '제품',
                pricing: '가격',
                support: '지원',
                contact: '연락처',
            },
            sitemap: {
                title: '사이트맵',
                subtitle: '모든 페이지 둘러보기',
                description: '필요한 페이지와 콘텐츠를 찾아보세요',
                languages: '언어 버전',
                pages: '페이지',
                pageNames: {
                    '': '홈',
                    '/products': '제품',
                    '/pricing': '가격',
                    '/support': '지원',
                    '/contact': '연락처',
                },
                languageNames: {
                    'zh-CN': '简体中文',
                    'zh-TW': '繁体中文',
                    en: 'English',
                    ko: '한국어',
                    ja: '日本語',
                },
            },
            footer: {
                copyright: `© ${new Date().getFullYear()} CloudProxy. 모든 권리 보유.`,
            },
        },
        ja: {
            nav: {
                home: 'ホーム',
                products: '製品',
                pricing: '価格',
                support: 'サポート',
                contact: 'お問い合わせ',
            },
            sitemap: {
                title: 'サイトマップ',
                subtitle: 'すべてのページを閲覧',
                description: '必要なページとコンテンツを見つけてください',
                languages: '言語バージョン',
                pages: 'ページ',
                pageNames: {
                    '': 'ホーム',
                    '/products': '製品',
                    '/pricing': '価格',
                    '/support': 'サポート',
                    '/contact': 'お問い合わせ',
                },
                languageNames: {
                    'zh-CN': '简体中文',
                    'zh-TW': '繁体中文',
                    en: 'English',
                    ko: '한국어',
                    ja: '日本語',
                },
            },
            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 handlePageClick = (locale: string, pagePath: string) => {
        router.push(`/${locale}${pagePath}`);
    };

    return (
        <div className="min-h-screen bg-gray-900 text-white overflow-hidden" data-oid="a.lcmc3">
            <BackgroundElements data-oid="orc-cj_" />

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

            <main className="relative z-10 max-w-7xl mx-auto px-6 py-12" data-oid="_0tgzbo">
                {/* 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="th62ren"
                >
                    <h1 className="text-5xl lg:text-6xl font-bold mb-6" data-oid="l.i7r.a">
                        <span
                            className="bg-gradient-to-r from-white via-purple-200 to-pink-200 bg-clip-text text-transparent"
                            data-oid=".xr1i:d"
                        >
                            {t.sitemap.title}
                        </span>
                    </h1>
                    <p className="text-xl text-purple-300 mb-4" data-oid="9fandtd">
                        {t.sitemap.subtitle}
                    </p>
                    <p className="text-lg text-gray-300 max-w-3xl mx-auto" data-oid="8m9ojt2">
                        {t.sitemap.description}
                    </p>
                </div>

                <div className="grid grid-cols-1 lg:grid-cols-2 gap-12" data-oid="8sqe_3-">
                    {/* Languages Section */}
                    <div
                        className={`transition-all duration-1000 delay-500 ${isLoaded ? 'translate-x-0 opacity-100' : '-translate-x-20 opacity-0'}`}
                        data-oid="359xp6z"
                    >
                        <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="x_kr.46"
                        >
                            {t.sitemap.languages}
                        </h2>
                        <div className="space-y-4" data-oid="1six984">
                            {supportedLocales.map((locale) => (
                                <div
                                    key={locale}
                                    className="bg-gray-800/50 backdrop-blur-sm p-6 rounded-xl border border-gray-700 hover:border-purple-500/50 transition-all duration-300"
                                    data-oid="s:4-qfm"
                                >
                                    <h3
                                        className="text-xl font-semibold text-white mb-4"
                                        data-oid=":a7wk7o"
                                    >
                                        {
                                            t.sitemap.languageNames[
                                                locale as keyof typeof t.sitemap.languageNames
                                            ]
                                        }
                                    </h3>
                                    <div
                                        className="grid grid-cols-1 sm:grid-cols-2 gap-2"
                                        data-oid="3241nn5"
                                    >
                                        {pages.map((page) => (
                                            <button
                                                key={page.path}
                                                onClick={() => handlePageClick(locale, page.path)}
                                                className="text-left px-3 py-2 text-purple-300 hover:text-purple-200 hover:bg-purple-500/10 rounded-lg transition-all duration-300"
                                                data-oid="v6h3.a:"
                                            >
                                                {
                                                    t.sitemap.pageNames[
                                                        page.path as keyof typeof t.sitemap.pageNames
                                                    ]
                                                }
                                            </button>
                                        ))}
                                    </div>
                                </div>
                            ))}
                        </div>
                    </div>

                    {/* Pages Section */}
                    <div
                        className={`transition-all duration-1000 delay-700 ${isLoaded ? 'translate-x-0 opacity-100' : 'translate-x-20 opacity-0'}`}
                        data-oid="vehe863"
                    >
                        <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="e645px7"
                        >
                            {t.sitemap.pages}
                        </h2>
                        <div className="space-y-6" data-oid="a38x.z.">
                            {pages.map((page, index) => (
                                <div
                                    key={page.path}
                                    className="bg-gray-800/50 backdrop-blur-sm p-6 rounded-xl border border-gray-700 hover:border-purple-500/50 transition-all duration-300"
                                    data-oid="mf25gqd"
                                >
                                    <div
                                        className="flex items-center justify-between mb-4"
                                        data-oid=":nzjob."
                                    >
                                        <h3
                                            className="text-xl font-semibold text-white"
                                            data-oid="l.vrl4:"
                                        >
                                            {
                                                t.sitemap.pageNames[
                                                    page.path as keyof typeof t.sitemap.pageNames
                                                ]
                                            }
                                        </h3>
                                        <div
                                            className="flex items-center space-x-2"
                                            data-oid="fdpd2ne"
                                        >
                                            <span
                                                className="text-sm text-gray-400"
                                                data-oid="81dw.:-"
                                            >
                                                Priority: {page.priority}
                                            </span>
                                            <span
                                                className="text-sm text-gray-400"
                                                data-oid="x53mejt"
                                            >
                                                Update: {page.changeFrequency}
                                            </span>
                                        </div>
                                    </div>
                                    <div className="flex flex-wrap gap-2" data-oid="qdkw6v:">
                                        {supportedLocales.map((locale) => (
                                            <button
                                                key={locale}
                                                onClick={() => handlePageClick(locale, page.path)}
                                                className="px-3 py-1 bg-purple-600/20 text-purple-300 rounded-full text-sm hover:bg-purple-600/30 hover:text-purple-200 transition-all duration-300"
                                                data-oid="x93-7sl"
                                            >
                                                {locale}
                                            </button>
                                        ))}
                                    </div>
                                </div>
                            ))}
                        </div>

                        {/* XML Sitemap Link */}
                        <div
                            className="mt-8 p-6 bg-gray-800/50 backdrop-blur-sm rounded-xl border border-gray-700"
                            data-oid="v1w-7.4"
                        >
                            <h3
                                className="text-lg font-semibold text-white mb-3"
                                data-oid="vzu0nd_"
                            >
                                XML Sitemap
                            </h3>
                            <p className="text-gray-300 mb-4" data-oid="4yv8:.2">
                                For search engines and automated tools
                            </p>
                            <a
                                href="/sitemap.xml"
                                target="_blank"
                                rel="noopener noreferrer"
                                className="inline-flex items-center px-4 py-2 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="z-8s91z"
                            >
                                <svg
                                    className="w-4 h-4 mr-2"
                                    fill="none"
                                    stroke="currentColor"
                                    viewBox="0 0 24 24"
                                    data-oid="sajy9i2"
                                >
                                    <path
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                        strokeWidth={2}
                                        d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
                                        data-oid="dl7wcn-"
                                    />
                                </svg>
                                View XML Sitemap
                            </a>
                        </div>
                    </div>
                </div>
            </main>

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