import { useEffect, useState } from 'react';

export type Theme = 'dark' | 'light' | 'synthwave' | 'forest' | 'ocean';

interface ThemeConfig {
  name: string;
  label: string;
  description: string;
}

export const themes: Record<Theme, ThemeConfig> = {
  dark: {
    name: 'dark',
    label: 'Dark',
    description: 'Classic dark theme for comfortable coding',
  },
  light: {
    name: 'light',
    label: 'Light',
    description: 'Clean light theme for bright environments',
  },
  synthwave: {
    name: 'synthwave',
    label: 'Synthwave',
    description: 'Retro neon aesthetic with vibrant colors',
  },
  forest: {
    name: 'forest',
    label: 'Forest',
    description: 'Calming green tones inspired by nature',
  },
  ocean: {
    name: 'ocean',
    label: 'Ocean',
    description: 'Deep blue theme for focused work',
  },
};

export function useTheme() {
  const [theme, setThemeState] = useState<Theme>(() => {
    if (typeof window === 'undefined') return 'dark';
    const stored = localStorage.getItem('aethex-theme');
    return (stored as Theme) || 'dark';
  });

  useEffect(() => {
    if (typeof window === 'undefined') return;

    const root = document.documentElement;

    // Remove all theme classes
    Object.keys(themes).forEach((t) => {
      root.classList.remove(`theme-${t}`);
    });

    // Add current theme class
    root.classList.add(`theme-${theme}`);

    // Save to localStorage
    localStorage.setItem('aethex-theme', theme);
  }, [theme]);

  const setTheme = (newTheme: Theme) => {
    setThemeState(newTheme);
  };

  return { theme, setTheme, themes };
}
