import Link from "next/link";
import { Check, AlertTriangle } from "lucide-react";
import type { MySupport } from "@/lib/store";
import ArtistPortrait from "@/components/cards/ArtistPortrait";
import { cn } from "@/lib/cn";

export default function MyFanSupport({ supports }: { supports: MySupport[] }) {
  if (supports.length === 0) {
    return (
      <div className="rounded-xl border border-dashed border-white/10 p-8 text-center text-white/45 text-sm">
        还没有投过票 ·{" "}
        <Link href="/" className="text-purple-300 hover:underline">
          去为你喜欢的艺人投出第一票
        </Link>
      </div>
    );
  }

  return (
    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
      {supports.map(({ artist }) => {
        const inTop12 = artist.rank <= 12 && artist.votes > 0;
        return (
          <Link
            key={artist.id}
            href={`/artist/${artist.id}`}
            className={cn(
              "flex items-center gap-3 p-3 rounded-xl border transition-all",
              "bg-surface/60 hover:bg-surface/80",
              inTop12 ? "border-purple-500/35" : "border-white/[0.08]",
            )}
          >
            <div
              className={cn(
                "w-12 h-12 rounded-full overflow-hidden border-2 flex-shrink-0",
                inTop12 ? "border-purple-500/70" : "border-white/15",
              )}
            >
              <ArtistPortrait
                artist={artist}
                rounded="rounded-full"
                className="w-full h-full"
              />
            </div>
            <div className="flex-1 min-w-0">
              <div className="text-sm font-semibold text-white truncate">
                {artist.name}
              </div>
              <div className="inline-flex items-center gap-1 text-[11px] text-purple-300 mt-0.5 font-display">
                <Check size={11} strokeWidth={2.5} />
                已投票
              </div>
              <div
                className={cn(
                  "text-[11px] mt-0.5 inline-flex items-center gap-1",
                  inTop12 ? "text-white/55" : "text-pink-400",
                )}
              >
                当前 #{artist.rank}
                {!inTop12 && <AlertTriangle size={10} />}
              </div>
            </div>
          </Link>
        );
      })}
    </div>
  );
}
