import { ChangeDetectionStrategy, Component } from '@angular/core';
import { TitleCasePipe } from '@angular/common';
import { ActivatedRoute, RouterLink } from '@angular/router';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';

@Component({
  standalone: true,
  imports: [TitleCasePipe, RouterLink, MatButtonModule, MatCardModule],
  template: `
    <section class="page">
      <header class="page-header">
        <p class="eyebrow">Show detail</p>
        <h1>{{ slug | titlecase }}</h1>
        <p class="supporting">
          This placeholder will bind to the public show detail and performance endpoints.
        </p>
      </header>

      <mat-card class="content-card">
        <mat-card-title>Next UI step</mat-card-title>
        <mat-card-content>
          <p>Wire show copy, upcoming performances, and booking entry points from the backend contract.</p>
        </mat-card-content>
        <mat-card-actions>
          <a mat-button routerLink="/book/10">Open booking placeholder</a>
        </mat-card-actions>
      </mat-card>
    </section>
  `,
  styles: [`
    .page {
      max-width: 960px;
      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, 3.2rem);
    }

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

    .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 ShowDetailPlaceholderPageComponent {
  protected readonly slug = this.route.snapshot.paramMap.get('slug') ?? 'show';

  constructor(private readonly route: ActivatedRoute) {}
}