UI-UX/src/components/ranking/RankingRow.tsx

"use client";

import Link from "next/link";
import { TrendingUp, AlertTriangle } from "lucide-react";
import type { Artist } from "@/types/artist";
import ArtistPortrait from "@/components/cards/ArtistPortrait";
import { cn } from "@/lib/cn";

interface RankingRowProps {
  artist: Artist;
  /** 与上一名差距（票数） */
  gapAbove?: number;
  /** 与出道线差距（票数）：候补区第一位用于"差 X 票进出道位" */
  gapToDebut?: number;
  /** 是否为出道线下第一位 */
  isRescue?: boolean;
  onVote: (a: Artist) => void;
}

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

export default function RankingRow({
  artist,
  gapAbove,
  gapToDebut,
  isRescue = false,
  onVote,
}: RankingRowProps) {
  // 「真正进 Top12」必须有票 —— 0 票时编号兜底不算
  const inTop12 = artist.rank <= 12 && artist.votes > 0;

  return (
    <div
      className={cn(
        "grid grid-cols-[56px_48px_1fr_72px_96px_72px] sm:grid-cols-[72px_56px_1fr_96px_120px_88px] items-center gap-2 sm:gap-4 px-3 sm:px-4 py-2.5 border-b border-white/[0.05] transition-all",
        inTop12
          ? "bg-white/[0.02] hover:bg-purple-500/[0.06]"
          : "opacity-[0.78] hover:opacity-100 hover:bg-white/[0.03]",
      )}
    >
      {/* 排名 */}
      <div
        className={cn(
          "font-display text-base sm:text-lg tabular-nums text-center",
          inTop12 ? "text-purple-300" : "text-white/55",
        )}
      >
        #{artist.rank}
      </div>

      {/* 头像 */}
      <Link href={`/artist/${artist.id}`} className="block">
        <div
          className={cn(
            "w-10 h-10 sm:w-12 sm:h-12 rounded-full overflow-hidden border-2",
            inTop12 ? "border-purple-500/70" : "border-white/15",
          )}
        >
          <ArtistPortrait
            artist={artist}
            rounded="rounded-full"
            className="w-full h-full"
          />
        </div>
      </Link>

      {/* 姓名 + slogan */}
      <Link
        href={`/artist/${artist.id}`}
        className="min-w-0 hover:text-purple-300 transition-colors"
      >
        <div className="text-sm text-white font-semibold truncate">
          {artist.name}
          <span className="ml-2 text-white/45 font-normal text-[11px]">
            · {artist.enName}
          </span>
        </div>
      </Link>

      {/* 票数 */}
      <div className="text-right">
        <span
          className={cn(
            "font-display text-sm tabular-nums",
            inTop12 ? "text-purple-300" : "text-white/65",
          )}
        >
          {formatVotes(artist.votes)} <span className="text-[10px] opacity-70">票</span>
        </span>
      </div>

      {/* 距上一名 / 差出道线 */}
      <div className="text-right hidden sm:block">
        {isRescue && gapToDebut != null ? (
          <div className="inline-flex items-center gap-1 text-pink-400 text-xs">
            <AlertTriangle size={11} />
            <span className="tabular-nums">+{gapToDebut.toLocaleString()}</span>
          </div>
        ) : gapAbove != null && artist.rank > 1 ? (
          <div className="inline-flex items-center gap-1 text-white/45 text-xs tabular-nums">
            <TrendingUp size={11} className="text-orange-400" />
            −{gapAbove.toLocaleString()}
          </div>
        ) : (
          <span className="text-white/30 text-xs">—</span>
        )}
      </div>

      {/* 投票按钮（统一紫色实心） */}
      <button
        type="button"
        onClick={() => onVote(artist)}
        className="h-8 rounded-lg font-body font-semibold text-xs bg-grad-purple text-white shadow-[0_0_12px_rgba(139,92,246,0.35)] hover:brightness-110"
      >
        投票
      </button>
    </div>
  );
}