// File Path: src/components/UIX/themes/index.js
// OPTIMIZED UIX Theme System - Performance optimized version with caching

export const UIX_THEMES = {
  BLUE: "blue",
  RED: "red",
  PURPLE: "purple",
  GREEN: "green",
  CHARCOAL: "charcoal",
};

// Cache for theme configurations to prevent recreation
let _themeConfigCache = null;

// Initialize theme configs with caching
const getThemeConfigs = () => {
  if (_themeConfigCache) {
    return _themeConfigCache;
  }

  _themeConfigCache = {
    [UIX_THEMES.BLUE]: {
      name: "Blue Theme",
      classes: {
        // Primary button styles
        "button-primary":
          "bg-blue-900 text-white hover:bg-blue-800 focus:ring-4 focus:ring-blue-500/20 border border-transparent shadow-sm hover:shadow-md",
        "button-secondary":
          "border border-gray-200 bg-white text-gray-700 hover:bg-gray-50 hover:shadow-md focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 shadow-sm",
        "button-outline":
          "border-2 border-blue-300 bg-white text-blue-700 hover:bg-blue-50 hover:border-blue-400 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500",
        "button-create":
          "bg-green-600 text-white hover:bg-green-700 focus:ring-4 focus:ring-green-500/20 border border-transparent shadow-sm hover:shadow-md",
        "button-success":
          "bg-green-600 text-white hover:bg-green-700 focus:ring-4 focus:ring-green-500/20 border border-transparent shadow-sm hover:shadow-md",
        "button-danger":
          "bg-red-600 text-white hover:bg-red-700 focus:ring-4 focus:ring-red-500/20 border border-transparent shadow-sm hover:shadow-md",
        "button-gradient":
          "border-transparent text-white shadow-lg hover:shadow-xl focus:ring-4 focus:ring-blue-500/20 transform hover:scale-105 font-bold",
        "button-ghost":
          "bg-transparent text-gray-700 hover:bg-gray-100 focus:ring-2 focus:ring-blue-500 border border-transparent",
        "button-disabled":
          "bg-gray-600 text-white hover:bg-gray-700 focus:ring-4 focus:ring-gray-500/20 border border-transparent",

        // Input and form styles
        "input-border":
          "border-gray-300 focus:border-blue-500 focus:ring-blue-500",
        "input-border-error":
          "border-red-500 focus:border-red-500 focus:ring-red-500",
        "input-focus-ring": "focus:ring-4 focus:ring-blue-500/20",

        // Table styles
        "table-header-bg": "bg-gradient-to-r from-blue-900 to-blue-950",
        "table-header-text": "text-white border-b border-blue-900",
        "table-row-hover": "hover:bg-blue-50",

        // Alert and notification styles
        "alert-info-bg": "bg-blue-50",
        "alert-info-text": "text-blue-800",
        "alert-info-border": "border-blue-200",
        "alert-info-icon": "text-blue-600",
        "alert-warning-bg": "bg-amber-50",
        "alert-warning-text": "text-amber-800",
        "alert-warning-border": "border-amber-200",
        "alert-error-bg": "bg-red-50",
        "alert-error-text": "text-red-800",
        "alert-error-border": "border-red-200",
        "alert-success-bg": "bg-green-50",
        "alert-success-text": "text-green-800",
        "alert-success-border": "border-green-200",
        "alert-info-hover": "hover:bg-blue-100",
        "alert-warning-hover": "hover:bg-amber-100",
        "alert-error-hover": "hover:bg-red-100",
        "alert-success-hover": "hover:bg-green-100",

        // Navigation and breadcrumb
        "breadcrumb-active": "text-blue-600",
        "breadcrumb-inactive": "text-gray-500 hover:text-blue-600",

        // Tabs
        "tab-active": "border-blue-500 text-blue-600",
        "tab-inactive":
          "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",

        // Pagination
        "pagination-active": "bg-blue-800 text-white",
        "pagination-inactive":
          "text-gray-500 bg-white border border-gray-300 hover:bg-gray-100",

        // Checkbox and Radio
        "checkbox-focus": "text-blue-500 focus:ring-blue-500",
        "radio-focus": "text-blue-500 focus:ring-blue-500",

        // MultiSelect
        "multiselect-focus": "ring-2 ring-blue-500 border-blue-500",
        "multiselect-search-focus": "focus:ring-1 focus:ring-blue-500",
        "multiselect-selected-bg": "bg-blue-100",
        "multiselect-selected-text": "text-blue-800",
        "multiselect-selected-chip": "bg-blue-100 text-blue-800",
        "multiselect-selected-chip-hover": "hover:text-blue-900",
        "multiselect-option-selected": "bg-blue-50 text-blue-700",
        "multiselect-option-check": "text-blue-600",

        // Card and container styles
        "card-border": "border-blue-200",
        "card-header-bg": "bg-blue-50",
        "card-header-text": "text-blue-900",

        // Interactive elements
        "link-primary": "text-blue-600 hover:text-blue-800",
        "link-secondary": "text-blue-500 hover:text-blue-700",

        // Background gradients
        "bg-gradient-primary":
          "bg-gradient-to-br from-gray-50 via-white to-blue-50",
        "bg-gradient-secondary": "bg-gradient-to-r from-blue-900 to-blue-950",

        // Badge and status
        "badge-default": "bg-gray-100 text-gray-800",
        "badge-primary": "bg-blue-100 text-blue-800",
        "badge-secondary": "bg-blue-50 text-blue-600",
        "badge-success": "bg-green-100 text-green-800",
        "badge-warning": "bg-amber-100 text-amber-800",
        "badge-error": "bg-red-100 text-red-800",
        "badge-info": "bg-cyan-100 text-cyan-800",

        // Loading and progress
        "loading-spinner": "border-blue-600",
        "progress-bar": "bg-blue-600",
        "border-primary": "border-blue-600",

        // Focus and interaction states
        "focus-ring": "focus:ring-blue-500",
        "focus-border": "focus:border-blue-500",

        // ViewButton specific
        "view-button":
          "text-gray-800 bg-blue-50 hover:bg-blue-200 border-2 border-gray-800",

        // SelectButton specific - dark blue theme colors
        "select-button":
          "bg-blue-900 text-white hover:bg-blue-800 border border-blue-900 hover:border-blue-800 focus:ring-4 focus:ring-blue-500/20 shadow-sm hover:shadow-md",

        // SearchFilter specific
        "search-clear-button":
          "text-blue-600 hover:text-blue-800 bg-blue-50 hover:bg-blue-100",
        "search-refresh-button":
          "text-blue-600 hover:text-blue-800 bg-blue-50 hover:bg-blue-100",

        // ActionCard specific - dark slate color that complements theme
        "action-card": "bg-slate-700 text-white hover:bg-slate-600",
        "action-card-delete": "bg-red-600 text-white hover:bg-red-700",

        // Text and background theme classes
        "text-primary": "text-gray-900",
        "text-secondary": "text-gray-600",
        "text-muted": "text-gray-400",
        "text-danger": "text-red-600",
        "text-error": "text-red-700",
        "text-warning": "text-amber-700",
        "text-success": "text-green-700",
        "bg-card": "bg-white",
        "bg-disabled": "bg-gray-50",
        "bg-page": "bg-white",

        // Icon colors
        "icon-success": "text-green-600",
        "icon-info": "text-blue-600",
        "icon-warning": "text-amber-600",
        "icon-privacy": "text-purple-600",
        "icon-featured": "text-red-600",
        "icon-sparkles": "text-yellow-500",
        "icon-trending": "text-green-500",

        // File type icon colors
        "file-icon-pdf": "text-red-600",
        "file-icon-doc": "text-blue-600",
        "file-icon-design": "text-purple-600",
        "file-icon-default": "text-gray-600",

        // Dashboard stat card colors
        "stat-files-gradient": "bg-gradient-to-r from-blue-600 to-blue-700",
        "stat-files-bg": "bg-blue-50",
        "stat-files-text": "text-blue-700",
        "stat-folders-gradient": "bg-gradient-to-r from-purple-600 to-purple-700",
        "stat-folders-bg": "bg-purple-50",
        "stat-folders-text": "text-purple-700",
        "stat-storage-gradient": "bg-gradient-to-r from-green-600 to-green-700",
        "stat-storage-bg": "bg-green-50",
        "stat-storage-text": "text-green-700",

        // Chart colors
        "chart-primary": "#1e40af",
        "chart-primary-light": "#3b82f6",

        // Pill/Chip colors
        "pill-bg": "bg-gradient-to-r from-blue-100 to-blue-200",
        "pill-text": "text-blue-800",
        "pill-border": "border-blue-200",

        // DatePicker states
        "datepicker-selected": "bg-blue-600 text-white hover:bg-blue-700",
        "datepicker-today": "bg-blue-100 text-blue-800 hover:bg-blue-200",
        "datepicker-focus": "border-blue-500 ring-4 ring-blue-500/20",

        // Decorative background elements
        "decorative-primary": "bg-blue-200",
        "decorative-secondary": "bg-purple-200",
        "decorative-accent": "bg-indigo-200",
        "decorative-blob-1": "bg-purple-200",
        "decorative-blob-2": "bg-yellow-200",
        "decorative-blob-3": "bg-pink-200",

        // Progress bars and steps
        "progress-bar-bg": "bg-gray-300",
        "progress-bar-fill": "bg-blue-500",
        "step-inactive": "bg-gray-300",
        "step-inactive-text": "text-gray-600",
        "step-completed": "bg-green-500",
        "step-completed-line": "bg-green-500",

        // Search filter
        "search-bg": "bg-gray-50",
        "border-secondary": "border-gray-200",

        // Success states
        "success-bg": "bg-green-50",
        "success-border": "border-green-200",
        "success-text": "text-green-800",

        // Help page section colors
        "help-section-blue-text": "text-blue-600",
        "help-section-blue-bg": "bg-blue-50",
        "help-section-green-text": "text-green-600",
        "help-section-green-bg": "bg-green-50",
        "help-section-purple-text": "text-purple-600",
        "help-section-purple-bg": "bg-purple-50",
        "help-section-pink-text": "text-pink-600",
        "help-section-pink-bg": "bg-pink-50",
        "help-section-red-text": "text-red-600",
        "help-section-red-bg": "bg-red-50",

        // Export page section colors - Success (green)
        "export-section-success-bg": "bg-green-50",
        "export-section-success-border": "border-green-200",
        "export-section-success-icon": "text-green-600",
        "export-section-success-title": "text-green-900",
        "export-section-success-text": "text-green-800",
        "export-section-success-muted": "text-green-700",

        // Export page section colors - Info (blue)
        "export-section-info-bg": "bg-blue-50",
        "export-section-info-border": "border-blue-200",
        "export-section-info-icon": "text-blue-600",
        "export-section-info-title": "text-blue-900",
        "export-section-info-text": "text-blue-800",

        // Export page section colors - Warning (yellow)
        "export-section-warning-bg": "bg-yellow-50",
        "export-section-warning-border": "border-yellow-200",
        "export-section-warning-icon": "text-yellow-600",
        "export-section-warning-title": "text-yellow-900",
        "export-section-warning-text": "text-yellow-800",
        "export-section-warning-muted": "text-yellow-700",
        "export-section-warning-code": "bg-yellow-100",

        // Muted background
        "bg-muted": "bg-gray-50",
      },
    },

    [UIX_THEMES.RED]: {
      name: "Red Theme",
      classes: {
        // Primary button styles
        "button-primary":
          "bg-red-900 text-white hover:bg-red-800 focus:ring-4 focus:ring-red-500/20 border border-transparent shadow-sm hover:shadow-md",
        "button-secondary":
          "border border-gray-200 bg-white text-gray-700 hover:bg-gray-50 hover:shadow-md focus:ring-2 focus:ring-offset-2 focus:ring-red-500 shadow-sm",
        "button-outline":
          "border-2 border-red-300 bg-white text-red-700 hover:bg-red-50 hover:border-red-400 focus:ring-2 focus:ring-offset-2 focus:ring-red-500",
        "button-create":
          "bg-green-600 text-white hover:bg-green-700 focus:ring-4 focus:ring-green-500/20 border border-transparent shadow-sm hover:shadow-md",
        "button-success":
          "bg-green-600 text-white hover:bg-green-700 focus:ring-4 focus:ring-green-500/20 border border-transparent shadow-sm hover:shadow-md",
        "button-danger":
          "bg-red-600 text-white hover:bg-red-700 focus:ring-4 focus:ring-red-500/20 border border-transparent shadow-sm hover:shadow-md",
        "button-gradient":
          "border-transparent text-white shadow-lg hover:shadow-xl focus:ring-4 focus:ring-red-500/20 transform hover:scale-105 font-bold",

        // Input and form styles
        "input-border":
          "border-gray-300 focus:border-red-500 focus:ring-red-500",
        "input-border-error":
          "border-red-500 focus:border-red-500 focus:ring-red-500",
        "input-focus-ring": "focus:ring-4 focus:ring-red-500/20",

        // Table styles
        "table-header-bg": "bg-gradient-to-r from-red-900 to-red-950",
        "table-header-text": "text-white border-b border-red-900",
        "table-row-hover": "hover:bg-red-50",

        // Alert and notification styles
        "alert-info-bg": "bg-red-50",
        "alert-info-text": "text-red-800",
        "alert-info-border": "border-red-200",
        "alert-info-icon": "text-red-600",
        "alert-warning-bg": "bg-amber-50",
        "alert-warning-text": "text-amber-800",
        "alert-warning-border": "border-amber-200",
        "alert-error-bg": "bg-red-50",
        "alert-error-text": "text-red-800",
        "alert-error-border": "border-red-200",
        "alert-success-bg": "bg-green-50",
        "alert-success-text": "text-green-800",
        "alert-success-border": "border-green-200",
        "alert-info-hover": "hover:bg-red-100",
        "alert-warning-hover": "hover:bg-amber-100",
        "alert-error-hover": "hover:bg-red-100",
        "alert-success-hover": "hover:bg-green-100",

        // Navigation and breadcrumb
        "breadcrumb-active": "text-red-600",
        "breadcrumb-inactive": "text-gray-500 hover:text-red-600",

        // Tabs
        "tab-active": "border-red-500 text-red-600",
        "tab-inactive":
          "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",

        // Pagination
        "pagination-active": "bg-red-800 text-white",
        "pagination-inactive":
          "text-gray-500 bg-white border border-gray-300 hover:bg-gray-100",

        // Checkbox and Radio
        "checkbox-focus": "text-red-500 focus:ring-red-500",
        "radio-focus": "text-red-500 focus:ring-red-500",

        // MultiSelect
        "multiselect-focus": "ring-2 ring-red-500 border-red-500",
        "multiselect-search-focus": "focus:ring-1 focus:ring-red-500",
        "multiselect-selected-bg": "bg-red-100",
        "multiselect-selected-text": "text-red-800",
        "multiselect-selected-chip": "bg-red-100 text-red-800",
        "multiselect-selected-chip-hover": "hover:text-red-900",
        "multiselect-option-selected": "bg-red-50 text-red-700",
        "multiselect-option-check": "text-red-600",

        // Card and container styles
        "card-border": "border-red-200",
        "card-header-bg": "bg-red-50",
        "card-header-text": "text-red-900",

        // Interactive elements
        "link-primary": "text-red-600 hover:text-red-800",
        "link-secondary": "text-red-500 hover:text-red-700",

        // Background gradients
        "bg-gradient-primary":
          "bg-gradient-to-br from-gray-50 via-white to-red-50",
        "bg-gradient-secondary": "bg-gradient-to-r from-red-900 to-red-950",

        // Badge and status
        "badge-default": "bg-gray-100 text-gray-800",
        "badge-primary": "bg-red-100 text-red-800",
        "badge-secondary": "bg-red-50 text-red-600",
        "badge-success": "bg-green-100 text-green-800",
        "badge-warning": "bg-amber-100 text-amber-800",
        "badge-error": "bg-red-100 text-red-800",
        "badge-info": "bg-cyan-100 text-cyan-800",

        // Loading and progress
        "loading-spinner": "border-red-600",
        "progress-bar": "bg-red-600",
        "border-primary": "border-red-600",

        // Focus and interaction states
        "focus-ring": "focus:ring-red-500",
        "focus-border": "focus:border-red-500",

        // ViewButton specific
        "view-button":
          "text-gray-800 bg-red-50 hover:bg-red-200 border-2 border-gray-800",

        // SelectButton specific - dark red theme colors
        "select-button":
          "bg-red-900 text-white hover:bg-red-800 border border-red-900 hover:border-red-800 focus:ring-4 focus:ring-red-500/20 shadow-sm hover:shadow-md",

        // SearchFilter specific
        "search-clear-button":
          "text-red-600 hover:text-red-800 bg-red-50 hover:bg-red-100",
        "search-refresh-button":
          "text-red-600 hover:text-red-800 bg-red-50 hover:bg-red-100",

        // ActionCard specific - dark slate color that complements theme
        "action-card": "bg-slate-700 text-white hover:bg-slate-600",
        "action-card-delete": "bg-red-600 text-white hover:bg-red-700",

        // Text and background theme classes
        "text-primary": "text-gray-900",
        "text-secondary": "text-gray-600",
        "text-muted": "text-gray-400",
        "text-danger": "text-red-600",
        "text-error": "text-red-700",
        "text-warning": "text-amber-700",
        "text-success": "text-green-700",
        "bg-card": "bg-white",
        "bg-disabled": "bg-gray-50",
        "bg-page": "bg-white",

        // Icon colors
        "icon-success": "text-green-600",
        "icon-info": "text-red-600",
        "icon-warning": "text-amber-600",
        "icon-privacy": "text-orange-600",
        "icon-featured": "text-red-700",
        "icon-sparkles": "text-yellow-500",
        "icon-trending": "text-green-500",

        // File type icon colors
        "file-icon-pdf": "text-red-700",
        "file-icon-doc": "text-red-600",
        "file-icon-design": "text-orange-600",
        "file-icon-default": "text-gray-600",

        // Dashboard stat card colors
        "stat-files-gradient": "bg-gradient-to-r from-red-600 to-red-700",
        "stat-files-bg": "bg-red-50",
        "stat-files-text": "text-red-700",
        "stat-folders-gradient": "bg-gradient-to-r from-orange-600 to-orange-700",
        "stat-folders-bg": "bg-orange-50",
        "stat-folders-text": "text-orange-700",
        "stat-storage-gradient": "bg-gradient-to-r from-green-600 to-green-700",
        "stat-storage-bg": "bg-green-50",
        "stat-storage-text": "text-green-700",

        // Chart colors
        "chart-primary": "#b91c1c",
        "chart-primary-light": "#dc2626",

        // Pill/Chip colors
        "pill-bg": "bg-gradient-to-r from-red-100 to-red-200",
        "pill-text": "text-red-800",
        "pill-border": "border-red-200",

        // DatePicker states
        "datepicker-selected": "bg-red-600 text-white hover:bg-red-700",
        "datepicker-today": "bg-red-100 text-red-800 hover:bg-red-200",
        "datepicker-focus": "border-red-500 ring-4 ring-red-500/20",

        // Decorative background elements
        "decorative-primary": "bg-red-200",
        "decorative-secondary": "bg-orange-200",
        "decorative-accent": "bg-pink-200",
        "decorative-blob-1": "bg-orange-200",
        "decorative-blob-2": "bg-yellow-200",
        "decorative-blob-3": "bg-pink-200",

        // Progress bars and steps
        "progress-bar-bg": "bg-gray-300",
        "progress-bar-fill": "bg-red-500",
        "step-inactive": "bg-gray-300",
        "step-inactive-text": "text-gray-600",
        "step-completed": "bg-green-500",
        "step-completed-line": "bg-green-500",

        // Search filter
        "search-bg": "bg-gray-50",
        "border-secondary": "border-gray-200",

        // Success states
        "success-bg": "bg-green-50",
        "success-border": "border-green-200",
        "success-text": "text-green-800",

        // Help page section colors
        "help-section-blue-text": "text-blue-600",
        "help-section-blue-bg": "bg-blue-50",
        "help-section-green-text": "text-green-600",
        "help-section-green-bg": "bg-green-50",
        "help-section-purple-text": "text-purple-600",
        "help-section-purple-bg": "bg-purple-50",
        "help-section-pink-text": "text-pink-600",
        "help-section-pink-bg": "bg-pink-50",
        "help-section-red-text": "text-red-600",
        "help-section-red-bg": "bg-red-50",

        // Export page section colors - Success (green)
        "export-section-success-bg": "bg-green-50",
        "export-section-success-border": "border-green-200",
        "export-section-success-icon": "text-green-600",
        "export-section-success-title": "text-green-900",
        "export-section-success-text": "text-green-800",
        "export-section-success-muted": "text-green-700",

        // Export page section colors - Info (blue)
        "export-section-info-bg": "bg-blue-50",
        "export-section-info-border": "border-blue-200",
        "export-section-info-icon": "text-blue-600",
        "export-section-info-title": "text-blue-900",
        "export-section-info-text": "text-blue-800",

        // Export page section colors - Warning (yellow)
        "export-section-warning-bg": "bg-yellow-50",
        "export-section-warning-border": "border-yellow-200",
        "export-section-warning-icon": "text-yellow-600",
        "export-section-warning-title": "text-yellow-900",
        "export-section-warning-text": "text-yellow-800",
        "export-section-warning-muted": "text-yellow-700",
        "export-section-warning-code": "bg-yellow-100",

        // Muted background
        "bg-muted": "bg-gray-50",
      },
    },

    [UIX_THEMES.PURPLE]: {
      name: "Purple Theme",
      classes: {
        // Primary button styles
        "button-primary":
          "bg-purple-900 text-white hover:bg-purple-800 focus:ring-4 focus:ring-purple-500/20 border border-transparent shadow-sm hover:shadow-md",
        "button-secondary":
          "border border-gray-200 bg-white text-gray-700 hover:bg-gray-50 hover:shadow-md focus:ring-2 focus:ring-offset-2 focus:ring-purple-500 shadow-sm",
        "button-outline":
          "border-2 border-purple-300 bg-white text-purple-700 hover:bg-purple-50 hover:border-purple-400 focus:ring-2 focus:ring-offset-2 focus:ring-purple-500",
        "button-create":
          "bg-green-600 text-white hover:bg-green-700 focus:ring-4 focus:ring-green-500/20 border border-transparent shadow-sm hover:shadow-md",
        "button-success":
          "bg-green-600 text-white hover:bg-green-700 focus:ring-4 focus:ring-green-500/20 border border-transparent shadow-sm hover:shadow-md",
        "button-danger":
          "bg-red-600 text-white hover:bg-red-700 focus:ring-4 focus:ring-red-500/20 border border-transparent shadow-sm hover:shadow-md",
        "button-gradient":
          "border-transparent text-white shadow-lg hover:shadow-xl focus:ring-4 focus:ring-purple-500/20 transform hover:scale-105 font-bold",

        // Input and form styles
        "input-border":
          "border-gray-300 focus:border-purple-500 focus:ring-purple-500",
        "input-border-error":
          "border-red-500 focus:border-red-500 focus:ring-red-500",
        "input-focus-ring": "focus:ring-4 focus:ring-purple-500/20",

        // Table styles
        "table-header-bg": "bg-gradient-to-r from-purple-900 to-purple-950",
        "table-header-text": "text-white border-b border-purple-900",
        "table-row-hover": "hover:bg-purple-50",

        // Alert and notification styles
        "alert-info-bg": "bg-purple-50",
        "alert-info-text": "text-purple-800",
        "alert-info-border": "border-purple-200",
        "alert-info-icon": "text-purple-600",
        "alert-warning-bg": "bg-amber-50",
        "alert-warning-text": "text-amber-800",
        "alert-warning-border": "border-amber-200",
        "alert-error-bg": "bg-red-50",
        "alert-error-text": "text-red-800",
        "alert-error-border": "border-red-200",
        "alert-success-bg": "bg-green-50",
        "alert-success-text": "text-green-800",
        "alert-success-border": "border-green-200",
        "alert-info-hover": "hover:bg-purple-100",
        "alert-warning-hover": "hover:bg-amber-100",
        "alert-error-hover": "hover:bg-red-100",
        "alert-success-hover": "hover:bg-green-100",

        // Navigation and breadcrumb
        "breadcrumb-active": "text-purple-600",
        "breadcrumb-inactive": "text-gray-500 hover:text-purple-600",

        // Tabs
        "tab-active": "border-purple-500 text-purple-600",
        "tab-inactive":
          "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",

        // Pagination
        "pagination-active": "bg-purple-800 text-white",
        "pagination-inactive":
          "text-gray-500 bg-white border border-gray-300 hover:bg-gray-100",

        // Checkbox and Radio
        "checkbox-focus": "text-purple-500 focus:ring-purple-500",
        "radio-focus": "text-purple-500 focus:ring-purple-500",

        // MultiSelect
        "multiselect-focus": "ring-2 ring-purple-500 border-purple-500",
        "multiselect-search-focus": "focus:ring-1 focus:ring-purple-500",
        "multiselect-selected-bg": "bg-purple-100",
        "multiselect-selected-text": "text-purple-800",
        "multiselect-selected-chip": "bg-purple-100 text-purple-800",
        "multiselect-selected-chip-hover": "hover:text-purple-900",
        "multiselect-option-selected": "bg-purple-50 text-purple-700",
        "multiselect-option-check": "text-purple-600",

        // Card and container styles
        "card-border": "border-purple-200",
        "card-header-bg": "bg-purple-50",
        "card-header-text": "text-purple-900",

        // Interactive elements
        "link-primary": "text-purple-600 hover:text-purple-800",
        "link-secondary": "text-purple-500 hover:text-purple-700",

        // Background gradients
        "bg-gradient-primary":
          "bg-gradient-to-br from-gray-50 via-white to-purple-50",
        "bg-gradient-secondary":
          "bg-gradient-to-r from-purple-900 to-purple-950",

        // Badge and status
        "badge-default": "bg-gray-100 text-gray-800",
        "badge-primary": "bg-purple-100 text-purple-800",
        "badge-secondary": "bg-purple-50 text-purple-600",
        "badge-success": "bg-green-100 text-green-800",
        "badge-warning": "bg-amber-100 text-amber-800",
        "badge-error": "bg-red-100 text-red-800",
        "badge-info": "bg-cyan-100 text-cyan-800",

        // Loading and progress
        "loading-spinner": "border-purple-600",
        "progress-bar": "bg-purple-600",
        "border-primary": "border-purple-600",

        // Focus and interaction states
        "focus-ring": "focus:ring-purple-500",
        "focus-border": "focus:border-purple-500",

        // ViewButton specific
        "view-button":
          "text-gray-800 bg-purple-50 hover:bg-purple-200 border-2 border-gray-800",

        // SelectButton specific - dark purple theme colors
        "select-button":
          "bg-purple-900 text-white hover:bg-purple-800 border border-purple-900 hover:border-purple-800 focus:ring-4 focus:ring-purple-500/20 shadow-sm hover:shadow-md",

        // SearchFilter specific
        "search-clear-button":
          "text-purple-600 hover:text-purple-800 bg-purple-50 hover:bg-purple-100",
        "search-refresh-button":
          "text-purple-600 hover:text-purple-800 bg-purple-50 hover:bg-purple-100",

        // ActionCard specific - dark slate color that complements theme
        "action-card": "bg-slate-700 text-white hover:bg-slate-600",
        "action-card-delete": "bg-red-600 text-white hover:bg-red-700",

        // Text and background theme classes
        "text-primary": "text-gray-900",
        "text-secondary": "text-gray-600",
        "text-muted": "text-gray-400",
        "text-danger": "text-red-600",
        "text-error": "text-red-700",
        "text-warning": "text-amber-700",
        "text-success": "text-green-700",
        "bg-card": "bg-white",
        "bg-disabled": "bg-gray-50",
        "bg-page": "bg-white",

        // Icon colors
        "icon-success": "text-green-600",
        "icon-info": "text-purple-600",
        "icon-warning": "text-amber-600",
        "icon-privacy": "text-indigo-600",
        "icon-featured": "text-pink-600",
        "icon-sparkles": "text-yellow-500",
        "icon-trending": "text-green-500",

        // File type icon colors
        "file-icon-pdf": "text-pink-600",
        "file-icon-doc": "text-purple-600",
        "file-icon-design": "text-indigo-600",
        "file-icon-default": "text-gray-600",

        // Dashboard stat card colors
        "stat-files-gradient": "bg-gradient-to-r from-purple-600 to-purple-700",
        "stat-files-bg": "bg-purple-50",
        "stat-files-text": "text-purple-700",
        "stat-folders-gradient": "bg-gradient-to-r from-indigo-600 to-indigo-700",
        "stat-folders-bg": "bg-indigo-50",
        "stat-folders-text": "text-indigo-700",
        "stat-storage-gradient": "bg-gradient-to-r from-green-600 to-green-700",
        "stat-storage-bg": "bg-green-50",
        "stat-storage-text": "text-green-700",

        // Chart colors
        "chart-primary": "#7c3aed",
        "chart-primary-light": "#a855f7",

        // Pill/Chip colors
        "pill-bg": "bg-gradient-to-r from-purple-100 to-purple-200",
        "pill-text": "text-purple-800",
        "pill-border": "border-purple-200",

        // DatePicker states
        "datepicker-selected": "bg-purple-600 text-white hover:bg-purple-700",
        "datepicker-today": "bg-purple-100 text-purple-800 hover:bg-purple-200",
        "datepicker-focus": "border-purple-500 ring-4 ring-purple-500/20",

        // Decorative background elements
        "decorative-primary": "bg-purple-200",
        "decorative-secondary": "bg-pink-200",
        "decorative-accent": "bg-indigo-200",
        "decorative-blob-1": "bg-purple-200",
        "decorative-blob-2": "bg-pink-200",
        "decorative-blob-3": "bg-indigo-200",

        // Progress bars and steps
        "progress-bar-bg": "bg-gray-300",
        "progress-bar-fill": "bg-purple-500",
        "step-inactive": "bg-gray-300",
        "step-inactive-text": "text-gray-600",
        "step-completed": "bg-green-500",
        "step-completed-line": "bg-green-500",

        // Search filter
        "search-bg": "bg-gray-50",
        "border-secondary": "border-gray-200",

        // Success states
        "success-bg": "bg-green-50",
        "success-border": "border-green-200",
        "success-text": "text-green-800",

        // Help page section colors
        "help-section-blue-text": "text-blue-600",
        "help-section-blue-bg": "bg-blue-50",
        "help-section-green-text": "text-green-600",
        "help-section-green-bg": "bg-green-50",
        "help-section-purple-text": "text-purple-600",
        "help-section-purple-bg": "bg-purple-50",
        "help-section-pink-text": "text-pink-600",
        "help-section-pink-bg": "bg-pink-50",
        "help-section-red-text": "text-red-600",
        "help-section-red-bg": "bg-red-50",

        // Export page section colors - Success (green)
        "export-section-success-bg": "bg-green-50",
        "export-section-success-border": "border-green-200",
        "export-section-success-icon": "text-green-600",
        "export-section-success-title": "text-green-900",
        "export-section-success-text": "text-green-800",
        "export-section-success-muted": "text-green-700",

        // Export page section colors - Info (blue)
        "export-section-info-bg": "bg-blue-50",
        "export-section-info-border": "border-blue-200",
        "export-section-info-icon": "text-blue-600",
        "export-section-info-title": "text-blue-900",
        "export-section-info-text": "text-blue-800",

        // Export page section colors - Warning (yellow)
        "export-section-warning-bg": "bg-yellow-50",
        "export-section-warning-border": "border-yellow-200",
        "export-section-warning-icon": "text-yellow-600",
        "export-section-warning-title": "text-yellow-900",
        "export-section-warning-text": "text-yellow-800",
        "export-section-warning-muted": "text-yellow-700",
        "export-section-warning-code": "bg-yellow-100",

        // Muted background
        "bg-muted": "bg-gray-50",
      },
    },

    [UIX_THEMES.GREEN]: {
      name: "Green Theme",
      classes: {
        // Primary button styles - using forest green that's distinguishable from black
        "button-primary":
          "bg-green-900 text-white hover:bg-green-800 focus:ring-4 focus:ring-green-500/20 border border-transparent shadow-sm hover:shadow-md",
        "button-secondary":
          "border border-gray-200 bg-white text-gray-700 hover:bg-gray-50 hover:shadow-md focus:ring-2 focus:ring-offset-2 focus:ring-green-500 shadow-sm",
        "button-outline":
          "border-2 border-green-300 bg-white text-green-700 hover:bg-green-50 hover:border-green-400 focus:ring-2 focus:ring-offset-2 focus:ring-green-500",
        "button-create":
          "bg-green-600 text-white hover:bg-green-700 focus:ring-4 focus:ring-green-500/20 border border-transparent shadow-sm hover:shadow-md",
        "button-success":
          "bg-green-600 text-white hover:bg-green-700 focus:ring-4 focus:ring-green-500/20 border border-transparent shadow-sm hover:shadow-md",
        "button-danger":
          "bg-red-600 text-white hover:bg-red-700 focus:ring-4 focus:ring-red-500/20 border border-transparent shadow-sm hover:shadow-md",
        "button-gradient":
          "border-transparent text-white shadow-lg hover:shadow-xl focus:ring-4 focus:ring-green-500/20 transform hover:scale-105 font-bold",

        // Input and form styles
        "input-border":
          "border-gray-300 focus:border-green-500 focus:ring-green-500",
        "input-border-error":
          "border-red-500 focus:border-red-500 focus:ring-red-500",
        "input-focus-ring": "focus:ring-4 focus:ring-green-500/20",

        // Table styles - dark forest green gradient
        "table-header-bg": "bg-gradient-to-r from-green-900 to-green-950",
        "table-header-text": "text-white border-b border-green-900",
        "table-row-hover": "hover:bg-green-50",

        // Alert and notification styles
        "alert-info-bg": "bg-green-50",
        "alert-info-text": "text-green-800",
        "alert-info-border": "border-green-200",
        "alert-info-icon": "text-green-600",
        "alert-warning-bg": "bg-amber-50",
        "alert-warning-text": "text-amber-800",
        "alert-warning-border": "border-amber-200",
        "alert-error-bg": "bg-red-50",
        "alert-error-text": "text-red-800",
        "alert-error-border": "border-red-200",
        "alert-success-bg": "bg-green-50",
        "alert-success-text": "text-green-800",
        "alert-success-border": "border-green-200",
        "alert-info-hover": "hover:bg-green-100",
        "alert-warning-hover": "hover:bg-amber-100",
        "alert-error-hover": "hover:bg-red-100",
        "alert-success-hover": "hover:bg-green-100",

        // Navigation and breadcrumb
        "breadcrumb-active": "text-green-600",
        "breadcrumb-inactive": "text-gray-500 hover:text-green-600",

        // Tabs
        "tab-active": "border-green-500 text-green-600",
        "tab-inactive":
          "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",

        // Pagination
        "pagination-active": "bg-green-800 text-white",
        "pagination-inactive":
          "text-gray-500 bg-white border border-gray-300 hover:bg-gray-100",

        // Checkbox and Radio
        "checkbox-focus": "text-green-500 focus:ring-green-500",
        "radio-focus": "text-green-500 focus:ring-green-500",

        // MultiSelect
        "multiselect-focus": "ring-2 ring-green-500 border-green-500",
        "multiselect-search-focus": "focus:ring-1 focus:ring-green-500",
        "multiselect-selected-bg": "bg-green-100",
        "multiselect-selected-text": "text-green-800",
        "multiselect-selected-chip": "bg-green-100 text-green-800",
        "multiselect-selected-chip-hover": "hover:text-green-900",
        "multiselect-option-selected": "bg-green-50 text-green-700",
        "multiselect-option-check": "text-green-600",

        // Card and container styles
        "card-border": "border-green-200",
        "card-header-bg": "bg-green-50",
        "card-header-text": "text-green-900",

        // Interactive elements
        "link-primary": "text-green-600 hover:text-green-800",
        "link-secondary": "text-green-500 hover:text-green-700",

        // Background gradients
        "bg-gradient-primary":
          "bg-gradient-to-br from-gray-50 via-white to-green-50",
        "bg-gradient-secondary": "bg-gradient-to-r from-green-900 to-green-950",

        // Badge and status
        "badge-default": "bg-gray-100 text-gray-800",
        "badge-primary": "bg-green-100 text-green-800",
        "badge-secondary": "bg-green-50 text-green-600",
        "badge-success": "bg-green-100 text-green-800",
        "badge-warning": "bg-amber-100 text-amber-800",
        "badge-error": "bg-red-100 text-red-800",
        "badge-info": "bg-cyan-100 text-cyan-800",

        // Loading and progress
        "loading-spinner": "border-green-600",
        "progress-bar": "bg-green-600",
        "border-primary": "border-green-600",

        // Focus and interaction states
        "focus-ring": "focus:ring-green-500",
        "focus-border": "focus:border-green-500",

        // ViewButton specific
        "view-button":
          "text-gray-800 bg-green-50 hover:bg-green-200 border-2 border-gray-800",

        // SelectButton specific - dark forest green theme colors
        "select-button":
          "bg-green-900 text-white hover:bg-green-800 border border-green-900 hover:border-green-800 focus:ring-4 focus:ring-green-500/20 shadow-sm hover:shadow-md",

        // SearchFilter specific
        "search-clear-button":
          "text-green-600 hover:text-green-800 bg-green-50 hover:bg-green-100",
        "search-refresh-button":
          "text-green-600 hover:text-green-800 bg-green-50 hover:bg-green-100",

        // ActionCard specific - dark slate color that complements theme
        "action-card": "bg-slate-700 text-white hover:bg-slate-600",
        "action-card-delete": "bg-red-600 text-white hover:bg-red-700",

        // Text and background theme classes
        "text-primary": "text-gray-900",
        "text-secondary": "text-gray-600",
        "text-muted": "text-gray-400",
        "text-danger": "text-red-600",
        "text-error": "text-red-700",
        "text-warning": "text-amber-700",
        "text-success": "text-green-700",
        "bg-card": "bg-white",
        "bg-disabled": "bg-gray-50",
        "bg-page": "bg-white",

        // Icon colors
        "icon-success": "text-green-700",
        "icon-info": "text-teal-600",
        "icon-warning": "text-amber-600",
        "icon-privacy": "text-emerald-600",
        "icon-featured": "text-lime-600",
        "icon-sparkles": "text-yellow-500",
        "icon-trending": "text-green-500",

        // File type icon colors
        "file-icon-pdf": "text-red-600",
        "file-icon-doc": "text-teal-600",
        "file-icon-design": "text-emerald-600",
        "file-icon-default": "text-gray-600",

        // Dashboard stat card colors
        "stat-files-gradient": "bg-gradient-to-r from-green-600 to-green-700",
        "stat-files-bg": "bg-green-50",
        "stat-files-text": "text-green-700",
        "stat-folders-gradient": "bg-gradient-to-r from-teal-600 to-teal-700",
        "stat-folders-bg": "bg-teal-50",
        "stat-folders-text": "text-teal-700",
        "stat-storage-gradient": "bg-gradient-to-r from-emerald-600 to-emerald-700",
        "stat-storage-bg": "bg-emerald-50",
        "stat-storage-text": "text-emerald-700",

        // Chart colors
        "chart-primary": "#059669",
        "chart-primary-light": "#10b981",

        // Pill/Chip colors
        "pill-bg": "bg-gradient-to-r from-green-100 to-green-200",
        "pill-text": "text-green-800",
        "pill-border": "border-green-200",

        // DatePicker states
        "datepicker-selected": "bg-green-600 text-white hover:bg-green-700",
        "datepicker-today": "bg-green-100 text-green-800 hover:bg-green-200",
        "datepicker-focus": "border-green-500 ring-4 ring-green-500/20",

        // Decorative background elements
        "decorative-primary": "bg-green-200",
        "decorative-secondary": "bg-emerald-200",
        "decorative-accent": "bg-teal-200",
        "decorative-blob-1": "bg-emerald-200",
        "decorative-blob-2": "bg-teal-200",
        "decorative-blob-3": "bg-lime-200",

        // Progress bars and steps
        "progress-bar-bg": "bg-gray-300",
        "progress-bar-fill": "bg-green-500",
        "step-inactive": "bg-gray-300",
        "step-inactive-text": "text-gray-600",
        "step-completed": "bg-emerald-500",
        "step-completed-line": "bg-emerald-500",

        // Search filter
        "search-bg": "bg-gray-50",
        "border-secondary": "border-gray-200",

        // Success states
        "success-bg": "bg-green-50",
        "success-border": "border-green-200",
        "success-text": "text-green-800",

        // Help page section colors
        "help-section-blue-text": "text-blue-600",
        "help-section-blue-bg": "bg-blue-50",
        "help-section-green-text": "text-green-600",
        "help-section-green-bg": "bg-green-50",
        "help-section-purple-text": "text-purple-600",
        "help-section-purple-bg": "bg-purple-50",
        "help-section-pink-text": "text-pink-600",
        "help-section-pink-bg": "bg-pink-50",
        "help-section-red-text": "text-red-600",
        "help-section-red-bg": "bg-red-50",

        // Export page section colors - Success (green)
        "export-section-success-bg": "bg-green-50",
        "export-section-success-border": "border-green-200",
        "export-section-success-icon": "text-green-600",
        "export-section-success-title": "text-green-900",
        "export-section-success-text": "text-green-800",
        "export-section-success-muted": "text-green-700",

        // Export page section colors - Info (blue)
        "export-section-info-bg": "bg-blue-50",
        "export-section-info-border": "border-blue-200",
        "export-section-info-icon": "text-blue-600",
        "export-section-info-title": "text-blue-900",
        "export-section-info-text": "text-blue-800",

        // Export page section colors - Warning (yellow)
        "export-section-warning-bg": "bg-yellow-50",
        "export-section-warning-border": "border-yellow-200",
        "export-section-warning-icon": "text-yellow-600",
        "export-section-warning-title": "text-yellow-900",
        "export-section-warning-text": "text-yellow-800",
        "export-section-warning-muted": "text-yellow-700",
        "export-section-warning-code": "bg-yellow-100",

        // Muted background
        "bg-muted": "bg-gray-50",
      },
    },

    [UIX_THEMES.CHARCOAL]: {
      name: "Charcoal Theme",
      classes: {
        // Primary button styles - using sophisticated charcoal tones
        "button-primary":
          "bg-slate-900 text-white hover:bg-slate-800 focus:ring-4 focus:ring-slate-500/20 border border-transparent shadow-sm hover:shadow-md",
        "button-secondary":
          "border border-gray-200 bg-white text-gray-700 hover:bg-gray-50 hover:shadow-md focus:ring-2 focus:ring-offset-2 focus:ring-slate-500 shadow-sm",
        "button-outline":
          "border-2 border-slate-300 bg-white text-slate-700 hover:bg-slate-50 hover:border-slate-400 focus:ring-2 focus:ring-offset-2 focus:ring-slate-500",
        "button-create":
          "bg-green-600 text-white hover:bg-green-700 focus:ring-4 focus:ring-green-500/20 border border-transparent shadow-sm hover:shadow-md",
        "button-success":
          "bg-green-600 text-white hover:bg-green-700 focus:ring-4 focus:ring-green-500/20 border border-transparent shadow-sm hover:shadow-md",
        "button-danger":
          "bg-red-600 text-white hover:bg-red-700 focus:ring-4 focus:ring-red-500/20 border border-transparent shadow-sm hover:shadow-md",
        "button-gradient":
          "border-transparent text-white shadow-lg hover:shadow-xl focus:ring-4 focus:ring-slate-500/20 transform hover:scale-105 font-bold",

        // Input and form styles
        "input-border":
          "border-gray-300 focus:border-slate-500 focus:ring-slate-500",
        "input-border-error":
          "border-red-500 focus:border-red-500 focus:ring-red-500",
        "input-focus-ring": "focus:ring-4 focus:ring-slate-500/20",

        // Table styles
        "table-header-bg": "bg-gradient-to-r from-slate-900 to-slate-950",
        "table-header-text": "text-white border-b border-slate-900",
        "table-row-hover": "hover:bg-slate-50",

        // Alert and notification styles
        "alert-info-bg": "bg-slate-50",
        "alert-info-text": "text-slate-800",
        "alert-info-border": "border-slate-200",
        "alert-info-icon": "text-slate-600",
        "alert-warning-bg": "bg-amber-50",
        "alert-warning-text": "text-amber-800",
        "alert-warning-border": "border-amber-200",
        "alert-error-bg": "bg-red-50",
        "alert-error-text": "text-red-800",
        "alert-error-border": "border-red-200",
        "alert-success-bg": "bg-green-50",
        "alert-success-text": "text-green-800",
        "alert-success-border": "border-green-200",
        "alert-info-hover": "hover:bg-slate-100",
        "alert-warning-hover": "hover:bg-amber-100",
        "alert-error-hover": "hover:bg-red-100",
        "alert-success-hover": "hover:bg-green-100",

        // Navigation and breadcrumb
        "breadcrumb-active": "text-slate-600",
        "breadcrumb-inactive": "text-gray-500 hover:text-slate-600",

        // Tabs
        "tab-active": "border-slate-500 text-slate-600",
        "tab-inactive":
          "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300",

        // Pagination
        "pagination-active": "bg-slate-700 text-white",
        "pagination-inactive":
          "text-gray-500 bg-white border border-gray-300 hover:bg-gray-100",

        // Checkbox and Radio
        "checkbox-focus": "text-slate-500 focus:ring-slate-500",
        "radio-focus": "text-slate-500 focus:ring-slate-500",

        // MultiSelect
        "multiselect-focus": "ring-2 ring-slate-500 border-slate-500",
        "multiselect-search-focus": "focus:ring-1 focus:ring-slate-500",
        "multiselect-selected-bg": "bg-slate-100",
        "multiselect-selected-text": "text-slate-800",
        "multiselect-selected-chip": "bg-slate-100 text-slate-800",
        "multiselect-selected-chip-hover": "hover:text-slate-900",
        "multiselect-option-selected": "bg-slate-50 text-slate-700",
        "multiselect-option-check": "text-slate-600",

        // Card and container styles
        "card-border": "border-slate-200",
        "card-header-bg": "bg-slate-50",
        "card-header-text": "text-slate-900",

        // Interactive elements
        "link-primary": "text-slate-600 hover:text-slate-800",
        "link-secondary": "text-slate-500 hover:text-slate-700",

        // Background gradients
        "bg-gradient-primary":
          "bg-gradient-to-br from-gray-50 via-white to-slate-50",
        "bg-gradient-secondary": "bg-gradient-to-r from-slate-900 to-slate-950",

        // Badge and status
        "badge-default": "bg-gray-100 text-gray-800",
        "badge-primary": "bg-slate-100 text-slate-800",
        "badge-secondary": "bg-slate-50 text-slate-600",
        "badge-success": "bg-green-100 text-green-800",
        "badge-warning": "bg-amber-100 text-amber-800",
        "badge-error": "bg-red-100 text-red-800",
        "badge-info": "bg-cyan-100 text-cyan-800",

        // Loading and progress
        "loading-spinner": "border-slate-600",
        "progress-bar": "bg-slate-600",
        "border-primary": "border-slate-600",

        // Focus and interaction states
        "focus-ring": "focus:ring-slate-500",
        "focus-border": "focus:border-slate-500",

        // ViewButton specific
        "view-button":
          "text-gray-800 bg-slate-50 hover:bg-slate-200 border-2 border-gray-800",

        // SelectButton specific - charcoal theme colors
        "select-button":
          "bg-slate-900 text-white hover:bg-slate-800 border border-slate-900 hover:border-slate-800 focus:ring-4 focus:ring-slate-500/20 shadow-sm hover:shadow-md",

        // SearchFilter specific
        "search-clear-button":
          "text-slate-600 hover:text-slate-800 bg-slate-50 hover:bg-slate-100",
        "search-refresh-button":
          "text-slate-600 hover:text-slate-800 bg-slate-50 hover:bg-slate-100",

        // ActionCard specific - charcoal color that complements theme
        "action-card": "bg-slate-700 text-white hover:bg-slate-600",
        "action-card-delete": "bg-red-600 text-white hover:bg-red-700",

        // Text and background theme classes
        "text-primary": "text-gray-900",
        "text-secondary": "text-gray-600",
        "text-muted": "text-gray-400",
        "text-danger": "text-red-600",
        "text-error": "text-red-700",
        "text-warning": "text-amber-700",
        "text-success": "text-green-700",
        "bg-card": "bg-white",
        "bg-disabled": "bg-gray-50",
        "bg-page": "bg-white",

        // Icon colors
        "icon-success": "text-green-600",
        "icon-info": "text-slate-600",
        "icon-warning": "text-amber-600",
        "icon-privacy": "text-gray-600",
        "icon-featured": "text-zinc-600",
        "icon-sparkles": "text-yellow-500",
        "icon-trending": "text-green-500",

        // File type icon colors
        "file-icon-pdf": "text-red-600",
        "file-icon-doc": "text-slate-600",
        "file-icon-design": "text-gray-600",
        "file-icon-default": "text-gray-600",

        // Dashboard stat card colors
        "stat-files-gradient": "bg-gradient-to-r from-slate-600 to-slate-700",
        "stat-files-bg": "bg-slate-50",
        "stat-files-text": "text-slate-700",
        "stat-folders-gradient": "bg-gradient-to-r from-gray-600 to-gray-700",
        "stat-folders-bg": "bg-gray-50",
        "stat-folders-text": "text-gray-700",
        "stat-storage-gradient": "bg-gradient-to-r from-green-600 to-green-700",
        "stat-storage-bg": "bg-green-50",
        "stat-storage-text": "text-green-700",

        // Chart colors
        "chart-primary": "#475569",
        "chart-primary-light": "#64748b",

        // Pill/Chip colors
        "pill-bg": "bg-gradient-to-r from-slate-100 to-slate-200",
        "pill-text": "text-slate-800",
        "pill-border": "border-slate-200",

        // DatePicker states
        "datepicker-selected": "bg-slate-600 text-white hover:bg-slate-700",
        "datepicker-today": "bg-slate-100 text-slate-800 hover:bg-slate-200",
        "datepicker-focus": "border-slate-500 ring-4 ring-slate-500/20",

        // Decorative background elements
        "decorative-primary": "bg-slate-200",
        "decorative-secondary": "bg-gray-200",
        "decorative-accent": "bg-zinc-200",
        "decorative-blob-1": "bg-slate-200",
        "decorative-blob-2": "bg-gray-200",
        "decorative-blob-3": "bg-zinc-200",

        // Progress bars and steps
        "progress-bar-bg": "bg-gray-300",
        "progress-bar-fill": "bg-slate-500",
        "step-inactive": "bg-gray-300",
        "step-inactive-text": "text-gray-600",
        "step-completed": "bg-green-500",
        "step-completed-line": "bg-green-500",

        // Search filter
        "search-bg": "bg-gray-50",
        "border-secondary": "border-gray-200",

        // Success states
        "success-bg": "bg-green-50",
        "success-border": "border-green-200",
        "success-text": "text-green-800",

        // Help page section colors
        "help-section-blue-text": "text-blue-600",
        "help-section-blue-bg": "bg-blue-50",
        "help-section-green-text": "text-green-600",
        "help-section-green-bg": "bg-green-50",
        "help-section-purple-text": "text-purple-600",
        "help-section-purple-bg": "bg-purple-50",
        "help-section-pink-text": "text-pink-600",
        "help-section-pink-bg": "bg-pink-50",
        "help-section-red-text": "text-red-600",
        "help-section-red-bg": "bg-red-50",

        // Export page section colors - Success (green)
        "export-section-success-bg": "bg-green-50",
        "export-section-success-border": "border-green-200",
        "export-section-success-icon": "text-green-600",
        "export-section-success-title": "text-green-900",
        "export-section-success-text": "text-green-800",
        "export-section-success-muted": "text-green-700",

        // Export page section colors - Info (blue)
        "export-section-info-bg": "bg-blue-50",
        "export-section-info-border": "border-blue-200",
        "export-section-info-icon": "text-blue-600",
        "export-section-info-title": "text-blue-900",
        "export-section-info-text": "text-blue-800",

        // Export page section colors - Warning (yellow)
        "export-section-warning-bg": "bg-yellow-50",
        "export-section-warning-border": "border-yellow-200",
        "export-section-warning-icon": "text-yellow-600",
        "export-section-warning-title": "text-yellow-900",
        "export-section-warning-text": "text-yellow-800",
        "export-section-warning-muted": "text-yellow-700",
        "export-section-warning-code": "bg-yellow-100",

        // Muted background
        "bg-muted": "bg-gray-50",
      },
    },
  };

  return _themeConfigCache;
};

// Use a getter to access theme configs
export const UIX_THEME_CONFIGS = new Proxy(
  {},
  {
    get: function (target, prop) {
      const configs = getThemeConfigs();
      return configs[prop];
    },
    ownKeys: function () {
      return Object.values(UIX_THEMES);
    },
    has: function (target, prop) {
      return Object.values(UIX_THEMES).includes(prop);
    },
    getOwnPropertyDescriptor: function (target, prop) {
      if (Object.values(UIX_THEMES).includes(prop)) {
        return {
          enumerable: true,
          configurable: true,
          value: getThemeConfigs()[prop],
        };
      }
    },
  },
);

// Default theme
export const DEFAULT_UIX_THEME = UIX_THEMES.RED;

// Cache for getUIXThemeClasses
const themeClassesCache = new Map();
const CACHE_SIZE_LIMIT = 1000;

// Helper function to get theme classes with caching
export const getUIXThemeClasses = (themeName, classKey) => {
  const cacheKey = `${themeName}-${classKey}`;

  // Return from cache if available
  if (themeClassesCache.has(cacheKey)) {
    return themeClassesCache.get(cacheKey);
  }

  const theme =
    UIX_THEME_CONFIGS[themeName] || UIX_THEME_CONFIGS[DEFAULT_UIX_THEME];
  const value = theme.classes[classKey] || "";

  // Cache the result
  themeClassesCache.set(cacheKey, value);

  // Implement LRU cache eviction
  if (themeClassesCache.size > CACHE_SIZE_LIMIT) {
    const firstKey = themeClassesCache.keys().next().value;
    themeClassesCache.delete(firstKey);
  }

  return value;
};

// Helper function to check if theme exists
export const isValidUIXTheme = (themeName) => {
  return Object.values(UIX_THEMES).includes(themeName);
};

// Clear cache function for testing or memory management
export const clearThemeCache = () => {
  themeClassesCache.clear();
  _themeConfigCache = null;
};
