import { useState, useEffect } from 'react';
import { Link, useLocation } from 'react-router-dom';
import { motion } from 'framer-motion';
import { 
  Heart, 
  Music, 
  PlayCircle, 
  Sparkles, 
  LogOut,
  User,
  Menu,
  X,
  Settings,
  Trash2
} from 'lucide-react';
import { useStore } from '../store/useStore';
import { apiPost } from '../utils/api';
import { cn } from '../utils/cn';
import { getThemeClasses } from '../utils/theme';

export const Navbar = () => {
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [isSettingsOpen, setIsSettingsOpen] = useState(false);
  const [windowPosition, setWindowPosition] = useState({ x: 0, y: 0 });
  const [isDragging, setIsDragging] = useState(false);
  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
  const { currentUser, partnerUser, logout, theme, setTheme, setPartnerUser } = useStore();
  const [targetUid, setTargetUid] = useState('');
  const [sending, setSending] = useState(false);
  const [removingPartner, setRemovingPartner] = useState(false);
  const location = useLocation();

  const navigation = [
    { name: 'Dashboard', href: '/', icon: Heart },
    { name: 'Last Listened', href: '/last-listened', icon: Music },
    { name: 'Mixed Playlist', href: '/mixed-playlist', icon: PlayCircle },
    { name: 'Memory Lane', href: '/memory-lane', icon: Sparkles },
  ];

  const handleLogout = () => {
    logout();
    localStorage.removeItem('spotify-user');
    localStorage.removeItem('spotify-partner');
  };

  const handleRemovePartner = async () => {
    if (!currentUser?.user?.id || !partnerUser?.user?.id) return;
    
    if (!confirm(`Are you sure you want to remove ${partnerUser.user.display_name} as your partner?`)) {
      return;
    }
    
    setRemovingPartner(true);
    try {
      // Try the remove endpoint first
      await apiPost('/partners/remove', { partnerId: partnerUser.user.id });
    } catch (error) {
      // If remove endpoint doesn't exist, try to clear the partnership
      try {
        await apiPost('/partners/clear', { userId: currentUser.user.id });
      } catch (clearError) {
        console.error('Failed to remove partner:', error, clearError);
        // Even if API fails, we can still clear the local state
      }
    } finally {
      // Always clear local state
      setPartnerUser(null as any);
      localStorage.removeItem('spotify-partner');
      setRemovingPartner(false);
    }
  };

  const themeClasses = getThemeClasses(theme);

  // Ensure theme is applied on mount and when theme changes
  useEffect(() => {
    getThemeClasses(theme);
  }, [theme]);

  // Center window when settings open
  useEffect(() => {
    if (isSettingsOpen) {
      const windowWidth = Math.min(600, window.innerWidth - 40); // Increased width, responsive
      const windowHeight = Math.min(window.innerHeight * 0.9, 800); // Much taller, up to 90% of screen height
      const centerX = (window.innerWidth - windowWidth) / 2;
      const centerY = (window.innerHeight - windowHeight) / 2;
      setWindowPosition({ x: centerX, y: centerY });
    }
  }, [isSettingsOpen]);

  // Handle mouse events for dragging
  useEffect(() => {
    const handleMouseMove = (e: MouseEvent) => {
      if (isDragging) {
        setWindowPosition({
          x: e.clientX - dragOffset.x,
          y: e.clientY - dragOffset.y,
        });
      }
    };

    const handleMouseUp = () => {
      setIsDragging(false);
    };

    if (isDragging) {
      document.addEventListener('mousemove', handleMouseMove);
      document.addEventListener('mouseup', handleMouseUp);
    }

    return () => {
      document.removeEventListener('mousemove', handleMouseMove);
      document.removeEventListener('mouseup', handleMouseUp);
    };
  }, [isDragging, dragOffset]);

  const handleDragStart = (e: React.MouseEvent) => {
    setIsDragging(true);
    setDragOffset({
      x: e.clientX - windowPosition.x,
      y: e.clientY - windowPosition.y,
    });
  };

  return (
    <motion.nav
      initial={{ y: -100, opacity: 0 }}
      animate={{ y: 0, opacity: 1 }}
      className="sticky top-0 z-50"
      style={{
        background: 'rgba(0, 0, 0, 0.8)',
        backdropFilter: 'blur(20px)',
        borderBottom: '1px solid rgba(255, 255, 255, 0.05)',
      }}
    >
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div className="flex justify-between items-center h-16">
          {/* Logo */}
          <Link to="/" className="flex items-center space-x-2">
            <motion.div
              whileHover={{ scale: 1.1, rotate: 5 }}
              className="w-8 h-8 rounded-full flex items-center justify-center"
              style={{
                background: `linear-gradient(135deg, ${themeClasses.cssVars?.primary || '#1db954'} 0%, ${themeClasses.cssVars?.secondary || '#1ed760'} 100%)`,
              }}
            >
              <Heart className="w-5 h-5 text-white" />
            </motion.div>
            <span className="text-xl font-bold gradient-text">
              Our Musical Journey
            </span>
          </Link>

          {/* Desktop Navigation */}
          <div className="hidden md:flex items-center space-x-1">
            {navigation.map((item) => {
              const isActive = location.pathname === item.href;
              return (
                <Link
                  key={item.name}
                  to={item.href}
                  className={cn(
                    "flex items-center space-x-2 px-4 py-2 rounded-xl transition-all duration-300",
                    isActive
                      ? "text-white"
                      : "text-white/60 hover:text-white hover:bg-white/5"
                  )}
                  style={isActive ? {
                    background: `linear-gradient(135deg, ${themeClasses.cssVars?.primary || '#1db954'}15 0%, ${themeClasses.cssVars?.secondary || '#1ed760'}10 100%)`,
                    border: `1px solid ${themeClasses.cssVars?.primary || '#1db954'}30`,
                  } : {}}
                >
                  <item.icon 
                    className="w-4 h-4" 
                    style={{ 
                      color: isActive ? themeClasses.cssVars?.primary : undefined 
                    }}
                  />
                  <span className="font-medium">{item.name}</span>
                </Link>
              );
            })}
          </div>

          {/* User Info & Actions */}
          <div className="hidden md:flex items-center space-x-4">
            {!partnerUser && (
              <div className="flex items-center space-x-2">
                <input
                  value={targetUid}
                  onChange={(e) => setTargetUid(e.target.value)}
                  placeholder="Partner Spotify ID"
                  className="bg-white/10 text-white text-sm px-2 py-1 rounded"
                />
                <button
                  disabled={sending || !targetUid}
                  onClick={async () => {
                    if (!currentUser?.user?.id || !targetUid) return;
                    setSending(true);
                    try {
                      await apiPost('/partners/request', { toUid: targetUid });
                    } finally {
                      setSending(false);
                    }
                  }}
                  className={`${themeClasses.primary} ${themeClasses.hover} text-white px-3 py-1 rounded text-sm disabled:opacity-50`}
                >
                  {sending ? 'Sending...' : 'Send Request'}
                </button>
              </div>
            )}
            {partnerUser && (
              <motion.div
                initial={{ scale: 0 }}
                animate={{ scale: 1 }}
                className="flex items-center space-x-2 text-sm text-white/70"
              >
                <User className="w-4 h-4" />
                <span>+ {partnerUser.user?.display_name}</span>
              </motion.div>
            )}
            
            <motion.button
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              onClick={() => setIsSettingsOpen(true)}
              className="flex items-center space-x-2 px-3 py-2 rounded-xl text-white/60 hover:text-white transition-all duration-300"
              style={{
                color: themeClasses.cssVars?.primary,
              }}
              onMouseEnter={(e) => {
                e.currentTarget.style.background = 'rgba(255, 255, 255, 0.05)';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.background = 'transparent';
              }}
            >
              <Settings className="w-4 h-4" />
              <span className="hidden lg:block">Settings</span>
            </motion.button>
            
            <motion.button
              whileHover={{ scale: 1.05 }}
              whileTap={{ scale: 0.95 }}
              onClick={handleLogout}
              className="flex items-center space-x-2 px-3 py-2 rounded-xl text-white/60 hover:text-white transition-all duration-300"
              onMouseEnter={(e) => {
                e.currentTarget.style.background = 'rgba(239, 68, 68, 0.1)';
              }}
              onMouseLeave={(e) => {
                e.currentTarget.style.background = 'transparent';
              }}
            >
              <LogOut className="w-4 h-4" />
              <span className="hidden lg:block">Logout</span>
            </motion.button>
          </div>

          {/* Mobile menu button */}
          <button
            onClick={() => setIsMobileMenuOpen(!isMobileMenuOpen)}
            className="md:hidden p-2 rounded-lg text-white/70 hover:text-white hover:bg-white/10 transition-all duration-300"
          >
            {isMobileMenuOpen ? <X className="w-6 h-6" /> : <Menu className="w-6 h-6" />}
          </button>
        </div>

        {/* Mobile Navigation */}
        {isMobileMenuOpen && (
          <motion.div
            initial={{ opacity: 0, height: 0 }}
            animate={{ opacity: 1, height: 'auto' }}
            exit={{ opacity: 0, height: 0 }}
            className="md:hidden py-4 border-t border-white/10"
          >
            <div className="space-y-2">
              {navigation.map((item) => {
                const isActive = location.pathname === item.href;
                return (
                  <Link
                    key={item.name}
                    to={item.href}
                    onClick={() => setIsMobileMenuOpen(false)}
                    className={cn(
                      "flex items-center space-x-3 px-4 py-3 rounded-xl transition-all duration-300",
                      isActive
                        ? "text-white"
                        : "text-white/60 hover:text-white hover:bg-white/5"
                    )}
                    style={isActive ? {
                      background: `linear-gradient(135deg, ${themeClasses.cssVars?.primary || '#1db954'}15 0%, ${themeClasses.cssVars?.secondary || '#1ed760'}10 100%)`,
                      border: `1px solid ${themeClasses.cssVars?.primary || '#1db954'}30`,
                    } : {}}
                  >
                    <item.icon 
                      className="w-5 h-5" 
                      style={{ 
                        color: isActive ? themeClasses.cssVars?.primary : undefined 
                      }}
                    />
                    <span className="font-medium">{item.name}</span>
                  </Link>
                );
              })}
              
              <div className="pt-4 border-t border-white/10">
                {partnerUser && (
                  <div className="flex items-center space-x-3 px-4 py-2 text-sm text-white/70">
                    <User className="w-4 h-4" />
                    <span>Connected with {partnerUser.user?.display_name}</span>
                  </div>
                )}
                
                <button
                  onClick={() => {
                    setIsSettingsOpen(true);
                    setIsMobileMenuOpen(false);
                  }}
                  className="w-full flex items-center space-x-3 px-4 py-3 rounded-xl text-white/60 hover:text-white transition-all duration-300"
                  style={{
                    color: themeClasses.cssVars?.primary,
                  }}
                  onMouseEnter={(e) => {
                    e.currentTarget.style.background = 'rgba(255, 255, 255, 0.05)';
                  }}
                  onMouseLeave={(e) => {
                    e.currentTarget.style.background = 'transparent';
                  }}
                >
                  <Settings className="w-5 h-5" />
                  <span className="font-medium">Settings</span>
                </button>
                
                <button
                  onClick={handleLogout}
                  className="w-full flex items-center space-x-3 px-4 py-3 rounded-xl text-white/60 hover:text-white transition-all duration-300"
                  onMouseEnter={(e) => {
                    e.currentTarget.style.background = 'rgba(239, 68, 68, 0.1)';
                  }}
                  onMouseLeave={(e) => {
                    e.currentTarget.style.background = 'transparent';
                  }}
                >
                  <LogOut className="w-5 h-5" />
                  <span className="font-medium">Logout</span>
                </button>
              </div>
            </div>
          </motion.div>
        )}
      </div>
      
      {/* Settings Draggable Window */}
      {isSettingsOpen && (
        <>
          {/* Backdrop */}
          <motion.div 
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
            className="fixed inset-0 bg-black/50 backdrop-blur-md z-40"
            onClick={() => setIsSettingsOpen(false)}
          />
          
          {/* Draggable Window */}
          <motion.div
            initial={{ opacity: 0, scale: 0.8, y: 30 }}
            animate={{ opacity: 1, scale: 1, y: 0 }}
            exit={{ opacity: 0, scale: 0.8, y: 30 }}
            className="fixed z-50 overflow-hidden"
            style={{
              left: windowPosition.x,
              top: windowPosition.y,
              width: Math.min(600, window.innerWidth - 40),
              height: Math.min(window.innerHeight * 0.9, 800),
              background: 'linear-gradient(135deg, rgba(0,0,0,0.9) 0%, rgba(20,20,20,0.95) 50%, rgba(0,0,0,0.9) 100%)',
              backdropFilter: 'blur(24px) saturate(180%)',
              WebkitBackdropFilter: 'blur(24px) saturate(180%)',
              border: '1px solid rgba(255,255,255,0.2)',
              borderRadius: '16px',
              boxShadow: '0 25px 50px rgba(0,0,0,0.5)',
              cursor: isDragging ? 'grabbing' : 'default',
            }}
          >
            {/* Window Header */}
            <div
              className="flex items-center justify-between p-4 border-b border-white/20 cursor-grab active:cursor-grabbing select-none"
              onMouseDown={handleDragStart}
              style={{
                background: 'linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%)',
              }}
            >
              <div className="flex items-center space-x-3">
                <div className="flex space-x-2">
                  <div className="w-3 h-3 rounded-full bg-red-500"></div>
                  <div className="w-3 h-3 rounded-full bg-yellow-500"></div>
                  <div className="w-3 h-3 rounded-full bg-green-500"></div>
                </div>
                <h2 className="text-lg font-semibold text-white">Settings</h2>
              </div>
              <button
                onClick={() => setIsSettingsOpen(false)}
                className="text-white/70 hover:text-white hover:bg-white/10 p-2 rounded-lg transition-all duration-200"
              >
                <X className="w-5 h-5" />
              </button>
            </div>
            
            {/* Window Content */}
            <div className="overflow-y-auto p-4 sm:p-6" style={{ height: 'calc(100% - 60px)' }}>
              <div className="space-y-4 sm:space-y-6">
                {/* Spotify ID Section */}
                {currentUser?.user && (
                  <div>
                    <h3 className="text-lg font-semibold text-white mb-4 drop-shadow-md">Your Account</h3>
                    <div 
                      className="rounded-xl p-4 border border-white/20 transition-all duration-300 hover:border-white/30 hover:shadow-lg hover:shadow-white/5"
                      style={{
                        background: 'linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%)',
                        backdropFilter: 'blur(12px)',
                        WebkitBackdropFilter: 'blur(12px)',
                      }}
                      onMouseEnter={(e) => {
                        e.currentTarget.style.background = 'linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%)';
                      }}
                      onMouseLeave={(e) => {
                        e.currentTarget.style.background = 'linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%)';
                      }}
                    >
                      <div className="text-sm text-white/70 mb-2 font-medium">Spotify ID</div>
                      <div 
                        className="text-white font-mono text-sm break-all rounded-lg p-3 mb-3"
                        style={{
                          background: 'rgba(0,0,0,0.4)',
                          border: '1px solid rgba(255,255,255,0.1)',
                        }}
                      >
                        {currentUser.user.id}
                      </div>
                      <div className="text-sm text-white/80">Display Name: <span className="text-white font-medium">{currentUser.user.display_name}</span></div>
                    </div>
                  </div>
                )}
                
                {/* Partner Section */}
                <div>
                  <h3 className="text-lg font-semibold text-white mb-4 drop-shadow-md">Partner</h3>
                  {partnerUser ? (
                    <div 
                      className="rounded-xl p-4 border border-white/20 transition-all duration-300 hover:border-white/30 hover:shadow-lg hover:shadow-white/5"
                      style={{
                        background: 'linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%)',
                        backdropFilter: 'blur(12px)',
                        WebkitBackdropFilter: 'blur(12px)',
                      }}
                      onMouseEnter={(e) => {
                        e.currentTarget.style.background = 'linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%)';
                      }}
                      onMouseLeave={(e) => {
                        e.currentTarget.style.background = 'linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%)';
                      }}
                    >
                      <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between space-y-3 sm:space-y-0">
                        <div className="flex items-center space-x-3 sm:space-x-4">
                          <div className="w-10 h-10 sm:w-12 sm:h-12 bg-gradient-to-br from-purple-500 to-pink-500 rounded-full flex items-center justify-center shadow-lg">
                            <User className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
                          </div>
                          <div className="flex-1 min-w-0">
                            <div className="text-white font-semibold text-base sm:text-lg truncate">{partnerUser.user?.display_name}</div>
                            <div 
                              className="text-xs text-white/70 break-all rounded px-2 py-1 mt-1 inline-block"
                              style={{
                                background: 'rgba(0,0,0,0.3)',
                                border: '1px solid rgba(255,255,255,0.1)',
                              }}
                            >
                              {partnerUser.user?.id}
                            </div>
                            <div className="text-sm text-green-400 font-medium mt-2">✓ Connected</div>
                          </div>
                        </div>
                        <button
                          onClick={handleRemovePartner}
                          disabled={removingPartner}
                          className="flex items-center space-x-2 p-2 sm:p-3 text-red-400 hover:text-red-300 rounded-xl transition-all duration-200 disabled:opacity-50 self-start sm:self-auto"
                          style={{
                            background: 'rgba(239, 68, 68, 0.1)',
                          }}
                          onMouseEnter={(e) => {
                            e.currentTarget.style.background = 'rgba(239, 68, 68, 0.2)';
                          }}
                          onMouseLeave={(e) => {
                            e.currentTarget.style.background = 'rgba(239, 68, 68, 0.1)';
                          }}
                        >
                          <Trash2 className="w-4 h-4 sm:w-5 sm:h-5" />
                          <span className="text-sm sm:hidden">Remove</span>
                        </button>
                      </div>
                    </div>
                  ) : (
                    <div 
                      className="rounded-xl p-4 border border-white/20 space-y-4 transition-all duration-300 hover:border-white/30 hover:shadow-lg hover:shadow-white/5"
                      style={{
                        background: 'linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%)',
                        backdropFilter: 'blur(12px)',
                        WebkitBackdropFilter: 'blur(12px)',
                      }}
                      onMouseEnter={(e) => {
                        e.currentTarget.style.background = 'linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%)';
                      }}
                      onMouseLeave={(e) => {
                        e.currentTarget.style.background = 'linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%)';
                      }}
                    >
                      <div>
                        <label className="text-sm text-white/70 mb-2 block font-medium">Partner Spotify ID</label>
                        <input
                          value={targetUid}
                          onChange={(e) => setTargetUid(e.target.value)}
                          placeholder="Enter partner's Spotify ID..."
                          className="w-full text-white text-sm px-4 py-3 rounded-xl placeholder-white/50 border focus:outline-none transition-all"
                          style={{
                            background: 'rgba(0,0,0,0.4)',
                            border: '1px solid rgba(255,255,255,0.2)',
                          }}
                          onFocus={(e) => {
                            e.target.style.border = '1px solid rgba(255,255,255,0.4)';
                          }}
                          onBlur={(e) => {
                            e.target.style.border = '1px solid rgba(255,255,255,0.2)';
                          }}
                        />
                      </div>
                      <button
                        disabled={sending || !targetUid}
                        onClick={async () => {
                          if (!currentUser?.user?.id || !targetUid) return;
                          setSending(true);
                          try {
                            await apiPost('/partners/request', { toUid: targetUid });
                            setTargetUid('');
                          } finally {
                            setSending(false);
                          }
                        }}
                        className="w-full text-white px-4 py-3 rounded-xl text-sm disabled:opacity-50 transition-all duration-200 font-medium"
                        style={{
                          background: `linear-gradient(135deg, ${themeClasses.cssVars?.primary || '#1db954'} 0%, ${themeClasses.cssVars?.secondary || '#1ed760'} 100%)`,
                        }}
                        onMouseEnter={(e) => {
                          e.currentTarget.style.transform = 'translateY(-1px)';
                          e.currentTarget.style.boxShadow = `0 8px 25px ${themeClasses.cssVars?.primary || '#1db954'}40`;
                        }}
                        onMouseLeave={(e) => {
                          e.currentTarget.style.transform = 'translateY(0)';
                          e.currentTarget.style.boxShadow = 'none';
                        }}
                      >
                        {sending ? 'Sending...' : 'Send Partner Request'}
                      </button>
                    </div>
                  )}
                </div>
                
                {/* Theme Section */}
                <div>
                  <h3 className="text-lg font-semibold text-white mb-4 drop-shadow-md">Color Theme</h3>
                  <div 
                    className="rounded-xl p-4 border border-white/20 transition-all duration-300 hover:border-white/30 hover:shadow-lg hover:shadow-white/5"
                    style={{
                      background: 'linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%)',
                      backdropFilter: 'blur(12px)',
                      WebkitBackdropFilter: 'blur(12px)',
                    }}
                    onMouseEnter={(e) => {
                      e.currentTarget.style.background = 'linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%)';
                    }}
                    onMouseLeave={(e) => {
                      e.currentTarget.style.background = 'linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%)';
                    }}
                  >
                    <div className="grid grid-cols-1 sm:grid-cols-2 gap-2 sm:gap-3">
                    {[
                      { name: 'Green', value: 'green', color: 'from-green-500 to-emerald-500' },
                      { name: 'Pink', value: 'pink', color: 'from-pink-500 to-rose-500' },
                      { name: 'Blue', value: 'blue', color: 'from-blue-400 to-cyan-400' },
                      { name: 'Red', value: 'red', color: 'from-red-600 to-red-800' },
                      { name: 'Purple', value: 'purple', color: 'from-purple-500 to-violet-600' },
                      { name: 'Yellow', value: 'yellow', color: 'from-yellow-400 to-orange-500' },
                      { name: 'Turquoise', value: 'turquoise', color: 'from-cyan-400 to-blue-500' },
                    ].map((themeOption) => (
                      <button
                        key={themeOption.value}
                        onClick={() => setTheme(themeOption.value)}
                        className="flex items-center space-x-3 p-3 rounded-xl border transition-all duration-200"
                        style={{
                          border: theme === themeOption.value 
                            ? `2px solid ${themeClasses.cssVars?.primary || '#1db954'}`
                            : '1px solid rgba(255,255,255,0.2)',
                          background: theme === themeOption.value 
                            ? `linear-gradient(135deg, ${themeClasses.cssVars?.primary || '#1db954'}15 0%, ${themeClasses.cssVars?.secondary || '#1ed760'}10 100%)`
                            : 'rgba(255,255,255,0.02)',
                        }}
                        onMouseEnter={(e) => {
                          if (theme !== themeOption.value) {
                            e.currentTarget.style.background = 'rgba(255,255,255,0.08)';
                            e.currentTarget.style.border = '1px solid rgba(255,255,255,0.4)';
                            e.currentTarget.style.transform = 'translateY(-2px)';
                            e.currentTarget.style.boxShadow = '0 4px 12px rgba(0,0,0,0.3)';
                          } else {
                            e.currentTarget.style.transform = 'translateY(-1px)';
                            e.currentTarget.style.boxShadow = `0 6px 20px ${themeClasses.cssVars?.primary || '#1db954'}30`;
                          }
                        }}
                        onMouseLeave={(e) => {
                          if (theme !== themeOption.value) {
                            e.currentTarget.style.background = 'rgba(255,255,255,0.02)';
                            e.currentTarget.style.border = '1px solid rgba(255,255,255,0.2)';
                            e.currentTarget.style.transform = 'translateY(0)';
                            e.currentTarget.style.boxShadow = 'none';
                          } else {
                            e.currentTarget.style.transform = 'translateY(0)';
                            e.currentTarget.style.boxShadow = 'none';
                          }
                        }}
                      >
                        <div className={`w-5 h-5 rounded-full bg-gradient-to-r ${themeOption.color} shadow-sm`} />
                        <span className="text-white text-sm font-medium">{themeOption.name}</span>
                      </button>
                    ))}
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </motion.div>
        </>
      )}
    </motion.nav>
  );
};