"use client";

import { useState, type ReactNode } 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>
  );
}

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,
    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 (
    <>
      <div className="w-full relative" 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" 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={onImageError}
                    unoptimized
                  />
                )}
              </div>
            </div>
          </div>
        </div>

        <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>
          {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>
    </>
  );
}

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="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"}>
          {!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 }}>
        <DiscordProfileCard
          userName={userName}
          userImage={userImage}
          profile={profile}
          imgError={imgError}
          onImageError={() => setImgError(true)}
        />

        {/* 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>
  );
}