import { DatePipe } from '@angular/common';
import { HttpErrorResponse } from '@angular/common/http';
import {
  ChangeDetectionStrategy,
  Component,
  DestroyRef,
  ElementRef,
  ViewChild,
  inject,
  signal,
} from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
import { ActivatedRoute, RouterLink } from '@angular/router';
import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';

import {
  CheckInConfirmResponse,
  CheckInPreviewResponse,
  ShowsApiService,
} from '../services/shows-api.service';

type UiState =
  | 'idle'
  | 'preview_loading'
  | 'preview_success'
  | 'confirm_loading'
  | 'confirm_success'
  | 'invalid_token'
  | 'pending_reservation'
  | 'already_checked_in'
  | 'unauthorized'
  | 'error';

type CameraState = 'ready' | 'starting' | 'active' | 'unsupported' | 'denied' | 'error';

type DetectedBarcode = {
  rawValue?: string;
};

type BarcodeDetectorInstance = {
  detect(source: HTMLCanvasElement): Promise<DetectedBarcode[]>;
};

type BarcodeDetectorConstructor = new (options?: { formats?: string[] }) => BarcodeDetectorInstance;

@Component({
  standalone: true,
  imports: [
    DatePipe,
    ReactiveFormsModule,
    RouterLink,
    MatButtonModule,
    MatCardModule,
    MatFormFieldModule,
    MatInputModule,
    MatProgressSpinnerModule,
  ],
  template: `
    <section class="page">
      <header class="page-header">
        <p class="eyebrow">Staff check-in</p>
        <h1>Token validation</h1>
        <p class="supporting">Enter a token manually or scan a QR code to preview admission data and confirm entrance.</p>
      </header>

      <mat-card class="content-card">
        <mat-card-content>
          <section class="scanner-panel">
            <div class="scanner-copy">
              <h2>Camera scan</h2>
              <p>Optional on supported browsers. If the QR contains a full check-in URL, the token is extracted automatically.</p>
            </div>

            <div class="actions scanner-actions">
              @if (cameraState() === 'active') {
                <button mat-stroked-button type="button" (click)="stopScanner()">Stop camera</button>
              } @else {
                <button
                  mat-stroked-button
                  type="button"
                  (click)="startScanner()"
                  [disabled]="cameraState() === 'unsupported' || cameraState() === 'starting'"
                >
                  @if (cameraState() === 'starting') {
                    <mat-progress-spinner mode="indeterminate" diameter="18"></mat-progress-spinner>
                    <span>Starting camera...</span>
                  } @else {
                    <span>Use camera</span>
                  }
                </button>
              }
            </div>

            @if (cameraState() === 'active') {
              <div class="camera-frame">
                <video #scannerVideo autoplay playsinline muted></video>
                <canvas #scannerCanvas class="scanner-canvas" aria-hidden="true"></canvas>
              </div>
            }

            @if (cameraMessage()) {
              <p class="camera-message">{{ cameraMessage() }}</p>
            }
          </section>

          <form [formGroup]="tokenForm" (ngSubmit)="preview()" novalidate>
            <mat-form-field appearance="outline" class="full-width">
              <mat-label>Opaque token</mat-label>
              <input matInput formControlName="token" autocomplete="off" />
              @if (tokenForm.controls.token.touched && tokenForm.controls.token.hasError('required')) {
                <mat-error>Token is required.</mat-error>
              }
            </mat-form-field>

            <div class="actions">
              <button mat-flat-button type="submit" [disabled]="isBusy()">
                @if (state() === 'preview_loading') {
                  <mat-progress-spinner mode="indeterminate" diameter="18"></mat-progress-spinner>
                  <span>Validating...</span>
                } @else {
                  <span>Preview check-in</span>
                }
              </button>
              <a mat-button routerLink="/">Home</a>
              <a mat-button routerLink="/shows">Shows</a>
            </div>
          </form>

          @if (previewData() && shouldShowPreview()) {
            <section class="preview-panel" aria-live="polite">
              <h2>Admission preview</h2>
              <dl>
                <div><dt>Show</dt><dd>{{ previewData()!.show_title }}</dd></div>
                <div><dt>Venue</dt><dd>{{ previewData()!.venue_name }}</dd></div>
                <div><dt>Starts at</dt><dd>{{ previewData()!.starts_at | date: 'EEEE d MMMM, HH:mm' }}</dd></div>
                <div><dt>Party size</dt><dd>{{ previewData()!.party_size }}</dd></div>
                <div><dt>Reservation</dt><dd>#{{ previewData()!.reservation_id }}</dd></div>
              </dl>
              <button mat-flat-button type="button" (click)="confirm()" [disabled]="isBusy() || state() === 'confirm_success'">
                @if (state() === 'confirm_loading') {
                  <mat-progress-spinner mode="indeterminate" diameter="18"></mat-progress-spinner>
                  <span>Confirming...</span>
                } @else if (state() === 'confirm_success') {
                  <span>Checked in</span>
                } @else {
                  <span>Confirm check-in</span>
                }
              </button>
            </section>
          }

          @if (state() === 'confirm_success' && confirmData()) {
            <p class="success-message" aria-live="polite">
              Check-in confirmed at {{ confirmData()!.checked_in_at | date: 'HH:mm' }}.
            </p>
          }

          @if (state() === 'invalid_token') {
            <p class="error-message" aria-live="assertive">Invalid token.</p>
          }
          @if (state() === 'pending_reservation') {
            <p class="error-message" aria-live="assertive">Reservation is still pending confirmation.</p>
          }
          @if (state() === 'already_checked_in') {
            <p class="error-message" aria-live="assertive">This reservation is already checked in.</p>
          }
          @if (state() === 'unauthorized') {
            <p class="error-message" aria-live="assertive">You are not authorized. Log into <code>/admin</code> with a staff account, then retry this check-in.</p>
          }
          @if (state() === 'error') {
            <p class="error-message" aria-live="assertive">Something went wrong. Please try again.</p>
          }
        </mat-card-content>
      </mat-card>
    </section>
  `,
  styles: [`
    .page {
      max-width: 760px;
      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);
    }

    .scanner-panel {
      display: grid;
      gap: 14px;
      margin-bottom: 18px;
      padding-bottom: 18px;
      border-bottom: 1px solid var(--azionelab-border);
    }

    .scanner-copy h2 {
      margin: 0 0 6px;
      font-size: 1.15rem;
    }

    .scanner-copy p,
    .camera-message {
      margin: 0;
      color: var(--azionelab-muted);
      line-height: 1.5;
    }

    .camera-message {
      font-size: 0.95rem;
    }

    .camera-frame {
      overflow: hidden;
      border-radius: 8px;
      border: 1px solid var(--azionelab-border);
      background: #151515;
    }

    .camera-frame video {
      display: block;
      width: 100%;
      aspect-ratio: 4 / 3;
      object-fit: cover;
    }

    .scanner-canvas {
      display: none;
    }

    .full-width {
      width: 100%;
    }

    .actions {
      display: flex;
      gap: 10px;
      align-items: center;
      flex-wrap: wrap;
    }

    .scanner-actions {
      justify-content: flex-start;
    }

    button[mat-flat-button],
    button[mat-stroked-button] {
      min-width: 150px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .preview-panel {
      margin-top: 18px;
      border-top: 1px solid var(--azionelab-border);
      padding-top: 16px;
    }

    .preview-panel h2 {
      margin: 0 0 12px;
      font-size: 1.15rem;
    }

    .preview-panel dl {
      display: grid;
      gap: 10px;
      margin: 0 0 16px;
    }

    .preview-panel dt {
      font-size: 0.8rem;
      text-transform: uppercase;
      color: var(--azionelab-muted);
      font-weight: 700;
    }

    .preview-panel dd {
      margin: 2px 0 0;
    }

    .success-message {
      margin: 16px 0 0;
      color: #2e7d32;
      font-weight: 600;
    }

    .error-message {
      margin: 16px 0 0;
      color: #b3261e;
      font-weight: 500;
    }
  `],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class CheckInPlaceholderPageComponent {
  private readonly destroyRef = inject(DestroyRef);
  private readonly formBuilder = inject(FormBuilder);
  private readonly route = inject(ActivatedRoute);
  private readonly showsApi = inject(ShowsApiService);
  private readonly barcodeDetectorCtor = (globalThis as { BarcodeDetector?: BarcodeDetectorConstructor }).BarcodeDetector;
  private readonly scannerSupported =
    !!this.barcodeDetectorCtor &&
    typeof navigator !== 'undefined' &&
    !!navigator.mediaDevices &&
    typeof navigator.mediaDevices.getUserMedia === 'function';

  private detector: BarcodeDetectorInstance | null = null;
  private scannerStream: MediaStream | null = null;
  private scanFrameId: number | null = null;
  private scanInFlight = false;

  @ViewChild('scannerVideo') private scannerVideo?: ElementRef<HTMLVideoElement>;
  @ViewChild('scannerCanvas') private scannerCanvas?: ElementRef<HTMLCanvasElement>;

  protected readonly tokenForm = this.formBuilder.nonNullable.group({
    token: ['', [Validators.required]],
  });

  protected readonly state = signal<UiState>('idle');
  protected readonly previewData = signal<CheckInPreviewResponse | null>(null);
  protected readonly confirmData = signal<CheckInConfirmResponse | null>(null);
  protected readonly cameraState = signal<CameraState>(this.scannerSupported ? 'ready' : 'unsupported');
  protected readonly cameraMessage = signal(
    this.scannerSupported
      ? 'Open the camera to scan a QR code, or keep using manual token entry.'
      : 'Camera scanning is not available in this browser. Manual token entry still works.',
  );

  constructor() {
    this.destroyRef.onDestroy(() => this.stopScanner());
    const tokenFromQuery = this.route.snapshot.queryParamMap.get('token')?.trim() ?? '';
    if (tokenFromQuery) {
      this.tokenForm.controls.token.setValue(tokenFromQuery);
      this.tokenForm.controls.token.markAsTouched();
      this.preview();
    }
  }

  protected preview(): void {
    if (this.tokenForm.invalid) {
      this.tokenForm.markAllAsTouched();
      return;
    }

    const token = this.tokenForm.controls.token.value.trim();
    if (!token) {
      this.tokenForm.controls.token.setErrors({ required: true });
      return;
    }

    this.state.set('preview_loading');
    this.previewData.set(null);
    this.confirmData.set(null);

    this.showsApi.previewCheckIn(token)
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe({
        next: (response) => {
          this.previewData.set(response);
          this.state.set('preview_success');
        },
        error: (error: HttpErrorResponse) => this.setErrorState(error),
      });
  }

  protected confirm(): void {
    const token = this.tokenForm.controls.token.value.trim();
    if (!token) {
      this.state.set('invalid_token');
      return;
    }

    this.state.set('confirm_loading');

    this.showsApi.confirmCheckIn(token)
      .pipe(takeUntilDestroyed(this.destroyRef))
      .subscribe({
        next: (response) => {
          this.confirmData.set(response);
          this.state.set('confirm_success');
        },
        error: (error: HttpErrorResponse) => this.setErrorState(error),
      });
  }

  protected async startScanner(): Promise<void> {
    if (!this.scannerSupported || !this.barcodeDetectorCtor) {
      this.cameraState.set('unsupported');
      this.cameraMessage.set('Camera scanning is not available in this browser. Manual token entry still works.');
      return;
    }

    this.stopScanner();
    this.cameraState.set('starting');
    this.cameraMessage.set('Starting camera...');

    try {
      this.scannerStream = await navigator.mediaDevices.getUserMedia({
        video: { facingMode: { ideal: 'environment' } },
        audio: false,
      });

      this.detector = new this.barcodeDetectorCtor({ formats: ['qr_code'] });
      this.cameraState.set('active');
      this.cameraMessage.set('Point the camera at the visitor QR code.');
      this.scheduleScan();
    } catch (error) {
      this.stopScanner();

      if (error instanceof DOMException && (error.name === 'NotAllowedError' || error.name === 'SecurityError')) {
        this.cameraState.set('denied');
        this.cameraMessage.set('Camera access was denied. You can continue with manual token entry.');
        return;
      }

      this.cameraState.set('error');
      this.cameraMessage.set('Could not start the camera. You can continue with manual token entry.');
    }
  }

  protected stopScanner(): void {
    if (this.scanFrameId !== null) {
      cancelAnimationFrame(this.scanFrameId);
      this.scanFrameId = null;
    }

    if (this.scannerStream) {
      for (const track of this.scannerStream.getTracks()) {
        track.stop();
      }
      this.scannerStream = null;
    }

    if (this.scannerVideo?.nativeElement) {
      this.scannerVideo.nativeElement.pause();
      this.scannerVideo.nativeElement.srcObject = null;
    }

    this.detector = null;
    this.scanInFlight = false;

    if (this.scannerSupported && this.cameraState() === 'active') {
      this.cameraState.set('ready');
      this.cameraMessage.set('Camera stopped. You can scan again or continue with manual token entry.');
    }
  }

  protected isBusy(): boolean {
    return this.state() === 'preview_loading' || this.state() === 'confirm_loading';
  }

  protected shouldShowPreview(): boolean {
    return (
      this.state() === 'preview_success'
      || this.state() === 'confirm_loading'
      || this.state() === 'confirm_success'
    );
  }

  private scheduleScan(): void {
    this.scanFrameId = requestAnimationFrame(() => {
      void this.scanFrame();
    });
  }

  private async scanFrame(): Promise<void> {
    if (this.cameraState() !== 'active' || !this.detector) {
      return;
    }

    const video = this.scannerVideo?.nativeElement;
    const canvas = this.scannerCanvas?.nativeElement;
    if (!video || !canvas || this.scanInFlight) {
      this.scheduleScan();
      return;
    }

    if (!this.scannerStream && !video.srcObject) {
      this.scheduleScan();
      return;
    }

    if (video.srcObject !== this.scannerStream) {
      video.srcObject = this.scannerStream;
      await video.play();
    }

    if (video.readyState < HTMLMediaElement.HAVE_CURRENT_DATA || video.videoWidth === 0) {
      this.scheduleScan();
      return;
    }

    const context = canvas.getContext('2d');
    if (!context) {
      this.cameraState.set('error');
      this.cameraMessage.set('Camera scan is not available right now. Please enter the token manually.');
      this.stopScanner();
      return;
    }

    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    context.drawImage(video, 0, 0, canvas.width, canvas.height);

    this.scanInFlight = true;

    try {
      const barcodes = await this.detector.detect(canvas);
      const rawValue = barcodes[0]?.rawValue ?? '';
      const token = this.extractToken(rawValue);

      if (token) {
        this.tokenForm.controls.token.setValue(token);
        this.tokenForm.controls.token.markAsTouched();
        this.cameraMessage.set('QR captured. Validating token...');
        this.stopScanner();
        this.preview();
        return;
      }
    } catch {
      this.cameraState.set('error');
      this.cameraMessage.set('Camera scan failed. Please enter the token manually.');
      this.stopScanner();
      return;
    } finally {
      this.scanInFlight = false;
    }

    this.scheduleScan();
  }

  private extractToken(rawValue: string): string {
    const trimmedValue = rawValue.trim();
    if (!trimmedValue) {
      return '';
    }

    try {
      const parsedUrl = new URL(trimmedValue);
      return parsedUrl.searchParams.get('token')?.trim() ?? trimmedValue;
    } catch {
      return trimmedValue;
    }
  }

  private setErrorState(error: HttpErrorResponse): void {
    if (error.status === 401 || error.status === 403) {
      this.state.set('unauthorized');
      return;
    }

    if (error.status === 404) {
      this.state.set('invalid_token');
      return;
    }

    if (error.status === 409 && error.error?.status === 'reservation_not_confirmed') {
      this.state.set('pending_reservation');
      return;
    }

    if (error.status === 409 && error.error?.status === 'already_checked_in') {
      this.state.set('already_checked_in');
      return;
    }

    this.state.set('error');
  }
}