/**
 * TabataFit Typography System
 * Inter font family, Apple-inspired scale
 */

import { TextStyle } from 'react-native'

// ═══════════════════════════════════════════════════════════════════════════
// FONT WEIGHTS (using Inter from @expo-google-fonts/inter)
// ═══════════════════════════════════════════════════════════════════════════

const FONT = {
  REGULAR: 'Inter_400Regular',
  MEDIUM: 'Inter_500Medium',
  SEMIBOLD: 'Inter_600SemiBold',
  BOLD: 'Inter_700Bold',
  BLACK: 'Inter_900Black',
} as const

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

export const TYPOGRAPHY = {
  // Display / Hero
  HERO: {
    fontFamily: FONT.BLACK,
    fontSize: 48,
    lineHeight: 56,
    letterSpacing: -1,
  } as TextStyle,

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

  // Title 1
  TITLE_1: {
    fontFamily: FONT.BOLD,
    fontSize: 28,
    lineHeight: 34,
    letterSpacing: 0.36,
  } as TextStyle,

  // Title 2
  TITLE_2: {
    fontFamily: FONT.BOLD,
    fontSize: 22,
    lineHeight: 28,
    letterSpacing: 0.35,
  } as TextStyle,

  // Title 3
  TITLE_3: {
    fontFamily: FONT.SEMIBOLD,
    fontSize: 20,
    lineHeight: 25,
    letterSpacing: 0.38,
  } as TextStyle,

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

  // Body
  BODY: {
    fontFamily: FONT.REGULAR,
    fontSize: 17,
    lineHeight: 22,
    letterSpacing: -0.41,
  } as TextStyle,

  // Body Bold
  BODY_BOLD: {
    fontFamily: FONT.SEMIBOLD,
    fontSize: 17,
    lineHeight: 22,
    letterSpacing: -0.41,
  } as TextStyle,

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

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

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

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

  // Caption 2
  CAPTION_2: {
    fontFamily: FONT.REGULAR,
    fontSize: 11,
    lineHeight: 13,
    letterSpacing: 0.07,
  } as TextStyle,

  // ─────────────────────────────────────────────────────────────────────────
  // SPECIAL: TIMER TYPOGRAPHY
  // ─────────────────────────────────────────────────────────────────────────

  // Main countdown number
  TIMER_NUMBER: {
    fontFamily: FONT.BLACK,
    fontSize: 96,
    lineHeight: 96,
    letterSpacing: -2,
    fontVariant: ['tabular-nums'],
  } as TextStyle,

  // Timer number (compact version)
  TIMER_NUMBER_COMPACT: {
    fontFamily: FONT.BLACK,
    fontSize: 72,
    lineHeight: 72,
    letterSpacing: -1.5,
    fontVariant: ['tabular-nums'],
  } as TextStyle,

  // Phase label (WORK, REST)
  TIMER_PHASE: {
    fontFamily: FONT.BOLD,
    fontSize: 24,
    lineHeight: 28,
    letterSpacing: 2,
    textTransform: 'uppercase',
  } as TextStyle,

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

  // Exercise name during workout
  EXERCISE_NAME: {
    fontFamily: FONT.BOLD,
    fontSize: 28,
    lineHeight: 34,
    letterSpacing: 0.36,
    textAlign: 'center',
  } as TextStyle,

  // ─────────────────────────────────────────────────────────────────────────
  // SPECIAL: BUTTON TYPOGRAPHY
  // ─────────────────────────────────────────────────────────────────────────

  BUTTON_LARGE: {
    fontFamily: FONT.SEMIBOLD,
    fontSize: 18,
    lineHeight: 22,
    letterSpacing: 0.5,
  } as TextStyle,

  BUTTON_MEDIUM: {
    fontFamily: FONT.SEMIBOLD,
    fontSize: 16,
    lineHeight: 20,
    letterSpacing: 0.3,
  } as TextStyle,

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

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

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

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

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

  // ─────────────────────────────────────────────────────────────────────────
  // SPECIAL: STATS TYPOGRAPHY
  // ─────────────────────────────────────────────────────────────────────────

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

  STAT_LABEL: {
    fontFamily: FONT.MEDIUM,
    fontSize: 12,
    lineHeight: 16,
    letterSpacing: 0.5,
    textTransform: 'uppercase',
  } as TextStyle,

  // ─────────────────────────────────────────────────────────────────────────
  // SPECIAL: OVERLINE / SECTION HEADER
  // ─────────────────────────────────────────────────────────────────────────

  OVERLINE: {
    fontFamily: FONT.SEMIBOLD,
    fontSize: 13,
    lineHeight: 16,
    letterSpacing: 1.5,
    textTransform: 'uppercase',
  } as TextStyle,

} as const

export { FONT }
