import { useState, useEffect } from 'react';

type Locale = 'zh-CN' | 'zh-TW' | 'en';

interface SEOData {
    title: string;
    description: string;
    keywords: string;
}

interface SEOTranslations {
    [key: string]: SEOData;
}

const seoCache: Record<Locale, SEOTranslations> = {
    'zh-CN': {},
    'zh-TW': {},
    en: {},
};

// Load SEO translations dynamically
const loadSEOTranslations = async (locale: Locale): Promise<SEOTranslations> => {
    if (Object.keys(seoCache[locale]).length > 0) {
        return seoCache[locale];
    }

    try {
        const response = await fetch(`/locales/${locale}/seo.json`);
        if (!response.ok) {
            throw new Error(`HTTP ${response.status}`);
        }
        const data = await response.json();
        seoCache[locale] = data;
        return data;
    } catch (error) {
        console.error(`Failed to load SEO translations: ${locale}`, error);
        return {};
    }
};

export const useSEO = (page: string, locale: Locale = 'zh-CN') => {
    const [seoData, setSeoData] = useState<SEOData>({
        title: 'CloudTech',
        description: 'Professional cloud computing solutions',
        keywords: 'cloud computing, cloud services',
    });
    const [loading, setLoading] = useState(true);

    useEffect(() => {
        const loadData = async () => {
            setLoading(true);
            const translations = await loadSEOTranslations(locale);
            const pageData = translations[page];

            if (pageData) {
                setSeoData(pageData);
            } else {
                // Fallback to default values
                setSeoData({
                    title: 'CloudTech',
                    description: 'Professional cloud computing solutions',
                    keywords: 'cloud computing, cloud services',
                });
            }
            setLoading(false);
        };

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

    return {
        seoData,
        loading,
    };
};

export type { Locale, SEOData };