'use client';

import Head from 'next/head';
import { useSEO, type Locale } from '../lib/useSEO';

interface SEOHeadProps {
    page: string;
    locale: Locale;
    canonicalUrl?: string;
}

export default function SEOHead({ page, locale, canonicalUrl }: SEOHeadProps) {
    const { seoData, loading } = useSEO(page, locale);

    if (loading) {
        return null;
    }

    const baseUrl = 'https://cloudtech.com';
    const fullCanonicalUrl = canonicalUrl ? `${baseUrl}${canonicalUrl}` : baseUrl;

    // Language mapping for HTML lang attribute
    const langMap: Record<Locale, string> = {
        'zh-CN': 'zh-CN',
        'zh-TW': 'zh-TW',
        en: 'en',
    };

    return (
        <Head data-oid="rbbs46g">
            <title data-oid="we7hfsg">{seoData.title}</title>
            <meta name="description" content={seoData.description} data-oid="1_p23x5" />
            <meta name="keywords" content={seoData.keywords} data-oid="q_ualci" />

            {/* Open Graph / Facebook */}
            <meta property="og:type" content="website" data-oid="n_07g8_" />
            <meta property="og:url" content={fullCanonicalUrl} data-oid="mgsq8_s" />
            <meta property="og:title" content={seoData.title} data-oid="2k160a9" />
            <meta property="og:description" content={seoData.description} data-oid="q82_tg-" />
            <meta property="og:image" content={`${baseUrl}/og-image.jpg`} data-oid="tfhobsl" />
            <meta property="og:locale" content={langMap[locale]} data-oid="tu9muam" />

            {/* Twitter */}
            <meta property="twitter:card" content="summary_large_image" data-oid="cvktrxd" />
            <meta property="twitter:url" content={fullCanonicalUrl} data-oid="5rlpuu-" />
            <meta property="twitter:title" content={seoData.title} data-oid="5_tazk6" />
            <meta property="twitter:description" content={seoData.description} data-oid="slw34vl" />
            <meta
                property="twitter:image"
                content={`${baseUrl}/twitter-image.jpg`}
                data-oid="_lgczsv"
            />

            {/* Canonical URL */}
            <link rel="canonical" href={fullCanonicalUrl} data-oid="w-_5z9w" />

            {/* Language alternates */}
            <link
                rel="alternate"
                hrefLang="zh-CN"
                href={`${baseUrl}/zh-CN${canonicalUrl || ''}`}
                data-oid="xtbqrkk"
            />

            <link
                rel="alternate"
                hrefLang="zh-TW"
                href={`${baseUrl}/zh-TW${canonicalUrl || ''}`}
                data-oid="jgqo8r3"
            />

            <link
                rel="alternate"
                hrefLang="en"
                href={`${baseUrl}/en${canonicalUrl || ''}`}
                data-oid="z3l.a2h"
            />

            <link
                rel="alternate"
                hrefLang="x-default"
                href={`${baseUrl}${canonicalUrl || ''}`}
                data-oid=":gi8ol2"
            />

            {/* Additional meta tags */}
            <meta name="robots" content="index, follow" data-oid="2-x5ojw" />
            <meta name="author" content="CloudTech" data-oid="m5ao.k4" />
            <meta
                name="viewport"
                content="width=device-width, initial-scale=1"
                data-oid="0be1gvo"
            />

            <meta httpEquiv="Content-Language" content={langMap[locale]} data-oid="za4fr5v" />
        </Head>
    );
}
