import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import { getBannerUrls } from '@/lib/cloudflareImageUtils';

interface OpenGraphOptions {
  title: string;
  description?: string;
  imageUrl?: string;
  imageId?: string;
  type?: 'website' | 'article' | 'profile';
  enabled?: boolean;
}

export function useOpenGraph({
  title,
  description,
  imageUrl,
  imageId,
  type = 'website',
  enabled = true
}: OpenGraphOptions) {
  const location = useLocation();
  const currentUrl = window.location.origin + location.pathname;

  useEffect(() => {
    if (!enabled || !title) return;

    // Determine the image to use
    let finalImageUrl = 'https://cdn.thrillwiki.com/images/4af6a0c6-4450-497d-772f-08da62274100/original';
    
    if (imageId) {
      const bannerUrls = getBannerUrls(imageId);
      finalImageUrl = bannerUrls.desktop || imageUrl || 'https://cdn.thrillwiki.com/images/4af6a0c6-4450-497d-772f-08da62274100/original';
    } else if (imageUrl) {
      finalImageUrl = imageUrl;
    }

    // Convert relative URL to absolute for social media
    if (finalImageUrl.startsWith('/')) {
      finalImageUrl = window.location.origin + finalImageUrl;
    }

    // Update document title
    document.title = title.includes('ThrillWiki') ? title : `${title} | ThrillWiki`;

    // Update or create meta tags
    updateMetaTag('og:title', title);
    updateMetaTag('og:description', description || 'Explore theme parks and roller coasters worldwide with ThrillWiki');
    updateMetaTag('og:image', finalImageUrl);
    updateMetaTag('og:type', type);
    updateMetaTag('og:url', currentUrl);
    
    // Twitter tags
    updateMetaTag('twitter:title', title, 'name');
    updateMetaTag('twitter:description', description || 'Explore theme parks and roller coasters worldwide with ThrillWiki', 'name');
    updateMetaTag('twitter:image', finalImageUrl, 'name');
    updateMetaTag('twitter:url', currentUrl, 'name');

    return () => {
      document.title = 'ThrillWiki - Theme Park & Roller Coaster Database';
      updateMetaTag('og:title', 'ThrillWiki - Theme Park & Roller Coaster Database');
      updateMetaTag('og:description', 'Explore theme parks and roller coasters worldwide with ThrillWiki - the comprehensive database for enthusiasts');
      updateMetaTag('og:image', 'https://cdn.thrillwiki.com/images/4af6a0c6-4450-497d-772f-08da62274100/original');
      updateMetaTag('og:type', 'website');
      updateMetaTag('og:url', 'https://www.thrillwiki.com/');
      
      updateMetaTag('twitter:title', 'ThrillWiki - Theme Park & Roller Coaster Database', 'name');
      updateMetaTag('twitter:description', 'Explore theme parks and roller coasters worldwide with ThrillWiki - the comprehensive database for enthusiasts', 'name');
      updateMetaTag('twitter:image', 'https://cdn.thrillwiki.com/images/4af6a0c6-4450-497d-772f-08da62274100/original', 'name');
      updateMetaTag('twitter:url', 'https://www.thrillwiki.com/', 'name');
    };
  }, [title, description, imageUrl, imageId, type, currentUrl, enabled]);
}

function updateMetaTag(property: string, content: string, attributeName: 'property' | 'name' = 'property') {
  let meta = document.querySelector(`meta[${attributeName}="${property}"]`);
  
  if (!meta) {
    meta = document.createElement('meta');
    meta.setAttribute(attributeName, property);
    document.head.appendChild(meta);
  }
  
  meta.setAttribute('content', content);
}