/**
 * Module Color Configuration
 * Single source of truth for module-specific colors throughout the UI
 * 
 * DESIGN SYSTEM: All colors reference CSS variables from design-system.css
 * This ensures consistency with the design system.
 * 
 * Module Color Assignments (Updated Jan 3, 2026):
 * 
 * PLANNER PIPELINE: Blue → Pink → Amber
 * - Keywords: primary (blue #3B82F6)
 * - Clusters: purple (pink #F63B82)
 * - Ideas: warning (amber #F59E0B)
 * 
 * WRITER PIPELINE: Navy → Blue → Green
 * - Tasks: gray-base (navy #031D48)
 * - Content: primary (blue #3B82F6)
 * - Images: purple (pink #F63B82)
 * - Review: warning (amber #F59E0B)
 * - Approved/Published: success (green #10B981)
 * 
 * These colors should be used consistently across:
 * - Module icons
 * - Progress bars
 * - Metric cards
 * - Badges
 * - Chart segments
 */

/**
 * CSS Variable names for colors - reference design-system.css
 * Use getCSSColor() to get the computed value at runtime
 */
export const CSS_VAR_COLORS = {
  primary: '--color-primary',
  primaryDark: '--color-primary-dark',
  success: '--color-success',
  successDark: '--color-success-dark',
  warning: '--color-warning',
  warningDark: '--color-warning-dark',
  danger: '--color-danger',
  dangerDark: '--color-danger-dark',
  purple: '--color-purple',
  purpleDark: '--color-purple-dark',
  grayBase: '--color-gray-base',
  grayDark: '--color-gray-dark',
} as const;

/**
 * Get computed CSS variable value at runtime
 */
export function getCSSColor(varName: string): string {
  if (typeof window === 'undefined') return '';
  return getComputedStyle(document.documentElement).getPropertyValue(varName).trim();
}

export const MODULE_COLORS = {
  // Planner Module
  keywords: {
    bg: 'bg-brand-500',
    bgLight: 'bg-brand-50',
    text: 'text-brand-500',
    textDark: 'text-brand-600',
    border: 'border-brand-500',
    gradient: 'from-brand-500 to-brand-600',
    cssVar: CSS_VAR_COLORS.primary,
  },
  clusters: {
    bg: 'bg-purple-500',
    bgLight: 'bg-purple-50',
    text: 'text-purple-500',
    textDark: 'text-purple-600',
    border: 'border-purple-500',
    gradient: 'from-purple-500 to-purple-600',
    cssVar: CSS_VAR_COLORS.purple,
  },
  ideas: {
    bg: 'bg-warning-500',
    bgLight: 'bg-warning-50',
    text: 'text-warning-500',
    textDark: 'text-warning-600',
    border: 'border-warning-500',
    gradient: 'from-warning-500 to-warning-600',
    cssVar: CSS_VAR_COLORS.warning,
  },

  // Writer Module
  tasks: {
    bg: 'bg-gray-dark',
    bgLight: 'bg-gray-100',
    text: 'text-gray-dark',
    textDark: 'text-gray-900',
    border: 'border-gray-dark',
    gradient: 'from-gray-700 to-gray-900',
    cssVar: CSS_VAR_COLORS.grayBase,
  },
  content: {
    bg: 'bg-brand-500',
    bgLight: 'bg-brand-50',
    text: 'text-brand-500',
    textDark: 'text-brand-600',
    border: 'border-brand-500',
    gradient: 'from-brand-500 to-brand-600',
    cssVar: CSS_VAR_COLORS.primary,
  },
  images: {
    bg: 'bg-purple-500',
    bgLight: 'bg-purple-50',
    text: 'text-purple-500',
    textDark: 'text-purple-600',
    border: 'border-purple-500',
    gradient: 'from-purple-500 to-purple-600',
    cssVar: CSS_VAR_COLORS.purple,
  },
  review: {
    bg: 'bg-warning-500',
    bgLight: 'bg-warning-50',
    text: 'text-warning-500',
    textDark: 'text-warning-600',
    border: 'border-warning-500',
    gradient: 'from-warning-500 to-warning-600',
    cssVar: CSS_VAR_COLORS.warning,
  },
  approved: {
    bg: 'bg-success-500',
    bgLight: 'bg-success-50',
    text: 'text-success-500',
    textDark: 'text-success-600',
    border: 'border-success-500',
    gradient: 'from-success-500 to-success-600',
    cssVar: CSS_VAR_COLORS.success,
  },
  published: {
    bg: 'bg-success-500',
    bgLight: 'bg-success-50',
    text: 'text-success-500',
    textDark: 'text-success-600',
    border: 'border-success-500',
    gradient: 'from-success-500 to-success-600',
    cssVar: CSS_VAR_COLORS.success,
  },

  // Automation & Dashboard
  automation: {
    bg: 'bg-brand-500',
    bgLight: 'bg-brand-50',
    text: 'text-brand-500',
    textDark: 'text-brand-600',
    border: 'border-brand-500',
    gradient: 'from-brand-500 to-brand-600',
    cssVar: CSS_VAR_COLORS.primary,
  },
  dashboard: {
    bg: 'bg-brand-500',
    bgLight: 'bg-brand-50',
    text: 'text-brand-500',
    textDark: 'text-brand-600',
    border: 'border-brand-500',
    gradient: 'from-brand-500 to-brand-600',
    cssVar: CSS_VAR_COLORS.primary,
  },

  // Billing / Credits
  billing: {
    bg: 'bg-warning-500',
    bgLight: 'bg-warning-50',
    text: 'text-warning-500',
    textDark: 'text-warning-600',
    border: 'border-warning-500',
    gradient: 'from-warning-500 to-warning-600',
    cssVar: CSS_VAR_COLORS.warning,
  },
  credits: {
    bg: 'bg-warning-500',
    bgLight: 'bg-warning-50',
    text: 'text-warning-500',
    textDark: 'text-warning-600',
    border: 'border-warning-500',
    gradient: 'from-warning-500 to-warning-600',
    cssVar: CSS_VAR_COLORS.warning,
  },

  // Status Colors
  success: {
    bg: 'bg-success-500',
    bgLight: 'bg-success-50',
    text: 'text-success-500',
    textDark: 'text-success-600',
    border: 'border-success-500',
    gradient: 'from-success-500 to-success-600',
    cssVar: CSS_VAR_COLORS.success,
  },
  error: {
    bg: 'bg-error-500',
    bgLight: 'bg-error-50',
    text: 'text-error-500',
    textDark: 'text-error-600',
    border: 'border-error-500',
    gradient: 'from-error-500 to-error-600',
    cssVar: CSS_VAR_COLORS.danger,
  },
  warning: {
    bg: 'bg-warning-500',
    bgLight: 'bg-warning-50',
    text: 'text-warning-500',
    textDark: 'text-warning-600',
    border: 'border-warning-500',
    gradient: 'from-warning-500 to-warning-600',
    cssVar: CSS_VAR_COLORS.warning,
  },
} as const;

/**
 * Pipeline colors for module stats widgets.
 * Uses CSS variables for consistency with design system.
 * Call getCSSColor() to get the computed value at runtime.
 * 
 * Planner Pipeline: Blue → Pink → Amber
 * Writer Pipeline: Navy → Blue → Green
 */
export const PIPELINE_COLORS = {
  // Planner: Keywords(primary/blue) → Clusters(purple/pink) → Ideas(warning/amber)
  planner: [CSS_VAR_COLORS.primary, CSS_VAR_COLORS.purple, CSS_VAR_COLORS.warning],
  // Writer: Tasks(grayBase/navy) → Content(primary/blue) → Published(success/green)
  writer: [CSS_VAR_COLORS.grayBase, CSS_VAR_COLORS.primary, CSS_VAR_COLORS.success],
} as const;

/**
 * Get pipeline colors as computed CSS values for inline styles
 */
export function getPipelineColors(module: 'planner' | 'writer'): string[] {
  return PIPELINE_COLORS[module].map(varName => getCSSColor(varName) || `var(${varName})`);
}

/**
 * Workflow completion widget colors - CSS variable names
 * 
 * Planner: Blue → Pink → Amber
 * Writer: Navy → Blue → Green
 */
export const WORKFLOW_COLORS = {
  planner: {
    keywordsClustered: CSS_VAR_COLORS.primary,    // Blue
    clustersCreated: CSS_VAR_COLORS.purple,       // Pink
    ideasGenerated: CSS_VAR_COLORS.warning,       // Amber
  },
  writer: {
    tasksCreated: CSS_VAR_COLORS.grayBase,        // Navy
    contentPages: CSS_VAR_COLORS.primary,         // Blue
    imagesCreated: CSS_VAR_COLORS.purple,         // Purple for images
    pagesPublished: CSS_VAR_COLORS.success,       // Green
  },
} as const;

/**
 * Get balanced color sequence for multiple elements
 * Ensures no more than 2 consecutive items share the same color family
 */
export const BALANCED_COLOR_SEQUENCE = [
  MODULE_COLORS.keywords,    // primary/blue
  MODULE_COLORS.clusters,    // purple/pink
  MODULE_COLORS.tasks,       // gray/navy
  MODULE_COLORS.content,     // primary/blue
  MODULE_COLORS.ideas,       // warning/amber
] as const;

/**
 * Get module color by name
 */
export function getModuleColor(module: keyof typeof MODULE_COLORS) {
  return MODULE_COLORS[module];
}

/**
 * Get a color from the balanced sequence by index
 * Cycles through to ensure visual balance
 */
export function getBalancedColor(index: number) {
  return BALANCED_COLOR_SEQUENCE[index % BALANCED_COLOR_SEQUENCE.length];
}

/**
 * Get the CSS variable value for a module color
 */
export function getModuleCSSColor(module: keyof typeof MODULE_COLORS): string {
  const color = MODULE_COLORS[module];
  return getCSSColor(color.cssVar) || `var(${color.cssVar})`;
}

export type ModuleColorKey = keyof typeof MODULE_COLORS;
export type ModuleColor = typeof MODULE_COLORS[ModuleColorKey];