import { Button } from "@/components/ui/button";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { LogOut, User } from "lucide-react";

interface UserDropdownProps {
  user: any;
  onProfileClick: () => void;
  onLogout: () => void;
}

/**
 * 사용자 드롭다운 메뉴 컴포넌트
 */
export function UserDropdown({ user, onProfileClick, onLogout }: UserDropdownProps) {
  if (!user) return null;

  return (
    <DropdownMenu modal={false}>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" className="relative h-8 w-8 rounded-full">
          <div className="relative flex h-8 w-8 shrink-0 overflow-hidden rounded-full">
            {user.photo && user.photo.trim() !== "" && user.photo !== "null" ? (
              <img
                src={user.photo}
                alt={user.userName || "User"}
                className="aspect-square h-full w-full object-cover"
              />
            ) : (
              <div className="flex h-full w-full items-center justify-center rounded-full bg-slate-200 font-semibold text-slate-700">
                {user.userName?.substring(0, 1)?.toUpperCase() || "U"}
              </div>
            )}
          </div>
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent className="w-56" align="end">
        <DropdownMenuLabel className="font-normal">
          <div className="flex items-center space-x-3">
            {/* 프로필 사진 표시 */}
            <div className="relative flex h-12 w-12 shrink-0 overflow-hidden rounded-full">
              {user.photo && user.photo.trim() !== "" && user.photo !== "null" ? (
                <img
                  src={user.photo}
                  alt={user.userName || "User"}
                  className="aspect-square h-full w-full object-cover"
                />
              ) : (
                <div className="flex h-full w-full items-center justify-center rounded-full bg-slate-200 text-base font-semibold text-slate-700">
                  {user.userName?.substring(0, 1)?.toUpperCase() || "U"}
                </div>
              )}
            </div>

            {/* 사용자 정보 */}
            <div className="flex flex-col space-y-1">
              <p className="text-sm leading-none font-medium">
                {user.userName || "사용자"} ({user.userId || ""})
              </p>
              <p className="text-muted-foreground text-xs leading-none font-semibold">{user.email || ""}</p>
              <p className="text-muted-foreground text-xs leading-none font-semibold">
                {user.deptName && user.positionName
                  ? `${user.deptName}, ${user.positionName}`
                  : user.deptName || user.positionName || "부서 정보 없음"}
              </p>
              {/* 사진 상태 표시 */}
            </div>
          </div>
        </DropdownMenuLabel>
        <DropdownMenuSeparator />
        <DropdownMenuItem onClick={onProfileClick}>
          <User className="mr-2 h-4 w-4" />
          <span>프로필</span>
        </DropdownMenuItem>
        <DropdownMenuItem onClick={onLogout}>
          <LogOut className="mr-2 h-4 w-4" />
          <span>로그아웃</span>
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}