UI-UX/src/components/Top12Bar.tsx

"use client";

import Link from "next/link";
import { ChevronRight, Trophy } from "lucide-react";
import type { Artist } from "@/types/artist";
import { cn } from "@/lib/cn";
import ArtistPortrait from "./cards/ArtistPortrait";

interface Top12BarProps {
  artists: Artist[];
  /** 是否显示头部标题 */
  showHeader?: boolean;
}

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

export default function Top12Bar({ artists, showHeader = true }: Top12BarProps) {
  // Top12 出道位 只看「真正有票」的人 —— 0 票时不靠编号兜底占位
  const top12 = artists.filter((a) => a.votes > 0).slice(0, 12);
  return (
    <div className="w-full">
      {showHeader && (
        <div className="flex items-end justify-between mb-3 px-1">
          <h2 className="font-display text-base sm:text-lg tracking-[0.2em] text-white inline-flex items-center gap-2">
            <Trophy size={16} className="text-purple-300" />
            实时 Top12 出道位
          </h2>
          <Link
            href="/ranking"
            className="font-label text-[11px] tracking-widest text-purple-300 hover:text-purple-200 uppercase inline-flex items-center gap-0.5"
          >
            查看完整榜单
            <ChevronRight size={12} />
          </Link>
        </div>
      )}

      {top12.length === 0 ? (
        <Top12Empty />
      ) : (
        // 12 张胶囊卡片 · grid 等分铺满，无滚动 · 无外边框无背景
        <div
          className={cn(
            "grid grid-cols-6 sm:grid-cols-12 gap-2 sm:gap-3 py-2",
          )}
        >
          {top12.map((artist) => (
            <Top12Card key={artist.id} artist={artist} />
          ))}
        </div>
      )}
    </div>
  );
}

function Top12Empty() {
  return (
    <div className="py-10 sm:py-12 px-6 text-center border border-dashed border-white/10 rounded-2xl bg-white/[0.02]">
      <p className="font-label text-[11px] tracking-widest uppercase text-purple-300 mb-2">
        Awaiting Votes
      </p>
      <p className="text-sm text-white/70">出道位尚未产生 · 等你为 ta 投下第一票</p>
    </div>
  );
}

function Top12Card({ artist }: { artist: Artist }) {
  const inTop3 = artist.rank <= 3;

  return (
    <Link
      href={`/artist/${artist.id}`}
      className="group block text-center"
      aria-label={`${artist.name} · 当前第 ${artist.rank} 名`}
    >
      {/* 外层 relative，徽章可以完整显示在外面，不会被卡片圆角裁切 */}
      <div className="relative">
        {/* 卡片本体：2:3 矩形，上下两端 = 半圆（rounded-full 在 2:3 矩形上 = 胶囊形） */}
        <div
          className={cn(
            "relative w-full aspect-[2/3] rounded-full overflow-hidden border",
            "border-white/15",
            "transition-transform group-hover:-translate-y-1",
            // 仅前 3 名保留紫色辉光
            inTop3 && "border-purple-500 shadow-[0_0_16px_rgba(139,92,246,0.55)]",
          )}
        >
          <ArtistPortrait
            artist={artist}
            rounded="rounded-none"
            className="absolute inset-0 w-full h-full"
          />
        </div>

        {/* 排名徽章 · 完整悬浮在卡片左上角（外层定位，不被 overflow 裁切） */}
        <span
          className={cn(
            "absolute -top-1 -left-1 z-10",
            "w-6 h-6 sm:w-7 sm:h-7 rounded-full",
            "bg-purple-500 text-white font-display text-[11px] sm:text-xs",
            "flex items-center justify-center tabular-nums",
            "border-2 border-deepest",
            inTop3 && "shadow-[0_0_10px_rgba(139,92,246,0.8)]",
          )}
        >
          {artist.rank}
        </span>
      </div>

      {/* 卡片下方 · 名字 + 票数 */}
      <div className="mt-2 px-0.5">
        <div className="text-[11px] sm:text-xs text-white truncate font-medium">
          {artist.name}
        </div>
        <div className="text-[10px] sm:text-[11px] text-purple-300 tabular-nums mt-0.5">
          {formatVotes(artist.votes)}
        </div>
      </div>
    </Link>
  );
}