/**
 * FitAI Design System Theme
 * Minimalist theme with light/dark mode support
 * @deprecated Use useTheme() hook instead for dynamic theming
 */

import { lightColors, darkColors } from "./colors";
import { typography as typographySystem } from "./typography";

/**
 * Legacy theme object for backward compatibility
 * New components should use useTheme() hook instead
 */
export const theme = {
  // Color Palette (light mode - for legacy components)
  colors: {
    ...lightColors,

    // Legacy color mappings (deprecated - use new colors instead)
    secondary: "#8b5cf6", // Old purple - deprecated
    purple: "#A9B4A0", // Mapped to accent
    purpleDark: "#5A7A6E",
    pink: "#C1876B", // Mapped to terracotta
    successLight: "#8DB76A",
    gray50: "#F2EFE9",
    gray100: "#E8E4DF",
    gray200: "#E8E4DF",
    gray300: "#B8BFB5",
    gray400: "#8B9A8F",
    gray500: "#5C6B61",
    gray600: "#5C6B61",
    gray700: "#2C3731",
    gray800: "#2C3731",
    gray900: "#2C3731",
  },

  // Typography (updated to new system)
  typography: typographySystem,

  // Spacing Scale (updated for minimalism)
  spacing: {
    xs: 4,
    sm: 8,
    md: 12,
    lg: 16,
    xl: 24, // Increased from 20
    "2xl": 32, // Increased from 24
    "3xl": 40, // Increased from 32
    "4xl": 48, // New
    "5xl": 64, // New
  },

  // Border Radius (reduced for minimalism)
  borderRadius: {
    sm: 4,
    md: 6,
    lg: 10,
    xl: 12, // Reduced from 16
    "2xl": 16, // Reduced from 20
    "3xl": 20, // Reduced from 24
    full: 9999,
  },

  // Shadow System (simplified)
  shadows: {
    subtle: {
      shadowColor: "#000",
      shadowOffset: { width: 0, height: 1 },
      shadowOpacity: 0.05,
      shadowRadius: 3,
      elevation: 1,
    },
    medium: {
      shadowColor: "#000",
      shadowOffset: { width: 0, height: 2 },
      shadowOpacity: 0.08,
      shadowRadius: 8,
      elevation: 2,
    },
    strong: {
      shadowColor: "#000",
      shadowOffset: { width: 0, height: 4 },
      shadowOpacity: 0.12,
      shadowRadius: 16,
      elevation: 4,
    },
    // Legacy glow shadows (deprecated - avoid in new designs)
    glow: {
      shadowColor: "#6B9080",
      shadowOffset: { width: 0, height: 4 },
      shadowOpacity: 0.2,
      shadowRadius: 12,
      elevation: 6,
    },
    glowDanger: {
      shadowColor: "#B66B6B",
      shadowOffset: { width: 0, height: 4 },
      shadowOpacity: 0.2,
      shadowRadius: 12,
      elevation: 6,
    },
  },

  // Animation Timing (simplified)
  animation: {
    duration: {
      fast: 200,
      normal: 300,
      slow: 500,
    },
  },

  // Gradients (kept for legacy compatibility - should be avoided in new designs)
  gradients: {
    primary: ["#6B9080", "#8AAE9E"] as const,
    success: ["#7BA05B", "#8DB76A"] as const,
    warning: ["#D4A574", "#E0B886"] as const,
    danger: ["#B66B6B", "#C87D7D"] as const,
    // Legacy gradients (deprecated)
    purple: ["#8b5cf6", "#7c3aed"] as const,
    ocean: ["#06b6d4", "#3b82f6"] as const,
    sunset: ["#f59e0b", "#ef4444"] as const,
    forest: ["#10b981", "#059669"] as const,
    lavender: ["#a78bfa", "#ec4899"] as const,
    dark: ["#1e293b", "#0f172a"] as const,
    primaryVertical: ["#6B9080", "#5A7A6E"] as const,
  },
};

/**
 * Dark theme object
 * @deprecated Use useTheme() hook instead
 */
export const darkTheme = {
  ...theme,
  colors: {
    ...darkColors,

    // Legacy color mappings
    secondary: "#8b5cf6", // Old purple - deprecated
    purple: "#B5C2B0", // Mapped to dark accent
    purpleDark: "#6B9080",
    pink: "#D4A285", // Mapped to dark terracotta
    successLight: "#8DB76A",
    gray50: "#2F3432",
    gray100: "#3A3F3C",
    gray200: "#3A3F3C",
    gray300: "#7A8379",
    gray400: "#7A8379",
    gray500: "#B8BFB5",
    gray600: "#B8BFB5",
    gray700: "#E8E6E1",
    gray800: "#E8E6E1",
    gray900: "#E8E6E1",
  },
};

export type Theme = typeof theme;
export type DarkTheme = typeof darkTheme;