UI-UX/src/components/auth/RemainingVotesBadge.tsx

"use client";

import { useSession } from "next-auth/react";
import { useVoteStore, selectRemaining, DAILY_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/0（没有额度）；登录后：当日剩余 / 每日总额度
  const remaining = authed ? storeRemaining : 0;
  const quota = authed ? DAILY_VOTE_QUOTA : 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">/ {quota}</span>
    </div>
  );
}