import { Link } from "@tanstack/react-router";
import { Badge } from "@/components/ui/badge";
import { cn } from "@/lib/utils";
import type { CardItem, Rarity } from "@/lib/types";
import { TEAM_COLORS } from "@/lib/types";

const rarityVariant: Record<Rarity, "common" | "rare" | "epic" | "legendary"> = {
  common: "common",
  rare: "rare",
  epic: "epic",
  legendary: "legendary",
};

const rarityRing: Record<Rarity, string> = {
  common: "ring-border-strong/40",
  rare: "ring-rare/50",
  epic: "ring-epic/55",
  legendary: "ring-legend/60",
};

type Props = {
  card: CardItem;
  className?: string;
  size?: "sm" | "md" | "lg";
  showOwner?: boolean;
  interactive?: boolean;
};

export function BaseballCard({
  card,
  className,
  size = "md",
  showOwner = true,
  interactive = true,
}: Props) {
  const colors = TEAM_COLORS[card.team] ?? { primary: "#1a1d26", secondary: "#5b8def" };
  const isPitcher = card.position === "P";

  const body = (
    <article
      className={cn(
        "group relative flex flex-col overflow-hidden rounded-[var(--radius-xl)] border border-border-strong/50 bg-surface shadow-[var(--shadow-card)] ring-2 transition-transform duration-200",
        rarityRing[card.rarity],
        interactive && "hover:-translate-y-1 hover:shadow-[var(--shadow-elevated)]",
        size === "sm" && "max-w-[160px]",
        size === "md" && "max-w-[220px]",
        size === "lg" && "max-w-[280px]",
        className,
      )}
      style={{
        background: `linear-gradient(160deg, ${colors.primary} 0%, #0a0b0d 55%, ${colors.secondary}22 100%)`,
      }}
    >
      <div
        className="pointer-events-none absolute inset-0 opacity-30"
        style={{
          backgroundImage:
            "repeating-linear-gradient(0deg, transparent, transparent 11px, rgba(255,255,255,0.03) 11px, rgba(255,255,255,0.03) 12px)",
        }}
      />

      <header className="relative z-10 flex items-start justify-between gap-2 px-3 pt-3">
        <div>
          <p className="font-display text-lg leading-none text-fg tracking-wide sm:text-xl">
            {card.team.toUpperCase()}
          </p>
          <p className="mt-0.5 text-[10px] font-medium uppercase tracking-[0.14em] text-fg/70">
            {card.seasonYear} · {card.position}
          </p>
        </div>
        <Badge variant={rarityVariant[card.rarity]} className="capitalize shrink-0">
          {card.rarity}
        </Badge>
      </header>

      <div className="relative z-10 mx-3 mt-2 overflow-hidden rounded-[var(--radius-md)] border border-white/10 bg-black/30 aspect-[3/4]">
        {card.imageData ? (
          <img
            src={card.imageData}
            alt={card.playerName}
            className="h-full w-full object-cover"
            crossOrigin="anonymous"
          />
        ) : (
          <div className="flex h-full w-full flex-col items-center justify-center gap-2 bg-gradient-to-b from-white/5 to-black/40 p-4">
            <div
              className="grid h-16 w-16 place-items-center rounded-full border-2 border-white/20 text-2xl font-display text-fg/90"
              style={{ background: colors.secondary + "33" }}
            >
              {card.playerName.charAt(0)}
            </div>
            <span className="text-[10px] uppercase tracking-widest text-fg/50">No photo</span>
          </div>
        )}
        <div className="absolute bottom-0 inset-x-0 bg-gradient-to-t from-black/80 to-transparent p-2 pt-8">
          <h3 className="font-display text-xl leading-none tracking-wide text-fg drop-shadow sm:text-2xl">
            {card.playerName}
          </h3>
        </div>
      </div>

      <div className="relative z-10 grid grid-cols-3 gap-1 px-3 py-3 text-center">
        {isPitcher ? (
          <>
            <Stat label="ERA" value={card.era ?? "—"} />
            <Stat label="W" value={card.wins != null ? String(card.wins) : "—"} />
            <Stat label="K" value={card.strikeouts != null ? String(card.strikeouts) : "—"} />
          </>
        ) : (
          <>
            <Stat label="AVG" value={card.battingAvg ?? "—"} />
            <Stat label="HR" value={card.homeRuns != null ? String(card.homeRuns) : "—"} />
            <Stat label="RBI" value={card.rbi != null ? String(card.rbi) : "—"} />
          </>
        )}
      </div>

      {showOwner && card.ownerHandle && (
        <footer className="relative z-10 border-t border-white/10 px-3 py-2 text-[11px] text-fg/60">
          @{card.ownerHandle}
          {card.forTrade && (
            <span className="ml-2 inline-flex rounded-full bg-success/20 px-1.5 py-0.5 text-[10px] font-medium text-success">
              Trade open
            </span>
          )}
        </footer>
      )}
    </article>
  );

  if (!interactive) return body;
  return (
    <Link to="/cards/$cardId" params={{ cardId: card.id }} className="block outline-none focus-visible:ring-2 focus-visible:ring-accent/50 rounded-[var(--radius-xl)]">
      {body}
    </Link>
  );
}

function Stat({ label, value }: { label: string; value: string }) {
  return (
    <div className="rounded-[var(--radius-sm)] bg-black/25 px-1 py-1.5">
      <p className="text-[9px] font-medium uppercase tracking-wider text-fg/50">{label}</p>
      <p className="font-mono text-sm font-semibold tabular-nums text-fg">{value}</p>
    </div>
  );
}