// Define theme type
export interface ThemeType {
  // Core
  background: string; // Main screen background
  surface: string; // Background for components like cards, dialogs, sheets
  surfaceVariant: string;
  primary: string; // Main accent color for interactive elements
  primaryVariant: string
  secondary: string; // Secondary accent color or for elements on primary
  secondaryVariant: string
  error: string; // Error states, destructive actions
  success: string; // Success states
  warning: string; // Warning states
  info: string; // Informational states

  // Text & Icons ("On" Colors)
  text: string; // Default text color (on background/surface)
  onPrimary: string; // Text/icon color on primary background
  onPrimaryVariant: string; // Text/icon color on primary background
  onSecondary: string; // Text/icon color on secondary background
  onSecondaryVariant: string; // Text/icon color on secondary background
  onError: string; // Text/icon color on error background
  onBackground: string; // Text/icon color explicitly for background (often same as text)
  onBackgroundVariant: string; // Text/icon color explicitly for background (often same as text)
  onSurface: string; // Text/icon color explicitly for surface (often same as text)

  // Borders & Dividers
  border: string; // Borders for inputs, cards, etc.
  divider: string; // Separators, lines

  // UI States
  disabled: string; // Disabled state elements (background or text)

  // Form Specific
  inputBackground: string; // Background of text inputs
  inputText: string; // Color of text entered into inputs
  labelText: string; // Color of labels for inputs
  placeholderText: string; // Color of placeholder text in inputs
  helper: string; // Helper text below inputs
  
  spacing: {
    xs: number;
    s: number; 
    m: number;
    l: number; 
    xl: number;
    xxl: number; 
  }

  gradients?: {
    primary?: string[];
    secondary?: string[];
    [key: string]: string[] | undefined;
  };
  skeletonBackgroundColor? : string;
  skeletonItemColor?: string;
  skeletonShimmer?: string;
}

// Updated Light Theme - True black and white oriented, less muted
export const lightTheme: ThemeType = {
  // Core
  background: "#F8F8F8", // Very light pure gray
  surface: "#FFFFFF", // Pure white for cards/dialogs
  surfaceVariant: "#FFFFFF", // Pure white for cards/dialogs
  primary: "#333333", // Pure dark gray, almost black
  primaryVariant: "#333333", // Pure dark gray, almost black
  secondary: "#777777", // Medium gray without color tint
  secondaryVariant: "#777777", // Medium gray without color tint
  error: "#E53935", // Vibrant but pure red
  success: "#43A047", // Vibrant but pure green
  warning: "#F57C00", // Vibrant but pure orange
  info: "#2196F3", // Vibrant but pure blue

  // Text & Icons ("On" Colors)
  text: "#1A1A1A", // Nearly black for text
  onPrimary: "#FFFFFF", // White text on primary color
  onPrimaryVariant: "#FFFFFF", // White text on primary color
  onSecondary: "#FFFFFF", // White text on secondary color
  onSecondaryVariant: "#FFFFFF", // White text on secondary color
  onError: "#FFFFFF", // White text on error color
  onBackground: "#1A1A1A", // Nearly black text on background
  onBackgroundVariant: "#1A1A1A", // Nearly black text on background
  onSurface: "#1A1A1A", // Nearly black text on surface

  // Borders & Dividers
  border: "#DDDDDD", // Light gray border without tint
  divider: "#EEEEEE", // Very light gray divider without tint

  // UI States
  disabled: "#BBBBBB", // Medium-light gray for disabled states

  // Form Specific
  inputBackground: "#FFFFFF", // White input background
  inputText: "#1A1A1A", // Nearly black for input text
  labelText: "#444444", // Dark gray for labels
  placeholderText: "#999999", // Medium gray for placeholders
  helper: "#777777", // Medium gray for helper text

  spacing: {
    xs: 4,
    s: 8,
    m: 16,
    l: 24,
    xl: 32,
    xxl: 64,
  },

  skeletonBackgroundColor: "#e0e0e0",
  skeletonItemColor: "#2c2c2c",
  skeletonShimmer: "rgba(255, 255, 255, 0.4)"
};

// Updated Dark Theme - True black and white oriented, less muted
export const darkTheme: ThemeType = {
  // Core
  background: "#121212", // Very dark gray, nearly black
  surface: "#1E1E1E", // Dark gray for surface elements
  surfaceVariant: "#1E1E1E", // Dark gray for surface elements
  primary: "#E0E0E0", // Light gray without tint
  primaryVariant: "#E0E0E0",
  secondary: "#757575", // Medium gray without tint
  secondaryVariant: "#757575",
  error: "#F44336", // Vibrant but pure red
  success: "#4CAF50", // Vibrant but pure green
  warning: "#FF9800", // Vibrant but pure orange
  info: "#2196F3", // Vibrant but pure blue

  // Text & Icons ("On" Colors)
  text: "#F5F5F5", // Very light gray, nearly white
  onPrimary: "#121212", // Nearly black text on primary
  onPrimaryVariant: "#121212", // Nearly black text on primary
  onSecondary: "#FFFFFF", // White text on secondary
  onSecondaryVariant: "#FFFFFF", // White text on secondary
  onError: "#FFFFFF", // White text on error
  onBackground: "#F5F5F5", // Nearly white text on background
  onBackgroundVariant: "#F5F5F5", // Nearly white text on background
  onSurface: "#F5F5F5", // Nearly white text on surface

  // Borders & Dividers
  border: "#333333", // Dark gray border
  divider: "#383838", // Slightly lighter dark gray divider

  // UI States
  disabled: "#5D5D5D", // Medium dark gray for disabled states

  // Form Specific
  inputBackground: "#1E1E1E", // Matches surface
  inputText: "#F5F5F5", // Nearly white for input text
  labelText: "#E0E0E0", // Light gray for labels
  placeholderText: "#9E9E9E", // Medium gray for placeholders
  helper: "#9E9E9E", // Medium gray for helper text
  
  spacing: {
    xs: 4,
    s: 8,
    m: 16,
    l: 24,
    xl: 32,
    xxl: 64,
  },

  skeletonBackgroundColor: "#f5f5f5",
  skeletonItemColor: "#444444",
  skeletonShimmer: "rgba(255, 255, 255, 0.2)"
};