import { Component, inject } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-combat-placeholder-page',
  template: `
    <section class="combat-placeholder" aria-label="Kampfvorbereitung">
      <span class="combat-placeholder__eyebrow">KAMPF</span>
      <h2>Vorbereitung auf den Kampf</h2>
      <p>
        Die Klinge ist gezogen, der Gegner steht bereit – doch das eigentliche Gefecht liegt noch
        vor dir. Diese Ansicht ist ein Zwischenhalt auf dem Weg in den Kampf, der in einem
        späteren Schritt folgt.
      </p>
      @if (encounterId) {
        <p class="combat-placeholder__id" data-encounter-id>
          Vorbereitung auf den Kampf gegen Begegnung {{ encounterId }}…
        </p>
      }
    </section>
  `,
  styles: [
    `
      :host {
        display: block;
      }

      .combat-placeholder {
        display: grid;
        gap: var(--ar-space-3);
        max-inline-size: 40rem;
        margin: var(--ar-space-6) auto;
        padding: var(--ar-space-5);
        border: 1px solid var(--ar-border);
        background: var(--ar-panel);
        box-shadow: var(--ar-shadow-raised);
        text-align: center;
      }

      .combat-placeholder__eyebrow {
        color: var(--ar-gold);
        font-size: var(--ar-font-sm);
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

      .combat-placeholder h2 {
        margin: 0;
        font-family: Georgia, 'Times New Roman', serif;
        font-size: 1.6rem;
        font-weight: 400;
      }

      .combat-placeholder p {
        margin: 0;
        color: var(--ar-text-muted);
        line-height: 1.55;
      }

      .combat-placeholder__id {
        color: var(--ar-text-muted);
        font-size: var(--ar-font-sm);
        font-style: italic;
      }
    `,
  ],
})
export class CombatPlaceholderPageComponent {
  private readonly route = inject(ActivatedRoute);

  protected readonly encounterId = this.route.snapshot.queryParamMap.get('encounterId');
}