/* tdd-guard:skip — UI primitive, visual-tested via Vercel-Preview */
'use client'

import { useState, useRef, useEffect } from 'react'
import { createPortal } from 'react-dom'
import Link from 'next/link'
import { Settings, LogOut, BarChart3, Globe, Moon, Sun } from 'lucide-react'
import { useTranslation, LOCALE_OPTIONS, type Locale } from '@/lib/i18n/use-translation'
import { useTheme } from 'next-themes'
import { shortDisplayName } from '@/lib/format/display-name'

interface Props {
  name: string
  email: string
  avatarUrl: string | null
}

function getInitials(name: string, email: string) {
  if (name?.trim()) {
    return name
      .split(' ')
      .map((w) => w[0])
      .join('')
      .toUpperCase()
      .slice(0, 2)
  }
  return email.slice(0, 2).toUpperCase()
}

export default function UserMenu({ name, email, avatarUrl }: Props) {
  const [open, setOpen] = useState(false)
  const [showLangPicker, setShowLangPicker] = useState(false)
  const [mounted, setMounted] = useState(false)
  const [triggerRect, setTriggerRect] = useState<DOMRect | null>(null)
  const triggerRef = useRef<HTMLButtonElement>(null)
  const dropdownRef = useRef<HTMLDivElement>(null)
  const { t, locale, setLocale } = useTranslation()
  const { resolvedTheme, setTheme } = useTheme()

  useEffect(() => {
    setMounted(true)
  }, [])

  // Update trigger position on open / window changes
  useEffect(() => {
    if (!open) return
    function updatePosition() {
      if (triggerRef.current) {
        setTriggerRect(triggerRef.current.getBoundingClientRect())
      }
    }
    updatePosition()
    window.addEventListener('resize', updatePosition)
    window.addEventListener('scroll', updatePosition, true)
    return () => {
      window.removeEventListener('resize', updatePosition)
      window.removeEventListener('scroll', updatePosition, true)
    }
  }, [open])

  // Click outside: check both trigger and dropdown
  useEffect(() => {
    function handleClickOutside(e: MouseEvent) {
      const target = e.target as Node
      const insideTrigger = triggerRef.current?.contains(target)
      const insideDropdown = dropdownRef.current?.contains(target)
      if (!insideTrigger && !insideDropdown) {
        setOpen(false)
        setShowLangPicker(false)
      }
    }
    document.addEventListener('pointerdown', handleClickOutside)
    return () => document.removeEventListener('pointerdown', handleClickOutside)
  }, [])

  const initials = getInitials(name, email)
  const displayName = name?.trim() || email.split('@')[0]
  const currentLocale = LOCALE_OPTIONS.find((o) => o.value === locale)

  function handleLocaleChange(newLocale: Locale) {
    setLocale(newLocale)
    setShowLangPicker(false)
    setOpen(false)
  }

  const dropdown =
    open && triggerRect ? (
      <div
        ref={dropdownRef}
        className="fixed w-56 bg-card text-foreground border border-border rounded-sm shadow-lg z-[100] overflow-hidden"
        style={{
          top: triggerRect.bottom + 8,
          right: Math.max(8, window.innerWidth - triggerRect.right),
        }}
      >
        {/* User info header */}
        <div className="px-4 py-3 border-b border-border">
          <p className="text-sm font-semibold truncate">{displayName}</p>
          <p className="text-xs text-muted-foreground truncate">{email}</p>
        </div>

        {/* Menu items */}
        <div className="py-1">
          <Link
            href="/reporting"
            onClick={() => setOpen(false)}
            className="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-muted/50 transition-colors"
          >
            <BarChart3 size={15} className="text-muted-foreground" />
            {t('auth.managementOverview')}
          </Link>
          <Link
            href="/konto"
            onClick={() => setOpen(false)}
            className="flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-muted/50 transition-colors"
          >
            <Settings size={15} className="text-muted-foreground" />
            {t('auth.accountSettings')}
          </Link>

          {/* Language switcher */}
          {!showLangPicker ? (
            <button
              onClick={() => setShowLangPicker(true)}
              className="w-full flex items-center justify-between gap-3 px-4 py-2.5 text-sm hover:bg-muted/50 transition-colors"
            >
              <div className="flex items-center gap-3">
                <Globe size={15} className="text-muted-foreground" />
                {t('settings.language')}
              </div>
              <span className="text-xs text-muted-foreground">
                {currentLocale?.flag} {currentLocale?.label}
              </span>
            </button>
          ) : (
            <div className="border-t border-border">
              <p className="px-4 pt-2 pb-1 text-xs font-semibold text-muted-foreground uppercase tracking-wide">
                {t('settings.language')}
              </p>
              {LOCALE_OPTIONS.map((opt) => (
                <button
                  key={opt.value}
                  onClick={() => handleLocaleChange(opt.value)}
                  className={`w-full flex items-center gap-3 px-4 py-2 text-sm transition-colors ${
                    locale === opt.value
                      ? 'bg-secondary text-primary font-medium'
                      : 'hover:bg-muted/50'
                  }`}
                >
                  <span className="text-base">{opt.flag}</span>
                  {opt.label}
                  {locale === opt.value && (
                    <span className="ml-auto text-xs text-primary">✓</span>
                  )}
                </button>
              ))}
            </div>
          )}

          {/* Theme toggle */}
          <button
            onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
            className="w-full flex items-center gap-3 px-4 py-2.5 text-sm hover:bg-muted/50 transition-colors"
          >
            {resolvedTheme === 'dark' ? (
              <Sun size={15} className="text-muted-foreground" />
            ) : (
              <Moon size={15} className="text-muted-foreground" />
            )}
            {resolvedTheme === 'dark' ? 'Light Mode' : 'Dark Mode'}
          </button>
        </div>

        <div className="border-t border-border py-1">
          <Link
            href="/logout"
            onClick={() => setOpen(false)}
            className="flex items-center gap-3 px-4 py-2.5 text-sm text-destructive hover:bg-destructive/10 transition-colors"
          >
            <LogOut size={15} />
            {t('auth.signOut')}
          </Link>
        </div>
      </div>
    ) : null

  return (
    <>
      <button
        ref={triggerRef}
        onClick={() => setOpen(!open)}
        className="flex items-center gap-2 rounded-sm hover:bg-muted pr-2 pl-0.5 py-0.5 transition-colors"
      >
        {/* Avatar */}
        <div className="w-8 h-8 rounded-sm overflow-hidden shrink-0 bg-primary flex items-center justify-center">
          {avatarUrl ? (
            <img src={avatarUrl} alt={displayName} className="w-full h-full object-cover" />
          ) : (
            <span className="text-xs font-bold text-primary-foreground">{initials}</span>
          )}
        </div>
        <span className="text-sm text-foreground hidden sm:block lg:hidden max-w-24 truncate">{shortDisplayName(displayName)}</span>
        <span className="text-sm text-foreground hidden lg:block max-w-40 truncate">{displayName}</span>
      </button>
      {mounted && dropdown && createPortal(dropdown, document.body)}
    </>
  )
}