import Link from "next/link";
import { Heart, Check } from "lucide-react";
import type { Artist } from "@/types/artist";
import { cn } from "@/lib/cn";
import { useVoteStore, selectHasVoted } from "@/lib/store";
import ArtistPortrait from "./ArtistPortrait";

interface ArtistCardProps {
  artist: Artist;
  /** 触发投票（不传则跳详情页） */
  onVote?: (artist: Artist) => void;
  className?: string;
}

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

export default function ArtistCard({
  artist,
  onVote,
  className,
}: ArtistCardProps) {
  // 「真正进 Top12」必须有票 —— 0 票时编号兜底排出来的前 12 不算
  const inTop12 = artist.rank <= 12 && artist.votes > 0;
  const hasVoted = useVoteStore(selectHasVoted(artist.id));

  return (
    <div
      className={cn(
        "group relative rounded-xl overflow-hidden bg-grad-card border transition-all",
        (hasVoted || inTop12)
          ? "border-purple-500/55 shadow-[0_8px_32px_rgba(0,0,0,0.65),0_0_24px_rgba(139,92,246,0.25)]"
          : "border-white/[0.10] shadow-[0_8px_32px_rgba(0,0,0,0.65)]",
        "hover:-translate-y-1 hover:shadow-[0_12px_36px_rgba(0,0,0,0.7),0_0_24px_rgba(139,92,246,0.25)]",
        className,
      )}
    >
      <Link
        href={`/artist/${artist.id}`}
        className="block"
        aria-label={`查看 ${artist.name} 详情`}
      >
        {/* 立绘区 · Top12 区分仅靠紫色边框 + 辉光,不再降低非 Top12 卡片亮度 */}
        <div className="relative aspect-[4/5]">
          <ArtistPortrait
            artist={artist}
            rounded="rounded-none"
            className="absolute inset-0"
          />

          {/* 排名徽章（左上独立紫色圆） */}
          <div
            className={cn(
              "absolute top-2 left-2 w-7 h-7 rounded-full font-display text-xs flex items-center justify-center text-white tabular-nums",
              inTop12
                ? "bg-purple-500 shadow-[0_0_12px_rgba(139,92,246,0.7)]"
                : "bg-elevated border border-white/15 text-white/55",
            )}
          >
            {artist.rank}
          </div>

          {/* 已投票角标（右上紫色 ✓） */}
          {hasVoted && (
            <div className="absolute top-2 right-2 w-6 h-6 rounded-full bg-purple-500 shadow-[0_0_12px_rgba(139,92,246,0.7)] flex items-center justify-center">
              <Check size={14} strokeWidth={3} className="text-white" />
            </div>
          )}
        </div>

        {/* 信息区（黑色背景明显分隔） */}
        <div className="p-3 bg-black/40 border-t border-white/[0.06]">
          <div className="font-display text-[11px] text-white/55 tracking-wider">
            No.{artist.no}
          </div>
          <div className="mt-0.5 text-sm font-semibold text-white truncate">
            {artist.name}
          </div>
          <div className="text-[11px] text-white/55 truncate mt-0.5">
            {artist.enName}
          </div>
          <div
            className={cn(
              "mt-1.5 inline-flex items-center gap-1 font-display text-xs tabular-nums",
              inTop12 ? "text-purple-300" : "text-white/55",
            )}
          >
            <Heart size={12} fill="currentColor" />
            {formatVotes(artist.votes)} 票
          </div>
        </div>
      </Link>

      {/* 投票按钮（hasVoted 时灰化为「已投票」） */}
      <div className="px-3 pb-3 bg-black/40">
        <button
          type="button"
          onClick={(e) => {
            e.preventDefault();
            onVote?.(artist);
          }}
          className={cn(
            "w-full h-9 rounded-lg font-body font-semibold text-sm transition-all",
            hasVoted
              ? "bg-white/10 text-white/55 cursor-not-allowed border border-white/15"
              : "bg-grad-purple text-white shadow-[0_0_12px_rgba(139,92,246,0.35)] hover:brightness-110 active:brightness-95",
          )}
        >
          {hasVoted ? "✓ 已投票" : "投票"}
        </button>
      </div>
    </div>
  );
}
