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

type ConfirmationState = 'loading' | 'success' | 'invalid' | 'expired' | 'error';

@Component({
  standalone: true,
  imports: [
    RouterLink,
    MatButtonModule,
    MatCardModule,
    MatIconModule,
    MatProgressSpinnerModule,
  ],
  template: `
    <section class="page">
      <header class="page-header">
        <p class="eyebrow">Reservation confirmation</p>
        <h1>Email confirmation</h1>
        <p class="supporting">Use the link from your inbox to confirm your reservation and retrieve the QR code for venue check-in.</p>
      </header>

      <mat-card class="status-card">
        <mat-card-content>
          @if (state() === 'loading') {
            <div class="status-panel loading" aria-live="polite">
              <mat-progress-spinner mode="indeterminate" diameter="36"></mat-progress-spinner>
              <div>
                <h2>Confirming reservation...</h2>
                <p>Please wait while we validate your link.</p>
              </div>
            </div>
          }

          @if (state() === 'success' && confirmation()) {
            <div class="status-panel success" aria-live="polite">
              <div class="status-icon">
                <mat-icon fontSet="material-symbols-outlined">verified</mat-icon>
              </div>
              <div>
                <h2>Reservation confirmed</h2>
                <p>Your seats are confirmed. Present this QR code at check-in and keep the link handy if staff needs manual access.</p>
                <div class="success-points">
                  <span><mat-icon fontSet="material-symbols-outlined">qr_code_2</mat-icon> Ready for entry</span>
                  <span><mat-icon fontSet="material-symbols-outlined">theater_comedy</mat-icon> See you at the performance</span>
                </div>
              </div>
            </div>

            @if (confirmation()!.qr_code_image) {
              <div class="qr-panel">
                <p class="panel-label">Your check-in QR code</p>
                <img [src]="confirmation()!.qr_code_image" alt="Reservation QR code" />
              </div>
            }

            @if (confirmation()!.qr_code_url) {
              <div class="meta-card">
                <mat-icon fontSet="material-symbols-outlined">link</mat-icon>
                <p>Check-in URL: <a [href]="confirmation()!.qr_code_url">{{ confirmation()!.qr_code_url }}</a></p>
              </div>
            }
          }

          @if (state() === 'invalid') {
            <div class="status-panel error" aria-live="assertive">
              <div class="status-icon">
                <mat-icon fontSet="material-symbols-outlined">error</mat-icon>
              </div>
              <div>
                <h2>Invalid confirmation link</h2>
                <p>This token is not valid. Please use the latest email confirmation link.</p>
              </div>
            </div>
          }

          @if (state() === 'expired') {
            <div class="status-panel warning" aria-live="assertive">
              <div class="status-icon">
                <mat-icon fontSet="material-symbols-outlined">schedule</mat-icon>
              </div>
              <div>
                <h2>Confirmation link expired</h2>
                <p>This link has expired. Please create a new reservation.</p>
              </div>
            </div>
          }

          @if (state() === 'error') {
            <div class="status-panel error" aria-live="assertive">
              <div class="status-icon">
                <mat-icon fontSet="material-symbols-outlined">warning</mat-icon>
              </div>
              <div>
                <h2>Could not confirm reservation</h2>
                <p>Please try again in a moment.</p>
              </div>
            </div>
          }
        </mat-card-content>

        <mat-card-actions>
          <a mat-button routerLink="/">Home</a>
          <a mat-button routerLink="/shows">Shows</a>
        </mat-card-actions>
      </mat-card>
    </section>
  `,
  styles: [`
    .page {
      max-width: 760px;
      margin: 0 auto;
    }

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

    .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: 58ch;
      margin: 14px 0 0;
    }

    .status-card {
      border-radius: 20px;
      border: 1px solid var(--azionelab-border);
      background: var(--azionelab-surface-strong);
      box-shadow: var(--azionelab-shadow);
      overflow: hidden;
    }

    mat-card-content {
      padding: 28px !important;
    }

    mat-card-actions {
      padding: 0 28px 24px !important;
      gap: 8px;
    }

    .status-panel {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      padding: 20px;
      border-radius: 18px;
      border: 1px solid transparent;
    }

    .status-panel h2 {
      margin: 0 0 6px;
      font-size: 1.2rem;
    }

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

    .status-panel.loading {
      background: rgba(159, 47, 40, 0.04);
      border-color: rgba(159, 47, 40, 0.1);
    }

    .status-panel.success {
      background: var(--azionelab-success-bg);
      border-color: var(--azionelab-success-border);
    }

    .status-panel.warning {
      background: #fff7ea;
      border-color: rgba(181, 126, 0, 0.15);
    }

    .status-panel.error {
      background: var(--azionelab-error-bg);
      border-color: var(--azionelab-error-border);
    }

    .status-icon {
      display: grid;
      place-items: center;
      width: 52px;
      height: 52px;
      border-radius: 16px;
      flex: 0 0 auto;
      background: rgba(30, 27, 24, 0.06);
    }

    .status-panel.success .status-icon {
      background: rgba(46, 125, 50, 0.12);
    }

    .status-panel.warning .status-icon {
      background: rgba(181, 126, 0, 0.14);
    }

    .status-panel.error .status-icon {
      background: rgba(179, 38, 30, 0.12);
    }

    .status-panel.success .status-icon mat-icon {
      color: var(--azionelab-success-ink);
    }

    .status-panel.warning .status-icon mat-icon {
      color: #9b6c00;
    }

    .status-panel.error .status-icon mat-icon {
      color: var(--azionelab-error-ink);
    }

    .success-points {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 14px;
    }

    .success-points span {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 8px 12px;
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.72);
      color: var(--azionelab-success-ink);
      font-size: 0.92rem;
    }

    .success-points mat-icon {
      font-size: 18px;
      width: 18px;
      height: 18px;
    }

    .qr-panel {
      margin-top: 18px;
      padding: 16px;
      border-radius: 18px;
      border: 1px solid var(--azionelab-border);
      display: inline-block;
      background: white;
    }

    .panel-label {
      margin: 0 0 12px;
      font-size: 0.88rem;
      font-weight: 700;
      color: var(--azionelab-muted);
      text-transform: uppercase;
      letter-spacing: 0.08em;
    }

    .qr-panel img {
      width: min(280px, 100%);
      height: auto;
      display: block;
    }

    .meta-card {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin-top: 16px;
      padding: 14px 16px;
      border-radius: 16px;
      background: rgba(159, 47, 40, 0.05);
      color: var(--azionelab-muted);
    }

    .meta-card p {
      margin: 0;
      word-break: break-word;
    }

    .meta-card a {
      color: var(--azionelab-accent-strong);
    }

    @media (max-width: 640px) {
      mat-card-content {
        padding: 22px !important;
      }

      mat-card-actions {
        padding: 0 22px 20px !important;
      }

      .status-panel {
        padding: 18px;
        border-radius: 16px;
      }

      .qr-panel {
        width: 100%;
      }

      .qr-panel img {
        width: min(100%, 280px);
        margin: 0 auto;
      }
    }
  `],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class ReservationConfirmPageComponent {
  private readonly destroyRef = inject(DestroyRef);
  private readonly route = inject(ActivatedRoute);
  private readonly showsApi = inject(ShowsApiService);

  protected readonly state = signal<ConfirmationState>('loading');
  protected readonly confirmation = signal<ReservationConfirmResponse | null>(null);

  constructor() {
    const token = this.route.snapshot.queryParamMap.get('token')?.trim() ?? '';

    if (!token) {
      this.state.set('invalid');
      return;
    }

    this.showsApi.confirmReservation(token)
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe({
        next: (response) => {
          this.confirmation.set(response);
          this.state.set('success');
        },
        error: (error: HttpErrorResponse) => {
          if (error.status === 404 || error.status === 400) {
            this.state.set('invalid');
            return;
          }
          if (error.status === 410) {
            this.state.set('expired');
            return;
          }
          this.state.set('error');
        },
      });
  }
}