'use client';

import { useId, useState } from 'react';
import type { Action, GameView } from '@/game/engine';

/** The engine projects these opportunities only to the Emperor. Their
 * maximum already accounts for committed spice. */
export function EmperorTimingGift({ game, act, busy }: {
  game: GameView;
  act: (action: Action) => void;
  busy: boolean;
}) {
  const id = useId();
  const [raw, setRaw] = useState('1');
  const phaseOpening = game.emperorPhaseOpeningGift;
  const extortion = game.emperorExtortionGift;
  const offer = phaseOpening ?? extortion ?? game.emperorGuildTimingGift;
  if (!offer) return null;
  const amount = /^[1-9]\d*$/.test(raw) ? Number(raw) : NaN;
  const canShare = !busy && Number.isSafeInteger(amount) && amount >= 1 && amount <= offer.maximum;
  const recipient = game.players.find(player => player.id === offer.recipient)?.name ?? 'your ally';

  return <section className="notice min-w-0 space-y-3 break-words" aria-label="Emperor spice gift">
    <h3>Share spice with {recipient}</h3>
    <p className="fine">{phaseOpening
      ? 'Phase opening resumes after the Karama response to your gift.'
      : extortion
        ? 'The Moritani Extortion decision resumes after the Karama response to your gift.'
        : 'The Guild timing decision resumes after the Karama response to your gift.'}</p>
    <label htmlFor={`${id}-amount`}>Spice to share</label>
    <input id={`${id}-amount`} type="number" inputMode="numeric" min={1} max={offer.maximum}
      step={1} value={raw} disabled={busy} onChange={event => setRaw(event.target.value)} />
    <button type="button" className="game-action" disabled={!canShare}
      onClick={() => { if (canShare) act({type:'emperorGift', amount}); }}>
      Share spice
    </button>
  </section>;
}