import { Component, signal } from '@angular/core';
import { CommonModule } from '@angular/common';

@Component({
  selector: 'app-flight-list',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="flight-container">
      <h2>Available Flights ({{ flights().length }})</h2>
      
      @for (flight of flights(); track flight.id) {
        <div class="flight-card">
          <span>{{ flight.flightNumber }}</span> - <span>{{ flight.destination }}</span>
        </div>
      } @empty {
        <p>No direct flights found for the selected date.</p>
      }

      <!-- Deferrable View: Lazy-loads heavy chart when scrolled into viewport -->
      @defer (on viewport; prefetch on idle) {
        <app-pricing-analytics-chart />
      } @placeholder {
        <div class="skeleton-box">Scroll to load pricing analytics...</div>
      } @loading (minimum 300ms) {
        <div class="spinner">Analyzing historical fare trends...</div>
      }
    </div>
  `
})
export class FlightListComponent {
  flights = signal([
    { id: 'FL-101', flightNumber: 'BA-249', destination: 'London Heathrow' }
  ]);
}

// Functional Dependency Injection in Angular 16+
import { Injectable, inject } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';

@Injectable({ providedIn: 'root' })
export class AuthenticationService {
  private http = inject(HttpClient);
  private router = inject(Router);

  async logout() {
    await this.http.post('/api/auth/logout', {}).toPromise();
    this.router.navigate(['/login']);
  }
}

// Converting RxJS Search Stream to Reactive Angular Signal
import { Component, inject } from '@angular/core';
import { toSignal } from '@angular/core/rxjs-interop';
import { FormControl, ReactiveFormsModule } from '@angular/forms';
import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
import { SearchService } from './search.service';

@Component({
  selector: 'app-search-box',
  standalone: true,
  imports: [ReactiveFormsModule],
  template: `
    <input id="angular-search-input" name="angularSearch" aria-label="Search knowledge base" [formControl]="searchControl" placeholder="Search knowledge base..." />
    <ul>
      @for (result of results(); track result.id) {
        <li>{{ result.title }}</li>
      }
    </ul>
  `
})
export class SearchBoxComponent {
  private searchService = inject(SearchService);
  searchControl = new FormControl('', { nonNullable: true });

  // Stream pipeline: Debounce input, discard previous searches with switchMap
  results = toSignal(
    this.searchControl.valueChanges.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      switchMap(query => this.searchService.queryApi(query))
    ),
    { initialValue: [] }
  );
}