import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import { generateMetaTags } from '../utils/seo';

// SEO Head component that manually updates document head
// This works without additional dependencies until we add react-helmet-async
const SEOHead = () => {
  const location = useLocation();

  useEffect(() => {
    const { title, meta, link, structuredData } = generateMetaTags(location.pathname);

    // Update document title
    document.title = title;

    // Remove existing meta tags that we manage
    const existingMeta = document.querySelectorAll('meta[data-seo="true"]');
    existingMeta.forEach(tag => tag.remove());

    const existingLinks = document.querySelectorAll('link[data-seo="true"]');
    existingLinks.forEach(tag => tag.remove());

    const existingStructuredData = document.querySelectorAll('script[data-seo="structured-data"]');
    existingStructuredData.forEach(tag => tag.remove());

    // Add new meta tags
    meta.forEach(({ name, property, content }) => {
      const metaTag = document.createElement('meta');
      if (name) metaTag.setAttribute('name', name);
      if (property) metaTag.setAttribute('property', property);
      metaTag.setAttribute('content', content);
      metaTag.setAttribute('data-seo', 'true');
      document.head.appendChild(metaTag);
    });

    // Add canonical link
    link.forEach(({ rel, href }) => {
      const linkTag = document.createElement('link');
      linkTag.setAttribute('rel', rel);
      linkTag.setAttribute('href', href);
      linkTag.setAttribute('data-seo', 'true');
      document.head.appendChild(linkTag);
    });

    // Add structured data
    if (structuredData) {
      const script = document.createElement('script');
      script.type = 'application/ld+json';
      script.setAttribute('data-seo', 'structured-data');
      script.textContent = JSON.stringify(structuredData);
      document.head.appendChild(script);
    }

    // Add preconnect for performance
    const preconnectLinks = [
      'https://www.googletagmanager.com',
      'https://www.google-analytics.com'
    ];

    preconnectLinks.forEach(href => {
      if (!document.querySelector(`link[rel="preconnect"][href="${href}"]`)) {
        const preconnect = document.createElement('link');
        preconnect.rel = 'preconnect';
        preconnect.href = href;
        preconnect.setAttribute('data-seo', 'true');
        document.head.appendChild(preconnect);
      }
    });

  }, [location.pathname]);

  return null; // This component doesn't render anything
};

export default SEOHead;