gruperly/apps/web/src/components/layout/UserMenu.tsx

import { useEffect, useRef, useState } from 'react'
import { createPortal } from 'react-dom'
import { Link, useNavigate } from '@tanstack/react-router'
import { ChevronDown, LogOut, Settings, UserRound, X } from 'lucide-react'
import { cn } from '../../lib/utils'
import { signOut } from '../../lib/auth-client'
import { useAuth } from '../../context/AuthProvider'
import { useIsMobile } from '../../hooks/useIsMobile'
import { Avatar } from '../ui'

const itemClass =
  'flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left text-sm font-medium text-primary transition-colors hover:bg-primary-soft'

export function UserMenu() {
  const { user } = useAuth()
  const isMobile = useIsMobile()
  const [open, setOpen] = useState(false)
  const ref = useRef<HTMLDivElement>(null)
  const navigate = useNavigate()

  useEffect(() => {
    if (!open || isMobile) return
    const handlePointerDown = (event: PointerEvent) => {
      if (ref.current && !ref.current.contains(event.target as Node)) setOpen(false)
    }
    document.addEventListener('pointerdown', handlePointerDown)
    return () => document.removeEventListener('pointerdown', handlePointerDown)
  }, [open, isMobile])

  useEffect(() => {
    if (isMobile && open) {
      document.body.style.overflow = 'hidden'
      return () => {
        document.body.style.overflow = ''
      }
    }
  }, [isMobile, open])

  useEffect(() => {
    if (!open) return
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === 'Escape') setOpen(false)
    }
    document.addEventListener('keydown', handleKeyDown)
    return () => document.removeEventListener('keydown', handleKeyDown)
  }, [open])

  const handleSignOut = async () => {
    setOpen(false)
    await signOut({ fetchOptions: { headers: { 'Cache-Control': 'no-cache' } } })
    navigate({ to: '/login' })
  }

  return (
    <div ref={ref} className="relative">
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        aria-haspopup="menu"
        aria-expanded={open}
        className="flex items-center gap-2 rounded-xl p-1 transition-colors hover:bg-primary-soft"
      >
        <Avatar name={user?.name} src={user?.image ?? undefined} className="size-8 lg:size-9" />
        <span className="hidden max-w-40 flex-col items-start leading-tight lg:flex">
          <span className="truncate text-sm font-medium text-primary">{user?.name ?? 'Usuario'}</span>
        </span>
        <ChevronDown
          className={cn(
            'hidden size-4 text-foreground/50 transition-transform lg:block',
            open && 'rotate-180',
          )}
        />
      </button>

      {isMobile
        ? open
          ? createPortal(
              <div role="dialog" aria-modal="true" className="fixed inset-0 z-50 lg:hidden">
                <div
                  aria-hidden="true"
                  className="absolute inset-0 animate-fade-in bg-black/20 backdrop-blur-sm"
                  onClick={() => setOpen(false)}
                />
                <div className="absolute inset-0 flex animate-fade-in flex-col overflow-y-auto bg-white/90 backdrop-blur">
                  <button
                    type="button"
                    onClick={() => setOpen(false)}
                    aria-label="Cerrar menú"
                    className="absolute right-4 top-4 z-20 rounded-full bg-white/90 p-2 text-foreground/70 shadow-md backdrop-blur transition-colors hover:bg-white"
                  >
                    <X className="size-5" />
                  </button>
                  <div className="flex min-h-full flex-col items-center justify-center gap-8 px-6 py-12">
                    <div className="flex flex-col items-center gap-3 text-center">
                      <Avatar
                        name={user?.name}
                        src={user?.image ?? undefined}
                        className="size-16 text-xl"
                      />
                      <div>
                        <p className="text-base font-semibold text-primary">
                          {user?.name ?? 'Usuario'}
                        </p>
                        <p className="text-sm text-foreground/50">{user?.email}</p>
                      </div>
                    </div>

                    <div className="w-full space-y-1.5 rounded-2xl border border-border/60 bg-white/90 p-2 shadow-xl backdrop-blur">
                      <Link
                        role="menuitem"
                        to="/profile"
                        onClick={() => setOpen(false)}
                        className={cn(itemClass, 'py-3.5')}
                      >
                        <UserRound className="size-5 text-foreground/60" />
                        Mi perfil
                      </Link>
                      <Link
                        role="menuitem"
                        to="/settings"
                        onClick={() => setOpen(false)}
                        className={cn(itemClass, 'py-3.5')}
                      >
                        <Settings className="size-5 text-foreground/60" />
                        Ajustes
                      </Link>
                    </div>

                    <button
                      type="button"
                      role="menuitem"
                      onClick={handleSignOut}
                      className={cn(
                        itemClass,
                        'w-full justify-center border border-border bg-white/90 py-3.5 shadow-sm backdrop-blur hover:bg-primary-soft',
                      )}
                    >
                      <LogOut className="size-5 text-foreground/60" />
                      Cerrar sesión
                    </button>
                  </div>
                </div>
              </div>,
              document.body,
            )
          : null
        : open ? (
        <div
          role="menu"
          className="absolute right-0 top-full z-50 mt-2 w-60 rounded-xl border border-border bg-white p-1.5 shadow-lg"
        >
          <div className="px-3 py-2">
            <p className="truncate text-sm font-semibold text-primary">{user?.name ?? 'Usuario'}</p>
            <p className="truncate text-xs text-foreground/50">{user?.email}</p>
          </div>
          <div className="mx-3 my-1 h-px bg-border" />
          <Link role="menuitem" to="/profile" onClick={() => setOpen(false)} className={itemClass}>
            <UserRound className="size-4 text-foreground/60" />
            Mi perfil
          </Link>
          <Link role="menuitem" to="/settings" onClick={() => setOpen(false)} className={itemClass}>
            <Settings className="size-4 text-foreground/60" />
            Ajustes
          </Link>
          <div className="mx-3 my-1 h-px bg-border" />
          <button type="button" role="menuitem" onClick={handleSignOut} className={itemClass}>
            <LogOut className="size-4 text-foreground/60" />
            Cerrar sesión
          </button>
        </div>
      ) : null}
    </div>
  )
}