import {
  getCaptureStatus,
  getOutlawById,
  redDialogue,
  type PlayerJourneyState,
} from '@bigtech-sucks/core';
import { ArtSlotView } from '../components/ArtSlotView';

interface Props {
  state: PlayerJourneyState;
  onStep: (step: 'round_up' | 'validate' | 'cut') => void;
  onBack: () => void;
}

export function ShowdownScreen({ state, onStep, onBack }: Props) {
  const outlaw = state.activeOutlawId ? getOutlawById(state.activeOutlawId) : undefined;
  if (!outlaw) return null;

  const status = getCaptureStatus(state, outlaw.id);
  const isBoss = !!outlaw.boss;

  return (
    <section className="screen showdown-screen">
      <button type="button" className="btn btn-ghost back-btn" onClick={onBack}>
        ← Territory
      </button>

      <div className="showdown-stage">
        <ArtSlotView slotId={outlaw.faceArtSlot} className="showdown-face" />
        <h2>{outlaw.name}</h2>
        <p className="wanted-crime">{outlaw.crime}</p>
        {isBoss && <p className="boss-note">{redDialogue.mailRiverBoss[0]}</p>}

        <div className="capture-tracker">
          <div className={`step ${status === 'at_large' ? 'active' : status !== 'at_large' ? 'done' : ''}`}>
            1. At Large
          </div>
          <div className={`step ${status === 'in_custody' ? 'active' : status === 'captured' ? 'done' : ''}`}>
            2. In Custody
          </div>
          <div className={`step ${status === 'captured' ? 'done' : ''}`}>3. Captured</div>
        </div>

        {status === 'at_large' && (
          <div className="showdown-action">
            <p>{redDialogue.showdownRoundUp[0]}</p>
            <button type="button" className="btn btn-primary" onClick={() => onStep('round_up')}>
              Round up
            </button>
          </div>
        )}

        {status === 'in_custody' && (
          <div className="showdown-action">
            <p>{redDialogue.showdownValidate[0]}</p>
            <button type="button" className="btn btn-secondary" onClick={() => onStep('validate')}>
              Validate (check your land)
            </button>
            <button type="button" className="btn btn-primary" onClick={() => onStep('cut')}>
              Cut the cord
            </button>
          </div>
        )}

        {status === 'captured' && (
          <div className="captured-stamp">
            <ArtSlotView slotId="captured_stamp" />
            <p>Bounty collected: ${outlaw.bounty}/mo</p>
          </div>
        )}
      </div>
    </section>
  );
}