import Phaser from 'phaser';
import { freshGameState, loadGame } from '../../core/save';
import { TOTAL_NIGHTS } from '../door/NightScene';
import { venueByIndex } from '../../data/venues';
import { rolesFor } from '../../data/roster';

// The roster board (design §6): role × venue = level select. A corkboard in
// the back office; tonight's shifts are pinned to it; you take one. The night
// itself is the same simulation whichever card you pull — the card is where
// you STAND when the doors open, and what the board admits it pays.

const W = 640;
const H = 360;
const MONO = 'monospace';
const NIGHT_NAMES = ['thursday', 'friday', 'saturday'] as const;

const CARD_W = 168;
const CARD_H = 150;

interface PassThrough {
  seed?: number;
  nightIndex?: number;
  freshRun?: boolean;
}

export class RosterScene extends Phaser.Scene {
  private carried: PassThrough = {};

  constructor() {
    super('Roster');
  }

  init(data: PassThrough): void {
    this.carried = data ?? {};
  }

  create(): void {
    // Display only — NightScene remains the authority on run state (it will
    // clearSave on freshRun itself; we just show the board that run implies).
    const seed = this.carried.seed ?? 4207;
    const run = this.carried.freshRun ? freshGameState(seed) : loadGame(seed);
    let nightIndex = this.carried.nightIndex ?? run.nightIndex;
    if (nightIndex >= TOTAL_NIGHTS) nightIndex = 0;
    const venue = venueByIndex(run.venueIndex);
    const roles = rolesFor(venue.id);

    // the back office: unpainted, honest
    this.add.rectangle(W / 2, H / 2, W, H, 0x14100c);
    this.add.rectangle(W / 2, H / 2 - 8, 560, 280, 0x3a2a18).setStrokeStyle(3, 0x241a10);

    this.add
      .text(W / 2, 42, `${venue.name} — ${NIGHT_NAMES[nightIndex] ?? ''}`, {
        fontFamily: MONO, fontSize: '16px', color: '#f0e4d0',
      })
      .setOrigin(0.5);
    this.add
      .text(W / 2, 62, 'THE ROSTER · take a shift', {
        fontFamily: MONO, fontSize: '8px', color: '#a89878',
      })
      .setOrigin(0.5);

    const totalW = roles.length * CARD_W + (roles.length - 1) * 16;
    const x0 = (W - totalW) / 2 + CARD_W / 2;
    roles.forEach((role, i) => {
      const x = x0 + i * (CARD_W + 16);
      const y = H / 2 + 22;
      const tilt = ((i * 7) % 5) - 2; // pinned by someone in a hurry
      const card = this.add.container(x, y).setAngle(tilt);
      const bg = this.add.rectangle(0, 0, CARD_W, CARD_H, 0xe8dcc0).setStrokeStyle(1, 0x9a8a68);
      card.add(bg);
      card.add(this.add.circle(0, -CARD_H / 2 + 7, 3, 0xa03028)); // the pin
      card.add(
        this.add.text(0, -CARD_H / 2 + 24, role.name, {
          fontFamily: MONO, fontSize: '11px', color: '#241a10', align: 'center', wordWrap: { width: CARD_W - 16 },
        }).setOrigin(0.5, 0),
      );
      card.add(
        this.add.text(0, -CARD_H / 2 + 58, `$${role.wage} the night`, {
          fontFamily: MONO, fontSize: '9px', color: '#5a4a30',
        }).setOrigin(0.5, 0),
      );
      card.add(
        this.add.text(0, -CARD_H / 2 + 80, role.blurb, {
          fontFamily: MONO, fontSize: '7px', color: '#40342a', align: 'center', wordWrap: { width: CARD_W - 20 },
        }).setOrigin(0.5, 0),
      );
      bg.setInteractive({ useHandCursor: true });
      bg.on('pointerover', () => card.setScale(1.04));
      bg.on('pointerout', () => card.setScale(1));
      bg.on('pointerdown', () => this.scene.start('Night', { ...this.carried, role: role.id }));
    });

    this.add
      .text(W / 2, H - 20, `seed ${run.seed} · week ${run.venueIndex + 1}/4`, {
        fontFamily: MONO, fontSize: '7px', color: '#6a5a44',
      })
      .setOrigin(0.5);
  }
}
