azionelab/frontend/src/app/pages/show-detail-placeholder-page.component.ts

import { DatePipe } from '@angular/common';
import { ChangeDetectionStrategy, Component, DestroyRef, inject, signal } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { ActivatedRoute, RouterLink } from '@angular/router';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatIconModule } from '@angular/material/icon';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { switchMap, map, of } from 'rxjs';

import { ShowDetail, ShowPerformance, ShowsApiService } from '../services/shows-api.service';

@Component({
  standalone: true,
  imports: [
    DatePipe,
    RouterLink,
    MatButtonModule,
    MatCardModule,
    MatIconModule,
    MatProgressSpinnerModule,
  ],
  template: `
    <section class="page">
      @if (isLoading()) {
        <div class="status-panel" aria-live="polite">
          <mat-progress-spinner mode="indeterminate" diameter="40"></mat-progress-spinner>
          <p>Loading show details...</p>
        </div>
      } @else if (errorMessage()) {
        <mat-card class="status-card" aria-live="assertive">
          <mat-card-content>
            <div class="status-copy">
              <mat-icon>error</mat-icon>
              <div>
                <h1>Could not load this show</h1>
                <p>{{ errorMessage() }}</p>
              </div>
            </div>
          </mat-card-content>
          <mat-card-actions>
            <button mat-flat-button type="button" (click)="reload()">Try again</button>
            <a mat-button routerLink="/shows">Back to shows</a>
          </mat-card-actions>
        </mat-card>
      } @else if (show()) {
        <header class="page-header">
          <p class="eyebrow">Show detail</p>
          <h1>{{ show()!.title }}</h1>
          <p class="supporting">{{ show()!.description || show()!.summary }}</p>
        </header>

        <section class="section">
          <div class="section-heading">
            <div>
              <h2>Upcoming performances</h2>
              <p>Choose a performance to continue to the booking placeholder.</p>
            </div>
            <a mat-button routerLink="/shows">Back to show list</a>
          </div>

          @if (performances().length === 0) {
            <mat-card class="status-card" aria-live="polite">
              <mat-card-content>
                <div class="status-copy">
                  <mat-icon>theaters</mat-icon>
                  <div>
                    <h2>No performances published yet</h2>
                    <p>This show is online, but there are no upcoming performances available right now.</p>
                  </div>
                </div>
              </mat-card-content>
            </mat-card>
          } @else {
            <div class="performance-grid">
              @for (performance of performances(); track performance.id) {
                <mat-card class="performance-card">
                  <mat-card-title>{{ performance.starts_at | date: 'EEEE d MMMM, HH:mm' }}</mat-card-title>
                  <mat-card-subtitle>{{ performance.venue.name }}, {{ performance.venue.city }}</mat-card-subtitle>
                  <mat-card-content>
                    <dl class="performance-meta">
                      <div>
                        <dt>Venue</dt>
                        <dd>{{ performance.venue.name }}</dd>
                      </div>
                      <div>
                        <dt>City</dt>
                        <dd>{{ performance.venue.city }}</dd>
                      </div>
                      <div>
                        <dt>Available seats</dt>
                        <dd>{{ performance.available_seats }}</dd>
                      </div>
                    </dl>
                  </mat-card-content>
                  <mat-card-actions>
                    @if (performance.booking_enabled) {
                      <a mat-flat-button [routerLink]="['/performances', performance.id, 'book']">Book this performance</a>
                    } @else {
                      <button mat-stroked-button type="button" disabled>Booking unavailable</button>
                    }
                  </mat-card-actions>
                </mat-card>
              }
            </div>
          }
        </section>
      }
    </section>
  `,
  styles: [`
    .page {
      max-width: 1080px;
      margin: 0 auto;
    }

    .page-header {
      margin-bottom: 28px;
    }

    .eyebrow {
      margin: 0 0 10px;
      color: var(--azionelab-accent);
      text-transform: uppercase;
      font-size: 0.78rem;
      font-weight: 700;
    }

    h1 {
      margin: 0;
      font-size: clamp(2rem, 4vw, 3.2rem);
    }

    .supporting {
      margin: 14px 0 0;
      color: var(--azionelab-muted);
      line-height: 1.6;
      max-width: 64ch;
    }

    .section {
      display: grid;
      gap: 20px;
    }

    .section-heading {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      align-items: end;
    }

    .section-heading h2 {
      margin: 0 0 6px;
      font-size: 1.4rem;
    }

    .section-heading p {
      margin: 0;
      color: var(--azionelab-muted);
    }

    .performance-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 20px;
    }

    .performance-card,
    .status-card {
      border-radius: 8px;
      border: 1px solid var(--azionelab-border);
      background: var(--azionelab-surface);
      box-shadow: var(--azionelab-shadow);
    }

    .performance-card {
      min-height: 260px;
    }

    .performance-meta {
      display: grid;
      gap: 14px;
      margin: 0;
    }

    .performance-meta div {
      display: grid;
      gap: 2px;
    }

    .performance-meta dt {
      font-size: 0.78rem;
      font-weight: 700;
      text-transform: uppercase;
      color: var(--azionelab-muted);
    }

    .performance-meta dd {
      margin: 0;
      font-size: 0.98rem;
    }

    .status-panel,
    .status-copy {
      display: flex;
      align-items: center;
      gap: 16px;
    }

    .status-panel {
      min-height: 240px;
      justify-content: center;
      color: var(--azionelab-muted);
    }

    .status-copy {
      align-items: flex-start;
    }

    .status-copy h1,
    .status-copy h2 {
      margin: 0 0 8px;
      font-size: 1.2rem;
    }

    .status-copy p {
      margin: 0;
      color: var(--azionelab-muted);
      line-height: 1.6;
    }

    @media (max-width: 860px) {
      .section-heading {
        align-items: flex-start;
        flex-direction: column;
      }
    }
  `],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ShowDetailPlaceholderPageComponent {
  private readonly destroyRef = inject(DestroyRef);
  private readonly route = inject(ActivatedRoute);
  private readonly showsApi = inject(ShowsApiService);

  protected readonly show = signal<ShowDetail | null>(null);
  protected readonly performances = signal<ShowPerformance[]>([]);
  protected readonly isLoading = signal(true);
  protected readonly errorMessage = signal('');

  constructor() {
    this.loadShow();
  }

  protected reload(): void {
    this.loadShow();
  }

  private loadShow(): void {
    const slug = this.route.snapshot.paramMap.get('slug');

    if (!slug) {
      this.errorMessage.set('The requested show is missing a valid identifier.');
      this.show.set(null);
      this.performances.set([]);
      this.isLoading.set(false);
      return;
    }

    this.isLoading.set(true);
    this.errorMessage.set('');

    this.showsApi.getShow(slug)
      .pipe(
        switchMap((show) => {
          if (show.performances) {
            return of({ show, performances: show.performances });
          }

          return this.showsApi.listPerformancesForShow(slug).pipe(
            map(({ results }) => ({ show, performances: results })),
          );
        }),
        takeUntilDestroyed(this.destroyRef),
      )
      .subscribe({
        next: ({ show, performances }) => {
          this.show.set(show);
          this.performances.set(performances);
          this.isLoading.set(false);
        },
        error: () => {
          this.show.set(null);
          this.performances.set([]);
          this.errorMessage.set('Please try again in a moment.');
          this.isLoading.set(false);
        },
      });
  }
}