'use client';

import { Locale } from '@/lib/i18n';
import { getSEOData, SEOData } from '@/lib/seo';
import { useEffect, useState } from 'react';

interface TDKManagerProps {
    locale: Locale;
    page: string;
    className?: string;
}

export default function TDKManager({ locale, page, className = '' }: TDKManagerProps) {
    const [seoData, setSeoData] = useState<SEOData | null>(null);
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const loadSEOData = async () => {
            try {
                setLoading(true);
                const data = await getSEOData(locale, page);
                setSeoData(data);
            } catch (error) {
                console.error('Failed to load SEO data:', error);
            } finally {
                setLoading(false);
            }
        };

        loadSEOData();
    }, [locale, page]);

    if (loading) {
        return (
            <div className={`animate-pulse ${className}`}>
                <div className="h-4 bg-gray-200 rounded mb-2"></div>
                <div className="h-3 bg-gray-200 rounded mb-1"></div>
                <div className="h-3 bg-gray-200 rounded w-3/4"></div>
            </div>
        );
    }

    if (!seoData) {
        return null;
    }

    return (
        <div className={`tdk-info ${className}`}>
            <div className="mb-4">
                <h3 className="text-sm font-semibold text-gray-600 mb-1">
                    {locale === 'zh-CN'
                        ? '页面标题'
                        : locale === 'zh-TW'
                          ? '頁面標題'
                          : 'Page Title'}
                </h3>
                <p className="text-sm text-gray-800">{seoData.title}</p>
            </div>

            <div className="mb-4">
                <h3 className="text-sm font-semibold text-gray-600 mb-1">
                    {locale === 'zh-CN'
                        ? '页面描述'
                        : locale === 'zh-TW'
                          ? '頁面描述'
                          : 'Page Description'}
                </h3>
                <p className="text-sm text-gray-800">{seoData.description}</p>
            </div>

            <div>
                <h3 className="text-sm font-semibold text-gray-600 mb-1">
                    {locale === 'zh-CN' ? '关键词' : locale === 'zh-TW' ? '關鍵詞' : 'Keywords'}
                </h3>
                <div className="flex flex-wrap gap-1">
                    {seoData.keywords.map((keyword, index) => (
                        <span
                            key={index}
                            className="inline-block bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded"
                        >
                            {keyword}
                        </span>
                    ))}
                </div>
            </div>
        </div>
    );
}