"use client";

import type { CardId } from "@/lib/poker/cards";
import { CardFace } from "./cards-ui";

interface FeltProps {
  hole: (CardId | null)[]; // length 2
  board: (CardId | null)[]; // length 5  → [flop, flop, flop, turn, river]
  activeSlot: string | null;
  onSlot: (slot: string) => void;
}

function GroupLabel({ children }: { children: React.ReactNode }) {
  return (
    <span className="mt-1 block text-center text-[10px] font-semibold uppercase tracking-widest text-white/45">
      {children}
    </span>
  );
}

export function Felt({ hole, board, activeSlot, onSlot }: FeltProps) {
  const communitySlot = (i: number, label: string) => (
    <div className="w-[clamp(2.4rem,15vw,3.6rem)]">
      <CardFace
        card={board[i]}
        active={activeSlot === `board-${i}`}
        label={label}
        onClick={() => onSlot(`board-${i}`)}
      />
    </div>
  );

  return (
    <div
      className="rounded-[26px] border border-emerald-300/10 p-4 pb-5 shadow-2xl shadow-black/50"
      style={{
        background:
          "radial-gradient(120% 130% at 50% 12%, var(--felt) 0%, var(--felt-edge) 100%)",
      }}
    >
      {/* Community cards: 3 (flop) + 1 (turn) + 1 (river) */}
      <div className="flex items-start justify-center gap-2">
        <div>
          <div className="flex gap-1">
            {communitySlot(0, "Flop")}
            {communitySlot(1, "Flop")}
            {communitySlot(2, "Flop")}
          </div>
          <GroupLabel>Flop</GroupLabel>
        </div>
        <div>
          {communitySlot(3, "Turn")}
          <GroupLabel>Turn</GroupLabel>
        </div>
        <div>
          {communitySlot(4, "River")}
          <GroupLabel>River</GroupLabel>
        </div>
      </div>

      <div className="mx-auto my-4 h-px w-2/3 bg-white/10" />

      {/* Hero hole cards */}
      <div className="flex flex-col items-center">
        <div className="flex gap-2.5">
          {[0, 1].map((i) => (
            <div key={i} className="w-[clamp(3.1rem,19vw,4.4rem)]">
              <CardFace
                card={hole[i]}
                active={activeSlot === `hole-${i}`}
                label="Tua carta"
                onClick={() => onSlot(`hole-${i}`)}
              />
            </div>
          ))}
        </div>
        <GroupLabel>Le tue carte</GroupLabel>
      </div>
    </div>
  );
}