/**
 * Centralized color configuration and utilities for theme management
 * This file provides type-safe access to theme colors and utilities for working with the design system
 */

export type ThemeColor =
    | 'background'
    | 'foreground'
    | 'card'
    | 'card-foreground'
    | 'popover'
    | 'popover-foreground'
    | 'primary'
    | 'primary-foreground'
    | 'secondary'
    | 'secondary-foreground'
    | 'muted'
    | 'muted-foreground'
    | 'accent'
    | 'accent-foreground'
    | 'destructive'
    | 'destructive-foreground'
    | 'success'
    | 'success-foreground'
    | 'warning'
    | 'warning-foreground'
    | 'info'
    | 'info-foreground'
    | 'border'
    | 'input'
    | 'ring';

export type BrandColorScale = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950;

export type ChartColor = 1 | 2 | 3 | 4 | 5;

export type SidebarColor =
    | 'sidebar'
    | 'sidebar-foreground'
    | 'sidebar-primary'
    | 'sidebar-primary-foreground'
    | 'sidebar-accent'
    | 'sidebar-accent-foreground'
    | 'sidebar-border'
    | 'sidebar-ring';

/**
 * Color palette configuration for consistent theming
 * These values map to CSS custom properties defined in app.css
 */
export const colorConfig = {
    // Core semantic colors
    semantic: {
        background: 'hsl(var(--background))',
        foreground: 'hsl(var(--foreground))',
        primary: 'hsl(var(--primary))',
        'primary-foreground': 'hsl(var(--primary-foreground))',
        secondary: 'hsl(var(--secondary))',
        'secondary-foreground': 'hsl(var(--secondary-foreground))',
        success: 'hsl(var(--success))',
        'success-foreground': 'hsl(var(--success-foreground))',
        warning: 'hsl(var(--warning))',
        'warning-foreground': 'hsl(var(--warning-foreground))',
        info: 'hsl(var(--info))',
        'info-foreground': 'hsl(var(--info-foreground))',
        destructive: 'hsl(var(--destructive))',
        'destructive-foreground': 'hsl(var(--destructive-foreground))',
    },

    // UI component colors
    ui: {
        card: 'hsl(var(--card))',
        'card-foreground': 'hsl(var(--card-foreground))',
        popover: 'hsl(var(--popover))',
        'popover-foreground': 'hsl(var(--popover-foreground))',
        muted: 'hsl(var(--muted))',
        'muted-foreground': 'hsl(var(--muted-foreground))',
        accent: 'hsl(var(--accent))',
        'accent-foreground': 'hsl(var(--accent-foreground))',
        border: 'hsl(var(--border))',
        input: 'hsl(var(--input))',
        ring: 'hsl(var(--ring))',
    },

    // Brand color scale
    brand: {
        50: 'hsl(var(--brand-50))',
        100: 'hsl(var(--brand-100))',
        200: 'hsl(var(--brand-200))',
        300: 'hsl(var(--brand-300))',
        400: 'hsl(var(--brand-400))',
        500: 'hsl(var(--brand-500))', // Primary brand color
        600: 'hsl(var(--brand-600))',
        700: 'hsl(var(--brand-700))',
        800: 'hsl(var(--brand-800))',
        900: 'hsl(var(--brand-900))',
        950: 'hsl(var(--brand-950))',
    },

    // Chart colors
    chart: {
        1: 'hsl(var(--chart-1))',
        2: 'hsl(var(--chart-2))',
        3: 'hsl(var(--chart-3))',
        4: 'hsl(var(--chart-4))',
        5: 'hsl(var(--chart-5))',
    },

    // Sidebar colors
    sidebar: {
        sidebar: 'hsl(var(--sidebar))',
        'sidebar-foreground': 'hsl(var(--sidebar-foreground))',
        'sidebar-primary': 'hsl(var(--sidebar-primary))',
        'sidebar-primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
        'sidebar-accent': 'hsl(var(--sidebar-accent))',
        'sidebar-accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
        'sidebar-border': 'hsl(var(--sidebar-border))',
        'sidebar-ring': 'hsl(var(--sidebar-ring))',
    },
} as const;

/**
 * Common color combinations for different UI states
 */
export const colorCombinations = {
    primary: {
        background: 'bg-primary',
        foreground: 'text-primary-foreground',
        hover: 'hover:bg-primary/90',
    },
    secondary: {
        background: 'bg-secondary',
        foreground: 'text-secondary-foreground',
        hover: 'hover:bg-secondary/80',
    },
    success: {
        background: 'bg-success',
        foreground: 'text-success-foreground',
        hover: 'hover:bg-success/90',
        border: 'border-success',
    },
    warning: {
        background: 'bg-warning',
        foreground: 'text-warning-foreground',
        hover: 'hover:bg-warning/90',
        border: 'border-warning',
    },
    info: {
        background: 'bg-info',
        foreground: 'text-info-foreground',
        hover: 'hover:bg-info/90',
        border: 'border-info',
    },
    destructive: {
        background: 'bg-destructive',
        foreground: 'text-destructive-foreground',
        hover: 'hover:bg-destructive/90',
        border: 'border-destructive',
    },
    muted: {
        background: 'bg-muted',
        foreground: 'text-muted-foreground',
        hover: 'hover:bg-muted/80',
    },
    accent: {
        background: 'bg-accent',
        foreground: 'text-accent-foreground',
        hover: 'hover:bg-accent/80',
    },
} as const;

/**
 * Utility function to get a color value by key
 */
export function getColor(category: keyof typeof colorConfig, color: string): string {
    const categoryColors = colorConfig[category] as Record<string, string>;
    return categoryColors[color] || '';
}

/**
 * Utility function to generate brand color classes
 */
export function getBrandColor(shade: BrandColorScale): string {
    return `hsl(var(--brand-${shade}))`;
}

/**
 * Utility function to generate chart color classes
 */
export function getChartColor(index: ChartColor): string {
    return `hsl(var(--chart-${index}))`;
}

/**
 * Common Tailwind CSS class combinations for components
 */
export const componentClasses = {
    button: {
        primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
        success: 'bg-success text-success-foreground hover:bg-success/90',
        warning: 'bg-warning text-warning-foreground hover:bg-warning/90',
        info: 'bg-info text-info-foreground hover:bg-info/90',
        destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
        ghost: 'hover:bg-accent hover:text-accent-foreground',
    },
    card: {
        default: 'bg-card text-card-foreground border border-border',
        hover: 'bg-card text-card-foreground border border-border hover:bg-accent',
    },
    input: {
        default: 'bg-background border border-input text-foreground placeholder:text-muted-foreground focus:ring-ring',
        error: 'bg-background border border-destructive text-foreground placeholder:text-muted-foreground focus:ring-destructive',
    },
    badge: {
        primary: 'bg-primary text-primary-foreground',
        secondary: 'bg-secondary text-secondary-foreground',
        success: 'bg-success text-success-foreground',
        warning: 'bg-warning text-warning-foreground',
        info: 'bg-info text-info-foreground',
        destructive: 'bg-destructive text-destructive-foreground',
        outline: 'border border-border text-foreground',
    },
} as const;

/**
 * Color variants for different semantic meanings
 */
export const semanticVariants = {
    default: {
        bg: 'bg-background',
        text: 'text-foreground',
        border: 'border-border',
    },
    primary: {
        bg: 'bg-primary',
        text: 'text-primary-foreground',
        border: 'border-primary',
    },
    secondary: {
        bg: 'bg-secondary',
        text: 'text-secondary-foreground',
        border: 'border-secondary',
    },
    success: {
        bg: 'bg-success',
        text: 'text-success-foreground',
        border: 'border-success',
    },
    warning: {
        bg: 'bg-warning',
        text: 'text-warning-foreground',
        border: 'border-warning',
    },
    info: {
        bg: 'bg-info',
        text: 'text-info-foreground',
        border: 'border-info',
    },
    destructive: {
        bg: 'bg-destructive',
        text: 'text-destructive-foreground',
        border: 'border-destructive',
    },
} as const;

export type SemanticVariant = keyof typeof semanticVariants;