import { ChangeDetectionStrategy, Component } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { MatCardModule } from '@angular/material/card';
import { MatDividerModule } from '@angular/material/divider';
import { MatListModule } from '@angular/material/list';

@Component({
  standalone: true,
  imports: [MatCardModule, MatDividerModule, MatListModule],
  template: `
    <section class="page">
      <header class="page-header">
        <p class="eyebrow">Booking</p>
        <h1>Performance {{ performanceId }}</h1>
        <p class="supporting">
          This page will host the reservation form and confirmation states backed by the existing booking APIs.
        </p>
      </header>

      <mat-card class="content-card">
        <mat-card-title>Planned interactions</mat-card-title>
        <mat-card-content>
          <mat-list>
            <mat-list-item>Load performance detail and availability</mat-list-item>
            <mat-list-item>Submit pending reservation</mat-list-item>
            <mat-list-item>Show email confirmation guidance</mat-list-item>
          </mat-list>
        </mat-card-content>
      </mat-card>
    </section>
  `,
  styles: [`
    .page {
      max-width: 900px;
      margin: 0 auto;
    }

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

    .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, 3rem);
    }

    .supporting {
      color: var(--azionelab-muted);
      line-height: 1.6;
      max-width: 50ch;
    }

    .content-card {
      border-radius: 8px;
      border: 1px solid var(--azionelab-border);
      background: var(--azionelab-surface);
      box-shadow: var(--azionelab-shadow);
    }
  `],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class BookingPlaceholderPageComponent {
  protected readonly performanceId = this.route.snapshot.paramMap.get('performanceId') ?? '0';

  constructor(private readonly route: ActivatedRoute) {}
}