/**
 * Design Tokens for Books Frontend
 *
 * This file contains all design system tokens for consistent styling.
 * Import these tokens instead of hardcoding values in components.
 */

// ============================================================================
// SPACING
// ============================================================================

export const spacing = {
  /** 4px - Minimal spacing, tight elements */
  xs: 4,
  /** 8px - Small spacing, compact layouts */
  sm: 8,
  /** 12px - Medium spacing, default padding */
  md: 12,
  /** 16px - Large spacing, section gaps */
  lg: 16,
  /** 24px - Extra large, major sections */
  xl: 24,
  /** 32px - Maximum spacing, page sections */
  xxl: 32,
} as const;

// Semantic spacing aliases
export const componentSpacing = {
  /** Space between cards in a grid */
  cardGap: spacing.lg,
  /** Padding inside cards */
  cardPadding: spacing.lg,
  /** Space between form fields */
  formGap: spacing.md,
  /** Space between table rows */
  tableRowGap: spacing.sm,
  /** Modal internal padding */
  modalPadding: spacing.xl,
  /** Page section margin */
  sectionMargin: spacing.xl,
  /** Inline element gap (buttons, tags) */
  inlineGap: spacing.sm,
} as const;

// Grid gutters (for Ant Design Row/Col)
export const gridGutter = {
  /** Standard grid gutter [horizontal, vertical] */
  default: [spacing.lg, spacing.lg] as [number, number],
  /** Compact grid gutter */
  compact: [spacing.sm, spacing.sm] as [number, number],
  /** Wide grid gutter */
  wide: [spacing.xl, spacing.xl] as [number, number],
} as const;

// ============================================================================
// TYPOGRAPHY
// ============================================================================

export const typography = {
  /** Page titles, main headings */
  h1: {
    fontSize: 24,
    fontWeight: 600,
    lineHeight: 1.3,
  },
  /** Section headings */
  h2: {
    fontSize: 18,
    fontWeight: 600,
    lineHeight: 1.4,
  },
  /** Card titles, subsections */
  h3: {
    fontSize: 16,
    fontWeight: 600,
    lineHeight: 1.4,
  },
  /** Default body text */
  body: {
    fontSize: 14,
    fontWeight: 400,
    lineHeight: 1.5,
  },
  /** Compact body text (tables, dense UI) */
  bodyCompact: {
    fontSize: 13,
    fontWeight: 400,
    lineHeight: 1.4,
  },
  /** Small text, captions, labels */
  caption: {
    fontSize: 12,
    fontWeight: 400,
    lineHeight: 1.4,
  },
  /** Very small text, helper text */
  small: {
    fontSize: 11,
    fontWeight: 400,
    lineHeight: 1.3,
  },
} as const;

export const fontWeight = {
  normal: 400,
  medium: 500,
  semibold: 600,
  bold: 700,
} as const;

// ============================================================================
// COLORS
// ============================================================================

// Primary palette
export const colors = {
  primary: '#1677ff',
  primaryHover: '#4096ff',
  primaryActive: '#0958d9',

  success: '#52c41a',
  successHover: '#73d13d',
  successBg: '#f6ffed',

  error: '#ff4d4f',
  errorHover: '#ff7875',
  errorBg: '#fff2f0',

  warning: '#d48806', // WCAG AA compliant (darker orange for better contrast)
  warningHover: '#faad14',
  warningBg: '#fffbe6',

  info: '#1677ff',
  infoBg: '#e6f4ff',
} as const;

// Gray scale
export const grays = {
  /** White */
  white: '#ffffff',
  /** Very light gray - backgrounds */
  gray1: '#fafafa',
  /** Light gray - subtle backgrounds */
  gray2: '#f5f5f5',
  /** Border light */
  gray3: '#f0f0f0',
  /** Border normal */
  gray4: '#d9d9d9',
  /** Disabled text, placeholders - WCAG improved contrast (3.5:1 ratio) */
  gray5: '#999999',
  /** Secondary text */
  gray6: '#6b6b6b',
  /** Primary text */
  gray7: '#595959',
  /** Title text */
  gray8: '#434343',
  /** Heading text */
  gray9: '#262626',
  /** Near black */
  gray10: '#1f1f1f',
  /** Black */
  black: '#000000',
} as const;

// Semantic colors
export const semanticColors = {
  /** Page background */
  pageBg: grays.gray2,
  /** Card/panel background */
  cardBg: grays.white,
  /** Header background */
  headerBg: grays.white,
  /** Sidebar background */
  sidebarBg: '#001529',

  /** Primary text color */
  textPrimary: grays.gray9,
  /** Secondary/muted text */
  textSecondary: grays.gray6,
  /** Disabled text */
  textDisabled: grays.gray5,
  /** Placeholder text */
  textPlaceholder: grays.gray5,

  /** Default border color */
  border: grays.gray4,
  /** Light border (dividers) */
  borderLight: grays.gray3,

  /** Hover background */
  hoverBg: grays.gray2,
  /** Selected/active background */
  selectedBg: '#e6f4ff',
} as const;

// Accounting-specific colors
export const accountingColors = {
  /** Debit amounts (expenses, outgoing) */
  debit: colors.error,
  /** Credit amounts (income, incoming) */
  credit: colors.success,
  /** Neutral/zero amounts */
  neutral: grays.gray6,
  /** Balance/total amounts */
  balance: colors.primary,
  /** Warning states */
  warning: colors.warning,
} as const;

// Status colors for badges/tags
export const statusColors = {
  active: { color: 'green', bg: colors.successBg },
  inactive: { color: 'default', bg: grays.gray2 },
  pending: { color: 'orange', bg: colors.warningBg },
  error: { color: 'red', bg: colors.errorBg },
  info: { color: 'blue', bg: colors.infoBg },
  draft: { color: 'default', bg: grays.gray2 },
  closed: { color: 'default', bg: grays.gray2 },
} as const;

// ============================================================================
// BORDERS & RADIUS
// ============================================================================

export const borderRadius = {
  /** No radius */
  none: 0,
  /** Small radius - buttons, inputs */
  sm: 4,
  /** Medium radius - cards, modals */
  md: 6,
  /** Large radius - containers */
  lg: 8,
  /** Full radius - pills, avatars */
  full: 9999,
} as const;

export const borders = {
  /** Standard border */
  default: `1px solid ${grays.gray4}`,
  /** Light border for dividers */
  light: `1px solid ${grays.gray3}`,
  /** Focus ring */
  focus: `2px solid ${colors.primary}`,
} as const;

// ============================================================================
// SHADOWS & ELEVATION
// ============================================================================

export const shadows = {
  /** No shadow */
  none: 'none',
  /** Subtle shadow - cards at rest */
  sm: '0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02)',
  /** Medium shadow - hover states, dropdowns */
  md: '0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05)',
  /** Large shadow - modals, popovers */
  lg: '0 6px 16px -8px rgba(0, 0, 0, 0.08), 0 9px 28px 0 rgba(0, 0, 0, 0.05), 0 12px 48px 16px rgba(0, 0, 0, 0.03)',
} as const;

// Elevation levels (semantic)
export const elevation = {
  /** Flat, no elevation */
  flat: shadows.none,
  /** Cards, panels */
  raised: shadows.sm,
  /** Hover states, floating elements */
  floating: shadows.md,
  /** Modals, dialogs */
  overlay: shadows.lg,
} as const;

// ============================================================================
// TRANSITIONS
// ============================================================================

export const transitions = {
  /** Fast transitions - hover states */
  fast: '0.1s ease-in-out',
  /** Normal transitions - most UI */
  normal: '0.2s ease-in-out',
  /** Slow transitions - layout changes */
  slow: '0.3s ease-in-out',
} as const;

// ============================================================================
// BREAKPOINTS
// ============================================================================

export const breakpoints = {
  xs: 480,
  sm: 576,
  md: 768,
  lg: 992,
  xl: 1200,
  xxl: 1600,
} as const;

// Ant Design Col span presets
export const colSpans = {
  /** Full width on all sizes */
  full: { xs: 24, sm: 24, md: 24, lg: 24, xl: 24 },
  /** Half width, full on mobile */
  half: { xs: 24, sm: 12, md: 12, lg: 12, xl: 12 },
  /** Third width, half on tablet, full on mobile */
  third: { xs: 24, sm: 12, md: 8, lg: 8, xl: 8 },
  /** Quarter width, half on tablet, full on mobile */
  quarter: { xs: 24, sm: 12, md: 6, lg: 6, xl: 6 },
  /** KPI cards: 4 columns on desktop, 2 on tablet, 1 on mobile */
  kpiCard: { xs: 24, sm: 12, md: 12, lg: 6, xl: 6 },
} as const;

// ============================================================================
// COMPONENT-SPECIFIC TOKENS
// ============================================================================

export const componentTokens = {
  header: {
    height: 64,
    padding: spacing.xl,
  },
  sidebar: {
    width: 200,
    collapsedWidth: 80,
  },
  modal: {
    widthSm: 400,
    widthMd: 520,
    widthLg: 720,
  },
  table: {
    cellPadding: spacing.sm,
    headerBg: grays.gray1,
    rowHoverBg: grays.gray2,
  },
  card: {
    padding: spacing.lg,
    paddingSm: spacing.md,
  },
} as const;

// ============================================================================
// UTILITY FUNCTIONS
// ============================================================================

/**
 * Get spacing value in pixels
 */
export const getSpacing = (size: keyof typeof spacing): number => spacing[size];

/**
 * Create consistent margin/padding style object
 */
export const createSpacingStyle = (
  top?: keyof typeof spacing,
  right?: keyof typeof spacing,
  bottom?: keyof typeof spacing,
  left?: keyof typeof spacing
) => ({
  marginTop: top ? spacing[top] : undefined,
  marginRight: right ? spacing[right] : undefined,
  marginBottom: bottom ? spacing[bottom] : undefined,
  marginLeft: left ? spacing[left] : undefined,
});

/**
 * Format amount with accounting colors
 */
export const getAmountColor = (amount: number): string => {
  if (amount > 0) return accountingColors.credit;
  if (amount < 0) return accountingColors.debit;
  return accountingColors.neutral;
};
