import { CommonModule } from '@angular/common';
import { Component, OnDestroy, OnInit } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { createApiClient } from '../../../../../src/api/client';
import type { FinishGameResponse, SessionDetailResponse } from '../../../../../src/api/types';
import { createVerticalSliceController } from '../../../../../src/spa/vertical-slice';
import { clientHasNoAudioOutput, resolvePreferredLocale, subscribeToLocaleChanges, t } from '../../lobby-i18n';

type SessionDetail = SessionDetailResponse;

type LeaderboardEntry = FinishGameResponse['leaderboard'][number];
type LeaderboardResponse = FinishGameResponse;

@Component({
  selector: 'app-host-shell',
  standalone: true,
  imports: [CommonModule, FormsModule],
  template: `
    <h2>{{ copy('host.title') }}</h2>

    <div class="panel" [attr.data-client-has-no-audio-output]="clientHasNoAudioOutput">
      <label>{{ copy('common.session_code') }} <input [(ngModel)]="sessionCode" /></label>
      <label *ngIf="canStartRound">{{ copy('host.category') }} <input [(ngModel)]="categorySlug" /></label>
      <button (click)="refreshSession()" [disabled]="loading">{{ copy('common.refresh') }}</button>
      <button *ngIf="canStartRound" (click)="startRound()" [disabled]="loading">{{ copy('host.start_round') }}</button>
      <button *ngIf="canStartNextRound || nextRoundError" (click)="startNextRound()" [disabled]="loading">{{ copy(nextRoundError ? 'host.retry_next_round' : 'host.start_next_round') }}</button>
      <button *ngIf="canFinishGame || finishError" (click)="finishGame()" [disabled]="loading">{{ copy(finishError ? 'host.retry_finish' : 'host.finish_game') }}</button>
    </div>

    <p *ngIf="session" class="hint">{{ copy('host.audio_locale_hint') }}: {{ locale }}</p>
    <p *ngIf="error" class="error">{{ error }}</p>
    <p *ngIf="nextRoundError" class="error">{{ nextRoundError }}</p>
    <p *ngIf="finishError" class="error">{{ finishError }}</p>

    <div *ngIf="session" class="panel">
      <p><strong>{{ copy('common.status') }}:</strong> {{ session.session.status }} · {{ copy('common.round') }} {{ session.session.current_round }}</p>
      <p><strong>{{ copy('common.round_question_id') }}:</strong> {{ roundQuestionId || '-' }}</p>
      <p *ngIf="session.round_question"><strong>{{ copy('common.prompt') }}:</strong> {{ session.round_question.prompt }}</p>
      <ul>
        <li *ngFor="let p of session.players">{{ p.nickname }}: {{ p.score }}</li>
      </ul>
      <div class="panel" *ngIf="session.reveal && (session.session.status === 'reveal' || session.session.status === 'scoreboard')">
        <h3>Reveal</h3>
        <p><strong>Korrekt svar:</strong> {{ session.reveal.correct_answer }}</p>
        <p><strong>Spørgsmål:</strong> {{ session.reveal.prompt }}</p>
        <div *ngIf="session.reveal.lies.length">
          <strong>Løgne</strong>
          <ul>
            <li *ngFor="let lie of session.reveal.lies">{{ lie.nickname }} løj: {{ lie.text }}</li>
          </ul>
        </div>
        <div *ngIf="session.reveal.guesses.length">
          <strong>Gæt</strong>
          <ul>
            <li *ngFor="let guess of session.reveal.guesses">
              {{ guess.nickname }} valgte {{ guess.selected_text }}
              <span *ngIf="guess.is_correct">· korrekt</span>
              <span *ngIf="!guess.is_correct && guess.fooled_player_nickname">· narret af {{ guess.fooled_player_nickname }}</span>
              <span *ngIf="!guess.is_correct && !guess.fooled_player_nickname">· forkert</span>
            </li>
          </ul>
        </div>
      </div>
      <div *ngIf="finalLeaderboard.length">
        <h3>{{ copy('host.final_leaderboard') }}</h3>
        <p *ngIf="finalWinner"><strong>{{ copy('host.winner') }}:</strong> {{ finalWinner.nickname }} ({{ finalWinner.score }} {{ copy('common.points_short') }})</p>
        <ol>
          <li *ngFor="let entry of finalLeaderboard">{{ entry.nickname }}: {{ entry.score }}</li>
        </ol>
      </div>
      <pre *ngIf="finalLeaderboardPayload">{{ finalLeaderboardPayload }}</pre>
    </div>
  `,
})
export class HostShellComponent implements OnInit, OnDestroy {
  locale = resolvePreferredLocale();
  readonly clientHasNoAudioOutput = clientHasNoAudioOutput;

  sessionCode = '';
  categorySlug = 'general';
  roundQuestionId = '';
  loading = false;
  error = '';
  nextRoundError = '';
  finishError = '';
  finalLeaderboardPayload = '';
  finalLeaderboard: LeaderboardEntry[] = [];
  finalWinner: LeaderboardEntry | null = null;
  session: SessionDetail | null = null;

  private readonly api = createApiClient();
  private readonly controller = createVerticalSliceController(this.api);
  private unsubscribeLocale: (() => void) | null = null;

  ngOnInit(): void {
    this.unsubscribeLocale = subscribeToLocaleChanges((locale) => {
      this.locale = locale;
    });
    if (typeof window === 'undefined') {
      return;
    }

    const hashRoute = window.location.hash.replace(/^#\/?/, '');
    const match = hashRoute.match(/^host(?:\/[^/]+)?(?:\/([^/?#]+))?/i);
    const codeFromRoute = match?.[1] ?? '';
    const storedCode = window.sessionStorage.getItem('wpp.host-session-code') ?? '';
    const candidate = codeFromRoute || storedCode;

    if (!candidate) {
      return;
    }

    this.sessionCode = this.normalizeCode(candidate);
    this.persistSessionCode(this.sessionCode);
    void this.refreshSession();
  }

  ngOnDestroy(): void {
    this.unsubscribeLocale?.();
    this.unsubscribeLocale = null;
  }

  get canStartRound(): boolean {
    return Boolean(this.session?.phase_view_model?.host?.can_start_round ?? !this.session);
  }

  get canStartNextRound(): boolean {
    return Boolean(this.session?.phase_view_model?.host?.can_start_next_round);
  }

  get canFinishGame(): boolean {
    return Boolean(this.session?.phase_view_model?.host?.can_finish_game);
  }

  copy(key: string): string {
    return t(key, this.locale);
  }

  private normalizeCode(value: string): string {
    return value.trim().toUpperCase();
  }

  private persistSessionCode(code: string): void {
    if (typeof window !== 'undefined') {
      window.sessionStorage.setItem('wpp.host-session-code', code);
    }
  }

  private async request<T>(path: string, method: 'GET' | 'POST', payload?: unknown): Promise<T> {
    const response = await fetch(path, {
      method,
      headers: {
        Accept: 'application/json',
        ...(payload === undefined ? {} : { 'Content-Type': 'application/json' }),
      },
      ...(payload === undefined ? {} : { body: JSON.stringify(payload) }),
      credentials: 'same-origin',
    });

    const body = await response.json().catch(() => ({}));
    if (!response.ok) {
      throw new Error((body as { error?: string }).error ?? `HTTP ${response.status}`);
    }

    return body as T;
  }

  async refreshSession(): Promise<void> {
    this.loading = true;
    this.error = '';
    this.nextRoundError = '';
    this.finishError = '';
    try {
      const state = await this.controller.hydrateLobby(this.sessionCode);
      if (!state.session || state.errorMessage) {
        throw new Error(state.errorMessage ?? this.copy('common.unknown_error'));
      }
      this.session = state.session as SessionDetail;
      this.sessionCode = this.session.session.code;
      this.persistSessionCode(this.sessionCode);
      this.roundQuestionId = this.session.round_question?.id ? String(this.session.round_question.id) : '';
      if (this.session.session.status !== 'finished') {
        this.resetFinalLeaderboard();
      }
      this.syncRouteFromSession();
    } catch (error) {
      this.error = `${this.copy('host.session_refresh_failed')}: ${(error as Error).message}`;
    } finally {
      this.loading = false;
    }
  }

  async startRound(): Promise<void> {
    await this.runAction(async () => {
      const state = await this.controller.startRound(this.sessionCode, this.categorySlug.trim());
      if (!state.session || state.errorMessage) {
        throw new Error(state.errorMessage ?? this.copy('common.unknown_error'));
      }
      this.session = state.session as SessionDetail;
      this.sessionCode = this.session.session.code;
      this.persistSessionCode(this.sessionCode);
      this.roundQuestionId = this.session.round_question?.id ? String(this.session.round_question.id) : '';
      this.resetFinalLeaderboard();
      this.syncRouteFromSession();
    });
  }

  async startNextRound(): Promise<void> {
    this.loading = true;
    this.nextRoundError = '';
    this.error = '';
    try {
      const code = this.normalizeCode(this.sessionCode);
      if (!code) {
        throw new Error(this.copy('host.session_code_required'));
      }
      await this.request(`/lobby/sessions/${encodeURIComponent(code)}/rounds/next`, 'POST', {});
      this.resetFinalLeaderboard();
      await this.refreshSession();
    } catch (error) {
      this.nextRoundError = `${this.copy('host.next_round_failed')}: ${(error as Error).message}`;
    } finally {
      this.loading = false;
    }
  }

  async finishGame(): Promise<void> {
    this.loading = true;
    this.finishError = '';
    this.error = '';
    try {
      const code = this.normalizeCode(this.sessionCode);
      if (!code) {
        throw new Error(this.copy('host.session_code_required'));
      }
      const payload = await this.request<LeaderboardResponse>(`/lobby/sessions/${encodeURIComponent(code)}/finish`, 'POST', {});
      this.finalLeaderboardPayload = JSON.stringify(payload, null, 2);
      this.finalLeaderboard = [...payload.leaderboard].sort((a, b) => {
        if (b.score !== a.score) {
          return b.score - a.score;
        }
        return a.nickname.localeCompare(b.nickname);
      });
      this.finalWinner = payload.winner ?? this.finalLeaderboard[0] ?? null;
      await this.refreshSession();
    } catch (error) {
      this.finishError = `${this.copy('host.finish_game_failed')}: ${(error as Error).message}`;
    } finally {
      this.loading = false;
    }
  }

  private resetFinalLeaderboard(): void {
    this.finalLeaderboardPayload = '';
    this.finalLeaderboard = [];
    this.finalWinner = null;
  }

  private syncRouteFromSession(): void {
    if (!this.session) {
      return;
    }

    const phase = this.session.session.status || 'lobby';
    const code = this.normalizeCode(this.session.session.code || this.sessionCode);
    if (!code) {
      return;
    }

    const targetPath = `#/host/${encodeURIComponent(phase)}/${encodeURIComponent(code)}`;
    if (typeof window === 'undefined' || window.location.hash === targetPath) {
      return;
    }

    window.history.replaceState(window.history.state, '', targetPath);
  }

  private async runAction(action: () => Promise<void>): Promise<void> {
    this.loading = true;
    this.error = '';
    try {
      await action();
    } catch (error) {
      this.error = (error as Error).message;
    } finally {
      this.loading = false;
    }
  }
}