import React, { useEffect, useState } from "react";
import { HeadProvider } from 'react-head';
import { APIURL } from "../../api/apiurl";
import { useseo } from "../../hooks/useSeo";
import { useGeneraldata } from "../../hooks/useGeneral";

interface SeoProps {
    title?: string;
    description?: string;
    keywords?: string;
    image?: string;
    url?: string;
    author?: string;
    page?: string;
}
interface SeoDataState {
    title: string;
    description: string;
    keywords: string;
    image?: string;
    url?: string;
    author: string;
    favicon?: string;
}
interface SeoApiItem {
    type: string;
    metaTitle: string;
    metaDescription: string;
    metaKeywords: string;
}
const Seo: React.FC<SeoProps> = ({
    title = "Weblify – AI Website Generator & No-Code Builder",
    description = "AI website generator,no-code website builder,create website with AI,responsive website builder,SEO-ready websites,instant website creation,Weblify",
    keywords = "Weblify is an AI-powered website generator that lets you build responsive, SEO-ready websites in minutes. No coding required. Customize, preview, and launch instantly.",
    image,
    url,
    author = "Weblify",
    page = ""
}) => {
    const fronturl = APIURL.FRONT_URL;
    const { data: seoApiData } = useseo();
    const { data: generalData } = useGeneraldata();


    const [seoData, setSeoData] = useState<SeoDataState>({
        title: title,
        description: description,
        keywords: keywords,
        image: image,
        url: url,
        author: author,
        favicon: ""
    });

    useEffect(() => {
        if (seoApiData && page) {
            const result = seoApiData?.find((item: SeoApiItem) => item.type === page);
            if (result) {
                setSeoData({
                    title: result?.metaTitle,
                    description: result?.metaDescription,
                    keywords: result?.metaKeywords,
                    image: image,
                    url: url,
                    author: author,
                });
            }
        }
    }, [seoApiData, page]);

    const faviconUrl = generalData?.favicon
        ? `${APIURL.BASE_URL}${generalData.favicon}`
        : "icon/favicon.ico";
    return (
        <HeadProvider>
            <title>{seoData?.title}</title>
            {seoData?.description && <meta name="description" content={seoData?.description} />}
            {seoData?.keywords && <meta name="keywords" content={seoData?.keywords} />}
            <meta name="author" content={author} />

            <meta property="og:type" content="website" />
            <meta property="og:title" content={seoData.title} />
            <meta property="og:description" content={seoData.description} />
            {url && <meta property="og:url" content={`${fronturl}${url}`} />}
            {image && <meta property="og:image" content={image} />}

            {/* Twitter */}
            <meta name="twitter:card" content="summary_large_image" />
            <meta name="twitter:title" content={seoData.title} />
            <meta name="twitter:description" content={seoData.description} />
            {image && <meta name="twitter:image" content={image} />}

            <link rel="icon" type="image/png" href={`${faviconUrl || ""}`} />
        </HeadProvider>
    );
};
export default Seo;
