import { useTheme } from '../../../contexts/ThemeContext';
import { useMemo } from 'react';

interface CanvasColors {
  /** Stage / canvas background */
  readonly canvasBg: string;
  /** Highlighted canvas background (e.g. drag-over) */
  readonly canvasBgHighlight: string;

  /** Thin grid lines */
  readonly gridLine: string;
  /** Major (1 m) grid lines */
  readonly gridLineMajor: string;

  /** Ruler background strip */
  readonly rulerBg: string;
  /** Ruler text & ticks */
  readonly rulerText: string;

  /** Wall projection fill */
  readonly wallFill: string;
  /** Wall projection stroke */
  readonly wallStroke: string;

  /** Dimension / measurement lines */
  readonly dimensionLine: string;
  /** Dimension label text */
  readonly dimensionText: string;
  /** Coordinate-label pill background */
  readonly coordLabelBg: string;
  /** Coordinate-label pill text */
  readonly coordLabelText: string;

  /** Electrical symbol stroke (unselected) */
  readonly electricalStroke: string;
  /** Electrical symbol fill (unselected) */
  readonly electricalFill: string;
  /** Electrical type label text */
  readonly electricalLabel: string;

  /** Selected element stroke (shared) */
  readonly selectedStroke: string;
  /** Selected element fill (shared) */
  readonly selectedFill: string;
  /** Selected element text */
  readonly selectedText: string;

  /** Furniture default stroke */
  readonly furnitureStroke: string;
  /** Furniture default label text */
  readonly furnitureText: string;

  /** Opening position label text */
  readonly openingLabel: string;
}

const LIGHT: CanvasColors = {
  canvasBg: '#ffffff',
  canvasBgHighlight: '#eff6ff',

  gridLine: '#e2e8f0',
  gridLineMajor: '#cbd5e1',

  rulerBg: '#f5f5f5',
  rulerText: '#666666',

  wallFill: '#f8fafc',
  wallStroke: '#334155',

  dimensionLine: '#94a3b8',
  dimensionText: '#64748b',
  coordLabelBg: 'rgba(255, 255, 255, 0.85)',
  coordLabelText: '#475569',

  electricalStroke: '#64748b',
  electricalFill: '#f1f5f9',
  electricalLabel: '#94a3b8',

  selectedStroke: '#2563eb',
  selectedFill: '#dbeafe',
  selectedText: '#1e40af',

  furnitureStroke: '#6b5b3a',
  furnitureText: '#3b2f1e',

  openingLabel: '#94a3b8',
};

const DARK: CanvasColors = {
  canvasBg: '#1a1b1e',
  canvasBgHighlight: '#1e2a3a',

  gridLine: '#2e3038',
  gridLineMajor: '#3a3d46',

  rulerBg: '#25262b',
  rulerText: '#909296',

  wallFill: '#2c2e33',
  wallStroke: '#a0aec0',

  dimensionLine: '#64748b',
  dimensionText: '#94a3b8',
  coordLabelBg: 'rgba(30, 31, 34, 0.9)',
  coordLabelText: '#c1c2c5',

  electricalStroke: '#94a3b8',
  electricalFill: '#2c2e33',
  electricalLabel: '#909296',

  selectedStroke: '#3b82f6',
  selectedFill: '#1e3a5f',
  selectedText: '#93c5fd',

  furnitureStroke: '#a0845c',
  furnitureText: '#d4a574',

  openingLabel: '#64748b',
};

/** Returns the canvas color palette for the current theme. */
export function useCanvasColors(): CanvasColors {
  const { theme } = useTheme();
  return useMemo(() => (theme === 'dark' ? DARK : LIGHT), [theme]);
}
