import type React from "react"
// Typography utility functions and constants

// Font family combinations (primary + fallback) with enhanced rendering
export const fontStacks = {
  sans: {
    modern: "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
    classic: "'Merriweather Sans', Georgia, 'Times New Roman', serif",
    neutral: "'Public Sans', system-ui, -apple-system, sans-serif",
    humanist: "'Open Sans', 'Segoe UI', Avenir, Montserrat, sans-serif",
    geometric: "'Poppins', Futura, 'Century Gothic', 'Avenir Next', sans-serif",
  },
  serif: {
    classic: "'Merriweather', Georgia, 'Times New Roman', serif",
    modern: "'Playfair Display', 'Times New Roman', Didot, serif",
    slab: "'Roboto Slab', 'Courier New', Monaco, monospace",
  },
  mono: {
    code: "'JetBrains Mono', 'SF Mono', Menlo, Monaco, 'Courier New', monospace",
    system: "'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace",
  },
}

// Enhanced font rendering settings
export const fontRenderingSettings = {
  display: {
    fontFeatureSettings: '"kern" 1, "liga" 1, "calt" 1, "ss01" 1, "ss02" 1',
    fontVariantLigatures: "common-ligatures discretionary-ligatures",
    textRendering: "optimizeLegibility",
    WebkitFontSmoothing: "antialiased",
    MozOsxFontSmoothing: "grayscale",
    letterSpacing: "-0.025em",
  },
  body: {
    fontFeatureSettings: '"kern" 1, "liga" 1, "calt" 1',
    fontVariantLigatures: "common-ligatures",
    textRendering: "optimizeLegibility",
    WebkitFontSmoothing: "antialiased",
    MozOsxFontSmoothing: "grayscale",
  },
  caption: {
    fontFeatureSettings: '"kern" 1, "liga" 1',
    fontVariantLigatures: "common-ligatures",
    textRendering: "optimizeSpeed",
    WebkitFontSmoothing: "antialiased",
    MozOsxFontSmoothing: "grayscale",
    letterSpacing: "0.025em",
  },
  code: {
    fontFeatureSettings: '"kern" 1, "liga" 0, "calt" 1, "zero" 1',
    fontVariantLigatures: "none",
    textRendering: "optimizeLegibility",
    WebkitFontSmoothing: "antialiased",
    MozOsxFontSmoothing: "grayscale",
  },
}

// Fluid typography scaling function
// This creates responsive font sizes that scale smoothly between min and max viewport widths
export function fluidTypographyValue(
  minSize: number, // minimum size in rem
  maxSize: number, // maximum size in rem
  minWidth = 20, // minimum viewport width in rem (320px)
  maxWidth = 90, // maximum viewport width in rem (1440px)
): string {
  // Calculate the slope for fluid scaling
  const slope = (maxSize - minSize) / (maxWidth - minWidth)
  const base = minSize - slope * minWidth

  // Create the CSS clamp function for fluid typography
  return `clamp(${minSize}rem, ${base}rem + ${slope * 100}vw, ${maxSize}rem)`
}

// Typography scale presets
export const typographyScales = {
  // Classic modular scale (1.2 ratio)
  classic: {
    xs: "0.75rem", // 12px
    sm: "0.875rem", // 14px
    base: "1rem", // 16px
    lg: "1.125rem", // 18px
    xl: "1.25rem", // 20px
    "2xl": "1.5rem", // 24px
    "3xl": "1.875rem", // 30px
    "4xl": "2.25rem", // 36px
    "5xl": "3rem", // 48px
    "6xl": "3.75rem", // 60px
  },
  // Fluid typography scale
  fluid: {
    xs: fluidTypographyValue(0.75, 0.875),
    sm: fluidTypographyValue(0.875, 1),
    base: fluidTypographyValue(1, 1.125),
    lg: fluidTypographyValue(1.125, 1.25),
    xl: fluidTypographyValue(1.25, 1.5),
    "2xl": fluidTypographyValue(1.5, 1.875),
    "3xl": fluidTypographyValue(1.875, 2.25),
    "4xl": fluidTypographyValue(2.25, 3),
    "5xl": fluidTypographyValue(3, 4),
    "6xl": fluidTypographyValue(3.75, 5),
  },
}

// Line height presets
export const lineHeights = {
  tight: "1.1",
  snug: "1.25",
  normal: "1.5",
  relaxed: "1.625",
  loose: "2",
}

// Letter spacing presets
export const letterSpacings = {
  tighter: "-0.05em",
  tight: "-0.025em",
  normal: "0em",
  wide: "0.025em",
  wider: "0.05em",
  widest: "0.1em",
}

// Font weight mapping
export const fontWeights = {
  thin: "100",
  extralight: "200",
  light: "300",
  normal: "400",
  medium: "500",
  semibold: "600",
  bold: "700",
  extrabold: "800",
  black: "900",
}

// Helper function to create a typographic style with enhanced rendering
export function createTypographyStyle(options: {
  fontSize: string
  lineHeight?: string
  letterSpacing?: string
  fontWeight?: string
  fontFamily?: string
  renderingType?: "display" | "body" | "caption" | "code"
}): React.CSSProperties {
  const renderingSettings = options.renderingType
    ? fontRenderingSettings[options.renderingType]
    : fontRenderingSettings.body

  return {
    fontSize: options.fontSize,
    lineHeight: options.lineHeight || "inherit",
    letterSpacing: options.letterSpacing || "inherit",
    fontWeight: options.fontWeight || "inherit",
    fontFamily: options.fontFamily || "inherit",
    ...renderingSettings,
  }
}

// Enhanced typography component helper
export function getTypographyClassName(type: "display" | "body" | "caption" | "code" = "body"): string {
  const classMap = {
    display: "text-display",
    body: "text-body",
    caption: "text-caption",
    code: "font-mono text-crisp",
  }
  return classMap[type]
}