import { useColorScheme, Platform } from 'react-native';

export const lightColors = {
  background: '#FFFFFF',
  text: '#1C1C1C',
  textSecondary: '#666666',
  primary: '#05824C',
  primaryLight: '#E8F5EE',
  primaryDark: '#046B3E',
  border: '#E8E8E8',
  placeholder: '#9E9E9E',
  white: '#FFFFFF',
  black: '#000000',
  error: '#D32F2F',
  errorLight: '#FFEBEE',
  transparent: 'transparent',
  inputBg: '#FAFAFA',
  cardBg: '#FFFFFF',
  // Status
  statusOnline: '#2ECC71',
  statusOffline: '#FF6B35',
  statusBusy: '#F39C12',
  statusOnDelivery: '#3498DB',
  // Semantic
  success: '#27AE60',
  successLight: '#E8F8F0',
  warning: '#F39C12',
  warningLight: '#FEF9E7',
  accent: '#FF6B35',
  // Chip
  chipActive: '#E8F5EE',
  chipBorder: '#05824C',
  chipInactive: '#F5F5F5',
  // Map
  mapOverlay: 'rgba(0,0,0,0.04)',
  // Divider
  divider: '#F0F0F0',
  // Shadow
  cardShadow: 'rgba(0,0,0,0.08)',
};

export const darkColors = {
  background: '#121212',
  text: '#FFFFFF',
  textSecondary: '#A0A0A0',
  primary: '#05824C',
  primaryLight: '#1A3D2E',
  primaryDark: '#046B3E',
  border: '#2C2C2C',
  placeholder: '#707070',
  white: '#FFFFFF',
  black: '#000000',
  error: '#CF6679',
  errorLight: '#3D1A1E',
  transparent: 'transparent',
  inputBg: '#1E1E1E',
  cardBg: '#1E1E1E',
  statusOnline: '#2ECC71',
  statusOffline: '#FF6B35',
  statusBusy: '#F39C12',
  statusOnDelivery: '#3498DB',
  success: '#27AE60',
  successLight: '#1A3D2E',
  warning: '#F39C12',
  warningLight: '#3D2E0A',
  accent: '#FF6B35',
  chipActive: '#1A3D2E',
  chipBorder: '#05824C',
  chipInactive: '#2C2C2C',
  mapOverlay: 'rgba(0,0,0,0.30)',
  divider: '#2C2C2C',
  cardShadow: 'rgba(0,0,0,0.30)',
};

export const colors = lightColors;

export function useAppTheme() {
  const isDarkMode = useColorScheme() === 'dark';
  const themeColors = isDarkMode ? darkColors : lightColors;
  return {
    colors: themeColors,
    isDarkMode,
  };
}

export const typography = {
  fontSize: {
    xs: 12,
    sm: 14,
    md: 16,
    lg: 18,
    xl: 20,
    xxl: 28,
  },
  fontWeight: {
    regular: '400' as const,
    medium: '500' as const,
    semibold: '600' as const,
    bold: '700' as const,
  },
};

export const spacing = {
  xs: 4,
  sm: 8,
  md: 12,
  lg: 16,
  xl: 20,
  xxl: 24,
  xxxl: 32,
  huge: 48,
};

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

export const shadow = {
  sm: Platform.select({
    ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 1 }, shadowOpacity: 0.06, shadowRadius: 4 },
    android: { elevation: 2 },
  }),
  md: Platform.select({
    ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 2 }, shadowOpacity: 0.10, shadowRadius: 8 },
    android: { elevation: 4 },
  }),
  lg: Platform.select({
    ios: { shadowColor: '#000', shadowOffset: { width: 0, height: 4 }, shadowOpacity: 0.14, shadowRadius: 16 },
    android: { elevation: 8 },
  }),
};