// C:\Development\Damjan Savic\Portfolio\src\components\LanguageSwitcher.tsx
import React, { useRef, useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { Globe } from 'lucide-react';
import { motion, AnimatePresence } from 'framer-motion';

const LanguageSwitcher: React.FC = () => {
  const { i18n } = useTranslation();
  const [isOpen, setIsOpen] = useState(false);
  const [isMobile, setIsMobile] = useState(false);
  const dropdownRef = useRef<HTMLDivElement>(null);

  const languages = [
    { code: 'en', name: 'English' },
    { code: 'de', name: 'Deutsch' },
    { code: 'sr', name: 'Srpski' },
  ];

  const currentLanguage = languages.find(lang => lang.code === i18n.language)?.name || 'Language';

  const handleKeyDown = (e: React.KeyboardEvent) => {
    if (e.key === 'Escape') {
      setIsOpen(false);
    }
  };

  const handleClickOutside = (e: MouseEvent) => {
    if (dropdownRef.current && !dropdownRef.current.contains(e.target as Node)) {
      setIsOpen(false);
    }
  };

  useEffect(() => {
    // Check if mobile on mount and resize
    const checkMobile = () => {
      setIsMobile(window.innerWidth < 768);
    };
    
    checkMobile();
    window.addEventListener('resize', checkMobile);
    
    document.addEventListener('mousedown', handleClickOutside);
    return () => {
      window.removeEventListener('resize', checkMobile);
      document.removeEventListener('mousedown', handleClickOutside);
    };
  }, []);

  return (
      <div className="relative inline-block" ref={dropdownRef}>
        <motion.button
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            className="flex items-center space-x-2 text-zinc-400 hover:text-white
                 px-4 py-2 rounded-full transition-colors duration-200
                 hover:bg-zinc-800/50 border border-transparent hover:border-zinc-800"
            onClick={() => setIsOpen(!isOpen)}
            aria-expanded={isOpen}
            aria-haspopup="listbox"
            aria-label="Select language"
        >
          <Globe className="h-5 w-5" aria-hidden="true" />
          <span className="text-sm">{currentLanguage}</span>
        </motion.button>

        <AnimatePresence>
          {isOpen && (
              <motion.div
                  initial={{ opacity: 0, y: isMobile ? 10 : -10 }}
                  animate={{ opacity: 1, y: 0 }}
                  exit={{ opacity: 0, y: isMobile ? 10 : -10 }}
                  transition={{ duration: 0.2 }}
                  className={`absolute ${isMobile ? 'bottom-full mb-2' : 'top-full mt-2'} right-0 w-48 rounded-lg overflow-hidden
                     border border-zinc-800 bg-zinc-900/95 backdrop-blur-sm
                     shadow-lg`}
                  role="listbox"
                  aria-label="Languages"
                  onKeyDown={handleKeyDown}
              >
                <div className="py-1">
                  {languages.map((lang) => (
                      <motion.button
                          key={lang.code}
                          whileHover={{ backgroundColor: 'rgba(39, 39, 42, 0.5)' }}
                          className={`w-full text-left px-4 py-2 text-sm transition-colors duration-200
                    ${i18n.language === lang.code
                              ? 'bg-zinc-800 text-white'
                              : 'text-zinc-400 hover:text-white'
                          }`}
                          onClick={() => {
                            i18n.changeLanguage(lang.code);
                            setIsOpen(false);
                          }}
                          role="option"
                          aria-selected={i18n.language === lang.code}
                      >
                        {lang.name}
                      </motion.button>
                  ))}
                </div>
              </motion.div>
          )}
        </AnimatePresence>
      </div>
  );
};

export default LanguageSwitcher;