import React, { createContext, useContext, useEffect, useState } from 'react';
import { ThemeVariant } from '../types';

interface ThemeContextType {
  theme: ThemeVariant;
  setTheme: (theme: ThemeVariant) => void;
  toggleTheme: () => void;
}

const ThemeContext = createContext<ThemeContextType | undefined>(undefined);

export const useTheme = () => {
  const context = useContext(ThemeContext);
  if (!context) {
    throw new Error('useTheme must be used within a ThemeProvider');
  }
  return context;
};

// Define color palettes (RGB channels)
const palettes: Record<ThemeVariant, Record<string, string>> = {
  [ThemeVariant.NEON]: {
    '--kodo-void': '5 5 8',
    '--kodo-ink': '10 11 15',
    '--kodo-graphite': '18 19 26',
    '--kodo-slate': '26 28 38',
    '--kodo-steel': '37 40 54',
    '--kodo-cyan': '0 255 247',
    '--kodo-cyan-dim': '0 196 189',
    '--kodo-magenta': '255 0 255',
    '--kodo-lime': '184 255 0',
    '--kodo-gold': '255 215 0',
    '--kodo-red': '255 51 51',
    '--kodo-terminal': '0 255 0',
    '--kodo-content-highlight': '255 255 255',
    '--kodo-content-dim': '156 163 175',
    '--kodo-text-main': '243 243 224',
  },
  [ThemeVariant.GAMING]: {
    '--kodo-void': '10 10 10',
    '--kodo-ink': '15 15 15',
    '--kodo-graphite': '20 20 20',
    '--kodo-slate': '30 30 30',
    '--kodo-steel': '45 45 45',
    '--kodo-cyan': '255 215 0', // Gold acts as primary
    '--kodo-cyan-dim': '218 165 32',
    '--kodo-magenta': '255 51 51', // Red acts as accent
    '--kodo-lime': '255 255 255',
    '--kodo-gold': '255 140 0',
    '--kodo-red': '139 0 0',
    '--kodo-terminal': '50 205 50',
    '--kodo-content-highlight': '255 255 255',
    '--kodo-content-dim': '156 163 175',
    '--kodo-text-main': '243 243 224',
  },
  [ThemeVariant.NATURE]: {
    '--kodo-void': '5 15 5',
    '--kodo-ink': '10 20 10',
    '--kodo-graphite': '18 31 18',
    '--kodo-slate': '26 38 26',
    '--kodo-steel': '37 54 37',
    '--kodo-cyan': '74 222 128', // Green-400
    '--kodo-cyan-dim': '34 197 94',
    '--kodo-magenta': '250 204 21', // Yellow-400
    '--kodo-lime': '132 204 22',
    '--kodo-gold': '234 179 8',
    '--kodo-red': '248 113 113',
    '--kodo-terminal': '20 83 45',
    '--kodo-content-highlight': '255 255 255',
    '--kodo-content-dim': '156 163 175',
    '--kodo-text-main': '236 253 245',
  },
  [ThemeVariant.TERMINAL]: {
    '--kodo-void': '0 0 0',
    '--kodo-ink': '0 17 0',
    '--kodo-graphite': '0 26 0',
    '--kodo-slate': '0 34 0',
    '--kodo-steel': '0 51 0',
    '--kodo-cyan': '0 255 0',
    '--kodo-cyan-dim': '0 200 0',
    '--kodo-magenta': '0 204 0',
    '--kodo-lime': '0 255 0',
    '--kodo-gold': '0 255 0',
    '--kodo-red': '255 0 0',
    '--kodo-terminal': '0 255 0',
    '--kodo-content-highlight': '0 255 0',
    '--kodo-content-dim': '0 170 0',
    '--kodo-text-main': '0 255 0',
  },
  [ThemeVariant.LIGHT]: {
    '--kodo-void': '245 247 250',
    '--kodo-ink': '255 255 255',
    '--kodo-graphite': '255 255 255',
    '--kodo-slate': '241 245 249',
    '--kodo-steel': '226 232 240',
    '--kodo-cyan': '13 148 136', // Teal 600 (Darker for contrast)
    '--kodo-cyan-dim': '20 184 166',
    '--kodo-magenta': '192 38 211', // Fuchsia 600
    '--kodo-lime': '101 163 13', // Lime 600
    '--kodo-gold': '202 138 4',
    '--kodo-red': '220 38 38',
    '--kodo-terminal': '22 101 52',
    '--kodo-content-highlight': '17 24 39', // Gray 900
    '--kodo-content-dim': '75 85 99', // Gray 600
    '--kodo-text-main': '17 24 39',
  },
};

export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({
  children,
}) => {
  const [theme, setTheme] = useState<ThemeVariant>(ThemeVariant.NEON);

  useEffect(() => {
    const root = document.documentElement;
    const colors = palettes[theme];

    Object.entries(colors).forEach(([key, value]) => {
      root.style.setProperty(key, value as string);
    });
  }, [theme]);

  const toggleTheme = () => {
    const variants = Object.values(ThemeVariant);
    const currentIndex = variants.indexOf(theme);
    const nextIndex = (currentIndex + 1) % variants.length;
    setTheme(variants[nextIndex]);
  };

  return (
    <ThemeContext.Provider value={{ theme, setTheme, toggleTheme }}>
      {children}
    </ThemeContext.Provider>
  );
};
