import type { Artist } from "@/types/artist";
import { cn } from "@/lib/cn";

function formatVotes(v: number): string {
  if (v >= 10_000) return `${(v / 10_000).toFixed(1)}w`;
  return v.toLocaleString();
}

interface RankCardProps {
  artist: Artist;
  /** 全榜单（用于计算与上下名的差距） */
  allArtists: Artist[];
  className?: string;
}

export default function RankCard({ artist, allArtists, className }: RankCardProps) {
  // 按当前票数排序后定位艺人
  const sorted = [...allArtists].sort((a, b) => b.votes - a.votes);
  const idx = sorted.findIndex((a) => a.id === artist.id);
  const prev = idx > 0 ? sorted[idx - 1] : undefined;
  const next = idx < sorted.length - 1 ? sorted[idx + 1] : undefined;

  const leadOver = next ? artist.votes - next.votes : null;
  const trailBehind = prev ? prev.votes - artist.votes : null;

  // 0 票时即便 rank=1 也不是真的"冠军"，按编号兜底而已
  const isFirst = artist.rank === 1 && artist.votes > 0;
  const inTop12 = artist.rank <= 12 && artist.votes > 0;

  return (
    <div
      className={cn(
        "bg-elevated/60 backdrop-blur-md border border-white/10 rounded-xl p-4 sm:p-5 grid grid-cols-2 gap-4",
        className,
      )}
    >
      {/* 当前排名 */}
      <div>
        <div className="font-label text-[10px] tracking-widest uppercase text-white/40 mb-1">
          当前排名
        </div>
        <div className="flex items-end gap-2">
          <span
            className={cn(
              "font-display text-3xl sm:text-4xl tabular-nums leading-none",
              inTop12 ? "text-purple-300 glow-text-purple" : "text-white/70",
            )}
          >
            #{artist.rank}
          </span>
          <span className="text-xs text-white/45 pb-1 tabular-nums">
            {formatVotes(artist.votes)} 票
          </span>
        </div>
        {inTop12 && (
          <span className="inline-block mt-2 font-label text-[10px] tracking-widest text-pink-400 uppercase">
            ✦ 出道位
          </span>
        )}
      </div>

      {/* 差距信息 · 仅在艺人本身有票时显示 */}
      <div className="text-right">
        {artist.votes > 0 && isFirst && leadOver != null ? (
          <>
            <div className="font-label text-[10px] tracking-widest uppercase text-white/40 mb-1">
              领先第二名
            </div>
            <div className="font-display text-lg sm:text-xl text-pink-400 tabular-nums">
              +{leadOver.toLocaleString()}
            </div>
            <div className="text-[10px] text-white/40">票</div>
          </>
        ) : artist.votes > 0 && trailBehind != null ? (
          <>
            <div className="font-label text-[10px] tracking-widest uppercase text-white/40 mb-1">
              距上一名
            </div>
            <div className="font-display text-lg sm:text-xl text-purple-300 tabular-nums">
              −{trailBehind.toLocaleString()}
            </div>
            <div className="text-[10px] text-white/40">票</div>
          </>
        ) : null}
      </div>
    </div>
  );
}
