"use client";

import { useSession } from "next-auth/react";
import { useVoteStore, selectRemaining, TOTAL_VOTE_QUOTA } from "@/lib/store";

/**
 * 导航栏的"剩余票数"徽章。
 * - 始终显示(位于 AuthMenu 左侧)
 * - 未登录:数值固定为 0
 * - 已登录:实时从 vote store 取剩余票
 * - 视觉为中性轻盈胶囊,与 AuthMenu 的紫色实心胶囊明显区分(信息 vs 操作)
 */
export default function RemainingVotesBadge() {
  const { status } = useSession();
  const storeRemaining = useVoteStore(selectRemaining);
  const authed = status === "authenticated";
  // 未登录显示 0 / 12 引导登录后投票;登录后实时剩余
  const remaining = authed ? storeRemaining : 0;

  return (
    <div
      className="hidden md:inline-flex items-center gap-1.5 h-9 px-4 rounded-full bg-white/[0.04] border border-white/10"
      aria-label={`剩余 ${remaining} 票`}
    >
      <span className="text-[11px] text-white/75 leading-none tracking-wide">
        剩余
      </span>
      <span className="font-display text-sm text-purple-300 tabular-nums leading-none">
        {remaining}
      </span>
      <span className="text-[11px] text-white/45 leading-none">
        / {TOTAL_VOTE_QUOTA}
      </span>
    </div>
  );
}