/**
 * FitAI Typography System - BOLD MODERN
 * High-impact typography with clear hierarchy using system fonts
 */

import { TextStyle } from "react-native";

/**
 * Font Sizes - Larger for bold impact
 */
export const fontSize = {
  xs: 12,
  sm: 14,
  base: 16,
  md: 18, // Body emphasis
  lg: 22,
  xl: 26,
  "2xl": 32,
  "3xl": 40,
  "4xl": 52,
  "5xl": 64,
} as const;

/**
 * Font Weights - Emphasize bold
 */
export const fontWeight = {
  regular: "400" as TextStyle["fontWeight"],
  medium: "500" as TextStyle["fontWeight"],
  semibold: "600" as TextStyle["fontWeight"],
  bold: "700" as TextStyle["fontWeight"],
  extrabold: "800" as TextStyle["fontWeight"],
} as const;

/**
 * Line Heights
 */
export const lineHeight = {
  tight: 1.15,
  normal: 1.4,
  relaxed: 1.6,
} as const;

/**
 * Letter Spacing
 */
export const letterSpacing = {
  tight: -1,
  normal: 0,
  wide: 0.5,
  wider: 1.5,
} as const;

/**
 * Typography Presets
 * Ready-to-use text styles for common use cases
 */
export interface TypographyPresets {
  h1: TextStyle;
  h2: TextStyle;
  h3: TextStyle;
  h4: TextStyle;
  body: TextStyle;
  bodyEmphasis: TextStyle;
  label: TextStyle;
  stat: TextStyle;
  statLarge: TextStyle;
  caption: TextStyle;
  button: TextStyle;
}

export const createTypographyPresets = (
  textPrimary: string,
  textSecondary: string,
  textTertiary: string,
): TypographyPresets => ({
  // Display Text (Screen Titles) - Extra Bold
  h1: {
    fontSize: fontSize["4xl"],
    fontWeight: fontWeight.extrabold,
    letterSpacing: letterSpacing.tight,
    lineHeight: fontSize["4xl"] * lineHeight.tight,
    color: textPrimary,
  },

  // Section Headers - Bold
  h2: {
    fontSize: fontSize["2xl"],
    fontWeight: fontWeight.bold,
    letterSpacing: -0.5,
    color: textPrimary,
  },

  // Card Titles - Semibold
  h3: {
    fontSize: fontSize.lg,
    fontWeight: fontWeight.semibold,
    letterSpacing: -0.3,
    color: textPrimary,
  },

  // Small Headers
  h4: {
    fontSize: fontSize.md,
    fontWeight: fontWeight.semibold,
    color: textPrimary,
  },

  // Body Text
  body: {
    fontSize: fontSize.base,
    fontWeight: fontWeight.regular,
    lineHeight: fontSize.base * lineHeight.normal,
    color: textSecondary,
  },

  // Emphasized Body
  bodyEmphasis: {
    fontSize: fontSize.md,
    fontWeight: fontWeight.medium,
    lineHeight: fontSize.md * lineHeight.normal,
    color: textPrimary,
  },

  // Labels (uppercase, spaced)
  label: {
    fontSize: fontSize.xs,
    fontWeight: fontWeight.semibold,
    letterSpacing: letterSpacing.wider,
    textTransform: "uppercase",
    color: textTertiary,
  },

  // Stats/Numbers - Bold Large
  stat: {
    fontSize: fontSize["3xl"],
    fontWeight: fontWeight.bold,
    letterSpacing: -1,
    color: textPrimary,
  },

  // Large Stats (Hero numbers)
  statLarge: {
    fontSize: fontSize["5xl"],
    fontWeight: fontWeight.extrabold,
    letterSpacing: -2,
    lineHeight: fontSize["5xl"] * lineHeight.tight,
    color: textPrimary,
  },

  // Caption/Small text
  caption: {
    fontSize: fontSize.xs,
    fontWeight: fontWeight.regular,
    color: textTertiary,
  },

  // Button Text
  button: {
    fontSize: fontSize.base,
    fontWeight: fontWeight.bold,
    letterSpacing: 0.5,
  },
});

/**
 * Typography utility object
 */
export const typography = {
  fontSize,
  fontWeight,
  lineHeight,
  letterSpacing,
};