erika/components/avatar.tsx

"use client";

import { useState, type ReactNode } from "react";
import { usePathname } from "next/navigation";
import Link from "next/link";
import Image from "next/image";
import { LogOut, UserRound } from "lucide-react";
import { signOut } from "next-auth/react";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuSeparator,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Button } from "@/components/ui/button";
import {
  Avatar,
  AvatarFallback,
  AvatarImage,
} from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import type {
  DiscordMemberProfile as DiscordMemberProfileData,
  DiscordRole,
} from "@/lib/discord/discord";
import {
  discordColorToHex,
} from "@/lib/discord/profile-appearance";
import { cn } from "@/lib/utils";

export type DiscordMemberProfile = DiscordMemberProfileData;

const DEFAULT_ROLE_COLOR = "#99aab5";

type DiscordAvatarProps = {
  avatarUrl: string | null;
  decorationUrl?: string | null;
  alt: string;
  fallback: string;
  className?: string;
  imageError?: boolean;
  onImageError?: () => void;
};

export function DiscordAvatar({
  avatarUrl,
  decorationUrl,
  alt,
  fallback,
  className,
  imageError = false,
  onImageError,
}: DiscordAvatarProps) {
  return (
    <div className={cn("relative shrink-0", className)}>
      <Avatar className="size-full">
        {!imageError && avatarUrl && (
          <AvatarImage src={avatarUrl} alt={alt} onError={onImageError} />
        )}
        <AvatarFallback>{fallback}</AvatarFallback>
      </Avatar>
      {decorationUrl && (
        <Image
          src={decorationUrl}
          alt=""
          aria-hidden
          width={160}
          height={160}
          className="pointer-events-none absolute left-1/2 top-1/2 size-[125%] max-w-none -translate-x-1/2 -translate-y-1/2 object-contain"
          unoptimized
        />
      )}
    </div>
  );
}

export function DiscordServerTag({
  primaryGuild,
}: Pick<DiscordMemberProfile, "primaryGuild">) {
  if (!primaryGuild) return null;

  return (
    <Badge
      variant="secondary"
      className="h-6 shrink-0 rounded-full px-2 text-xs"
      aria-label={`Server tag ${primaryGuild.tag}`}
    >
      {primaryGuild.badgeUrl && (
        <Image
          src={primaryGuild.badgeUrl}
          alt=""
          width={16}
          height={16}
          unoptimized
        />
      )}
      {primaryGuild.tag}
    </Badge>
  );
}

function initials(value: string) {
  return value.trim().slice(0, 2).toLocaleUpperCase("th-TH") || "?";
}

function RolePill({ role }: { role: DiscordRole }) {
  const colorHex = role.color === 0
    ? DEFAULT_ROLE_COLOR
    : discordColorToHex(role.color);
  return (
    <div className="inline-flex items-center gap-1 border border-border bg-muted/50 px-2 py-1 text-xs font-medium">
      <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>
  );
}

function DiscordProfileCard({
  userName,
  userImage,
  profile,
  imgError,
  onImageError,
}: {
  userName: string;
  userImage: string;
  profile: DiscordMemberProfile | null;
  imgError: boolean;
  onImageError: () => void;
}) {
  const displayAvatar = profile?.avatarUrl || userImage;
  const displayName = profile?.globalName || userName;
  const username = profile?.username || userName;
  const bannerStyle = {
    height: 100,
    backgroundImage: profile?.bannerUrl ? `url(${profile.bannerUrl})` : undefined,
    backgroundSize: "cover" as const,
    backgroundPosition: "center" as const,
  };

  return (
    <div>
      <div className="relative w-full bg-muted" style={bannerStyle} />
      <div className="relative px-3 pb-3">
        <div className="absolute" style={{ top: -56, left: 12 }}>
          <div className="relative">
            <div className="rounded-full bg-popover p-1.5">
              <DiscordAvatar
                avatarUrl={displayAvatar || null}
                decorationUrl={profile?.avatarDecorationUrl}
                alt={displayName}
                fallback={initials(displayName)}
                className="size-19"
                imageError={imgError}
                onImageError={onImageError}
              />
            </div>
          </div>
        </div>

        <div style={{ paddingTop: 36 }}>
          <div className="flex min-w-0 items-center gap-2">
            <div className="truncate font-bold text-lg leading-tight text-foreground">
              {displayName}
            </div>
            {profile && <DiscordServerTag primaryGuild={profile.primaryGuild} />}
          </div>
          <div className="text-xs text-muted-foreground mt-1">
            {username}
          </div>
          {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>
    </div>
  );
}

export function DiscordProfileDropdown({
  userName,
  userImage = "",
  profile,
  children,
}: {
  userName: string;
  userImage?: string;
  profile: DiscordMemberProfile;
  children: ReactNode;
}) {
  const [imgError, setImgError] = useState(false);

  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
      <DropdownMenuContent
        align="start"
        className="overflow-hidden p-0"
        style={{ width: 280 }}
      >
        <DiscordProfileCard
          userName={userName}
          userImage={userImage}
          profile={profile}
          imgError={imgError}
          onImageError={() => setImgError(true)}
        />
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

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;

  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"}>
          <DiscordAvatar
            avatarUrl={displayAvatar || null}
            decorationUrl={profile?.avatarDecorationUrl}
            alt={displayName}
            fallback={initials(displayName)}
            className="size-8"
            imageError={imgError}
            onImageError={() => setImgError(true)}
          />
          {showName && <span className="text-sm font-medium">{displayName}</span>}
        </Button>
      </DropdownMenuTrigger>

      <DropdownMenuContent
        align="end"
        className="overflow-hidden p-0"
        style={{ width: 280 }}
      >
        <DiscordProfileCard
          userName={userName}
          userImage={userImage}
          profile={profile}
          imgError={imgError}
          onImageError={() => setImgError(true)}
        />

        <DropdownMenuSeparator />
        <DropdownMenuGroup className="p-2">
          <DropdownMenuItem asChild>
            <Link href="/profile">
              <UserRound />
              โปรไฟล์ของฉัน
            </Link>
          </DropdownMenuItem>
          <DropdownMenuItem
            onClick={() => signOut({ callbackUrl: pathname })}
            className="text-destructive"
          >
            <LogOut />
            ออกจากระบบ
          </DropdownMenuItem>
        </DropdownMenuGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}