'use client'

import { useState, useRef, useEffect } from 'react'
import { useLanguage } from '@/lib/LanguageContext'
import { useTheme } from '@/lib/ThemeContext'

interface UserMenuProps {
  userName: string
  userEmail: string
  userInitials: string
  isExpanded?: boolean
  className?: string
}

export function UserMenu({
  userName,
  userEmail,
  userInitials,
  isExpanded = false,
  className = ''
}: UserMenuProps) {
  const { t } = useLanguage()
  const { isDark } = useTheme()
  const [isOpen, setIsOpen] = useState(false)
  const menuRef = useRef<HTMLDivElement>(null)

  // Schliessen bei Klick ausserhalb
  useEffect(() => {
    function handleClickOutside(event: MouseEvent) {
      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
        setIsOpen(false)
      }
    }
    document.addEventListener('mousedown', handleClickOutside)
    return () => document.removeEventListener('mousedown', handleClickOutside)
  }, [])

  // Schliessen bei Escape
  useEffect(() => {
    function handleEscape(event: KeyboardEvent) {
      if (event.key === 'Escape') setIsOpen(false)
    }
    document.addEventListener('keydown', handleEscape)
    return () => document.removeEventListener('keydown', handleEscape)
  }, [])

  const menuItems = [
    {
      id: 'settings',
      labelKey: 'nav_settings',
      icon: (
        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
        </svg>
      ),
      onClick: () => {
        console.log('Settings clicked')
        setIsOpen(false)
      }
    },
    {
      id: 'logout',
      labelKey: 'logout',
      icon: (
        <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
        </svg>
      ),
      onClick: () => {
        console.log('Logout clicked')
        setIsOpen(false)
      },
      danger: true
    }
  ]

  return (
    <div ref={menuRef} className={`relative ${className}`}>
      {/* User Button - Trigger */}
      <button
        onClick={() => setIsOpen(!isOpen)}
        className={`w-full flex items-center gap-3 p-2 rounded-2xl transition-all ${
          isOpen
            ? isDark
              ? 'bg-white/20'
              : 'bg-slate-200'
            : isDark
              ? 'hover:bg-white/10'
              : 'hover:bg-slate-100'
        }`}
      >
        {/* Avatar */}
        <div className="w-10 h-10 bg-gradient-to-br from-cyan-400 to-blue-500 rounded-full flex items-center justify-center text-white font-medium flex-shrink-0">
          {userInitials}
        </div>

        {/* Name & Email - nur sichtbar wenn Sidebar expandiert */}
        <div className={`flex-1 text-left ${isExpanded ? 'opacity-100' : 'opacity-0'} transition-opacity duration-300`}>
          <p className={`text-sm font-medium whitespace-nowrap ${isDark ? 'text-white' : 'text-slate-900'}`}>
            {userName}
          </p>
          <p className={`text-xs whitespace-nowrap ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
            {userEmail}
          </p>
        </div>

        {/* Chevron - nur sichtbar wenn Sidebar expandiert */}
        <svg
          className={`w-4 h-4 transition-all ${isExpanded ? 'opacity-100' : 'opacity-0'} ${isOpen ? 'rotate-180' : ''} ${
            isDark ? 'text-white/60' : 'text-slate-500'
          }`}
          fill="none"
          stroke="currentColor"
          viewBox="0 0 24 24"
        >
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
        </svg>
      </button>

      {/* Popup Menu - erscheint oberhalb */}
      {isOpen && (
        <div className={`absolute bottom-full left-0 right-0 mb-2 backdrop-blur-2xl border rounded-2xl shadow-xl overflow-hidden z-50 ${
          isDark
            ? 'bg-slate-900/95 border-white/20'
            : 'bg-white/95 border-black/10'
        }`}>
          {/* User Info Header */}
          <div className={`px-4 py-3 border-b ${isDark ? 'border-white/10' : 'border-slate-200'}`}>
            <p className={`text-sm font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>
              {userName}
            </p>
            <p className={`text-xs ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
              {userEmail}
            </p>
          </div>

          {/* Menu Items */}
          <div className="py-1">
            {menuItems.map((item) => (
              <button
                key={item.id}
                onClick={item.onClick}
                className={`w-full flex items-center gap-3 px-4 py-3 transition-all ${
                  item.danger
                    ? isDark
                      ? 'text-red-400 hover:bg-red-500/20'
                      : 'text-red-600 hover:bg-red-50'
                    : isDark
                      ? 'text-white/80 hover:bg-white/10 hover:text-white'
                      : 'text-slate-700 hover:bg-slate-100 hover:text-slate-900'
                }`}
              >
                <span className="flex-shrink-0">{item.icon}</span>
                <span className="text-sm font-medium">{t(item.labelKey)}</span>
              </button>
            ))}
          </div>
        </div>
      )}
    </div>
  )
}