"use client";

import { useRef, useState } from "react";
import { useLocale, useTranslations } from "next-intl";
import { signOut } from "next-auth/react";
import type { Session } from "next-auth";
import { ChevronDown, LogOut, Settings, UserCircle } from "lucide-react";
import { Link } from "@/i18n/navigation";
import Badge from "@/components/ui/Badge";
import { useClickOutside } from "@/hooks/useClickOutside";

export default function UserMenu({ session }: { session: Session }) {
  const t = useTranslations("common");
  const tn = useTranslations("nav");
  const locale = useLocale();
  const [open, setOpen] = useState(false);
  const rootRef = useRef<HTMLDivElement>(null);

  const roleName: string = (session.user as { role?: { name?: string } }).role?.name ?? "USER";
  const accountType = (session.user as { accountType?: string }).accountType;
  const permissions: string[] =
    (session.user as { permissions?: string[] }).permissions ?? [];
  const canViewSettings =
    accountType === "DEV" || roleName === "SUPER_ADMIN" || permissions.includes("SETTINGS_VIEW");
  const initial =
    session.user.name?.[0]?.toUpperCase() ??
    session.user.email?.[0]?.toUpperCase() ??
    "?";

  useClickOutside(rootRef, () => setOpen(false), open);

  return (
    <div ref={rootRef} className="relative">
      <button
        type="button"
        onClick={() => setOpen((value) => !value)}
        aria-expanded={open}
        aria-haspopup="menu"
        className="flex cursor-pointer items-center gap-2 rounded-md px-1.5 py-1 text-start transition-colors hover:bg-[var(--bg-hover)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--accent)]/35"
      >
        <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[var(--bg-surface)] ring-1 ring-[var(--border)] text-xs font-semibold text-[var(--text-muted)]">
          {initial}
        </div>
        <div className="hidden min-w-0 max-w-[140px] md:block">
          <p className="truncate text-sm font-medium text-[var(--text)]">{session.user.name}</p>
          {session.user.username && (
            <p className="truncate text-xs text-[var(--text-faint)]">@{session.user.username}</p>
          )}
        </div>
        <ChevronDown
          className={`hidden h-4 w-4 shrink-0 text-[var(--text-faint)] transition-transform md:block ${open ? "rotate-180" : ""}`}
          aria-hidden
        />
      </button>

      {open && (
        <div
          role="menu"
          className="absolute end-0 top-[calc(100%+6px)] z-50 w-[min(16rem,calc(100vw-2rem))] overflow-hidden rounded-lg border border-[var(--border)] bg-[var(--bg-elevated)] shadow-[0_12px_40px_rgba(0,0,0,0.45)]"
        >
          <div className="border-b border-[var(--border)] px-4 py-3">
            <p className="truncate text-sm font-medium">{session.user.name}</p>
            {session.user.username && (
              <p className="mt-0.5 truncate text-xs text-[var(--text-faint)]">
                @{session.user.username}
              </p>
            )}
            <p className="mt-0.5 truncate text-xs text-[var(--text-faint)]">
              {session.user.email}
            </p>
            <div className="mt-2">
              <Badge variant="role" role={roleName}>
                {roleName.replace(/_/g, " ")}
              </Badge>
            </div>
          </div>

          <div className="p-1">
            <Link
              href="/dashboard/profile"
              role="menuitem"
              onClick={() => setOpen(false)}
              className="flex cursor-pointer items-center gap-2.5 rounded-md px-3 py-2 text-sm text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text)]"
            >
              <UserCircle className="h-4 w-4 shrink-0" />
              {tn("profile")}
            </Link>
            {canViewSettings && (
              <Link
                href="/dashboard/settings"
                role="menuitem"
                onClick={() => setOpen(false)}
                className="flex cursor-pointer items-center gap-2.5 rounded-md px-3 py-2 text-sm text-[var(--text-muted)] transition-colors hover:bg-[var(--bg-hover)] hover:text-[var(--text)]"
              >
                <Settings className="h-4 w-4 shrink-0" />
                {tn("settings")}
              </Link>
            )}
            <button
              type="button"
              role="menuitem"
              onClick={() => signOut({ callbackUrl: `/${locale}/login` })}
              className="flex w-full cursor-pointer items-center gap-2.5 rounded-md px-3 py-2 text-sm text-[var(--text-muted)] transition-colors hover:bg-red-500/10 hover:text-red-400"
            >
              <LogOut className="h-4 w-4 shrink-0" />
              {t("signOut")}
            </button>
          </div>
        </div>
      )}
    </div>
  );
}