/**
 * Dashboard Design Tokens
 *
 * Centralized styling constants for consistent dashboard appearance.
 * These tokens are divided into two categories:
 *
 * 1. STRUCTURAL - Visual consistency (safe to change)
 * 2. SEMANTIC - Convey meaning (preserve carefully)
 */

// =============================================================================
// STRUCTURAL TOKENS - Visual consistency across components
// =============================================================================

/**
 * Standard card styling classes
 * Uses the glass effect by default for dashboard cards
 */
export const CARD_STYLES = {
  /** Base card appearance with glass effect (default for dashboard) */
  base: "card-glass",
  /** Elevated card for primary/featured sections (Sales, Financial) */
  elevated: "card-glass shadow-lg",
  /** Subtle card for secondary/supporting content */
  subtle: "card-glass bg-card-glass/40",
  /** Accent card with subtle ring highlight */
  accent: "card-glass ring-1 ring-primary/10",
  /** Card with subtle hover effect */
  interactive: "card-glass transition-all duration-200 ease-out hover:shadow-md hover:scale-[1.01]",
  /** Solid card without glass effect (use sparingly) */
  solid: "bg-card border border-border/50 shadow-sm rounded-xl",
  /** Card header layout */
  header: "flex flex-row items-center justify-between p-4 pb-0",
  /** Compact header for stat cards */
  headerCompact: "flex flex-row items-center justify-between px-4 pt-4 pb-2",
  /** Card content area */
  content: "p-3 pt-0",
  /** Card content with extra bottom padding */
  contentPadded: "p-3 pt-0 pb-4",
} as const;

/**
 * Typography scale for dashboard elements
 */
export const TYPOGRAPHY = {
  /** Card/section titles */
  cardTitle: "text-xs font-medium text-muted-foreground uppercase tracking-wide",
  /** Primary metric values */
  cardValue: "text-lg font-semibold tracking-tight",
  /** Large hero metrics (real-time, attention-grabbing) */
  cardValueLarge: "text-lg font-bold tracking-tight",
  /** Hero stat value (extra large prominent numbers) */
  cardValueHero: "text-xl font-bold tracking-tighter",
  /** Small metric values */
  cardValueSmall: "text-lg font-semibold tracking-tight",
  /** Supporting descriptions */
  cardDescription: "text-xs text-muted-foreground",
  /** Section headings within cards */
  sectionTitle: "text-base font-semibold",
  /** Table headers */
  tableHeader: "text-xs font-medium text-muted-foreground uppercase tracking-wider",
  /** Table cells */
  tableCell: "text-sm",
  /** Small labels */
  label: "text-xs font-medium text-muted-foreground",
  /** Micro labels for dense data displays */
  microLabel: "text-[10px] font-medium text-muted-foreground uppercase tracking-widest",
} as const;

/**
 * Spacing and layout constants
 */
export const SPACING = {
  /** Gap between cards in a grid */
  cardGap: "gap-4",
  /** Standard card padding */
  cardPadding: "p-4",
  /** Inner content spacing */
  contentGap: "space-y-4",
  /** Tight content spacing */
  contentGapTight: "space-y-2",
} as const;

/**
 * Border radius tokens
 */
export const RADIUS = {
  card: "rounded-xl",
  button: "rounded-lg",
  badge: "rounded-full",
  input: "rounded-md",
} as const;

/**
 * Motion and animation tokens for polished interactions
 */
export const MOTION = {
  /** Standard card hover transition */
  cardHover: "transition-all duration-200 ease-out",
  /** Value change animation (numbers, colors) */
  valueChange: "transition-[color,transform] duration-300",
  /** Fade in animation */
  fadeIn: "animate-in fade-in duration-300",
  /** Slide up and fade in */
  slideUp: "animate-in slide-in-from-bottom-2 fade-in duration-300",
  /** Quick micro-interaction */
  quick: "transition-all duration-150 ease-out",
  /** Smooth state change */
  smooth: "transition-all duration-300 ease-in-out",
} as const;

/**
 * Scrollable container styling
 * Uses the dashboard-scroll utility class defined in index.css
 */
export const SCROLL_STYLES = {
  /** Standard scrollable container with custom scrollbar */
  container: "dashboard-scroll",
  /** Scrollable with max height variants */
  sm: "dashboard-scroll max-h-[300px]",
  md: "dashboard-scroll max-h-[400px]",
  lg: "dashboard-scroll max-h-[540px]",
  xl: "dashboard-scroll max-h-[700px]",
} as const;

// =============================================================================
// SEMANTIC TOKENS - Colors that convey meaning (preserve carefully!)
// =============================================================================

/**
 * Trend indicator colors
 * Used for showing positive/negative changes
 * Uses CSS variables for consistency (see index.css)
 */
export const TREND_COLORS = {
  positive: {
    text: "text-trend-positive",
    bg: "bg-trend-positive-muted",
    border: "border-trend-positive/20",
  },
  negative: {
    text: "text-trend-negative",
    bg: "bg-trend-negative-muted",
    border: "border-trend-negative/20",
  },
  neutral: {
    text: "text-muted-foreground",
    bg: "bg-muted",
    border: "border-border",
  },
} as const;

/**
 * Event type colors - PRESERVE THESE
 * Each color has semantic meaning for quick visual recognition
 */
export const EVENT_COLORS = {
  orderPlaced: {
    bg: "bg-emerald-500 dark:bg-emerald-600",
    text: "text-emerald-600 dark:text-emerald-400",
    bgSubtle: "bg-emerald-500/10",
  },
  orderShipped: {
    bg: "bg-blue-500 dark:bg-blue-600",
    text: "text-blue-600 dark:text-blue-400",
    bgSubtle: "bg-blue-500/10",
  },
  newAccount: {
    bg: "bg-purple-500 dark:bg-purple-600",
    text: "text-purple-600 dark:text-purple-400",
    bgSubtle: "bg-purple-500/10",
  },
  orderCanceled: {
    bg: "bg-red-500 dark:bg-red-600",
    text: "text-red-600 dark:text-red-400",
    bgSubtle: "bg-red-500/10",
  },
  paymentRefunded: {
    bg: "bg-orange-500 dark:bg-orange-600",
    text: "text-orange-600 dark:text-orange-400",
    bgSubtle: "bg-orange-500/10",
  },
  blogPost: {
    bg: "bg-indigo-500 dark:bg-indigo-600",
    text: "text-indigo-600 dark:text-indigo-400",
    bgSubtle: "bg-indigo-500/10",
  },
} as const;

/**
 * Financial chart colors - PRESERVE THESE
 * Follow accounting visualization conventions
 */
export const FINANCIAL_COLORS = {
  income: "#3b82f6",      // Blue - Revenue streams
  expense: "#f97316",     // Orange - Costs/Expenses (COGS)
  profit: "#10b981",      // Green - Positive financial outcome
  margin: "#8b5cf6",      // Purple - Percentage metrics
} as const;

/**
 * Standard metric colors for charts
 * Used across multiple dashboard components
 *
 * For CSS/Tailwind classes, use: text-chart-revenue, bg-chart-orders, etc.
 * For Recharts/JS, use these hex values directly.
 *
 * IMPORTANT: These MUST match the CSS variables in index.css
 */
export const METRIC_COLORS = {
  revenue: "#059669",     // Emerald-600 - Primary positive metric, deeper professional tone
  orders: "#2563eb",      // Blue-600 - Count/volume metrics, richer blue
  aov: "#7c3aed",         // Violet-600 - Calculated/derived metrics, deeper purple
  comparison: "#d97706",  // Amber-600 - Previous period comparison, warmer amber
  expense: "#ea580c",     // Orange-600 - Costs/expenses, less neon
  profit: "#16a34a",      // Green-600 - Profit metrics, professional green
  secondary: "#0891b2",   // Cyan-600 - Secondary metrics, deeper cyan
  tertiary: "#db2777",    // Pink-600 - Tertiary metrics, richer pink
} as const;

/**
 * Metric colors as HSL for CSS variable compatibility
 * Use these when you need HSL format (e.g., for opacity variations)
 */
export const METRIC_COLORS_HSL = {
  revenue: "hsl(var(--chart-revenue))",
  orders: "hsl(var(--chart-orders))",
  aov: "hsl(var(--chart-aov))",
  comparison: "hsl(var(--chart-comparison))",
  expense: "hsl(var(--chart-expense))",
  profit: "hsl(var(--chart-profit))",
  secondary: "hsl(var(--chart-secondary))",
  tertiary: "hsl(var(--chart-tertiary))",
} as const;

/**
 * Status indicator colors
 */
export const STATUS_COLORS = {
  success: {
    text: "text-emerald-600 dark:text-emerald-400",
    bg: "bg-emerald-500/10",
    border: "border-emerald-500/20",
    icon: "text-emerald-500",
  },
  warning: {
    text: "text-amber-600 dark:text-amber-400",
    bg: "bg-amber-500/10",
    border: "border-amber-500/20",
    icon: "text-amber-500",
  },
  error: {
    text: "text-red-600 dark:text-red-400",
    bg: "bg-red-500/10",
    border: "border-red-500/20",
    icon: "text-red-500",
  },
  info: {
    text: "text-blue-600 dark:text-blue-400",
    bg: "bg-blue-500/10",
    border: "border-blue-500/20",
    icon: "text-blue-500",
  },
} as const;

// =============================================================================
// COMPONENT-SPECIFIC TOKENS
// =============================================================================

/**
 * Stat card icon styling
 */
export const STAT_ICON_STYLES = {
  container: "p-2 rounded-full",
  icon: "h-4 w-4",
  // Color variants for icons
  colors: {
    emerald: {
      container: "bg-emerald-500/10",
      icon: "text-emerald-600 dark:text-emerald-400",
    },
    green: {
      container: "bg-green-500/10",
      icon: "text-green-600 dark:text-green-400",
    },
    blue: {
      container: "bg-blue-500/10",
      icon: "text-blue-600 dark:text-blue-400",
    },
    purple: {
      container: "bg-purple-500/10",
      icon: "text-purple-600 dark:text-purple-400",
    },
    amber: {
      container: "bg-amber-500/10",
      icon: "text-amber-600 dark:text-amber-400",
    },
    yellow: {
      container: "bg-yellow-500/10",
      icon: "text-yellow-600 dark:text-yellow-400",
    },
    orange: {
      container: "bg-orange-500/10",
      icon: "text-orange-600 dark:text-orange-400",
    },
    red: {
      container: "bg-red-500/10",
      icon: "text-red-600 dark:text-red-400",
    },
    rose: {
      container: "bg-rose-500/10",
      icon: "text-rose-600 dark:text-rose-400",
    },
    pink: {
      container: "bg-pink-500/10",
      icon: "text-pink-600 dark:text-pink-400",
    },
    teal: {
      container: "bg-teal-500/10",
      icon: "text-teal-600 dark:text-teal-400",
    },
    cyan: {
      container: "bg-cyan-500/10",
      icon: "text-cyan-600 dark:text-cyan-400",
    },
    indigo: {
      container: "bg-indigo-500/10",
      icon: "text-indigo-600 dark:text-indigo-400",
    },
    violet: {
      container: "bg-violet-500/10",
      icon: "text-violet-600 dark:text-violet-400",
    },
    lime: {
      container: "bg-lime-500/10",
      icon: "text-lime-600 dark:text-lime-400",
    },
  },
} as const;

/**
 * Table styling tokens
 */
export const TABLE_STYLES = {
  container: "rounded-lg border border-border/50 overflow-hidden",
  header: "bg-muted/30",
  headerCell: "text-xs font-medium text-muted-foreground uppercase tracking-wider",
  row: "border-b border-border/50 last:border-0",
  rowHover: "hover:bg-muted/50 transition-colors",
  cell: "text-sm",
  cellNumeric: "text-sm tabular-nums text-right",
} as const;

/**
 * Badge styling tokens
 */
export const BADGE_STYLES = {
  base: "inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium",
  variants: {
    default: "bg-muted text-muted-foreground",
    success: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
    warning: "bg-amber-500/10 text-amber-600 dark:text-amber-400",
    error: "bg-red-500/10 text-red-600 dark:text-red-400",
    info: "bg-blue-500/10 text-blue-600 dark:text-blue-400",
  },
} as const;

// =============================================================================
// UTILITY FUNCTIONS
// =============================================================================

/**
 * Get trend color based on direction and whether more is better
 */
export function getTrendColor(
  value: number,
  moreIsBetter: boolean = true
): typeof TREND_COLORS.positive | typeof TREND_COLORS.negative | typeof TREND_COLORS.neutral {
  if (value === 0) return TREND_COLORS.neutral;
  const isPositive = value > 0;
  const isGood = isPositive === moreIsBetter;
  return isGood ? TREND_COLORS.positive : TREND_COLORS.negative;
}

/**
 * Get icon color variant by name
 */
export function getIconColorVariant(
  color: keyof typeof STAT_ICON_STYLES.colors
) {
  return STAT_ICON_STYLES.colors[color] || STAT_ICON_STYLES.colors.blue;
}
