erika/components/dropdown-menu-avatar.tsx

"use client";

import { useState } from "react";
import { usePathname } from "next/navigation";
import Image from "next/image";
import { LogOut } from "lucide-react";
import { signOut } from "next-auth/react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
import type { DiscordRole } from "@/lib/discord";

export interface DiscordMemberProfile {
  id: string;
  username: string;
  globalName: string | null;
  avatarUrl: string | null;
  bannerUrl: string | null;
  accentColor: number | null;
  roles: DiscordRole[];
}

const toHex = (n: number) => `#${n.toString(16).padStart(6, "0")}`;
const DEFAULT_ROLE_COLOR = "#99aab5";

function RolePill({ role }: { role: DiscordRole }) {
  const colorHex = role.color === 0 ? DEFAULT_ROLE_COLOR : toHex(role.color);
  return (
    <div className="inline-flex items-center gap-1 rounded-sm px-2 py-1 text-xs font-medium bg-muted/50 border border-border">
      <div
        className="w-2 h-2 rounded-full shrink-0"
        style={{ backgroundColor: colorHex }}
      />
      <span className="text-foreground max-w-40 truncate">
        {role.name}
      </span>
    </div>
  );
}

export function DropdownMenuAvatar({
  userName,
  userImage,
  profile,
  showName = true,
}: {
  userName: string;
  userImage: string;
  profile: DiscordMemberProfile | null;
  showName?: boolean;
}) {
  const [imgError, setImgError] = useState(false);
  const pathname = usePathname();

  const displayAvatar = profile?.avatarUrl || userImage;
  const displayName = profile?.globalName || userName;
  const username = profile?.username || userName;

  const bannerStyle = {
    height: 100,
    backgroundColor: profile?.accentColor
      ? toHex(profile.accentColor)
      : "hsl(var(--muted))",
    backgroundImage: profile?.bannerUrl ? `url(${profile.bannerUrl})` : "none",
    backgroundSize: "cover" as const,
    backgroundPosition: "center" as const,
  };

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" className={showName ? "pl-1 pr-2 flex items-center gap-2" : "h-9 w-9 rounded-full p-0 flex items-center justify-center"}>
          {!imgError && displayAvatar ? (
            <Image
              src={displayAvatar}
              alt={displayName}
              width={32}
              height={32}
              className="rounded-full object-cover shrink-0"
              onError={() => setImgError(true)}
              unoptimized
            />
          ) : (
            <div className="w-8 h-8 rounded-full bg-muted shrink-0" />
          )}
          {showName && <span className="text-sm font-medium">{displayName}</span>}
        </Button>
      </DropdownMenuTrigger>

      <DropdownMenuContent align="end" className="p-0" style={{ width: 280 }}>
        {/* Banner Section */}
        <div className="w-full relative" style={bannerStyle} />

        {/* Body Area */}
        <div className="relative px-3 pb-3">
          {/* Avatar - Absolute Positioned to overlap banner and body */}
          <div className="absolute" style={{ top: -56, left: 12 }}>
            <div className="relative">
              <div className="rounded-full bg-popover" style={{ padding: 5 }}>
                <div
                  className="rounded-full overflow-hidden bg-muted"
                  style={{ width: 76, height: 76 }}
                >
                  {!imgError && displayAvatar && (
                    <Image
                      src={displayAvatar}
                      alt={displayName}
                      width={76}
                      height={76}
                      className="object-cover w-full h-full"
                      onError={() => setImgError(true)}
                      unoptimized
                    />
                  )}
                </div>
              </div>
            </div>
          </div>

          {/* Profile Info Section */}
          <div style={{ paddingTop: 36 }}>
            <div className="font-bold text-lg leading-tight text-foreground">
              {displayName}
            </div>
            <div className="text-xs text-muted-foreground mt-1">
              {username}
            </div>
            {/* Roles Section */}
            {profile && profile.roles.length > 0 && (
              <div className="mt-2">
                <div className="text-xs text-muted-foreground uppercase tracking-wider mb-2">
                  Roles / บทบาท
                </div>
                <div className="flex flex-wrap gap-1">
                  {profile.roles.map((role) => (
                    <RolePill key={role.id} role={role} />
                  ))}
                </div>
              </div>
            )}
          </div>
        </div>

        {/* Footer / Sign Out */}
        <div className="p-2 border-t">
          <DropdownMenuItem
            onClick={() => signOut({ callbackUrl: pathname })}
            className="text-destructive"
          >
            <LogOut className="w-4 h-4 mr-2" />
            ออกจากระบบ
          </DropdownMenuItem>
        </div>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}