"use client";

import type { PokerSnapshot } from "@/app/(frontend)/minigames/poker/actions";
import { BettingControls } from "./BettingControls";

type SeatedSnapshot = PokerSnapshot & {
  readonly you: NonNullable<PokerSnapshot["you"]>;
};

interface PokerActionToolbarProps {
  readonly snapshot: SeatedSnapshot;
  readonly onSnapshot: (snapshot: PokerSnapshot) => void;
  readonly onActionFeedback: () => void;
  readonly below?: boolean;
}

export function PokerActionToolbar({
  snapshot,
  onSnapshot,
  onActionFeedback,
  below = false,
}: PokerActionToolbarProps) {
  const view = snapshot.you;

  if (view.phase !== "betting") return null;

  if (!view.yourTurn) {
    const actingPlayer = view.players.find((player) => player.seatId === view.toActSeat);
    return (
      <div
        className={`poker-action-toolbar poker-action-toolbar-waiting${below ? " poker-action-toolbar-below" : ""}`}
        role="status"
      >
        {actingPlayer ? `Waiting for ${actingPlayer.name}` : "Waiting for the table"}
      </div>
    );
  }

  return (
    <div
      className={`poker-action-toolbar${below ? " poker-action-toolbar-below" : ""}`}
      aria-label="Poker actions"
    >
      <BettingControls
        tableId={snapshot.tableId}
        snapshotVersion={snapshot.version}
        legalActions={view.legalActions}
        potTotal={view.potTotal}
        yourTurn={view.yourTurn}
        onSnapshot={onSnapshot}
        onActionFeedback={onActionFeedback}
        compact
      />
    </div>
  );
}