/**
 * 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 quiet solid surfaces so dense dashboard data stays visually organized.
 */
export const CARD_STYLES = {
  /** Base card appearance (Sorbet Studio: white panel, warm border, 14px radius) */
  base: "bg-card border border-border shadow-[0_1px_2px_rgba(43,41,37,.04)] rounded-[14px]",
  /** Elevated card for primary/featured sections (Sales, Financial) */
  elevated: "bg-card border border-border shadow-[0_1px_2px_rgba(43,41,37,.04)] rounded-[14px]",
  /** Subtle card for secondary/supporting content */
  subtle: "bg-surface-subtle border border-muted rounded-[12px]",
  /** Accent card with subtle ring highlight */
  accent: "bg-card border border-coral/25 shadow-[0_1px_2px_rgba(43,41,37,.04)] rounded-[14px]",
  /** Card with subtle hover effect */
  interactive: "bg-card border border-border shadow-[0_1px_2px_rgba(43,41,37,.04)] rounded-[14px] transition-colors duration-150 hover:border-[#d8d4cd] hover:bg-surface-subtle",
  /** Solid card without glass effect (use sparingly) */
  solid: "bg-card border border-border shadow-[0_1px_2px_rgba(43,41,37,.04)] rounded-[14px]",
  /** Card header layout */
  header: "flex flex-row items-center justify-between p-3.5 pb-0",
  /** Compact header for stat cards */
  headerCompact: "flex flex-row items-center justify-between px-3.5 pt-3.5 pb-1.5",
  /** Card content area */
  content: "px-3.5 pb-3.5 pt-0",
  /** Card content with extra bottom padding */
  contentPadded: "px-3.5 pb-3.5 pt-0",
} as const;

/**
 * Typography scale for dashboard elements
 */
export const TYPOGRAPHY = {
  /** Card/section titles */
  cardTitle: "text-[11px] font-medium text-muted-foreground uppercase tracking-wide",
  /** Primary metric values */
  cardValue: "text-xl font-semibold tracking-tight tabular-nums",
  /** Large hero metrics (real-time, attention-grabbing) */
  cardValueLarge: "text-2xl font-semibold tracking-tight tabular-nums",
  /** 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-sm font-semibold tracking-tight",
  /** 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-3",
  /** Standard card padding */
  cardPadding: "p-3.5",
  /** Inner content spacing */
  contentGap: "space-y-3",
  /** Tight content spacing */
  contentGapTight: "space-y-2",
} as const;

/**
 * Border radius tokens
 */
export const RADIUS = {
  card: "rounded-lg",
  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: "#e06a4e",      // Coral - Revenue streams (Studio primary)
  expense: "#92680c",     // Dark gold - Costs/Expenses (COGS); deeper than the AOV amber, validated vs coral
  profit: "#0f8f77",      // Teal - Positive financial outcome
  margin: "#6b5fc7",      // Violet - 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: "#e06a4e",     // Studio coral - primary metric / working accent
  orders: "#6b5fc7",      // Studio violet - count/volume metrics
  aov: "#a87a24",         // Studio amber - calculated/derived metrics
  comparison: "#0f8f77",  // Studio teal - previous period (always dashed)
  expense: "#92680c",     // Dark gold - costs/expenses (matches FINANCIAL_COLORS.expense)
  profit: "#2e8f5b",      // Green - profit metrics
  secondary: "#3f7fae",   // Slate blue - secondary metrics
  tertiary: "#c94f76",    // Berry - tertiary metrics
} 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;

/**
 * Sorbet Studio tokens (2026-07 redesign, applied section by section)
 *
 * Working accent is coral, second data hue is teal; pastel tile fills carry
 * per-metric identity with a deeper "spark" tone for the sparkline drawn on
 * each fill. Chart hues validated for lightness/chroma/CVD/contrast on light
 * surfaces; prev-period series must stay dashed (that's their secondary
 * encoding — do not encode "previous" with color alone).
 */
export const STUDIO_COLORS = {
  ground: "#f8f7f5",
  border: "#e7e5e1",
  ink: "#2b2925",
  muted: "#7c7870",
  coral: "#e06a4e",     // working accent + revenue series
  teal: "#0f8f77",      // second data hue + prev-revenue (dashed)
  violet: "#6b5fc7",    // orders series
  amber: "#a87a24",     // AOV series
  up: "#237a4d",
  down: "#b3503f",
} as const;

/** Pastel tile fills with their matching sparkline tones (≥3.3:1 on fill) */
export const STUDIO_TILES = {
  peach: { fill: "#fbe7de", spark: "#c94f35", sparkFill: "rgba(201,79,53,.14)" },
  mint: { fill: "#ddf0ea", spark: "#0f8f77", sparkFill: "rgba(15,143,119,.12)" },
  lemon: { fill: "#faf0d7", spark: "#a87a24", sparkFill: "rgba(168,122,36,.12)" },
  lilac: { fill: "#eae6f6", spark: "#6b5fc7", sparkFill: "rgba(107,95,199,.12)" },
} 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-md",
  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-xl border border-muted overflow-hidden",
  header: "bg-surface-subtle",
  headerCell: "text-[10.5px] font-semibold text-muted-foreground/75 uppercase tracking-wide",
  row: "border-b border-muted last:border-0",
  rowHover: "hover:bg-surface-subtle transition-colors",
  cell: "text-xs",
  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;
}
