// Letta Brand Typography System
import { Platform } from 'react-native';

export const fontFamily = {
  // Use the Expo-loaded font family name from useFonts in App.tsx
  primary: 'Lexend_300Light',
  regular: 'Lexend_400Regular',
  // Use reliable monospace stacks per platform to ensure actual monospace rendering
  mono: Platform.select({
    ios: 'Menlo',
    android: 'monospace',
    default:
      'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace',
  }) as string,
} as const;

export const fontSize = {
  // Headlines (H1-H6)
  // Chat-first scale; add display for large hero titles
  display: 40,
  h1: 32,
  h2: 24,
  h3: 20,
  h4: 18,
  h5: 16,
  h6: 15,

  // Body Text
  body: 16,
  bodySmall: 14,

  // UI Elements
  button: 14,
  input: 16,
  label: 12,
  caption: 11,

  // Technical
  code: 14,
  codeBlock: 13,
  tiny: 10,
} as const;

export const fontWeight = {
  light: '300',
  regular: '400',
  medium: '500',
  semibold: '600',
  bold: '700',
} as const;

export const lineHeight = {
  tight: 1.25,
  normal: 1.4,
  relaxed: 1.5,
  loose: 1.7,
} as const;

export const letterSpacing = {
  tight: -0.02,
  normal: 0,
  wide: 0.08,
} as const;

// Typography Tokens
export const typography = {
  display: {
    fontSize: fontSize.display,
    fontWeight: fontWeight.bold,
    lineHeight: lineHeight.tight,
    letterSpacing: letterSpacing.tight,
    fontFamily: fontFamily.primary,
  },
  // Headlines
  h1: {
    fontSize: fontSize.h1,
    fontWeight: fontWeight.bold,
    lineHeight: lineHeight.tight,
    letterSpacing: letterSpacing.tight,
    fontFamily: fontFamily.primary,
  },
  h2: {
    fontSize: fontSize.h2,
    fontWeight: fontWeight.medium,
    lineHeight: lineHeight.tight,
    letterSpacing: letterSpacing.tight,
    fontFamily: fontFamily.primary,
  },
  h3: {
    fontSize: fontSize.h3,
    fontWeight: fontWeight.medium,
    lineHeight: lineHeight.normal,
    letterSpacing: letterSpacing.normal,
    fontFamily: fontFamily.primary,
  },
  h4: {
    fontSize: fontSize.h4,
    fontWeight: fontWeight.regular,
    lineHeight: lineHeight.normal,
    letterSpacing: letterSpacing.normal,
    fontFamily: fontFamily.primary,
  },
  h5: {
    fontSize: fontSize.h5,
    fontWeight: fontWeight.regular,
    lineHeight: lineHeight.normal,
    letterSpacing: letterSpacing.normal,
    fontFamily: fontFamily.primary,
  },
  h6: {
    fontSize: fontSize.h6,
    fontWeight: fontWeight.regular,
    lineHeight: lineHeight.normal,
    letterSpacing: letterSpacing.normal,
    fontFamily: fontFamily.primary,
  },

  // Body Text
  body: {
    fontSize: fontSize.body,
    fontWeight: fontWeight.regular,
    lineHeight: lineHeight.relaxed,
    letterSpacing: letterSpacing.normal,
    fontFamily: fontFamily.primary,
  },
  bodySmall: {
    fontSize: fontSize.bodySmall,
    fontWeight: fontWeight.regular,
    lineHeight: lineHeight.normal,
    letterSpacing: letterSpacing.normal,
    fontFamily: fontFamily.primary,
  },

  // UI Components
  button: {
    fontSize: fontSize.button,
    fontWeight: fontWeight.semibold,
    lineHeight: lineHeight.tight,
    letterSpacing: letterSpacing.normal,
    fontFamily: fontFamily.primary,
    textTransform: 'none' as const,
  },
  buttonSmall: {
    fontSize: fontSize.caption,
    fontWeight: fontWeight.semibold,
    lineHeight: lineHeight.tight,
    letterSpacing: letterSpacing.wide,
    fontFamily: fontFamily.primary,
    textTransform: 'uppercase' as const,
  },
  input: {
    fontSize: fontSize.input,
    fontWeight: fontWeight.regular,
    lineHeight: lineHeight.normal,
    letterSpacing: letterSpacing.normal,
    fontFamily: fontFamily.primary,
  },
  label: {
    fontSize: fontSize.label,
    fontWeight: fontWeight.light,
    lineHeight: lineHeight.tight,
    letterSpacing: letterSpacing.wide,
    fontFamily: fontFamily.primary,
    textTransform: 'uppercase' as const,
  },
  caption: {
    fontSize: fontSize.caption,
    fontWeight: fontWeight.regular,
    lineHeight: lineHeight.normal,
    letterSpacing: letterSpacing.normal,
    fontFamily: fontFamily.primary,
  },

  // Technical Elements
  code: {
    fontSize: fontSize.code,
    fontWeight: fontWeight.regular,
    lineHeight: lineHeight.relaxed,
    letterSpacing: letterSpacing.normal,
    fontFamily: fontFamily.mono,
  },
  codeBlock: {
    fontSize: fontSize.codeBlock,
    fontWeight: fontWeight.regular,
    lineHeight: lineHeight.normal,
    letterSpacing: letterSpacing.normal,
    fontFamily: fontFamily.mono,
  },
  technical: {
    fontSize: fontSize.caption,
    fontWeight: fontWeight.light,
    lineHeight: lineHeight.tight,
    letterSpacing: letterSpacing.wide,
    fontFamily: fontFamily.primary,
    textTransform: 'uppercase' as const,
  },

  // Chat-specific
  chatMessage: {
    fontSize: fontSize.body,
    fontWeight: fontWeight.regular,
    lineHeight: lineHeight.relaxed,
    letterSpacing: letterSpacing.normal,
    fontFamily: fontFamily.primary,
  },
  reasoning: {
    fontSize: fontSize.bodySmall,
    fontWeight: fontWeight.light,
    lineHeight: lineHeight.normal,
    letterSpacing: letterSpacing.normal,
    fontFamily: fontFamily.primary,
    fontStyle: 'italic' as const,
  },
  agentName: {
    fontSize: fontSize.h6,
    fontWeight: fontWeight.semibold,
    lineHeight: lineHeight.tight,
    letterSpacing: letterSpacing.normal,
    fontFamily: fontFamily.primary,
  },
  timestamp: {
    fontSize: fontSize.tiny,
    fontWeight: fontWeight.light,
    lineHeight: lineHeight.tight,
    letterSpacing: letterSpacing.wide,
    fontFamily: fontFamily.primary,
    textTransform: 'uppercase' as const,
  }
} as const;

export type Typography = typeof typography;