/**
 * Typography System - Google Fonts Configuration
 * Provides curated font pairings with preview support
 */

export interface FontPairing {
  id: string;
  name: string;
  heading: string;
  body: string;
  googleFontsUrl: string;
  cssHeading: string;
  cssBody: string;
  description: string;
  style: 'modern' | 'classic' | 'elegant' | 'bold' | 'playful' | 'tech';
}

export const FONT_PAIRINGS: FontPairing[] = [
  {
    id: 'inter-inter',
    name: 'Inter (Modern Clean)',
    heading: 'Inter',
    body: 'Inter',
    googleFontsUrl: 'https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap',
    cssHeading: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
    cssBody: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
    description: 'Moderní univerzální font navržený pro digitální čtení',
    style: 'modern',
  },
  {
    id: 'montserrat-opensans',
    name: 'Montserrat & Open Sans (Klasika)',
    heading: 'Montserrat',
    body: 'Open Sans',
    googleFontsUrl: 'https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700;800;900&family=Open+Sans:wght@400;500;600;700&display=swap',
    cssHeading: "'Montserrat', -apple-system, sans-serif",
    cssBody: "'Open Sans', -apple-system, sans-serif",
    description: 'Oblíbená kombinace pro čitelnost a profesionalitu',
    style: 'classic',
  },
  {
    id: 'poppins-roboto',
    name: 'Poppins & Roboto (Sportovní)',
    heading: 'Poppins',
    body: 'Roboto',
    googleFontsUrl: 'https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800;900&family=Roboto:wght@400;500;600;700&display=swap',
    cssHeading: "'Poppins', -apple-system, sans-serif",
    cssBody: "'Roboto', -apple-system, sans-serif",
    description: 'Dynamická kombinace vhodná pro sportovní weby',
    style: 'bold',
  },
  {
    id: 'raleway-lato',
    name: 'Raleway & Lato (Elegantní)',
    heading: 'Raleway',
    body: 'Lato',
    googleFontsUrl: 'https://fonts.googleapis.com/css2?family=Raleway:wght@600;700;800;900&family=Lato:wght@400;500;600;700&display=swap',
    cssHeading: "'Raleway', -apple-system, sans-serif",
    cssBody: "'Lato', -apple-system, sans-serif",
    description: 'Elegantní a lehká kombinace pro prémiový vzhled',
    style: 'elegant',
  },
  {
    id: 'oswald-sourcesan',
    name: 'Oswald & Source Sans (Silné)',
    heading: 'Oswald',
    body: 'Source Sans 3',
    googleFontsUrl: 'https://fonts.googleapis.com/css2?family=Oswald:wght@600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap',
    cssHeading: "'Oswald', -apple-system, sans-serif",
    cssBody: "'Source Sans 3', -apple-system, sans-serif",
    description: 'Výrazné nadpisy s čitelným textem',
    style: 'bold',
  },
  {
    id: 'nunito-nunito',
    name: 'Nunito (Přátelské)',
    heading: 'Nunito',
    body: 'Nunito',
    googleFontsUrl: 'https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap',
    cssHeading: "'Nunito', -apple-system, sans-serif",
    cssBody: "'Nunito', -apple-system, sans-serif",
    description: 'Přátelský a přístupný vzhled pro komunitní weby',
    style: 'playful',
  },
  {
    id: 'worksans-worksans',
    name: 'Work Sans (Tech)',
    heading: 'Work Sans',
    body: 'Work Sans',
    googleFontsUrl: 'https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500;600;700;800;900&display=swap',
    cssHeading: "'Work Sans', -apple-system, sans-serif",
    cssBody: "'Work Sans', -apple-system, sans-serif",
    description: 'Moderní technický vzhled s výbornou čitelností',
    style: 'tech',
  },
  {
    id: 'rubik-rubik',
    name: 'Rubik (Zaoblené)',
    heading: 'Rubik',
    body: 'Rubik',
    googleFontsUrl: 'https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800;900&display=swap',
    cssHeading: "'Rubik', -apple-system, sans-serif",
    cssBody: "'Rubik', -apple-system, sans-serif",
    description: 'Zaoblený a moderní design s přátelským dojmem',
    style: 'playful',
  },
  {
    id: 'playfair-sourcesans',
    name: 'Playfair & Source Sans (Prestižní)',
    heading: 'Playfair Display',
    body: 'Source Sans 3',
    googleFontsUrl: 'https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700;800;900&family=Source+Sans+3:wght@400;500;600;700&display=swap',
    cssHeading: "'Playfair Display', Georgia, serif",
    cssBody: "'Source Sans 3', -apple-system, sans-serif",
    description: 'Prestižní serifový nadpis s moderním textem',
    style: 'elegant',
  },
  {
    id: 'bebas-opensans',
    name: 'Bebas Neue & Open Sans (Impact)',
    heading: 'Bebas Neue',
    body: 'Open Sans',
    googleFontsUrl: 'https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Open+Sans:wght@400;500;600;700&display=swap',
    cssHeading: "'Bebas Neue', -apple-system, sans-serif",
    cssBody: "'Open Sans', -apple-system, sans-serif",
    description: 'Masivní nadpisy pro maximální dojem',
    style: 'bold',
  },
  {
    id: 'archivo-archivo',
    name: 'Archivo (Kompaktní)',
    heading: 'Archivo',
    body: 'Archivo',
    googleFontsUrl: 'https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&display=swap',
    cssHeading: "'Archivo', -apple-system, sans-serif",
    cssBody: "'Archivo', -apple-system, sans-serif",
    description: 'Kompaktní a efektivní pro hustší obsah',
    style: 'tech',
  },
  {
    id: 'exo-exo',
    name: 'Exo 2 (Futuristické)',
    heading: 'Exo 2',
    body: 'Exo 2',
    googleFontsUrl: 'https://fonts.googleapis.com/css2?family=Exo+2:wght@400;500;600;700;800;900&display=swap',
    cssHeading: "'Exo 2', -apple-system, sans-serif",
    cssBody: "'Exo 2', -apple-system, sans-serif",
    description: 'Futuristický a technologický vzhled',
    style: 'tech',
  },
];

/**
 * Get font pairing by ID
 */
export const getFontPairing = (id: string): FontPairing | undefined => {
  return FONT_PAIRINGS.find((f) => f.id === id);
};

/**
 * Get default font pairing
 */
export const getDefaultFontPairing = (): FontPairing => {
  return FONT_PAIRINGS[0]; // Inter by default
};

/**
 * Load Google Font dynamically
 */
export const loadGoogleFont = (googleFontsUrl: string): void => {
  const existingLink = document.querySelector(`link[href="${googleFontsUrl}"]`);
  if (existingLink) return; // Already loaded

  const link = document.createElement('link');
  link.href = googleFontsUrl;
  link.rel = 'stylesheet';
  link.crossOrigin = 'anonymous';
  document.head.appendChild(link);
};

/**
 * Apply font pairing to document
 */
export const applyFontPairing = (pairing: FontPairing): void => {
  loadGoogleFont(pairing.googleFontsUrl);
  
  // Set CSS custom properties
  document.documentElement.style.setProperty('--font-heading', pairing.cssHeading);
  document.documentElement.style.setProperty('--font-body', pairing.cssBody);
  document.documentElement.style.setProperty('--chakra-fonts-heading', pairing.cssHeading);
  document.documentElement.style.setProperty('--chakra-fonts-body', pairing.cssBody);
};

/**
 * Get font style badge color
 */
export const getFontStyleColor = (style: FontPairing['style']): string => {
  const colors: Record<FontPairing['style'], string> = {
    modern: 'blue',
    classic: 'gray',
    elegant: 'purple',
    bold: 'orange',
    playful: 'pink',
    tech: 'cyan',
  };
  return colors[style] || 'gray';
};
