import React from 'react';
import { motion } from 'framer-motion';
import { Settings } from 'lucide-react';
import { useTheme } from '../../shared/context/ThemeContext';
import { themeColors, type ThemeColor } from '../../shared/config/theme';

export const ThemeSelector: React.FC = () => {
  const { theme, setTheme } = useTheme();
  const [isOpen, setIsOpen] = React.useState(false);

  const colors = Object.keys(themeColors) as ThemeColor[];

  return (
    <div className="fixed bottom-8 right-8 z-50">
      {/* Settings Button */}
      <motion.button
        whileHover={{ scale: 1.1, rotate: 90 }}
        whileTap={{ scale: 0.95 }}
        onClick={() => setIsOpen(!isOpen)}
        className="w-14 h-14 bg-gradient-to-br from-green-500/20 to-emerald-500/10 backdrop-blur-md border border-green-500/30 rounded-full flex items-center justify-center text-green-500 shadow-lg hover:shadow-green-500/20"
      >
        <Settings size={24} />
      </motion.button>

      {/* Color Selector */}
      <motion.div
        initial={{ opacity: 0, scale: 0.8, y: 20 }}
        animate={isOpen ? { opacity: 1, scale: 1, y: 0 } : { opacity: 0, scale: 0.8, y: 20 }}
        transition={{ duration: 0.3 }}
        className={`absolute bottom-20 right-0 ${isOpen ? 'pointer-events-auto' : 'pointer-events-none'}`}
      >
        <div className="bg-black/95 backdrop-blur-xl border border-green-500/20 rounded-2xl p-4 shadow-2xl">
          <p className="text-xs font-semibold text-gray-400 mb-3 px-2">Design-Farbe</p>
          <div className="grid grid-cols-3 gap-2">
            {colors.map((color) => {
              const colorData = themeColors[color];
              return (
                <motion.button
                  key={color}
                  whileHover={{ scale: 1.1 }}
                  whileTap={{ scale: 0.95 }}
                  onClick={() => {
                    setTheme(color);
                    setIsOpen(false);
                  }}
                  className={`w-10 h-10 rounded-full transition-all border-2 ${
                    theme === color
                      ? 'border-white shadow-lg'
                      : 'border-transparent shadow-md'
                  }`}
                  style={{ backgroundColor: colorData.primary }}
                  title={color.charAt(0).toUpperCase() + color.slice(1)}
                />
              );
            })}
          </div>
        </div>
      </motion.div>
    </div>
  );
};
