"use client";

import Link from "next/link";
import { signIn, signOut, useSession } from "next-auth/react";

type AuthButtonProps = {
  className?: string;
  label?: string;
  compact?: boolean;
};

export default function AuthButton({
  className = "",
  label = "Se connecter avec Discord",
  compact = false,
}: AuthButtonProps) {
  const { data: session, status } = useSession();

  if (status === "loading") {
    return (
      <div
        className={`inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-xs text-slate-200 ${className}`}
      >
        <span className="h-2 w-2 animate-pulse rounded-full bg-cyan-300" />
        <span>Loading</span>
      </div>
    );
  }

  if (!session?.user) {
    return (
      <button
        type="button"
        onClick={() => signIn("discord", { callbackUrl: "/" })}
        className={`inline-flex items-center justify-center gap-2 rounded-full border border-white/15 bg-white/5 px-4 py-2 text-xs font-semibold uppercase tracking-[0.2em] text-white transition hover:bg-white/10 ${className}`}
      >
        <span className="h-2 w-2 rounded-full bg-cyan-300" />
        <span>{label}</span>
      </button>
    );
  }

  const avatarUrl = session.user.discordAvatar && session.user.discordId
    ? `https://cdn.discordapp.com/avatars/${session.user.discordId}/${session.user.discordAvatar}.png`
    : session.user.image ?? "";

  return (
    <div
      className={`flex items-center gap-2 ${compact ? "" : "rounded-full border border-white/10 bg-white/5 px-3 py-2"} ${className}`}
    >
      {avatarUrl ? (
        <img
          src={avatarUrl}
          alt={session.user.discordUsername ?? "Discord avatar"}
          className="h-8 w-8 rounded-full border border-white/20 object-cover"
        />
      ) : (
        <div className="h-8 w-8 rounded-full border border-white/20 bg-white/10" />
      )}
      <div className="hidden sm:flex sm:flex-col">
        <span className="text-xs font-semibold text-white">
          {session.user.discordUsername ?? session.user.name ?? "Player"}
        </span>
        <span className="text-[10px] uppercase tracking-[0.2em] text-slate-400">
          {session.user.isAdmin ? "Admin" : "Connected"}
        </span>
      </div>
      <div className="flex items-center gap-2">
        {session.user.isAdmin ? (
          <Link
            href="/admin"
            className="rounded-full border border-white/10 px-3 py-1 text-[10px] uppercase tracking-[0.25em] text-cyan-200/90 transition hover:border-cyan-300/40"
          >
            Admin
          </Link>
        ) : null}
        <button
          type="button"
          onClick={() => signOut({ callbackUrl: "/" })}
          className="rounded-full border border-white/10 px-3 py-1 text-[10px] uppercase tracking-[0.25em] text-white/80 transition hover:border-white/30"
        >
          Sign out
        </button>
      </div>
    </div>
  );
}