NowChess-Frontend/src/app/pages/game/game.component.ts

import { Component, DestroyRef, OnDestroy, OnInit, inject } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { ActivatedRoute, RouterLink } from '@angular/router';
import { BoardActionsBarComponent } from '../../components/board-actions-bar/board-actions-bar.component';
import { ChessBoardComponent } from '../../components/chess-board/chess-board.component';
import { ExportPanelComponent } from '../../components/export-panel/export-panel.component';
import { MoveHistoryComponent, MoveNavDirection } from '../../components/move-history/move-history.component';
import { PlayerCardComponent } from '../../components/player-card/player-card.component';
import { PromotionDialogComponent } from '../../components/promotion-dialog/promotion-dialog.component';
import { GameFacade } from './game.facade';

type BoardTheme = 'arabian' | 'classic';

const LOW_TIME_THRESHOLD_MS = 60_000;
const BOARD_THEME_KEY = 'nowchess.boardTheme';

@Component({
  selector: 'app-game',
  standalone: true,
  imports: [
    RouterLink,
    ChessBoardComponent,
    PromotionDialogComponent,
    PlayerCardComponent,
    MoveHistoryComponent,
    ExportPanelComponent,
    BoardActionsBarComponent,
  ],
  providers: [GameFacade],
  templateUrl: './game.component.html',
  styleUrl: './game.component.css'
})
export class GameComponent implements OnInit, OnDestroy {
  private readonly route = inject(ActivatedRoute);
  private readonly destroyRef = inject(DestroyRef);
  readonly facade = inject(GameFacade);

  whiteTimerMs: number | null = null;
  blackTimerMs: number | null = null;
  boardTheme: BoardTheme = 'arabian';
  flipped = false;
  toastMessage = '';

  private timerIntervalId: number | null = null;
  private toastTimer: ReturnType<typeof setTimeout> | null = null;

  // ── Player display ──────────────────────────────────────────
  get whitePlayerName(): string {
    return this.facade.game?.white.displayName ?? 'White';
  }

  get blackPlayerName(): string {
    return this.facade.game?.black.displayName ?? 'Black';
  }

  get whitePlayerInitial(): string {
    return this.whitePlayerName.charAt(0).toUpperCase();
  }

  get blackPlayerInitial(): string {
    return this.blackPlayerName.charAt(0).toUpperCase();
  }

  // ── Clocks ──────────────────────────────────────────────────
  get whiteClock(): string {
    return this.formatTimer(this.whiteTimerMs);
  }

  get blackClock(): string {
    return this.formatTimer(this.blackTimerMs);
  }

  get isLowTimeWhite(): boolean {
    return this.whiteTimerMs !== null && this.whiteTimerMs < LOW_TIME_THRESHOLD_MS;
  }

  get isLowTimeBlack(): boolean {
    return this.blackTimerMs !== null && this.blackTimerMs < LOW_TIME_THRESHOLD_MS;
  }

  // ── Status message ───────────────────────────────────────────
  get statusMessage(): string {
    const state = this.facade.state;
    if (!state) return '';

    if (state.status === 'check') {
      const who = state.turn === 'white' ? 'White' : 'Black';
      return `<b>${who}</b> is in check`;
    }

    if (state.status === 'drawOffered') {
      return 'Draw offer pending';
    }

    const last = state.moves.length > 0 ? state.moves[state.moves.length - 1] : null;
    if (last) {
      const mover = state.turn === 'white' ? this.blackPlayerName : this.whitePlayerName;
      return `${mover} played <b>${last}</b>`;
    }

    return 'Game started';
  }

  // ── Move number ──────────────────────────────────────────────
  get moveNumber(): number {
    return Math.ceil((this.facade.state?.moves.length ?? 0) / 2);
  }

  // ── Lifecycle ────────────────────────────────────────────────
  ngOnInit(): void {
    this.boardTheme = this.resolveStoredBoardTheme();
    this.startClock();

    this.route.paramMap.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((paramMap) => {
      const id = paramMap.get('gameId');
      if (!id) {
        this.facade.errorMessage = 'Missing gameId in route.';
        this.facade.loading = false;
        return;
      }
      this.facade.setGameId(id);
    });
  }

  ngOnDestroy(): void {
    if (this.timerIntervalId !== null) {
      window.clearInterval(this.timerIntervalId);
    }
  }

  // ── Board theme ──────────────────────────────────────────────
  setBoardTheme(theme: BoardTheme): void {
    this.boardTheme = theme;
    localStorage.setItem(BOARD_THEME_KEY, theme);
  }

  // ── Board flip ───────────────────────────────────────────────
  flipBoard(): void {
    this.flipped = !this.flipped;
  }

  // ── Copy helpers ─────────────────────────────────────────────
  copyGameId(): void {
    void navigator.clipboard?.writeText(this.facade.gameId).then(() => this.showToast('Game ID copied'));
  }

  copyUrl(): void {
    void navigator.clipboard?.writeText(window.location.href).then(() => this.showToast('Link copied'));
  }

  // ── Board actions ─────────────────────────────────────────────
  onTakeback(): void {
    this.showToast('Takeback requested');
  }

  onOfferDraw(): void {
    this.showToast('Draw offered');
  }

  onResign(): void {
    this.showToast('Resigned');
  }

  // ── Move history navigation ───────────────────────────────────
  onMoveNavigate(_direction: MoveNavDirection): void {
    // Visual-only for now; board always reflects live position.
  }

  // ── Timer helpers ─────────────────────────────────────────────
  private formatTimer(ms: number | null): string {
    if (ms === null) return '--:--';
    if (ms < 0) return '—';
    const totalSeconds = Math.floor(ms / 1000);
    const minutes = Math.floor(totalSeconds / 60).toString().padStart(2, '0');
    const seconds = (totalSeconds % 60).toString().padStart(2, '0');
    return `${minutes}:${seconds}`;
  }

  // ── Private ───────────────────────────────────────────────────
  private startClock(): void {
    if (this.timerIntervalId !== null) return;
    this.timerIntervalId = window.setInterval(() => this.tickClock(), 200);
  }

  private tickClock(): void {
    const state = this.facade.state;
    const clock = state?.clock;
    if (!clock || this.facade.isGameFinished) {
      this.whiteTimerMs = null;
      this.blackTimerMs = null;
      return;
    }

    const elapsed = Math.max(0, Date.now() - this.facade.clockSyncedAt);
    const activeIsWhite = state!.turn === 'white';
    this.whiteTimerMs = clock.whiteRemainingMs < 0
      ? -1
      : Math.max(0, clock.whiteRemainingMs - (activeIsWhite ? elapsed : 0));
    this.blackTimerMs = clock.blackRemainingMs < 0
      ? -1
      : Math.max(0, clock.blackRemainingMs - (!activeIsWhite ? elapsed : 0));
  }

  private showToast(msg: string): void {
    this.toastMessage = msg;
    if (this.toastTimer !== null) clearTimeout(this.toastTimer);
    this.toastTimer = setTimeout(() => {
      this.toastMessage = '';
    }, 1800);
  }

  private resolveStoredBoardTheme(): BoardTheme {
    const stored = localStorage.getItem(BOARD_THEME_KEY);
    return stored === 'classic' ? 'classic' : 'arabian';
  }
}