import type { ActionMode } from './types'

export type DrawAccent = 'amber' | 'green' | 'red'

/** Accent color + active-state tint per draw mode. Shared by the collapsed rail
 * (FlightsPage) and the expanded draw-mode selector (FlightParamsPanel). */
export const DRAW_MODE_ACCENT: Record<DrawAccent, { color: string; tint: string }> = {
  amber: { color: 'var(--accent-amber)', tint: 'rgba(255,157,61,0.20)' },
  green: { color: 'var(--accent-green)', tint: 'rgba(61,220,132,0.18)' },
  red: { color: 'var(--accent-red)', tint: 'rgba(255,71,86,0.18)' },
}

/** Single source of truth for the three flight-plan draw modes: the action mode,
 * its i18n label key, accent, and icon. Consumed by both the icon-only collapsed
 * rail and the labelled expanded selector. */
export const DRAW_MODES: { mode: ActionMode; i18nKey: string; accent: DrawAccent; icon: React.ReactNode }[] = [
  {
    mode: 'points', i18nKey: 'flights.v2.points', accent: 'amber',
    icon: <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="6" cy="6" r="1.6" fill="currentColor" /><circle cx="18" cy="6" r="1.6" fill="currentColor" /><circle cx="12" cy="14" r="1.6" fill="currentColor" /><circle cx="6" cy="20" r="1.6" fill="currentColor" /><circle cx="18" cy="20" r="1.6" fill="currentColor" /></svg>,
  },
  {
    mode: 'workArea', i18nKey: 'flights.v2.workArea', accent: 'green',
    icon: <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><polygon points="4 7 12 3 20 7 20 17 12 21 4 17" /></svg>,
  },
  {
    mode: 'prohibitedArea', i18nKey: 'flights.v2.noGoZone', accent: 'red',
    icon: <svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="12" cy="12" r="9" /><line x1="5.6" y1="5.6" x2="18.4" y2="18.4" /></svg>,
  },
]
