/**
 * WellNuo Design System 2025
 * Modern, minimalist design with wellness-focused color palette
 * Based on 2024-2025 mobile design trends:
 * - Exaggerated minimalism
 * - Soft rounded edges
 * - Blue professional calming colors (#0076BF)
 * - Glass morphism effects
 * - Bold typography with generous whitespace
 */

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

// ============================================
// COLOR PALETTE
// ============================================

export const AppColors = {
  // Primary - Blue (trustworthy, professional, wellness)
  primary: '#0076BF',
  primaryDark: '#005A94',
  primaryLight: '#3391CC',
  primaryLighter: '#CCE6F4',
  primarySubtle: '#E6F3FA',

  // Accent - Violet (AI, premium features)
  accent: '#8B5CF6',
  accentLight: '#EDE9FE',
  accentDark: '#7C3AED',

  // Status Colors
  success: '#10B981',
  successLight: '#D1FAE5',
  warning: '#F59E0B',
  warningLight: '#FEF3C7',
  error: '#EF4444',
  errorLight: '#FEE2E2',
  info: '#3B82F6',
  infoLight: '#DBEAFE',

  // Neutral Backgrounds
  white: '#FFFFFF',
  background: '#FAFBFC',
  surface: '#FFFFFF',
  surfaceSecondary: '#F8FAFC',
  surfaceElevated: '#FFFFFF',

  // Borders
  border: '#E2E8F0',
  borderLight: '#F1F5F9',
  borderFocus: '#0076BF',

  // Text
  textPrimary: '#0F172A',
  textSecondary: '#475569',
  textMuted: '#94A3B8',
  textLight: '#FFFFFF',
  textDisabled: '#CBD5E1',

  // Beneficiary Status
  online: '#10B981',
  offline: '#94A3B8',
  away: '#F59E0B',

  // Gradients (for special elements)
  gradientStart: '#0076BF',
  gradientEnd: '#3391CC',

  // Overlay
  overlay: 'rgba(15, 23, 42, 0.5)',
  overlayLight: 'rgba(15, 23, 42, 0.3)',
};

// Theme variants for future dark mode support
const tintColorLight = AppColors.primary;
const tintColorDark = AppColors.primaryLight;

export const Colors = {
  light: {
    text: AppColors.textPrimary,
    background: AppColors.background,
    tint: tintColorLight,
    icon: AppColors.textSecondary,
    tabIconDefault: AppColors.textMuted,
    tabIconSelected: tintColorLight,
    surface: AppColors.surface,
    border: AppColors.border,
    primary: AppColors.primary,
    error: AppColors.error,
    success: AppColors.success,
  },
  dark: {
    text: '#F1F5F9',
    background: '#0F172A',
    tint: tintColorDark,
    icon: '#94A3B8',
    tabIconDefault: '#64748B',
    tabIconSelected: tintColorDark,
    surface: '#1E293B',
    border: '#334155',
    primary: AppColors.primaryLight,
    error: '#F87171',
    success: '#34D399',
  },
};

// ============================================
// SPACING SYSTEM
// ============================================

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

// ============================================
// BORDER RADIUS (Modern, rounded aesthetic)
// ============================================

export const BorderRadius = {
  xs: 6,
  sm: 8,
  md: 12,
  lg: 16,
  xl: 20,
  '2xl': 24,
  '3xl': 32,
  full: 9999,
};

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

export const FontSizes = {
  xs: 12,
  sm: 14,
  base: 16,
  lg: 18,
  xl: 20,
  '2xl': 24,
  '3xl': 30,
  '4xl': 36,
  '5xl': 48,
};

export const FontWeights = {
  normal: '400' as const,
  medium: '500' as const,
  semibold: '600' as const,
  bold: '700' as const,
  extrabold: '800' as const,
};

export const LineHeights = {
  tight: 1.2,
  normal: 1.5,
  relaxed: 1.75,
};

export const LetterSpacing = {
  tight: -0.5,
  normal: 0,
  wide: 0.5,
  wider: 1,
};

export const Fonts = Platform.select({
  ios: {
    sans: 'SF Pro Display',
    text: 'SF Pro Text',
    rounded: 'SF Pro Rounded',
    mono: 'SF Mono',
  },
  default: {
    sans: 'System',
    text: 'System',
    rounded: 'System',
    mono: 'monospace',
  },
  web: {
    sans: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
    text: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif",
    rounded: "'SF Pro Rounded', Inter, sans-serif",
    mono: "'SF Mono', 'Fira Code', Menlo, monospace",
  },
});

// ============================================
// SHADOWS (Soft, modern shadows)
// ============================================

export const Shadows = {
  none: {
    shadowColor: 'transparent',
    shadowOffset: { width: 0, height: 0 },
    shadowOpacity: 0,
    shadowRadius: 0,
    elevation: 0,
  } as ViewStyle,

  xs: {
    shadowColor: '#0F172A',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.03,
    shadowRadius: 2,
    elevation: 1,
  } as ViewStyle,

  sm: {
    shadowColor: '#0F172A',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.04,
    shadowRadius: 4,
    elevation: 2,
  } as ViewStyle,

  md: {
    shadowColor: '#0F172A',
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.06,
    shadowRadius: 8,
    elevation: 4,
  } as ViewStyle,

  lg: {
    shadowColor: '#0F172A',
    shadowOffset: { width: 0, height: 8 },
    shadowOpacity: 0.08,
    shadowRadius: 16,
    elevation: 8,
  } as ViewStyle,

  xl: {
    shadowColor: '#0F172A',
    shadowOffset: { width: 0, height: 12 },
    shadowOpacity: 0.1,
    shadowRadius: 24,
    elevation: 12,
  } as ViewStyle,

  // Colored shadows for interactive elements
  primary: {
    shadowColor: AppColors.primary,
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 8,
    elevation: 4,
  } as ViewStyle,

  success: {
    shadowColor: AppColors.success,
    shadowOffset: { width: 0, height: 4 },
    shadowOpacity: 0.3,
    shadowRadius: 8,
    elevation: 4,
  } as ViewStyle,
};

// ============================================
// ANIMATION DURATIONS
// ============================================

export const Animation = {
  fast: 150,
  normal: 250,
  slow: 400,
  spring: {
    damping: 15,
    stiffness: 150,
  },
};

// ============================================
// COMMON COMPONENT STYLES
// ============================================

export const CommonStyles = {
  // Card styles
  card: {
    backgroundColor: AppColors.surface,
    borderRadius: BorderRadius.xl,
    padding: Spacing.lg,
    ...Shadows.sm,
  } as ViewStyle,

  cardElevated: {
    backgroundColor: AppColors.surface,
    borderRadius: BorderRadius.xl,
    padding: Spacing.lg,
    ...Shadows.md,
  } as ViewStyle,

  // Glass effect (iOS blur)
  glass: {
    backgroundColor: 'rgba(255, 255, 255, 0.8)',
    borderRadius: BorderRadius.xl,
    borderWidth: 1,
    borderColor: 'rgba(255, 255, 255, 0.3)',
  } as ViewStyle,

  // Input styles
  input: {
    backgroundColor: AppColors.surfaceSecondary,
    borderRadius: BorderRadius.lg,
    paddingHorizontal: Spacing.md,
    paddingVertical: Spacing.md,
    fontSize: FontSizes.base,
    color: AppColors.textPrimary,
    borderWidth: 1.5,
    borderColor: AppColors.borderLight,
  } as ViewStyle,

  inputFocused: {
    borderColor: AppColors.primary,
    backgroundColor: AppColors.white,
  } as ViewStyle,

  // Button base
  buttonBase: {
    borderRadius: BorderRadius.lg,
    paddingVertical: Spacing.md,
    paddingHorizontal: Spacing.lg,
    alignItems: 'center' as const,
    justifyContent: 'center' as const,
    flexDirection: 'row' as const,
  } as ViewStyle,

  // Screen container
  screenContainer: {
    flex: 1,
    backgroundColor: AppColors.background,
  } as ViewStyle,

  // Section
  section: {
    backgroundColor: AppColors.surface,
    borderRadius: BorderRadius.xl,
    padding: Spacing.lg,
    marginHorizontal: Spacing.md,
    marginBottom: Spacing.md,
    ...Shadows.xs,
  } as ViewStyle,
};

// ============================================
// ICON SIZES
// ============================================

export const IconSizes = {
  xs: 16,
  sm: 20,
  md: 24,
  lg: 28,
  xl: 32,
  '2xl': 40,
  '3xl': 48,
};

// ============================================
// AVATAR SIZES
// ============================================

export const AvatarSizes = {
  xs: 32,
  sm: 40,
  md: 56,
  lg: 72,
  xl: 96,
  '2xl': 120,
};