'use client'

import { useEffect, useRef, useState } from 'react'
import { LogOut, User as UserIcon } from 'lucide-react'
import { authClient } from '@/lib/auth/client'
import { cn } from '@/lib/utils'

interface UserMenuProps {
  collapsed?: boolean
}

export function UserMenu({ collapsed = false }: UserMenuProps) {
  const { data: session, isPending } = authClient.useSession()
  const [open, setOpen] = useState(false)
  const [signingOut, setSigningOut] = useState(false)
  const wrapperRef = useRef<HTMLDivElement>(null)

  // Close on outside click
  useEffect(() => {
    if (!open) return
    const handler = (e: MouseEvent) => {
      if (wrapperRef.current && !wrapperRef.current.contains(e.target as Node)) {
        setOpen(false)
      }
    }
    document.addEventListener('mousedown', handler)
    return () => document.removeEventListener('mousedown', handler)
  }, [open])

  if (isPending || !session?.user) return null

  const user = session.user
  const displayName = user.name || user.email || 'User'
  const initial = (displayName || '?').trim().charAt(0).toUpperCase()

  async function handleSignOut() {
    setSigningOut(true)
    try {
      await authClient.signOut()
    } finally {
      // Hard reload to clear all in-memory state and let middleware redirect to /login
      window.location.href = '/login'
    }
  }

  const avatar = user.image ? (
    // eslint-disable-next-line @next/next/no-img-element
    <img
      src={user.image}
      alt={displayName}
      className="w-7 h-7 rounded-xl object-cover shrink-0"
      referrerPolicy="no-referrer"
    />
  ) : (
    <div className="w-7 h-7 rounded-xl bg-primary-subtle text-brand-primary flex items-center justify-center text-[12px] font-semibold shrink-0">
      {initial}
    </div>
  )

  return (
    <div ref={wrapperRef} className="relative">
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        title={collapsed ? `${displayName}\n${user.email || ''}` : undefined}
        className={cn(
          'flex items-center gap-2 w-full rounded-lg transition-colors hover:bg-surface-hover',
          collapsed ? 'justify-center p-1.5' : 'px-2 py-1.5'
        )}
      >
        {avatar}
        {!collapsed && (
          <div className="flex-1 min-w-0 text-left">
            <div className="text-[13px] font-medium text-primary truncate">{displayName}</div>
            {user.email && (
              <div className="text-[11px] text-muted truncate">{user.email}</div>
            )}
          </div>
        )}
      </button>

      {open && (
        <div
          className={cn(
            'absolute z-50 bg-surface border border-subtle rounded-lg shadow-lg py-1 min-w-[180px] animate-slide-down',
            collapsed ? 'left-full ml-2 bottom-0' : 'left-2 right-2 bottom-full mb-1'
          )}
        >
          <div className="px-3 py-2 border-b border-subtle">
            <div className="text-[12px] font-medium text-primary truncate">{displayName}</div>
            {user.email && (
              <div className="text-[11px] text-muted truncate">{user.email}</div>
            )}
          </div>
          <button
            type="button"
            disabled={signingOut}
            onClick={handleSignOut}
            className="flex items-center gap-2 w-full px-3 py-1.5 text-[12px] text-coral hover:bg-surface-hover transition-colors disabled:opacity-60"
          >
            {signingOut ? <UserIcon size={12} /> : <LogOut size={12} />}
            {signingOut ? 'Signing out…' : 'Sign out'}
          </button>
        </div>
      )}
    </div>
  )
}