import { useEffect } from 'react';
import { useTranslation } from 'react-i18next';

interface SEOProps {
  title?: string;
  description?: string;
  keywords?: string;
  ogTitle?: string;
  ogDescription?: string;
  ogImage?: string;
  ogUrl?: string;
  ogType?: string;
  canonicalUrl?: string;
  schemaData?: {
    type: 'WebPage' | 'Organization' | 'Product' | 'Article';
    name?: string;
    description?: string;
    image?: string;
    url?: string;
    author?: string;
    datePublished?: string;
    dateModified?: string;
  };
}

export const SEO = ({
  title,
  description,
  keywords,
  ogTitle,
  ogDescription,
  ogImage = '/og-image.png',
  ogUrl,
  ogType = 'website',
  canonicalUrl,
  schemaData,
}: SEOProps) => {
  const { i18n } = useTranslation();

  useEffect(() => {
    // Update HTML lang attribute
    document.documentElement.lang = i18n.language;

    // Update title
    if (title) {
      document.title = title;
    }

    // Update or create meta tags
    const updateMetaTag = (name: string, content: string, isProperty = false) => {
      const attribute = isProperty ? 'property' : 'name';
      let element = document.querySelector(`meta[${attribute}="${name}"]`);

      if (!element) {
        element = document.createElement('meta');
        element.setAttribute(attribute, name);
        document.head.appendChild(element);
      }

      element.setAttribute('content', content);
    };

    // Standard meta tags
    if (description) {
      updateMetaTag('description', description);
    }
    if (keywords) {
      updateMetaTag('keywords', keywords);
    }

    // Open Graph meta tags
    if (ogTitle) {
      updateMetaTag('og:title', ogTitle, true);
    }
    if (ogDescription) {
      updateMetaTag('og:description', ogDescription, true);
    }
    if (ogImage) {
      updateMetaTag('og:image', ogImage, true);
    }
    if (ogUrl) {
      updateMetaTag('og:url', ogUrl, true);
    }
    if (ogType) {
      updateMetaTag('og:type', ogType, true);
    }

    // Twitter Card meta tags (using Open Graph data)
    if (ogTitle) {
      updateMetaTag('twitter:title', ogTitle);
      updateMetaTag('twitter:card', 'summary_large_image');
    }
    if (ogDescription) {
      updateMetaTag('twitter:description', ogDescription);
    }
    if (ogImage) {
      updateMetaTag('twitter:image', ogImage);
    }

    // Canonical link tag
    if (canonicalUrl) {
      let canonicalLink = document.querySelector('link[rel="canonical"]');
      if (!canonicalLink) {
        canonicalLink = document.createElement('link');
        canonicalLink.setAttribute('rel', 'canonical');
        document.head.appendChild(canonicalLink);
      }
      canonicalLink.setAttribute('href', canonicalUrl);
    }

    // Schema.org structured data
    if (schemaData) {
      const schemaId = 'schema-org-data';
      let schemaScript = document.getElementById(schemaId) as HTMLScriptElement;

      if (!schemaScript) {
        schemaScript = document.createElement('script');
        schemaScript.id = schemaId;
        schemaScript.type = 'application/ld+json';
        document.head.appendChild(schemaScript);
      }

      // Build Schema.org JSON-LD based on type
      let schemaObject: any = {
        '@context': 'https://schema.org',
        '@type': schemaData.type,
      };

      if (schemaData.type === 'WebPage') {
        schemaObject = {
          ...schemaObject,
          name: schemaData.name || title,
          description: schemaData.description || description,
          url: schemaData.url || canonicalUrl || ogUrl,
          inLanguage: i18n.language,
          isPartOf: {
            '@type': 'WebSite',
            name: 'ShopCall.ai',
            url: 'https://shopcall.ai',
          },
        };
        if (schemaData.image || ogImage) {
          schemaObject.image = schemaData.image || ogImage;
        }
      } else if (schemaData.type === 'Organization') {
        schemaObject = {
          ...schemaObject,
          name: schemaData.name || 'ShopCall.ai',
          description: schemaData.description || description,
          url: schemaData.url || 'https://shopcall.ai',
          logo: schemaData.image || ogImage,
        };
      } else if (schemaData.type === 'Article') {
        schemaObject = {
          ...schemaObject,
          headline: schemaData.name || title,
          description: schemaData.description || description,
          image: schemaData.image || ogImage,
          author: {
            '@type': 'Organization',
            name: schemaData.author || 'ShopCall.ai',
          },
          publisher: {
            '@type': 'Organization',
            name: 'ShopCall.ai',
            logo: {
              '@type': 'ImageObject',
              url: 'https://shopcall.ai/logo.png',
            },
          },
          datePublished: schemaData.datePublished,
          dateModified: schemaData.dateModified || schemaData.datePublished,
        };
      }

      schemaScript.textContent = JSON.stringify(schemaObject);
    }
  }, [title, description, keywords, ogTitle, ogDescription, ogImage, ogUrl, ogType, canonicalUrl, schemaData, i18n.language]);

  return null;
};

export default SEO;
