/**
 * TabataFit Typography System
 * Three families: Serif (emotional), Sans (interface), Mono (data)
 */

import { TextStyle } from 'react-native'

// ═══════════════════════════════════════════════════════════════════════════
// FONT FAMILIES
// ═══════════════════════════════════════════════════════════════════════════

export const FONT_FAMILY = {
  SERIF: 'DMSerifDisplay_Regular',
  SERIF_ITALIC: 'DMSerifDisplay_Italic',
  SANS: 'Outfit_400Regular',
  SANS_MEDIUM: 'Outfit_500Medium',
  SANS_SEMIBOLD: 'Outfit_600SemiBold',
  SANS_BOLD: 'Outfit_700Bold',
  MONO: 'DMMono_400Regular',
  MONO_MEDIUM: 'DMMono_500Medium',
} as const

// Font alias object — maps to FONT_FAMILY values
const FONT: Record<string, string> = {
  SANS: FONT_FAMILY.SANS,
  SANS_MEDIUM: FONT_FAMILY.SANS_MEDIUM,
  SANS_SEMIBOLD: FONT_FAMILY.SANS_SEMIBOLD,
  SANS_BOLD: FONT_FAMILY.SANS_BOLD,
  SERIF: FONT_FAMILY.SERIF,
  SERIF_ITALIC: FONT_FAMILY.SERIF_ITALIC,
  MONO: FONT_FAMILY.MONO,
  MONO_MEDIUM: FONT_FAMILY.MONO_MEDIUM,
  // Backward compat
  REGULAR: FONT_FAMILY.SANS,
  MEDIUM: FONT_FAMILY.SANS_MEDIUM,
  SEMIBOLD: FONT_FAMILY.SANS_SEMIBOLD,
  BOLD: FONT_FAMILY.SANS_BOLD,
  BLACK: FONT_FAMILY.SANS_BOLD,
}

// ═══════════════════════════════════════════════════════════════════════════
// TYPE SCALE
// ═══════════════════════════════════════════════════════════════════════════

export const TYPOGRAPHY = {
  // Display / Hero — Serif for emotional moments
  DISPLAY: {
    fontFamily: FONT.SERIF,
    fontSize: 28,
    lineHeight: 34,
    letterSpacing: 0,
  } as TextStyle,

  HERO: {
    fontFamily: FONT.SERIF,
    fontSize: 32,
    lineHeight: 38,
    letterSpacing: -0.5,
  } as TextStyle,

  // Large Title (like iOS)
  LARGE_TITLE: {
    fontFamily: FONT.SERIF,
    fontSize: 34,
    lineHeight: 41,
    letterSpacing: 0.37,
  } as TextStyle,

  // Heading 1 — Serif for section titles
  HEADING_1: {
    fontFamily: FONT.SERIF,
    fontSize: 22,
    lineHeight: 28,
    letterSpacing: 0.35,
  } as TextStyle,

  // Title 1 (backward compat)
  TITLE_1: {
    fontFamily: FONT.SERIF,
    fontSize: 28,
    lineHeight: 34,
    letterSpacing: 0.36,
  } as TextStyle,

  // Heading 2 / Title 2 — Sans for exercise titles, program cards
  HEADING_2: {
    fontFamily: FONT_FAMILY.SANS_SEMIBOLD,
    fontSize: 18,
    lineHeight: 24,
    letterSpacing: 0,
  } as TextStyle,

  TITLE_2: {
    fontFamily: FONT_FAMILY.SANS_BOLD,
    fontSize: 22,
    lineHeight: 28,
    letterSpacing: 0.35,
  } as TextStyle,

  TITLE_3: {
    fontFamily: FONT.SANS_SEMIBOLD,
    fontSize: 20,
    lineHeight: 25,
    letterSpacing: 0.38,
  } as TextStyle,

  // Headline
  HEADLINE: {
    fontFamily: FONT.SANS_SEMIBOLD,
    fontSize: 17,
    lineHeight: 22,
    letterSpacing: -0.41,
  } as TextStyle,

  // Body — Sans
  BODY: {
    fontFamily: FONT.SANS,
    fontSize: 15,
    lineHeight: 20,
    letterSpacing: -0.24,
  } as TextStyle,

  BODY_BOLD: {
    fontFamily: FONT.SANS_SEMIBOLD,
    fontSize: 15,
    lineHeight: 20,
    letterSpacing: -0.24,
  } as TextStyle,

  // Callout
  CALLOUT: {
    fontFamily: FONT.SANS,
    fontSize: 16,
    lineHeight: 21,
    letterSpacing: -0.32,
  } as TextStyle,

  // Subheadline
  SUBHEADLINE: {
    fontFamily: FONT.SANS,
    fontSize: 15,
    lineHeight: 20,
    letterSpacing: -0.24,
  } as TextStyle,

  // Label — Mono for tags, metadata, uppercase
  LABEL: {
    fontFamily: FONT.MONO_MEDIUM,
    fontSize: 11,
    lineHeight: 16,
    letterSpacing: 0.08,
    textTransform: 'uppercase' as const,
  } as TextStyle,

  // Footnote
  FOOTNOTE: {
    fontFamily: FONT.SANS,
    fontSize: 13,
    lineHeight: 18,
    letterSpacing: -0.08,
  } as TextStyle,

  // Caption
  CAPTION_1: {
    fontFamily: FONT.SANS,
    fontSize: 12,
    lineHeight: 16,
    letterSpacing: 0,
  } as TextStyle,

  CAPTION_2: {
    fontFamily: FONT.SANS,
    fontSize: 11,
    lineHeight: 13,
    letterSpacing: 0.07,
  } as TextStyle,

  // ─────────────────────────────────────────────────────────────────────────
  // SPECIAL: TIMER — Mono, readable from 2 meters
  // ─────────────────────────────────────────────────────────────────────────

  TIMER_NUMBER: {
    fontFamily: FONT.MONO_MEDIUM,
    fontSize: 88,
    lineHeight: 88,
    letterSpacing: -2,
    fontVariant: ['tabular-nums'],
  } as TextStyle,

  TIMER_NUMBER_COMPACT: {
    fontFamily: FONT.MONO_MEDIUM,
    fontSize: 72,
    lineHeight: 72,
    letterSpacing: -1.5,
    fontVariant: ['tabular-nums'],
  } as TextStyle,

  TIMER_PHASE: {
    fontFamily: FONT.MONO_MEDIUM,
    fontSize: 13,
    lineHeight: 18,
    letterSpacing: 0.15,
    textTransform: 'uppercase' as const,
  } as TextStyle,

  TIMER_ROUND: {
    fontFamily: FONT.MONO_MEDIUM,
    fontSize: 17,
    lineHeight: 22,
    letterSpacing: 0,
    fontVariant: ['tabular-nums'],
  } as TextStyle,

  EXERCISE_NAME: {
    fontFamily: FONT.SANS_BOLD,
    fontSize: 28,
    lineHeight: 34,
    letterSpacing: 0.36,
    textAlign: 'center' as const,
  } as TextStyle,

  // ─────────────────────────────────────────────────────────────────────────
  // SPECIAL: BUTTON — Sans
  // ─────────────────────────────────────────────────────────────────────────

  BUTTON_LARGE: {
    fontFamily: FONT.SANS_SEMIBOLD,
    fontSize: 15,
    lineHeight: 20,
    letterSpacing: 0.5,
  } as TextStyle,

  BUTTON_MEDIUM: {
    fontFamily: FONT.SANS_SEMIBOLD,
    fontSize: 15,
    lineHeight: 20,
    letterSpacing: 0.3,
  } as TextStyle,

  BUTTON_SMALL: {
    fontFamily: FONT.SANS_SEMIBOLD,
    fontSize: 14,
    lineHeight: 18,
    letterSpacing: 0.2,
  } as TextStyle,

  // ─────────────────────────────────────────────────────────────────────────
  // SPECIAL: CARD
  // ─────────────────────────────────────────────────────────────────────────

  CARD_TITLE: {
    fontFamily: FONT.SANS_SEMIBOLD,
    fontSize: 17,
    lineHeight: 22,
    letterSpacing: -0.41,
  } as TextStyle,

  CARD_SUBTITLE: {
    fontFamily: FONT.SANS,
    fontSize: 14,
    lineHeight: 18,
    letterSpacing: -0.15,
  } as TextStyle,

  CARD_METADATA: {
    fontFamily: FONT.SANS_MEDIUM,
    fontSize: 13,
    lineHeight: 16,
    letterSpacing: 0,
  } as TextStyle,

  // ─────────────────────────────────────────────────────────────────────────
  // SPECIAL: STATS — Mono
  // ─────────────────────────────────────────────────────────────────────────

  STAT_VALUE: {
    fontFamily: FONT.MONO_MEDIUM,
    fontSize: 32,
    lineHeight: 38,
    letterSpacing: -0.5,
    fontVariant: ['tabular-nums'],
  } as TextStyle,

  STAT_LABEL: {
    fontFamily: FONT.MONO_MEDIUM,
    fontSize: 11,
    lineHeight: 16,
    letterSpacing: 0.08,
    textTransform: 'uppercase' as const,
  } as TextStyle,

  // ─────────────────────────────────────────────────────────────────────────
  // SPECIAL: OVERLINE / SECTION HEADER — Mono
  // ─────────────────────────────────────────────────────────────────────────

  OVERLINE: {
    fontFamily: FONT.MONO_MEDIUM,
    fontSize: 11,
    lineHeight: 16,
    letterSpacing: 0.08,
    textTransform: 'uppercase' as const,
  } as TextStyle,

} as const

export { FONT }

// Named exports for backward compatibility with player components
export const FONT_FAMILY_SANS_SEMIBOLD = FONT_FAMILY.SANS_SEMIBOLD
export const FONT_FAMILY_SANS_BOLD = FONT_FAMILY.SANS_BOLD
