import { useColorScheme } from 'react-native';

// ── Color palettes ──────────────────────────────────────────────────────────

const DarkColors = {
  bg: {
    void:    '#050508',
    base:    '#090912',
    surface: '#0e0e1c',
    raised:  '#111120',
    border:  '#1a1a2a',
    divider: '#141422',
  },
  text: {
    primary:   '#c0c0d8',
    secondary: '#9090b8',
    muted:     '#4a4a6a',
    ghost:     '#2a2a4a',
  },
  green:  { bg: '#0d2018', border: '#1a4a28', fg: '#3ddc84' },
  blue:   { bg: '#0d1a30', border: '#1a3a6e', fg: '#4a9eff' },
  red:    { bg: '#1e0d12', border: '#3a1520', fg: '#ff5c6e' },
  teal:   { bg: '#0d1e20', border: '#1a3a3e', fg: '#4ecdc4' },
  amber:  { bg: '#1e1a08', border: '#4a3a1a', fg: '#ffd93d' },
  chart: {
    bg:       '#111111',
    grid:     '#333333',
    gridFine: '#2a2a2a',
    axis:     '#555555',
    label:    '#888888',
    labelDim: '#555555',
    badge:    '#444444',
    zoomBadge:'#666666',
  },
} as const;

const LightColors = {
  bg: {
    void:    '#f0f0f4',
    base:    '#f5f5f8',
    surface: '#ffffff',
    raised:  '#f0f0f5',
    border:  '#d8d8e0',
    divider: '#e8e8f0',
  },
  text: {
    primary:   '#1a1a2e',
    secondary: '#3a3a5a',
    muted:     '#8a8aa0',
    ghost:     '#b0b0c0',
  },
  green:  { bg: '#e8f5e9', border: '#a5d6a7', fg: '#2e7d32' },
  blue:   { bg: '#e3f2fd', border: '#90caf9', fg: '#1565c0' },
  red:    { bg: '#fce4ec', border: '#ef9a9a', fg: '#c62828' },
  teal:   { bg: '#e0f2f1', border: '#80cbc4', fg: '#00695c' },
  amber:  { bg: '#fff8e1', border: '#ffe082', fg: '#f57f17' },
  chart: {
    bg:       '#ffffff',
    grid:     '#e0e0e0',
    gridFine: '#eeeeee',
    axis:     '#aaaaaa',
    label:    '#666666',
    labelDim: '#999999',
    badge:    '#999999',
    zoomBadge:'#777777',
  },
} as const;

export type ThemeColors = typeof DarkColors;

// ── Hook ────────────────────────────────────────────────────────────────────

export function useTheme(): ThemeColors {
  const scheme = useColorScheme();
  return scheme === 'light' ? LightColors : DarkColors;
}

// ── Static export (for non-component code that can't use hooks) ─────────────

export const Colors = DarkColors;

// ── Spacing / Radius / FontSize ─────────────────────────────────────────────

export const Spacing = {
  xs: 4, sm: 8, md: 12, lg: 16, xl: 24, xxl: 32,
} as const;

export const Radius = {
  sm: 6, md: 8, lg: 12, xl: 16,
} as const;

export const FontSize = {
  xs: 9, sm: 10, md: 12, lg: 14, xl: 16,
} as const;
