import { usePreferences } from '@/profile/preferences';

export const spacing = {
  xxs: 6,
  xs: 4,
  sm: 8,
  md: 12,
  lg: 16,
  xl: 24,
  xxl: 40,
  xxxl: 64,
  section: 56,
};

export const radius = {
  sm: 8,
  md: 12,
  lg: 16,
  xl: 24,
  pill: 999,
};

export const font = {
  xs: 11,
  sm: 13,
  md: 15,
  lg: 17,
  xl: 24,
  xxl: 32,
  display: 44,
};

export const buttonHeight = {
  sm: 44,
  md: 48,
  lg: 56,
  xl: 72,
};

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

export const colors = {
  camera: {
    background: '#0D0D0D',
    backgroundAlt: '#1a1a1a',
    text: '#FFFFFF',
    placeholder: 'rgba(255,255,255,0.4)',
    placeholderDim: '#888888',
    icon: 'rgba(255,255,255,0.8)',
    iconStrong: 'rgba(255,255,255,0.9)',
    iconOff: 'rgba(0,0,0,0.6)',
    inputBg: 'rgba(255,255,255,0.08)',
    inputBorder: 'rgba(255,255,255,0.1)',
    pillBg: 'rgba(255,255,255,0.1)',
    buttonBg: 'rgba(255,255,255,0.1)',
    buttonBgActive: 'rgba(255,255,255,0.15)',
    shutterBg: 'rgba(255,255,255,0.2)',
    shutterBorder: 'rgba(255,255,255,0.3)',
    shutterInner: '#FFFFFF',
    shutterInnerDisabled: 'rgba(255,255,255,0.3)',
    cropMask: 'rgba(0,0,0,0.6)',
    focusBorder: 'rgba(255,255,255,0.8)',
    successBg: 'rgba(125,158,115,0.9)',
    deleteBg: '#ef4444',
    doneBg: 'rgba(59,130,246,0.6)',
    permissionBg: '#3b82f6',
    thumbnailBg: '#000000',
    shadowColor: 'rgba(0,0,0,0.3)',
  },
  light: {
    background: '#FAF8F5',
    surface: '#FFFFFF',
    surfaceElevated: '#FFFFFF',
    text: '#2D2A26',
    secondaryText: '#6B6560',
    tertiaryText: '#9A948D',
    border: '#E8E4DE',
    borderSubtle: '#F0EDE8',
    tagBg: '#F5F2ED',
    card: '#FFFFFF',

    accent: '#B8977E',
    accentMuted: '#D4C4B5',
    accentSubtle: '#F0EAE3',

    rose: '#C9A9A6',
    roseMuted: '#E5D5D3',
    roseSubtle: '#F8F2F1',

    sage: '#A8B5A0',
    sageMuted: '#D0D9CA',
    sageSubtle: '#F2F5F0',

    pending: '#C9A86C',
    pendingMuted: '#E5D9B8',
    pendingSubtle: '#F8F5ED',

    danger: '#C7625D',
    success: '#7D9E73',

    progressBg: '#F0EDE8',
    buttonText: '#FFFFFF',

    nutrientExcellent: '#7D9E73',
    nutrientGood: '#A8B5A0',
    nutrientModerate: '#C9A86C',
    nutrientLow: '#C9A9A6',
    nutrientDeficient: '#C7625D',

    overlay: 'rgba(45, 42, 38, 0.4)',
    overlayLight: 'rgba(45, 42, 38, 0.08)',

    onAccent: '#FFFFFF',
    onAccentMuted: 'rgba(255,255,255,0.85)',

    logger: '#9333EA',
    loggerBg: '#F3E8FF',
  },
  dark: {
    background: '#1A1917',
    surface: '#242220',
    surfaceElevated: '#2D2A28',
    text: '#F5F2ED',
    secondaryText: '#A8A39C',
    tertiaryText: '#6B6560',
    border: '#3D3A36',
    borderSubtle: '#2D2A28',
    tagBg: '#2D2A28',
    card: '#242220',

    accent: '#C9A86C',
    accentMuted: '#8A7A5C',
    accentSubtle: '#3D3630',

    rose: '#C9A9A6',
    roseMuted: '#7A6A68',
    roseSubtle: '#3D3533',

    sage: '#A8B5A0',
    sageMuted: '#6A7564',
    sageSubtle: '#303530',

    pending: '#D4B87A',
    pendingMuted: '#8A7A5C',
    pendingSubtle: '#3D3630',

    danger: '#D4807A',
    success: '#9ABF8F',

    progressBg: '#3D3A36',
    buttonText: '#1A1917',

    nutrientExcellent: '#9ABF8F',
    nutrientGood: '#A8B5A0',
    nutrientModerate: '#D4B87A',
    nutrientLow: '#D4A9A6',
    nutrientDeficient: '#D4807A',

    overlay: 'rgba(0, 0, 0, 0.6)',
    overlayLight: 'rgba(255, 255, 255, 0.06)',

    onAccent: '#FFFFFF',
    onAccentMuted: 'rgba(255,255,255,0.85)',

    logger: '#A855F7',
    loggerBg: '#3D2F4A',
  },
};

export function getNutrientColor(pct: number, c: typeof colors.light) {
  if (pct >= 80) return c.nutrientExcellent;
  if (pct >= 50) return c.nutrientGood;
  if (pct >= 25) return c.nutrientModerate;
  return c.nutrientLow;
}

export function getScoreColor(score: number, c: typeof colors.light) {
  if (score >= 85) return c.nutrientExcellent;
  if (score >= 70) return c.nutrientGood;
  if (score >= 50) return c.nutrientModerate;
  if (score >= 30) return c.nutrientLow;
  return c.nutrientDeficient;
}


export const shadows = {
  sm: {
    shadowColor: '#2D2A26',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.04,
    shadowRadius: 3,
    elevation: 2,
  },
  md: {
    shadowColor: '#2D2A26',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.06,
    shadowRadius: 8,
    elevation: 4,
  },
  lg: {
    shadowColor: '#2D2A26',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.08,
    shadowRadius: 16,
    elevation: 8,
  },
};

export function useColors() {
  const { isDarkMode } = usePreferences();
  return isDarkMode ? colors.dark : colors.light;
}