const defaultTheme = {
  name: 'Cyberpunk Red',
  colors: {
    bg: '#0A0A0C',
    bgBase: '#0F0D10',
    bgSurface: '#161218',
    bgElevated: '#1C1719',
    bgCard: '#221B1E',
    bgInput: '#2A2225',
    bgHover: '#332528',
    accent: '#FF0033',
    accentDark: '#8B0020',
    accentDeep: '#5C0015',
    accentLight: '#FF1A5E',
    accentMuted: '#FF4D6D',
    accentBright: '#FF1744',
    accentSoft: '#FF5252',
    accentDim: '#6B2033',
    accentBg: '#4A1525',
    textPrimary: '#EAE0E2',
    textSecondary: '#D4C4C8',
    textTertiary: '#8A7A7E',
    textDisabled: '#5A4F52',
    success: '#00E676',
    warning: '#FFD740',
    error: '#FF1744',
    info: '#448AFF',
    border: '#2A1F22',
    borderAccent: '#FF003344',
    borderAccentFull: '#FF0033',
  },
}

const themes = {
  'cyberpunk-red': defaultTheme,
  'cyberpunk-pink': {
    ...defaultTheme,
    name: 'Cyberpunk Pink',
    colors: {
      ...defaultTheme.colors,
      accent: '#FF1A8C',
      accentDark: '#8B1050',
      accentDeep: '#5C0A35',
      accentLight: '#FF4DAE',
      accentMuted: '#FF6DC2',
      accentBright: '#FF1A8C',
      accentSoft: '#FF6DC2',
      accentDim: '#6B2050',
      accentBg: '#4A1535',
    },
  },
  'midnight-blue': {
    ...defaultTheme,
    name: 'Midnight Blue',
    colors: {
      ...defaultTheme.colors,
      accent: '#0088FF',
      accentDark: '#004488',
      accentDeep: '#002255',
      accentLight: '#00AAFF',
      accentMuted: '#44CCFF',
      accentBright: '#0088FF',
      accentSoft: '#44CCFF',
      accentDim: '#203366',
      accentBg: '#152244',
    },
  },
  'matrix-green': {
    ...defaultTheme,
    name: 'Matrix Green',
    colors: {
      ...defaultTheme.colors,
      accent: '#00FF41',
      accentDark: '#008822',
      accentDeep: '#005515',
      accentLight: '#33FF66',
      accentMuted: '#66FF99',
      accentBright: '#00FF41',
      accentSoft: '#66FF99',
      accentDim: '#206630',
      accentBg: '#154420',
    },
  },
}

export function getTheme(name) {
  return themes[name] || defaultTheme
}

export function getThemeNames() {
  return Object.keys(themes).map(k => ({ id: k, name: themes[k].name }))
}

export function applyTheme(theme) {
  const root = document.documentElement
  const c = theme.colors
  const map = {
    '--bg': c.bg,
    '--bg-base': c.bgBase,
    '--bg-surface': c.bgSurface,
    '--bg-elevated': c.bgElevated,
    '--bg-card': c.bgCard,
    '--bg-input': c.bgInput,
    '--bg-hover': c.bgHover,
    '--accent': c.accent,
    '--accent-dark': c.accentDark,
    '--accent-deep': c.accentDeep,
    '--accent-light': c.accentLight,
    '--accent-muted': c.accentMuted,
    '--accent-bright': c.accentBright,
    '--accent-soft': c.accentSoft,
    '--accent-dim': c.accentDim,
    '--accent-bg': c.accentBg,
    '--text-primary': c.textPrimary,
    '--text-secondary': c.textSecondary,
    '--text-tertiary': c.textTertiary,
    '--text-disabled': c.textDisabled,
    '--success': c.success,
    '--warning': c.warning,
    '--error': c.error,
    '--info': c.info,
    '--border': c.border,
    '--border-accent': c.borderAccent,
    '--border-accent-full': c.borderAccentFull,
  }
  Object.entries(map).forEach(([k, v]) => root.style.setProperty(k, v))
}

export default defaultTheme
