/**
 * FitAI Typography System
 * Minimalist typography with clear hierarchy using system fonts
 */

import { TextStyle } from "react-native";

/**
 * Font Sizes
 * Refined scale with fewer sizes for clearer hierarchy
 */
export const fontSize = {
  xs: 11,
  sm: 13,
  base: 15,
  md: 17, // Body emphasis
  lg: 20,
  xl: 24,
  "2xl": 28,
  "3xl": 34,
  "4xl": 40,
} as const;

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

/**
 * Line Heights
 */
export const lineHeight = {
  tight: 1.2,
  normal: 1.5,
  relaxed: 1.7,
} as const;

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

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

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

  // Section Headers
  h2: {
    fontSize: fontSize.xl,
    fontWeight: fontWeight.semibold,
    letterSpacing: -0.3,
    color: textPrimary,
  },

  // Card Titles
  h3: {
    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.sm,
    fontWeight: fontWeight.medium,
    letterSpacing: letterSpacing.wide,
    textTransform: "uppercase",
    color: textTertiary,
  },

  // Stats/Numbers
  stat: {
    fontSize: fontSize["2xl"],
    fontWeight: fontWeight.bold,
    color: textPrimary,
  },

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

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