'use client';

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

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

export default function SEOPreview({ locale, page, className = '' }: SEOPreviewProps) {
    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="border rounded-lg p-4 bg-white shadow-sm">
                    <div className="h-5 bg-gray-200 rounded mb-2"></div>
                    <div className="h-4 bg-gray-200 rounded mb-1"></div>
                    <div className="h-4 bg-gray-200 rounded w-2/3"></div>
                </div>
            </div>
        );
    }

    if (!seoData) {
        return null;
    }

    const baseUrl = 'https://haoaws.com';
    const currentUrl = `${baseUrl}${locale === 'zh-CN' ? '' : `/${locale}`}${page === 'home' ? '' : `/${page}`}`;

    return (
        <div className={`seo-preview ${className}`}>
            <h3 className="text-lg font-semibold mb-3">
                {locale === 'zh-CN'
                    ? '搜索引擎预览'
                    : locale === 'zh-TW'
                      ? '搜尋引擎預覽'
                      : 'Search Engine Preview'}
            </h3>

            {/* Google Search Result Preview */}
            <div className="border rounded-lg p-4 bg-white shadow-sm mb-4">
                <div className="text-xs text-gray-600 mb-1">{currentUrl}</div>
                <h4 className="text-blue-600 text-lg hover:underline cursor-pointer mb-1">
                    {seoData.title}
                </h4>
                <p className="text-sm text-gray-700 leading-relaxed">{seoData.description}</p>
            </div>

            {/* Social Media Preview */}
            <div className="border rounded-lg p-4 bg-white shadow-sm">
                <h4 className="text-sm font-semibold mb-2">
                    {locale === 'zh-CN'
                        ? '社交媒体预览'
                        : locale === 'zh-TW'
                          ? '社群媒體預覽'
                          : 'Social Media Preview'}
                </h4>
                <div className="border rounded bg-gray-50 p-3">
                    <div className="w-full h-32 bg-gray-200 rounded mb-2 flex items-center justify-center text-gray-500 text-sm">
                        {locale === 'zh-CN'
                            ? '预览图片'
                            : locale === 'zh-TW'
                              ? '預覽圖片'
                              : 'Preview Image'}
                    </div>
                    <h5 className="font-semibold text-sm mb-1">{seoData.title}</h5>
                    <p className="text-xs text-gray-600 mb-1">{seoData.description}</p>
                    <div className="text-xs text-gray-500">{currentUrl}</div>
                </div>
            </div>
        </div>
    );
}