function ScoreBar({ label, value }) {
  const safeValue = Math.max(0, Math.min(30, Number(value) || 0));
  const pct = safeValue / 30 * 100;
  return (
    <div className="score-widget">
      <div className="score-widget-head">
        <span>{label}</span><strong>{safeValue}/30</strong>
      </div>
      <div className="score-track" role="progressbar" aria-valuemin="0" aria-valuemax="30" aria-valuenow={safeValue} aria-label={`${label}: ${safeValue}/30`}>
        <div className="score-fill" style={{ width: `${pct}%` }} />
      </div>
    </div>
  );
}


function RoundStatus({ results = [] }) {
  const cells = [0,1,2].map((i) => results[i] ?? null);
  return (
    <section className="round-panel" aria-label={t("rounds")}>
      <div className="round-title">{t("rounds")}</div>
      <div className="round-cells">
        {cells.map((result, i) => {
          const mark = result === "player" ? "✓" : result === "ai" ? "×" : result === "parda" ? "=" : "·";
          const cls = result === "player" ? "round-win" : result === "ai" ? "round-loss" : result === "parda" ? "round-draw" : "round-pending";
          return <div key={i} className="round-cell">
            <span className="round-number">{i + 1}</span>
            <span className={cn("round-mark", cls)}>{mark}</span>
          </div>;
        })}
      </div>
    </section>
  );
}

function recommendedCardIdFor(match, playable) {
  const hand = match.hands?.player || [];
  if (!hand.length) return null;
  const current = match.currentTrick || [];
  const aiPlayed = current.find((p) => p.player === "ai")?.card;
  if (aiPlayed) {
    const winners = hand.filter((c) => playable.has(c.id) && trucoPower(c) > trucoPower(aiPlayed));
    if (winners.length) return winners.slice().sort((a,b) => trucoPower(a) - trucoPower(b))[0].id;
  }
  const playableHand = hand.filter((c) => playable.has(c.id));
  if (!playableHand.length) return null;
  const best = playableHand.slice().sort((a,b) => trucoPower(b) - trucoPower(a))[0];
  return best?.id || null;
}

function TableView({ match, rival, sound, onAction, onHelp, onExit, onToggleSound }) {
  const wait = waitingOn(match);
  const legal = wait === "player" ? legalActions(match, "player") : [];
  const tip = coachTip(match);
  const calls = legal.filter((a) => a.type === "CALL");
  const responds = legal.filter((a) => a.type === "RESPOND");
  const canMazo = legal.some((a) => a.type === "MAZO");
  const canAck = legal.some((a) => a.type === "ACK");
  const playable = new Set(legal.filter((a) => a.type === "PLAY").map((a) => a.cardId));
  const recommendedCardId = recommendedCardIdFor(match, playable);
  const playerTrick = match.currentTrick.find((p) => p.player === "player");
  const aiTrick = match.currentTrick.find((p) => p.player === "ai");

  return (
    <div className="game-viewport felt-bg text-cream">
      <header className="game-header">
        <div className="rival-head">
          <div className="rival-avatar-frame"><PixelAvatar rival={rival} size={46} /></div>
          <div className="rival-head-copy">
            <strong>{rival.name}</strong>
            <span>{trDifficulty(rival.difficultyLabel)} · {trRivalField(rival.id, "title", rival.title)}</span>
          </div>
        </div>
        <div className="score-panel">
          <ScoreBar label={t("you")} value={match.scores.player} />
          <ScoreBar label={t("rival")} value={match.scores.ai} />
        </div>
        <div className="game-tools">
          <button type="button" className="tool-btn" onClick={onToggleSound} aria-label={t("sound")}>
            {sound ? <Volume2 className="size-5"/> : <VolumeX className="size-5"/>}
          </button>
          <button type="button" className="tool-btn" onClick={onHelp} aria-label={t("help")}><HelpCircle className="size-5"/></button>
          <LanguageSelector/>
          <button type="button" className="exit-btn" onClick={onExit}>{t("exit")}</button>
        </div>
      </header>

      <div className="mobile-score-panel">
        <ScoreBar label={t("you")} value={match.scores.player} />
        <ScoreBar label={t("rival")} value={match.scores.ai} />
      </div>

      <main className="table-layout">
        <section className="opponent-hand" aria-label={t("rivalHandCards")}>
          {match.hands.ai.map((card, i) => (
            <PixelCard key={`ai-${card.id}-${i}`} card={card} face={match.revealed} size="sm" dimmed={!match.revealed}/>
          ))}
        </section>

        <section className="trick-zone">
          <div className="trick-table">
            <div className="trick-seat">
              <span className="seat-label">{t("rival")}</span>
              {aiTrick ? <PixelCard card={aiTrick.card} size="md" face /> : <div className="empty-card-slot" />}
            </div>
            <div className="trick-vs">VS</div>
            <div className="trick-seat">
              <span className="seat-label">{t("you")}</span>
              {playerTrick ? <PixelCard card={playerTrick.card} size="md" face lift /> : <div className="empty-card-slot" />}
            </div>
          </div>
          <div className="trick-info">
            <span>{t("tricks")}: {match.bazas.player} – {match.bazas.ai}</span>
            <span>{t("handValue")} {match.trucoAccepted ? [1,2,3,4][match.trucoLevel] : 1}</span>
            <span>{match.mano === "player" ? t("youreHand") : t("rivalHand")}</span>
          </div>
          {wait === "ai" ? <p className="thinking-text">{t("thinking")}</p> : null}
        </section>

        <section className="coach-box">
          <div className="coach-title">{tip.title}</div>
          <div className="coach-body">{tip.body}</div>
          <div className="coach-hint">{tip.hint}</div>
        </section>

        <RoundStatus results={match.roundResults || []}/>

        <section className="player-hand" aria-label={t("yourHandCards")}>
          {match.hands.player.map((card) => (
            <PixelCard key={card.id} card={card} size="lg" face suggested={card.id === recommendedCardId} disabled={!playable.has(card.id)} onClick={playable.has(card.id) ? () => onAction({ type: "PLAY", cardId: card.id }) : undefined}/>
          ))}
        </section>

        <section className="action-row">
          {canAck ? <button type="button" className="pixel-btn pixel-btn-primary turn-finalize-btn" onClick={() => onAction({type:"ACK"})}>{t("endTurn")}</button> : null}
          {responds.map((a) => (
            <button key={`${a.response}-${a.raise ?? ""}`} type="button" className={cn("pixel-btn", a.response === "quiero" && "pixel-btn-primary", a.response === "no-quiero" && "pixel-btn-danger")} onClick={() => onAction(a)}>
              {a.response === "quiero" ? t("want") : a.response === "no-quiero" ? t("dontWant") : trCall(a.raise)}
            </button>
          ))}
          {calls.map((a) => <button key={a.kind} type="button" className={cn("pixel-btn", ["truco","retruco","vale4"].includes(a.kind) && "pixel-btn-danger")} onClick={() => onAction(a)}>{trCall(a.kind)}</button>)}
          {canMazo ? <button type="button" className="pixel-btn" onClick={() => onAction({type:"MAZO"})}>{t("mazo")}</button> : null}
        </section>

        <div className="envido-footer">{t("handEnvido")}: <strong>{envidoPoints(match.hands.player)}</strong></div>
      </main>

      {match.toast && match.phase === "toast" ? (
        <div className="toast-overlay">
          <div className="toast-box">
            <p className="toast-title">{trToast(match.toast.title)}</p>
            <p className="toast-body">{trToastBody(match.toast.body)}</p>
            <button type="button" className="pixel-btn pixel-btn-primary toast-btn" onClick={() => onAction({type:"ACK"})}>{t("continue")}</button>
          </div>
        </div>
      ) : null}
    </div>
  );
}