"use client";

import { cardRank, cardSuit, RANK_LABEL, SUIT_SYMBOL, type CardId } from "@/lib/poker/cards";

// spades, hearts, diamonds, clubs — the 4-colour deck.
export const SUIT_COLOR = [
  "var(--suit-spade)",
  "var(--suit-heart)",
  "var(--suit-diamond)",
  "var(--suit-club)",
];

function Glyph({ card }: { card: CardId }) {
  const suit = cardSuit(card);
  return (
    <div
      className="flex h-full w-full flex-col items-center justify-center leading-none"
      style={{ color: SUIT_COLOR[suit] }}
    >
      <span className="text-[clamp(0.9rem,4.5vw,1.5rem)] font-extrabold tracking-tight">
        {RANK_LABEL[cardRank(card)]}
      </span>
      <span className="text-[clamp(1rem,5.5vw,1.9rem)]">{SUIT_SYMBOL[suit]}</span>
    </div>
  );
}

/** White card face used for board / hero slots. */
export function CardFace({
  card,
  active,
  label,
  onClick,
}: {
  card: CardId | null;
  active?: boolean;
  label?: string;
  onClick?: () => void;
}) {
  return (
    <button
      type="button"
      onClick={onClick}
      aria-label={
        card === null
          ? `Slot vuoto ${label ?? ""}`
          : `Carta ${RANK_LABEL[cardRank(card)]}${SUIT_SYMBOL[cardSuit(card)]}`
      }
      className={[
        "relative flex aspect-[5/7] w-full items-center justify-center rounded-lg transition-transform duration-150",
        card === null
          ? "border-2 border-dashed border-white/25 bg-black/20 text-white/40"
          : "bg-white shadow-md shadow-black/50",
        active ? "scale-[1.04] ring-[3px] ring-amber-400" : "",
      ].join(" ")}
    >
      {card === null ? (
        <span className="px-0.5 text-center text-[9px] font-semibold uppercase leading-tight tracking-wide">
          {label}
        </span>
      ) : (
        <Glyph card={card} />
      )}
    </button>
  );
}

/** Small colour-filled chip used in the 52-card palette. */
export function PaletteCell({
  card,
  used,
  onClick,
}: {
  card: CardId;
  used: boolean;
  onClick: () => void;
}) {
  const suit = cardSuit(card);
  return (
    <button
      type="button"
      onClick={onClick}
      aria-label={`${RANK_LABEL[cardRank(card)]}${SUIT_SYMBOL[suit]}${used ? " (in uso)" : ""}`}
      className={[
        "flex aspect-[3/4] flex-col items-center justify-center rounded-[5px] leading-none text-white transition",
        used ? "opacity-20" : "active:scale-90",
      ].join(" ")}
      style={{ background: SUIT_COLOR[suit] }}
    >
      <span className="text-[clamp(0.62rem,2.7vw,0.95rem)] font-bold">{RANK_LABEL[cardRank(card)]}</span>
      <span className="text-[clamp(0.55rem,2.3vw,0.85rem)]">{SUIT_SYMBOL[suit]}</span>
    </button>
  );
}