import { useEffect, useState } from 'react';

// Track loaded fonts to avoid duplicate requests
const loadedFonts = new Set<string>();

// Font file mapping
const fontFiles: Record<string, string> = {
  'DrunkMillionaire': '/css/fonts.css',
  'Storm Gust': '/css/fonts.css',
  'Immortal': '/css/fonts.css',
  'Shadow Whisper': '/css/fonts.css',
  'Grandeven': '/css/fonts.css',
};

// Font class mapping
const fontClasses: Record<string, string> = {
  'DrunkMillionaire': 'font-drunk-millionaire',
  'Storm Gust': 'font-storm-gust',
  'Immortal': 'font-immortal',
  'Shadow Whisper': 'font-shadow-whisper',
  'Grandeven': 'font-grandeven',
};

/**
 * Hook untuk lazy load font besar
 * Font tidak akan di-load sampai komponen menggunakan font ini di-render
 * 
 * @param fontName - Nama font yang akan di-load
 * @returns Object dengan status loading dan class name yang sesuai
 * 
 * @example
 * ```tsx
 * const { isLoaded, fontClass } = useLazyFont('DrunkMillionaire');
 * return <h1 className={fontClass}>Title</h1>;
 * ```
 */
export function useLazyFont(fontName: string): { isLoaded: boolean; fontClass: string } {
  const [isLoaded, setIsLoaded] = useState(() => loadedFonts.has(fontName));

  useEffect(() => {
    // Skip if font is already loaded or not in our list
    if (loadedFonts.has(fontName) || !fontFiles[fontName]) {
      return;
    }

    // Check if stylesheet already exists
    const linkId = `font-${fontName.replace(/\s+/g, '-').toLowerCase()}`;
    if (document.getElementById(linkId)) {
      setIsLoaded(true);
      return;
    }

    // Load font stylesheet
    const link = document.createElement('link');
    link.id = linkId;
    link.rel = 'stylesheet';
    link.href = fontFiles[fontName];
    
    link.onload = () => {
      loadedFonts.add(fontName);
      setIsLoaded(true);
    };

    link.onerror = () => {
      console.warn(`Failed to load font: ${fontName}`);
      // Still mark as loaded to use fallback
      setIsLoaded(true);
    };

    document.head.appendChild(link);

    return () => {
      // Cleanup handled by tracking loaded fonts
    };
  }, [fontName]);

  return {
    isLoaded,
    fontClass: fontClasses[fontName] || '',
  };
}

/**
 * Preload font tanpa menunggu render
 * Berguna untuk prefetch font yang akan digunakan segera
 * 
 * @param fontName - Nama font yang akan di-preload
 */
export function preloadFont(fontName: string): void {
  if (loadedFonts.has(fontName) || !fontFiles[fontName]) {
    return;
  }

  const linkId = `font-${fontName.replace(/\s+/g, '-').toLowerCase()}`;
  if (document.getElementById(linkId)) {
    return;
  }

  const link = document.createElement('link');
  link.id = linkId;
  link.rel = 'stylesheet';
  link.href = fontFiles[fontName];
  
  link.onload = () => {
    loadedFonts.add(fontName);
  };

  document.head.appendChild(link);
}