"use client";

import { UserRound } from "lucide-react";
import { useTranslation } from "react-i18next";

import { useActivePlayerCurrency } from "@/hooks/use-active-player-currency";
import { cn } from "@/lib/utils";
import { usePlayerSessionStore } from "@/stores/player-session-store";

/**
 * 顶栏：当前玩家称呼 + 默认币种（依赖入口或 Hydrate 拉取的 profile）。
 */
export function PlayerSessionBar({ className }: { className?: string }) {
  const profile = usePlayerSessionStore((s) => s.profile);
  const { activeCurrency } = useActivePlayerCurrency();
  const { t } = useTranslation("player");

  const label =
    profile?.nickname?.trim() ||
    profile?.username?.trim() ||
    (profile?.id != null ? t("player.fallback", { id: profile.id }) : null);

  return (
    <div
      className={cn(
        "flex min-w-0 max-w-[55%] items-center gap-1.5",
        className,
      )}
    >
      <span className="flex size-7 shrink-0 items-center justify-center rounded-full bg-muted">
        <UserRound className="size-3.5 text-muted-foreground" aria-hidden />
      </span>
      <div className="min-w-0 leading-tight">
        <p className="truncate text-xs font-medium text-foreground">
          {label ?? "…"}
        </p>
        {activeCurrency ? (
          <p className="truncate text-[11px] text-muted-foreground">
            {activeCurrency}
            {profile?.locale ? (
              <span className="text-muted-foreground/80">
                {" "}
                · {profile.locale}
              </span>
            ) : null}
          </p>
        ) : null}
      </div>
    </div>
  );
}
