import React, { createContext, useContext, useState } from 'react';

export type ThemeId = 'cyan' | 'purple' | 'emerald' | 'amber' | 'crimson';

export interface ThemeConfig {
    id: ThemeId;
    name: string;
    colorPreview: string;
    textPrimary: string;
    textAccent: string;
    bgAccent: string;
    borderAccent: string;
    gradientBtn: string;
    glowShadow: string;
    cardBorder: string;
    badgeBg: string;
}

export const Themes: Record<ThemeId, ThemeConfig> = {
    cyan: {
        id: 'cyan',
        name: 'Apex Cyan (Default)',
        colorPreview: 'bg-cyan-400',
        textPrimary: 'text-white',
        textAccent: 'text-cyan-400',
        bgAccent: 'bg-cyan-500',
        borderAccent: 'border-cyan-500',
        gradientBtn: 'bg-gradient-to-r from-cyan-400 via-blue-500 to-indigo-500 text-slate-950',
        glowShadow: 'shadow-cyan-500/25',
        cardBorder: 'border-cyan-900/50',
        badgeBg: 'bg-cyan-950/80 text-cyan-400 border-cyan-800/60',
    },
    purple: {
        id: 'purple',
        name: 'Cyber Purple',
        colorPreview: 'bg-purple-500',
        textPrimary: 'text-white',
        textAccent: 'text-purple-400',
        bgAccent: 'bg-purple-500',
        borderAccent: 'border-purple-500',
        gradientBtn: 'bg-gradient-to-r from-purple-500 via-fuchsia-500 to-pink-500 text-white',
        glowShadow: 'shadow-purple-500/25',
        cardBorder: 'border-purple-900/50',
        badgeBg: 'bg-purple-950/80 text-purple-400 border-purple-800/60',
    },
    emerald: {
        id: 'emerald',
        name: 'Emerald Matrix',
        colorPreview: 'bg-emerald-400',
        textPrimary: 'text-white',
        textAccent: 'text-emerald-400',
        bgAccent: 'bg-emerald-500',
        borderAccent: 'border-emerald-500',
        gradientBtn: 'bg-gradient-to-r from-emerald-400 via-teal-500 to-cyan-500 text-slate-950',
        glowShadow: 'shadow-emerald-500/25',
        cardBorder: 'border-emerald-900/50',
        badgeBg: 'bg-emerald-950/80 text-emerald-400 border-emerald-800/60',
    },
    amber: {
        id: 'amber',
        name: 'Sunset Amber',
        colorPreview: 'bg-amber-400',
        textPrimary: 'text-white',
        textAccent: 'text-amber-400',
        bgAccent: 'bg-amber-500',
        borderAccent: 'border-amber-500',
        gradientBtn: 'bg-gradient-to-r from-amber-400 via-orange-500 to-red-500 text-slate-950',
        glowShadow: 'shadow-amber-500/25',
        cardBorder: 'border-amber-900/50',
        badgeBg: 'bg-amber-950/80 text-amber-400 border-amber-800/60',
    },
    crimson: {
        id: 'crimson',
        name: 'Obsidian Crimson',
        colorPreview: 'bg-red-500',
        textPrimary: 'text-white',
        textAccent: 'text-red-400',
        bgAccent: 'bg-red-500',
        borderAccent: 'border-red-500',
        gradientBtn: 'bg-gradient-to-r from-red-500 via-rose-600 to-pink-600 text-white',
        glowShadow: 'shadow-red-500/25',
        cardBorder: 'border-red-900/50',
        badgeBg: 'bg-red-950/80 text-red-400 border-red-800/60',
    },
};

interface ThemeContextType {
    currentTheme: ThemeConfig;
    setTheme: (id: ThemeId) => void;
}

const ThemeContext = createContext<ThemeContextType>({
    currentTheme: Themes.cyan,
    setTheme: () => {},
});

export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
    const [themeId, setThemeId] = useState<ThemeId>('cyan');

    return (
        <ThemeContext.Provider value={{ currentTheme: Themes[themeId], setTheme: setThemeId }}>
            {children}
        </ThemeContext.Provider>
    );
};

export const useTheme = () => useContext(ThemeContext);