<main class="game-shell">
  <section class="game-card">
    <header class="mb-3">
      <a routerLink="/" class="back-link">Back</a>
      <h1 class="mb-2">1 vs 1 Game</h1>
      <p class="meta mb-0">Game ID: <strong>{{ facade.gameId }}</strong></p>
    </header>

    @if (facade.loading) {
      <p>Loading game state...</p>
    } @else if (facade.state) {
      @if (facade.isGameFinished && facade.gameCompletionMessage) {
        <div class="game-completion-alert alert alert-success mb-3">
          <h2 class="completion-title">{{ facade.gameCompletionMessage }}</h2>
          <p class="completion-subtitle mb-0">
            <a routerLink="/" class="completion-link">Start a new game</a>
          </p>
        </div>
      }
      <div class="container-fluid">
        <div class="row g-3">
          <!-- Left Sidebar - FEN Import -->
          <div class="col-lg-3 col-md-6 col-12 order-lg-1 order-2">
            <app-input-card
              label="Import FEN"
              placeholder="rnbqkbnr/pppppppp/8/8/8/8/PPPPPPPP/RNBQKBNR w KQkq - 0 1"
              buttonLabel="Load FEN"
              inputType="textarea"
              [value]="facade.fenInput"
              cardClass="fen-card"
              (valueChange)="facade.fenInput = $event"
              (buttonClick)="facade.importFen()"
            />
          </div>

          <!-- Center - Chess Board -->
          <div class="col-lg-6 col-md-12 col-12 order-lg-2 order-1">
            <section class="center-column d-flex flex-column h-100">
              <div class="board-section flex-grow-1 d-flex align-items-center justify-content-center">
                <app-chess-board
                  [fen]="facade.state.fen"
                  [selectedSquare]="facade.selectedSquare"
                  [highlightedSquares]="facade.highlightedSquares"
                  (squareSelected)="facade.onBoardSquareSelected($event)"
                />
              </div>

              <section class="top-section">
                <app-input-card
                  label="Play move (UCI)"
                  placeholder="e2e4"
                  buttonLabel="Send Move"
                  inputType="input"
                  [value]="facade.moveInput"
                  cardClass="move-card"
                  hintText="Click your piece to highlight legal targets."
                  (valueChange)="facade.moveInput = $event"
                  (buttonClick)="facade.submitMove()"
                />
              </section>
            </section>
          </div>

          <!-- Right Sidebar - PGN Import -->
          <div class="col-lg-3 col-md-6 col-12 order-lg-3 order-3">
            <app-input-card
              label="Import PGN"
              placeholder="1. e4 e5 2. Nf3 Nc6 *"
              buttonLabel="Load PGN"
              inputType="textarea"
              [value]="facade.pgnInput"
              cardClass="pgn-card"
              (valueChange)="facade.pgnInput = $event"
              (buttonClick)="facade.importPgn()"
            />
          </div>
        </div>
      </div>
    }

    @if (facade.errorMessage) {
      <p class="alert alert-danger mt-3 mb-0">{{ facade.errorMessage }}</p>
    }
  </section>
</main>
