import { motion } from "framer-motion";
import { Check } from "lucide-react";
import type { GameColor } from "@/types";

// Real playing-card palette: deep ink colors on ivory card stock, not the
// neon/glow hex used elsewhere in the UI — a genuine card doesn't glow.
// `image` is an AI-rendered card face (Higgsfield) instead of a CSS-drawn one.
const META: Record<GameColor, { hex: string; label: string; suit: string; image: string }> = {
  red: {
    hex: "#B3272E",
    label: "RED",
    suit: "♥",
    image: "/cards/card-red.png?v=3",
  },
  green: {
    hex: "#1E7A46",
    label: "GREEN",
    suit: "♣",
    image: "/cards/card-green.png?v=3",
  },
  violet: {
    hex: "#7B4FD1",
    label: "VIOLET",
    suit: "♦",
    image: "/cards/card-violet.png",
  },
};

export function ColorBetTile({
  color,
  multiplier,
  selected,
  disabled,
  winning,
  onClick,
}: {
  color: GameColor;
  multiplier: number;
  selected?: boolean;
  disabled?: boolean;
  winning?: boolean;
  onClick?: () => void;
}) {
  const meta = META[color];
  const lifted = selected || winning;
  const gold = "#C9A227";

  return (
    <motion.div
      className="relative h-full"
      style={{ aspectRatio: "5 / 7", transformOrigin: "bottom center" }}
      animate={{ y: lifted ? -12 : 0, scale: lifted ? 1.06 : 1, rotate: lifted ? 0 : 0 }}
      whileHover={disabled ? undefined : { y: -12, scale: 1.06, rotate: -1.5 }}
      transition={{ type: "spring", stiffness: 340, damping: 24 }}
    >
      <motion.button
        type="button"
        disabled={disabled}
        onClick={onClick}
        whileTap={disabled ? undefined : { scale: 0.97, rotate: 0 }}
        animate={{
          boxShadow: lifted
            ? `0 20px 32px -10px rgba(0,0,0,0.7), 0 0 0 2px ${gold}, 0 0 24px -4px ${meta.hex}aa`
            : `0 8px 16px -8px rgba(0,0,0,0.55), 0 2px 3px rgba(0,0,0,0.3)`,
        }}
        transition={{ duration: 0.25, ease: "easeOut" }}
        className="relative flex h-full w-full flex-col overflow-hidden rounded-[12px] bg-white disabled:cursor-not-allowed disabled:opacity-50 sm:rounded-[16px]"
        style={{ border: `2.5px solid ${meta.hex}` }}
      >
        {/* the multiplier and suit index are baked into this art, matching the
            current fixed payouts (red 2x, violet 4x, green 2x) — if those
            payouts ever change, this image needs regenerating to match */}
        <img
          src={meta.image}
          alt={`${meta.label} card, ${multiplier}x payout`}
          className="pointer-events-none absolute inset-0 h-full w-full object-cover"
          draggable={false}
        />
      </motion.button>

      {selected && (
        <motion.span
          initial={{ scale: 0, opacity: 0 }}
          animate={{ scale: 1, opacity: 1 }}
          transition={{ type: "spring", stiffness: 420, damping: 20 }}
          className="absolute -right-2 -top-2 z-10 flex h-6 w-6 items-center justify-center rounded-full border-2 border-white"
          style={{ background: meta.hex, boxShadow: "0 2px 6px rgba(0,0,0,0.5)" }}
        >
          <Check className="h-3.5 w-3.5 text-white" />
        </motion.span>
      )}
    </motion.div>
  );
}