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

import { ChangeDetectionStrategy, Component, DestroyRef, inject, signal } from '@angular/core';
import { RouterLink } from '@angular/router';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
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 { ShowListItem, ShowsApiService } from '../services/shows-api.service';

@Component({
  standalone: true,
  imports: [RouterLink, MatButtonModule, MatCardModule, MatIconModule, MatProgressSpinnerModule],
  template: `
    <section class="page">
      <header class="page-header">
        <div>
          <p class="eyebrow">Programmazione</p>
          <h1>Spettacoli in programma</h1>
        </div>
        <p class="supporting">
          Una selezione di lavori, attraversamenti scenici e appuntamenti da leggere con calma, immagine dopo immagine, scheda dopo scheda.
        </p>
      </header>

      @if (isLoading()) {
        <div class="status-panel" aria-live="polite">
          <mat-progress-spinner mode="indeterminate" diameter="40"></mat-progress-spinner>
          <p>Caricamento degli spettacoli in corso...</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>
                <h2>Non siamo riusciti a caricare gli spettacoli</h2>
                <p>{{ errorMessage() }}</p>
              </div>
            </div>
          </mat-card-content>
          <mat-card-actions>
            <button mat-flat-button type="button" (click)="reload()">Riprova</button>
          </mat-card-actions>
        </mat-card>
      } @else if (shows().length === 0) {
        <mat-card class="status-card" aria-live="polite">
          <mat-card-content>
            <div class="status-copy">
              <mat-icon>theaters</mat-icon>
              <div>
                <h2>Nessuno spettacolo pubblicato per ora</h2>
                <p>Le produzioni disponibili compariranno qui non appena saranno online.</p>
              </div>
            </div>
          </mat-card-content>
        </mat-card>
      } @else {
        <div class="show-grid">
          @for (show of shows(); track show.slug) {
          <mat-card class="show-card">
            @if (getShowImage(show); as showImage) {
              <div class="show-image-wrap">
                <img class="show-image" [src]="showImage" [alt]="show.title" />
              </div>
            }
            <div class="card-body">
              <div class="card-topline">
                <span class="card-label">In programma</span>
              </div>
              <mat-card-title>{{ show.title }}</mat-card-title>
              <mat-card-content>
                <p>{{ show.summary }}</p>
                <p class="show-note">Apri la scheda per vedere le prossime date e i dettagli di prenotazione.</p>
              </mat-card-content>
              <mat-card-actions>
                <a mat-button [routerLink]="['/shows', show.slug]">{{ getShowCta(show) }}</a>
              </mat-card-actions>
            </div>
          </mat-card>
          }
        </div>
      }
    </section>
  `,
  styles: [`
    .page-header {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(300px, 430px);
      gap: 28px;
      align-items: end;
      margin-bottom: 40px;
    }

    .supporting {
      margin: 0;
      max-width: 36ch;
    }

    .show-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 28px;
    }

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

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

    .status-card {
      max-width: 680px;
      border-radius: var(--azionelab-radius-md);
      border: 1px solid var(--azionelab-border);
      background: var(--azionelab-surface-strong);
      box-shadow: var(--azionelab-shadow);
    }

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

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

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

    .show-card {
      display: flex;
      flex-direction: column;
      min-height: 520px;
      overflow: hidden;
      border-radius: var(--azionelab-radius-md);
      border: 1px solid var(--azionelab-border);
      background: var(--azionelab-surface);
      box-shadow: var(--azionelab-shadow);
    }

    .show-image-wrap {
      aspect-ratio: 4 / 5;
      overflow: hidden;
      border-bottom: 1px solid var(--azionelab-border);
      background: var(--azionelab-bg-strong);
    }

    .show-image {
      width: 100%;
      height: 100%;
      display: block;
      object-fit: cover;
      transition: transform 180ms ease;
    }

    .show-card:hover .show-image {
      transform: scale(1.015);
    }

    .card-body {
      display: flex;
      flex: 1;
      flex-direction: column;
      padding: 22px 22px 20px;
    }

    .card-topline {
      padding: 0 0 12px;
    }

    .card-label {
      display: inline-flex;
      align-items: center;
      min-height: 24px;
      color: var(--azionelab-accent);
      font-size: 0.76rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
    }

    .show-card mat-card-content {
      flex: 1;
    }

    .show-card mat-card-title,
    .show-card mat-card-content,
    .show-card mat-card-actions {
      padding-left: 0;
      padding-right: 0;
    }

    .show-card mat-card-title {
      margin-top: 0;
      font-family: var(--azionelab-serif);
      font-size: 1.85rem;
      font-weight: 600;
      line-height: 1.04;
    }

    .show-card p {
      color: var(--azionelab-muted);
      line-height: 1.74;
      margin: 0;
    }

    .show-note {
      margin-top: 18px !important;
      padding-top: 18px;
      border-top: 1px solid var(--azionelab-border);
      font-size: 0.95rem;
    }

    .show-card mat-card-actions {
      padding-top: 22px;
    }

    @media (max-width: 860px) {
      .page-header {
        grid-template-columns: 1fr;
      }

      .show-grid {
        grid-template-columns: 1fr;
      }
    }
  `],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ShowListPageComponent {
  private readonly destroyRef = inject(DestroyRef);
  private readonly showsApi = inject(ShowsApiService);

  protected readonly shows = signal<ShowListItem[]>([]);
  protected readonly isLoading = signal(true);
  protected readonly errorMessage = signal('');

  constructor() {
    this.loadShows();
  }

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

  protected getShowImage(show: ShowListItem): string {
    return show.image_url || show.poster_image || '';
  }

  protected getShowCta(_show: ShowListItem): string {
    return 'Scopri lo spettacolo';
  }

  private loadShows(): void {
    this.isLoading.set(true);
    this.errorMessage.set('');

    this.showsApi.listShows()
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe({
        next: ({ results }) => {
          this.shows.set(results);
          this.isLoading.set(false);
        },
        error: () => {
          this.shows.set([]);
          this.errorMessage.set('Riprova tra qualche istante.');
          this.isLoading.set(false);
        },
      });
  }
}