import { Building2, ChevronDown, LogOut, Settings, User, Wifi } from 'lucide-react';

import { Button } from '@/components/ui/button';
import { TOP_BAR_PROFILE_MENU_ITEMS } from '@/shared/constants/topBar';
import type { CampusInfo } from '@/shared/types/app';
import { cn } from '@/lib/utils';

interface TopBarProfileMenuProps {
  readonly userName: string;
  readonly initials: string;
  readonly campusInfo?: CampusInfo;
  readonly campusLabel: string;
  readonly profileRoleLabel: string;
  readonly isOpen: boolean;
  readonly onToggle: () => void;
  readonly onClose: () => void;
  readonly onSignOut: () => Promise<void>;
}

export function TopBarProfileMenu({
  userName,
  initials,
  campusInfo,
  campusLabel,
  profileRoleLabel,
  isOpen,
  onToggle,
  onClose,
  onSignOut,
}: TopBarProfileMenuProps) {
  const avatarClassName = campusInfo
    ? cn('bg-gradient-to-br', campusInfo.bgGradient)
    : 'bg-gradient-to-br from-violet-500 to-amber-400 shadow-violet-500/20';

  return (
    <div className="relative">
      <Button
        type="button"
        variant="ghost"
        onClick={onToggle}
        aria-expanded={isOpen}
        className="flex items-center gap-2 pl-2 border-l border-slate-700/50 hover:bg-slate-800/50 rounded-xl pr-2 py-1 transition-colors h-auto"
      >
        <span className={cn('w-8 h-8 rounded-xl flex items-center justify-center text-white text-xs font-bold shadow-lg', avatarClassName)}>
          {initials}
        </span>
        <span className="hidden md:block text-left">
          <span className="text-sm font-medium text-slate-200 leading-tight block">{userName}</span>
          <span className="text-[10px] text-slate-500 leading-tight block">{campusLabel}</span>
        </span>
        <ChevronDown size={14} className="text-slate-500 hidden md:block" />
      </Button>

      {isOpen && (
        <>
          <div className="fixed inset-0 z-30" onClick={onClose} role="presentation" />
          <div className="absolute right-0 top-full mt-2 w-64 bg-slate-800 rounded-xl shadow-2xl shadow-black/40 border border-slate-700/50 py-2 z-40">
            <div className="px-4 py-3 border-b border-slate-700/50">
              <div className="flex items-center gap-3">
                <div className={cn('w-10 h-10 rounded-xl flex items-center justify-center text-white text-sm font-bold shadow-lg', avatarClassName)}>
                  {initials}
                </div>
                <div>
                  <p className="text-sm font-semibold text-white">{userName}</p>
                  <p className="text-[10px] text-slate-400">{profileRoleLabel}</p>
                </div>
              </div>
              {campusInfo ? (
                <div className={cn('mt-2 flex items-center gap-1.5 text-[10px]', campusInfo.textColor)}>
                  <div className={cn('w-3 h-3 rounded bg-gradient-to-br', campusInfo.bgGradient)} />
                  <span className="font-semibold">{campusInfo.mascot}</span>
                  {campusInfo.isOnline && (
                    <>
                      <Wifi size={8} />
                      <span className="text-slate-500">(Online)</span>
                    </>
                  )}
                </div>
              ) : (
                <div className="mt-2 flex items-center gap-1.5 text-[10px] text-slate-500">
                  <Building2 size={10} />
                  <span>{campusLabel}</span>
                </div>
              )}
            </div>

            <div className="py-1">
              {TOP_BAR_PROFILE_MENU_ITEMS.map((item) => {
                const Icon = item.id === 'profile' ? User : Settings;

                return (
                  <Button
                    key={item.id}
                    type="button"
                    variant="ghost"
                    disabled
                    className="w-full h-auto text-left px-4 py-2.5 flex items-center justify-start gap-3 text-slate-500 opacity-70"
                  >
                    <Icon size={16} />
                    <span className="text-sm">{item.label}</span>
                    <span className="ml-auto text-[10px]">Coming soon</span>
                  </Button>
                );
              })}
            </div>

            <div className="border-t border-slate-700/50 pt-1">
              <Button
                type="button"
                variant="ghost"
                onClick={onSignOut}
                className="w-full h-auto text-left px-4 py-2.5 flex items-center justify-start gap-3 hover:bg-red-500/10 transition-colors text-red-400"
              >
                <LogOut size={16} />
                <span className="text-sm font-medium">Sign Out</span>
              </Button>
            </div>
          </div>
        </>
      )}
    </div>
  );
}
