import { createAction, props } from '@ngrx/store';

// Simple action — no payload needed
export const clearFlightSearch = createAction('[Flight Search] Clear Search');

// Action with typed payload
export const selectFlight = createAction(
  '[Flight Search] Select Flight',
  props<{ flightId: string }>(), // TypeScript enforces this payload shape
);

// Action with complex payload
export const setPassengerCount = createAction(
  '[Flight Search] Set Passenger Count',
  props<{ adults: number; children: number; infants: number }>(),
);

import { createActionGroup, emptyProps, props } from '@ngrx/store';
import { Flight, FlightSearchParams, SeatMap } from '../../models/flight.model';

export const FlightActions = createActionGroup({
  source: 'Flights', // becomes the prefix: [Flights]
  events: {
    // ── Search ─────────────────────────────────────────────────────
    // emptyProps() for actions carrying no data
    'Load Flights': props<{ params: FlightSearchParams }>(),
    'Load Flights Success': props<{ flights: Flight[] }>(),
    'Load Flights Failure': props<{ error: string }>(),

    // ── Selection ──────────────────────────────────────────────────
    'Select Flight': props<{ flightId: string }>(),
    'Deselect Flight': emptyProps(),

    // ── Seat Map ───────────────────────────────────────────────────
    'Load Seat Map': props<{ flightId: string }>(),
    'Load Seat Map Success': props<{ seatMap: SeatMap }>(),
    'Load Seat Map Failure': props<{ error: string }>(),
    'Select Seat': props<{ seatNumber: string; passengerId: string }>(),
    'Deselect Seat': props<{ passengerId: string }>(),

    // ── Booking ────────────────────────────────────────────────────
    'Confirm Booking': emptyProps(),
    'Confirm Booking Success': props<{ bookingReference: string }>(),
    'Confirm Booking Failure': props<{ error: string }>(),
  },
});

// NgRx auto-generates camelCase creators from the event names:
// FlightActions.loadFlights({ params })
// FlightActions.loadFlightsSuccess({ flights })
// FlightActions.selectFlight({ flightId })
// FlightActions.confirmBookingSuccess({ bookingReference })

// Real-world example: analytics dashboard with multiple data sources

import { createActionGroup, emptyProps, props } from '@ngrx/store';
import {
  MetricCard,
  ChartDataset,
  DateRange,
  ReportFilter,
  ExportFormat,
} from '../../models/analytics.model';

export const AnalyticsActions = createActionGroup({
  source: 'Analytics',
  events: {
    // Dashboard initialization
    'Initialize Dashboard': props<{ userId: string }>(),
    'Initialize Dashboard Success': props<{ metrics: MetricCard[] }>(),
    'Initialize Dashboard Failure': props<{ error: string }>(),

    // Date range controls
    'Set Date Range': props<{ range: DateRange }>(),
    'Set Comparison Period': props<{ enabled: boolean }>(),

    // Chart data
    'Load Revenue Chart': props<{
      range: DateRange;
      granularity: 'day' | 'week' | 'month';
    }>(),
    'Load Revenue Chart Success': props<{ dataset: ChartDataset }>(),
    'Load Revenue Chart Failure': props<{ error: string }>(),

    'Load User Growth Chart': props<{ range: DateRange }>(),
    'Load User Growth Chart Success': props<{ dataset: ChartDataset }>(),
    'Load User Growth Chart Failure': props<{ error: string }>(),

    // Filters
    'Apply Filter': props<{ filter: ReportFilter }>(),
    'Remove Filter': props<{ filterId: string }>(),
    'Clear All Filters': emptyProps(),

    // Export
    'Export Report': props<{ format: ExportFormat; filters: ReportFilter[] }>(),
    'Export Report Success': props<{ downloadUrl: string }>(),
    'Export Report Failure': props<{ error: string }>(),
  },
});

import { createReducer, on } from '@ngrx/store';
import { FlightActions } from './flights.actions';
import { Flight, SeatMap, SeatSelection } from '../../models/flight.model';

// Define the exact shape of this state slice
export interface FlightsState {
  // Search results
  availableFlights: Flight[];
  searchLoading: boolean;
  searchError: string | null;

  // Selection
  selectedFlightId: string | null;

  // Seat map
  seatMap: SeatMap | null;
  seatMapLoading: boolean;
  seatSelections: SeatSelection[]; // { passengerId, seatNumber }[]

  // Booking
  bookingReference: string | null;
  bookingLoading: boolean;
  bookingError: string | null;
}

export const initialState: FlightsState = {
  availableFlights: [],
  searchLoading: false,
  searchError: null,
  selectedFlightId: null,
  seatMap: null,
  seatMapLoading: false,
  seatSelections: [],
  bookingReference: null,
  bookingLoading: false,
  bookingError: null,
};

export const flightsReducer = createReducer(
  initialState,

  // ── Search handlers ─────────────────────────────────────────────
  on(FlightActions.loadFlights, (state) => ({
    ...state,
    searchLoading: true,
    searchError: null,
    availableFlights: [], // clear previous results
    selectedFlightId: null, // clear previous selection
  })),

  on(FlightActions.loadFlightsSuccess, (state, { flights }) => ({
    ...state,
    availableFlights: flights,
    searchLoading: false,
  })),

  on(FlightActions.loadFlightsFailure, (state, { error }) => ({
    ...state,
    searchLoading: false,
    searchError: error,
  })),

  // ── Selection handlers ──────────────────────────────────────────
  on(FlightActions.selectFlight, (state, { flightId }) => ({
    ...state,
    selectedFlightId: flightId,
    seatMap: null, // clear old seat map
    seatSelections: [], // clear previous seat selections
  })),

  on(FlightActions.deselectFlight, (state) => ({
    ...state,
    selectedFlightId: null,
    seatMap: null,
    seatSelections: [],
  })),

  // ── Seat map handlers ───────────────────────────────────────────
  on(FlightActions.loadSeatMap, (state) => ({
    ...state,
    seatMapLoading: true,
  })),

  on(FlightActions.loadSeatMapSuccess, (state, { seatMap }) => ({
    ...state,
    seatMap,
    seatMapLoading: false,
  })),

  on(FlightActions.loadSeatMapFailure, (state, { error }) => ({
    ...state,
    seatMapLoading: false,
    searchError: error,
  })),

  // Add or replace seat selection for a passenger
  on(FlightActions.selectSeat, (state, { seatNumber, passengerId }) => {
    // Remove any previous selection for this passenger
    const withoutPassenger = state.seatSelections.filter(
      (s) => s.passengerId !== passengerId,
    );
    return {
      ...state,
      // Add the new selection
      seatSelections: [...withoutPassenger, { seatNumber, passengerId }],
    };
  }),

  on(FlightActions.deselectSeat, (state, { passengerId }) => ({
    ...state,
    seatSelections: state.seatSelections.filter(
      (s) => s.passengerId !== passengerId,
    ),
  })),

  // ── Booking handlers ────────────────────────────────────────────
  on(FlightActions.confirmBooking, (state) => ({
    ...state,
    bookingLoading: true,
    bookingError: null,
  })),

  on(FlightActions.confirmBookingSuccess, (state, { bookingReference }) => ({
    ...state,
    bookingLoading: false,
    bookingReference,
  })),

  on(FlightActions.confirmBookingFailure, (state, { error }) => ({
    ...state,
    bookingLoading: false,
    bookingError: error,
  })),
);

import { createReducer, on } from '@ngrx/store';
import { AnalyticsActions } from './analytics.actions';
import {
  MetricCard,
  ChartDataset,
  DateRange,
  ReportFilter,
} from '../../models/analytics.model';

export interface AnalyticsState {
  metrics: MetricCard[];
  metricsLoading: boolean;

  revenueChart: ChartDataset | null;
  revenueChartLoading: boolean;

  userGrowthChart: ChartDataset | null;
  userGrowthChartLoading: boolean;

  dateRange: DateRange;
  comparisonEnabled: boolean;

  activeFilters: ReportFilter[];
  exportLoading: boolean;
  exportUrl: string | null;

  error: string | null;
}

export const initialState: AnalyticsState = {
  metrics: [],
  metricsLoading: false,
  revenueChart: null,
  revenueChartLoading: false,
  userGrowthChart: null,
  userGrowthChartLoading: false,
  dateRange: { start: new Date(), end: new Date() },
  comparisonEnabled: false,
  activeFilters: [],
  exportLoading: false,
  exportUrl: null,
  error: null,
};

export const analyticsReducer = createReducer(
  initialState,

  on(AnalyticsActions.initializeDashboard, (state) => ({
    ...state,
    metricsLoading: true,
    error: null,
  })),

  on(AnalyticsActions.initializeDashboardSuccess, (state, { metrics }) => ({
    ...state,
    metrics,
    metricsLoading: false,
  })),

  on(AnalyticsActions.initializeDashboardFailure, (state, { error }) => ({
    ...state,
    metricsLoading: false,
    error,
  })),

  // Date range change — triggers new chart loads via Effects
  on(AnalyticsActions.setDateRange, (state, { range }) => ({
    ...state,
    dateRange: range,
    // Clear old chart data when range changes (stale data looks bad)
    revenueChart: null,
    userGrowthChart: null,
  })),

  on(AnalyticsActions.setComparisonPeriod, (state, { enabled }) => ({
    ...state,
    comparisonEnabled: enabled,
  })),

  on(AnalyticsActions.loadRevenueChart, (state) => ({
    ...state,
    revenueChartLoading: true,
  })),

  on(AnalyticsActions.loadRevenueChartSuccess, (state, { dataset }) => ({
    ...state,
    revenueChart: dataset,
    revenueChartLoading: false,
  })),

  on(AnalyticsActions.loadRevenueChartFailure, (state, { error }) => ({
    ...state,
    revenueChartLoading: false,
    error,
  })),

  on(AnalyticsActions.loadUserGrowthChartSuccess, (state, { dataset }) => ({
    ...state,
    userGrowthChart: dataset,
    userGrowthChartLoading: false,
  })),

  // Filter management — add unique filters only
  on(AnalyticsActions.applyFilter, (state, { filter }) => ({
    ...state,
    activeFilters: [
      ...state.activeFilters.filter((f) => f.id !== filter.id), // remove old
      filter, // add new/updated
    ],
  })),

  on(AnalyticsActions.removeFilter, (state, { filterId }) => ({
    ...state,
    activeFilters: state.activeFilters.filter((f) => f.id !== filterId),
  })),

  on(AnalyticsActions.clearAllFilters, (state) => ({
    ...state,
    activeFilters: [],
  })),

  on(AnalyticsActions.exportReport, (state) => ({
    ...state,
    exportLoading: true,
    exportUrl: null,
  })),

  on(AnalyticsActions.exportReportSuccess, (state, { downloadUrl }) => ({
    ...state,
    exportLoading: false,
    exportUrl: downloadUrl,
  })),

  on(AnalyticsActions.exportReportFailure, (state, { error }) => ({
    ...state,
    exportLoading: false,
    error,
  })),
);

import { createFeatureSelector, createSelector } from '@ngrx/store';
import { FlightsState } from './flights.reducer';
import { Flight } from '../../models/flight.model';

// Step 1: Feature selector — selects the entire 'flights' state slice
export const selectFlightsState =
  createFeatureSelector<FlightsState>('flights');

// Step 2: Atomic selectors — each selects one field
export const selectAvailableFlights = createSelector(
  selectFlightsState,
  (state) => state.availableFlights,
);

export const selectSearchLoading = createSelector(
  selectFlightsState,
  (state) => state.searchLoading,
);

export const selectSearchError = createSelector(
  selectFlightsState,
  (state) => state.searchError,
);

export const selectSelectedFlightId = createSelector(
  selectFlightsState,
  (state) => state.selectedFlightId,
);

export const selectSeatMap = createSelector(
  selectFlightsState,
  (state) => state.seatMap,
);

export const selectSeatSelections = createSelector(
  selectFlightsState,
  (state) => state.seatSelections,
);

export const selectBookingLoading = createSelector(
  selectFlightsState,
  (state) => state.bookingLoading,
);

export const selectBookingReference = createSelector(
  selectFlightsState,
  (state) => state.bookingReference,
);

// Step 3: Derived selectors — combine atomic selectors for complex computation
// Finds the selected flight object (O(n) scan, but memoized so runs once per change)
export const selectSelectedFlight = createSelector(
  selectAvailableFlights,
  selectSelectedFlightId,
  (flights, selectedId) =>
    selectedId ? (flights.find((f) => f.id === selectedId) ?? null) : null,
);

// Compute flight count without exposing the whole array
export const selectFlightCount = createSelector(
  selectAvailableFlights,
  (flights) => flights.length,
);

// Sort flights by price — derived, never stored
export const selectFlightsSortedByPrice = createSelector(
  selectAvailableFlights,
  (flights) => [...flights].sort((a, b) => a.price - b.price),
);

// Filter by class — parameterized selector factory
export const selectFlightsByClass = (
  cabinClass: 'economy' | 'business' | 'first',
) =>
  createSelector(selectAvailableFlights, (flights) =>
    flights.filter((f) => f.availableClasses.includes(cabinClass)),
  );

// Check if all passengers have selected seats
export const selectAllSeatsSelected = createSelector(
  selectSeatSelections,
  selectFlightsState,
  (selections, state) => {
    // This would compare against passenger count stored elsewhere
    return selections.length > 0;
  },
);

// Compose a rich ViewModel for the booking summary component
// One selector, one subscription — minimal change detection overhead
export const selectBookingSummaryViewModel = createSelector(
  selectSelectedFlight,
  selectSeatSelections,
  selectBookingLoading,
  selectBookingReference,
  selectFlightsState,
  (flight, seats, loading, reference, state) => ({
    flight,
    seats,
    loading,
    reference,
    bookingError: state.bookingError,
    canConfirm: !!flight && seats.length > 0 && !loading,
    isConfirmed: !!reference,
  }),
);

import { createFeatureSelector, createSelector } from '@ngrx/store';
import { AnalyticsState } from './analytics.reducer';

export const selectAnalyticsState =
  createFeatureSelector<AnalyticsState>('analytics');

// Atomic selectors
export const selectMetrics = createSelector(
  selectAnalyticsState,
  (state) => state.metrics,
);

export const selectMetricsLoading = createSelector(
  selectAnalyticsState,
  (state) => state.metricsLoading,
);

export const selectRevenueChart = createSelector(
  selectAnalyticsState,
  (state) => state.revenueChart,
);

export const selectDateRange = createSelector(
  selectAnalyticsState,
  (state) => state.dateRange,
);

export const selectActiveFilters = createSelector(
  selectAnalyticsState,
  (state) => state.activeFilters,
);

export const selectComparisonEnabled = createSelector(
  selectAnalyticsState,
  (state) => state.comparisonEnabled,
);

// Derived: count active filters (used for badge on filter button)
export const selectActiveFilterCount = createSelector(
  selectActiveFilters,
  (filters) => filters.length,
);

// Derived: check if export is loading
export const selectExportLoading = createSelector(
  selectAnalyticsState,
  (state) => state.exportLoading,
);

// Derived: metrics above/below benchmark
export const selectMetricsByHealth = createSelector(
  selectMetrics,
  (metrics) => ({
    healthy: metrics.filter((m) => m.changePercent >= 0),
    declining: metrics.filter((m) => m.changePercent < 0),
  }),
);

// Full dashboard ViewModel — one select in the component
export const selectDashboardViewModel = createSelector(
  selectMetrics,
  selectMetricsLoading,
  selectRevenueChart,
  selectDateRange,
  selectActiveFilters,
  selectComparisonEnabled,
  selectExportLoading,
  selectAnalyticsState,
  (
    metrics,
    metricsLoading,
    revenueChart,
    dateRange,
    filters,
    comparison,
    exportLoading,
    state,
  ) => ({
    metrics,
    metricsLoading,
    revenueChart,
    dateRange,
    filters,
    comparison,
    exportLoading,
    exportUrl: state.exportUrl,
    userGrowthChart: state.userGrowthChart,
    userGrowthLoading: state.userGrowthChartLoading,
    hasFilters: filters.length > 0,
    error: state.error,
  }),
);

import { Injectable, inject } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { Store } from '@ngrx/store';
import { Router } from '@angular/router';
import { of } from 'rxjs';
import {
  catchError,
  exhaustMap,
  map,
  switchMap,
  tap,
  withLatestFrom,
} from 'rxjs/operators';
import { FlightActions } from './flights.actions';
import { FlightService } from '../../services/flight.service';
import { BookingService } from '../../services/booking.service';
import { SeatService } from '../../services/seat.service';
import {
  selectSeatSelections,
  selectSelectedFlightId,
} from './flights.selectors';
import { NotificationService } from '../../services/notification.service';

@Injectable()
export class FlightsEffects {
  private actions$ = inject(Actions);
  private store = inject(Store);
  private flightService = inject(FlightService);
  private bookingService = inject(BookingService);
  private seatService = inject(SeatService);
  private router = inject(Router);
  private notify = inject(NotificationService);

  // ── Search ──────────────────────────────────────────────────────
  // switchMap: user can change search params mid-request — cancel old one
  loadFlights$ = createEffect(() =>
    this.actions$.pipe(
      ofType(FlightActions.loadFlights),
      switchMap(
        (
          { params }, // cancel in-flight on new search
        ) =>
          this.flightService.search(params).pipe(
            map((flights) => FlightActions.loadFlightsSuccess({ flights })),
            catchError((error) =>
              of(FlightActions.loadFlightsFailure({ error: error.message })),
            ),
          ),
      ),
    ),
  );

  // ── Seat Map ─────────────────────────────────────────────────────
  // When a flight is selected, automatically load its seat map
  loadSeatMapOnSelect$ = createEffect(() =>
    this.actions$.pipe(
      ofType(FlightActions.selectFlight),
      switchMap(({ flightId }) =>
        this.seatService.getSeatMap(flightId).pipe(
          map((seatMap) => FlightActions.loadSeatMapSuccess({ seatMap })),
          catchError((error) =>
            of(FlightActions.loadSeatMapFailure({ error: error.message })),
          ),
        ),
      ),
    ),
  );

  // ── Booking ──────────────────────────────────────────────────────
  // exhaustMap: prevent double-booking if user clicks "Confirm" twice
  confirmBooking$ = createEffect(() =>
    this.actions$.pipe(
      ofType(FlightActions.confirmBooking),
      // withLatestFrom pulls the latest store values without creating a new subscription
      withLatestFrom(
        this.store.select(selectSelectedFlightId),
        this.store.select(selectSeatSelections),
      ),
      exhaustMap(
        (
          [, flightId, seatSelections], // ignore extra clicks
        ) =>
          this.bookingService
            .confirm({ flightId: flightId!, seatSelections })
            .pipe(
              map(({ bookingReference }) =>
                FlightActions.confirmBookingSuccess({ bookingReference }),
              ),
              catchError((error) =>
                of(
                  FlightActions.confirmBookingFailure({ error: error.message }),
                ),
              ),
            ),
      ),
    ),
  );

  // ── Non-dispatching Effects ──────────────────────────────────────
  // { dispatch: false } — this effect must NOT dispatch another action
  // (it would cause an infinite loop if it did)

  navigateToConfirmation$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(FlightActions.confirmBookingSuccess),
        tap(({ bookingReference }) => {
          this.router.navigate(['/bookings/confirmation', bookingReference]);
        }),
      ),
    { dispatch: false },
  );

  showBookingError$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(FlightActions.confirmBookingFailure),
        tap(({ error }) => this.notify.error(`Booking failed: ${error}`)),
      ),
    { dispatch: false },
  );

  showSearchError$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(FlightActions.loadFlightsFailure),
        tap(({ error }) => this.notify.error(`Search failed: ${error}`)),
      ),
    { dispatch: false },
  );
}

import { Injectable, inject } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { Store } from '@ngrx/store';
import { of, forkJoin } from 'rxjs';
import {
  catchError,
  exhaustMap,
  map,
  mergeMap,
  switchMap,
  tap,
  withLatestFrom,
} from 'rxjs/operators';
import { AnalyticsActions } from './analytics.actions';
import { AnalyticsService } from '../../services/analytics.service';
import { ExportService } from '../../services/export.service';
import { selectDateRange, selectActiveFilters } from './analytics.selectors';

@Injectable()
export class AnalyticsEffects {
  private actions$ = inject(Actions);
  private store = inject(Store);
  private analyticsService = inject(AnalyticsService);
  private exportService = inject(ExportService);

  // Initialize dashboard: load all metrics on entry
  initializeDashboard$ = createEffect(() =>
    this.actions$.pipe(
      ofType(AnalyticsActions.initializeDashboard),
      switchMap(({ userId }) =>
        this.analyticsService.getMetrics(userId).pipe(
          map((metrics) =>
            AnalyticsActions.initializeDashboardSuccess({ metrics }),
          ),
          catchError((error) =>
            of(
              AnalyticsActions.initializeDashboardFailure({
                error: error.message,
              }),
            ),
          ),
        ),
      ),
    ),
  );

  // When date range changes, reload ALL charts in parallel (mergeMap)
  // mergeMap fires both requests simultaneously — neither depends on the other
  reloadChartsOnDateChange$ = createEffect(() =>
    this.actions$.pipe(
      ofType(AnalyticsActions.setDateRange),
      mergeMap(({ range }) => [
        // Dispatch both load actions simultaneously
        AnalyticsActions.loadRevenueChart({ range, granularity: 'day' }),
        AnalyticsActions.loadUserGrowthChart({ range }),
      ]),
    ),
  );

  // Load revenue chart data
  loadRevenueChart$ = createEffect(() =>
    this.actions$.pipe(
      ofType(AnalyticsActions.loadRevenueChart),
      switchMap(({ range, granularity }) =>
        this.analyticsService.getRevenueChart(range, granularity).pipe(
          map((dataset) =>
            AnalyticsActions.loadRevenueChartSuccess({ dataset }),
          ),
          catchError((error) =>
            of(
              AnalyticsActions.loadRevenueChartFailure({
                error: error.message,
              }),
            ),
          ),
        ),
      ),
    ),
  );

  // Load user growth chart
  loadUserGrowthChart$ = createEffect(() =>
    this.actions$.pipe(
      ofType(AnalyticsActions.loadUserGrowthChart),
      switchMap(({ range }) =>
        this.analyticsService.getUserGrowthChart(range).pipe(
          map((dataset) =>
            AnalyticsActions.loadUserGrowthChartSuccess({ dataset }),
          ),
          catchError((error) =>
            of(
              AnalyticsActions.loadUserGrowthChartFailure({
                error: error.message,
              }),
            ),
          ),
        ),
      ),
    ),
  );

  // Export report — exhaustMap prevents double-export on rapid clicks
  exportReport$ = createEffect(() =>
    this.actions$.pipe(
      ofType(AnalyticsActions.exportReport),
      withLatestFrom(this.store.select(selectDateRange)),
      exhaustMap(([{ format, filters }, dateRange]) =>
        this.exportService.export({ format, filters, dateRange }).pipe(
          map(({ downloadUrl }) =>
            AnalyticsActions.exportReportSuccess({ downloadUrl }),
          ),
          catchError((error) =>
            of(AnalyticsActions.exportReportFailure({ error: error.message })),
          ),
        ),
      ),
    ),
  );

  // Auto-download when export URL is ready (non-dispatching)
  triggerDownload$ = createEffect(
    () =>
      this.actions$.pipe(
        ofType(AnalyticsActions.exportReportSuccess),
        tap(({ downloadUrl }) => {
          // Trigger browser download
          const link = document.createElement('a');
          link.href = downloadUrl;
          link.click();
        }),
      ),
    { dispatch: false },
  );
}

import { ApplicationConfig, isDevMode } from '@angular/core';
import { provideRouter, withComponentInputBinding } from '@angular/router';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { provideStore } from '@ngrx/store';
import { provideEffects } from '@ngrx/effects';
import { provideStoreDevtools } from '@ngrx/store-devtools';
import { provideRouterStore } from '@ngrx/router-store';

import { routes } from './app.routes';
import { authInterceptor } from './core/interceptors/auth.interceptor';

// Root-level reducers (always loaded)
import { authReducer } from './store/auth/auth.reducer';
import { uiReducer } from './store/ui/ui.reducer';

// Root-level effects
import { AuthEffects } from './store/auth/auth.effects';

export const appConfig: ApplicationConfig = {
  providers: [
    // Router with component input binding (route params as @Input)
    provideRouter(routes, withComponentInputBinding()),

    // HTTP client with interceptors
    provideHttpClient(withInterceptors([authInterceptor])),

    // NgRx Store — root reducers only
    provideStore({
      auth: authReducer,
      ui: uiReducer,
    }),

    // Root effects
    provideEffects([AuthEffects]),

    // DevTools — only in development mode
    provideStoreDevtools({
      maxAge: 50, // how many past states to retain
      logOnly: !isDevMode(), // production: no time travel
      autoPause: true, // pause when DevTools tab is not focused
      name: 'Flight Booking App',
    }),

    // Sync router state into the NgRx store
    provideRouterStore(),
  ],
};

// Feature states are only registered when their route is visited

import { Routes } from '@angular/router';
import { provideState } from '@ngrx/store';
import { provideEffects } from '@ngrx/effects';

import { flightsReducer } from './store/flights/flights.reducer';
import { FlightsEffects } from './store/flights/flights.effects';
import { analyticsReducer } from './store/analytics/analytics.reducer';
import { AnalyticsEffects } from './store/analytics/analytics.effects';
import { authGuard } from './core/guards/auth.guard';

export const routes: Routes = [
  {
    path: '',
    redirectTo: 'flights',
    pathMatch: 'full',
  },
  {
    path: 'flights',
    // Lazily loaded component
    loadComponent: () =>
      import('./features/flights/flight-search.component').then(
        (m) => m.FlightSearchComponent,
      ),
    // Feature state registered only when /flights is visited
    providers: [
      provideState('flights', flightsReducer),
      provideEffects([FlightsEffects]),
    ],
  },
  {
    path: 'analytics',
    canActivate: [authGuard],
    loadComponent: () =>
      import('./features/analytics/analytics-dashboard.component').then(
        (m) => m.AnalyticsDashboardComponent,
      ),
    providers: [
      provideState('analytics', analyticsReducer),
      provideEffects([AnalyticsEffects]),
    ],
  },
  {
    path: 'bookings/confirmation/:ref',
    loadComponent: () =>
      import('./features/bookings/booking-confirmation.component').then(
        (m) => m.BookingConfirmationComponent,
      ),
  },
];

import {
  Component,
  OnInit,
  inject,
  ChangeDetectionStrategy,
} from '@angular/core';
import { Store } from '@ngrx/store';
import { FormsModule } from '@angular/forms';
import { CurrencyPipe, DatePipe } from '@angular/common';
import { FlightActions } from '../../store/flights/flights.actions';
import {
  selectAvailableFlights,
  selectSearchLoading,
  selectSearchError,
  selectSelectedFlight,
  selectFlightCount,
  selectFlightsSortedByPrice,
} from '../../store/flights/flights.selectors';
import { FlightSearchParams } from '../../models/flight.model';

@Component({
  selector: 'app-flight-search',
  standalone: true,
  imports: [FormsModule, CurrencyPipe, DatePipe],

  // OnPush: component only re-renders when a new value is emitted from the store
  changeDetection: ChangeDetectionStrategy.OnPush,

  template: `
    <div class="flight-search-page">
      <!-- Search Form -->
      <section class="search-form">
        <h1>Find Your Flight</h1>

        <div class="form-row">
          <input
            [(ngModel)]="searchParams.origin"
            placeholder="From (e.g. ABC)"
          />
          <input
            [(ngModel)]="searchParams.destination"
            placeholder="To (e.g. XYZ)"
          />
          <input type="date" [(ngModel)]="searchParams.departureDate" />
          <button (click)="onSearch()" [disabled]="loading()">
            @if (loading()) {
              Searching...
            } @else {
              Search Flights
            }
          </button>
        </div>
      </section>

      <!-- Loading State -->
      @if (loading()) {
        <div class="loading-container">
          <div
            class="spinner"
            role="status"
            aria-label="Searching for flights"
          ></div>
          <p>Finding the best flights for you...</p>
        </div>
      }

      <!-- Error State -->
      @if (error()) {
        <div class="error-banner" role="alert">
          <span class="error-icon">⚠</span>
          <p>{{ error() }}</p>
          <button (click)="onSearch()">Try Again</button>
        </div>
      }

      <!-- Results -->
      @if (!loading() && !error()) {
        @if (flightCount() > 0) {
          <section class="results">
            <h2>{{ flightCount() }} flights found</h2>

            <!-- Flight cards — @for replaces *ngFor -->
            @for (flight of sortedFlights(); track flight.id) {
              <div
                class="flight-card"
                [class.selected]="selectedFlight()?.id === flight.id"
                (click)="onSelectFlight(flight.id)"
              >
                <div class="flight-route">
                  <span class="origin">{{ flight.origin }}</span>
                  <span class="arrow">→</span>
                  <span class="destination">{{ flight.destination }}</span>
                </div>

                <div class="flight-times">
                  <span>{{ flight.departureTime | date: 'shortTime' }}</span>
                  <span class="duration">{{ flight.duration }}</span>
                  <span>{{ flight.arrivalTime | date: 'shortTime' }}</span>
                </div>

                <!-- Cabin class badges — @switch replaces ngSwitch -->
                <div class="badges">
                  @for (
                    cabinClass of flight.availableClasses;
                    track cabinClass
                  ) {
                    <span class="badge badge-{{ cabinClass }}">{{
                      cabinClass
                    }}</span>
                  }
                </div>

                <div class="price-row">
                  <span class="price"
                    >from {{ flight.price | currency: 'INR' }}</span
                  >
                  <span class="airline">{{ flight.airline }}</span>
                </div>

                <!-- Availability indicator -->
                @switch (flight.availabilityStatus) {
                  @case ('high') {
                    <span class="availability green">Seats available</span>
                  }
                  @case ('low') {
                    <span class="availability amber"
                      >Only {{ flight.seatsLeft }} left!</span
                    >
                  }
                  @case ('sold-out') {
                    <span class="availability red">Sold out</span>
                  }
                }
              </div>
            } @empty {
              <!-- @empty runs when the @for array is empty -->
              <div class="no-results">
                <p>
                  No flights match your search. Try different dates or airports.
                </p>
              </div>
            }
          </section>
        } @else if (hasSearched()) {
          <!-- Shown after a search returns zero results -->
          <div class="empty-state">
            <h3>No flights found</h3>
            <p>Try adjusting your search criteria.</p>
          </div>
        }
      }

      <!-- Defer: only load seat selector when a flight is selected -->
      <!-- @defer lazy-loads the component when condition is true -->
      @defer (when selectedFlight() !== null) {
        <app-seat-selector [flight]="selectedFlight()!" />
      } @placeholder {
        <!-- Shown while the deferred block hasn't loaded yet -->
        <p class="seat-hint">Select a flight above to choose your seats.</p>
      } @loading (minimum 200ms) {
        <div class="seat-skeleton">Loading seat map...</div>
      }
    </div>
  `,
})
export class FlightSearchComponent implements OnInit {
  private store = inject(Store);

  // Signals from store selectors (Angular 20: store.selectSignal())
  flights = this.store.selectSignal(selectAvailableFlights);
  loading = this.store.selectSignal(selectSearchLoading);
  error = this.store.selectSignal(selectSearchError);
  selectedFlight = this.store.selectSignal(selectSelectedFlight);
  flightCount = this.store.selectSignal(selectFlightCount);
  sortedFlights = this.store.selectSignal(selectFlightsSortedByPrice);

  hasSearched = this.store.selectSignal(
    // Inline derived: did we ever complete a search?
    selectSearchLoading, // placeholder — in real app, use a separate flag
  );

  searchParams: FlightSearchParams = {
    origin: '',
    destination: '',
    departureDate: '',
    passengers: 1,
  };

  ngOnInit(): void {
    // Could restore previous search params from store here
  }

  onSearch(): void {
    this.store.dispatch(
      FlightActions.loadFlights({ params: this.searchParams }),
    );
  }

  onSelectFlight(flightId: string): void {
    this.store.dispatch(FlightActions.selectFlight({ flightId }));
  }
}

import {
  Component,
  OnInit,
  inject,
  ChangeDetectionStrategy,
} from '@angular/core';
import { Store } from '@ngrx/store';
import { CurrencyPipe, PercentPipe, DecimalPipe } from '@angular/common';
import { AnalyticsActions } from '../../store/analytics/analytics.actions';
import {
  selectDashboardViewModel,
  selectMetricsByHealth,
  selectActiveFilterCount,
} from '../../store/analytics/analytics.selectors';
import { MetricCardComponent } from './components/metric-card.component';
import { RevenueChartComponent } from './components/revenue-chart.component';
import { FilterPanelComponent } from './components/filter-panel.component';

@Component({
  selector: 'app-analytics-dashboard',
  standalone: true,
  imports: [
    CurrencyPipe,
    PercentPipe,
    DecimalPipe,
    MetricCardComponent,
    RevenueChartComponent,
    FilterPanelComponent,
  ],
  changeDetection: ChangeDetectionStrategy.OnPush,

  template: `
    <div class="dashboard">
      <!-- Dashboard Header -->
      <header class="dashboard-header">
        <h1>Analytics Dashboard</h1>

        <div class="header-actions">
          <!-- Filter button with active count badge -->
          <button class="filter-btn" (click)="toggleFilters()">
            Filters
            @if (filterCount() > 0) {
              <span class="badge">{{ filterCount() }}</span>
            }
          </button>

          <!-- Export dropdown -->
          <div class="export-menu">
            @if (vm().exportLoading) {
              <button disabled>Exporting...</button>
            } @else {
              <button (click)="exportAs('csv')">Export CSV</button>
              <button (click)="exportAs('pdf')">Export PDF</button>
              <button (click)="exportAs('xlsx')">Export Excel</button>
            }
          </div>

          @if (vm().exportUrl) {
            <a [href]="vm().exportUrl" class="download-ready">
              ↓ Download Ready
            </a>
          }
        </div>
      </header>

      <!-- Filter Panel — deferred until user opens it -->
      @defer (when showFilters) {
        <app-filter-panel
          [filters]="vm().filters"
          (filterApplied)="onFilterApplied($event)"
          (filterRemoved)="onFilterRemoved($event)"
          (cleared)="onClearFilters()"
        />
      }

      <!-- Global Error Banner -->
      @if (vm().error) {
        <div class="error-alert" role="alert">
          <strong>Error:</strong> {{ vm().error }}
        </div>
      }

      <!-- Metric Cards Grid -->
      <section class="metrics-grid">
        @if (vm().metricsLoading) {
          <!-- Skeleton placeholders during load -->
          @for (i of [1, 2, 3, 4]; track i) {
            <div class="metric-skeleton"></div>
          }
        } @else {
          @for (metric of vm().metrics; track metric.id) {
            <app-metric-card
              [metric]="metric"
              [showComparison]="vm().comparison"
            />
          } @empty {
            <p class="no-data">No metrics available for this period.</p>
          }
        }
      </section>

      <!-- Charts Section -->
      <section class="charts">
        <!-- Revenue Chart -->
        <div class="chart-container">
          <h2>Revenue</h2>

          @if (vm().revenueChart) {
            <app-revenue-chart
              [dataset]="vm().revenueChart!"
              [showComparison]="vm().comparison"
            />
          } @else if (!vm().metricsLoading) {
            <div class="chart-empty">
              <p>Select a date range to view revenue data.</p>
            </div>
          }
        </div>

        <!-- User Growth Chart -->
        <div class="chart-container">
          <h2>User Growth</h2>

          @if (vm().userGrowthLoading) {
            <div class="chart-loading">Loading chart...</div>
          } @else if (vm().userGrowthChart) {
            <!-- Deferred: only render chart library once data is ready -->
            @defer (on immediate) {
              <!-- Heavy chart component loaded lazily -->
              <app-user-growth-chart [dataset]="vm().userGrowthChart!" />
            } @loading {
              <div class="chart-loading">Preparing chart...</div>
            }
          }
        </div>
      </section>

      <!-- Health Summary -->
      <section class="health-summary">
        <h2>Metric Health</h2>

        <div class="health-columns">
          <div class="health-column healthy">
            <h3>Trending Up ({{ healthMetrics().healthy.length }})</h3>
            @for (metric of healthMetrics().healthy; track metric.id) {
              <div class="metric-row">
                <span>{{ metric.label }}</span>
                <span class="change positive"
                  >+{{ metric.changePercent | number: '1.1-1' }}%</span
                >
              </div>
            }
          </div>

          <div class="health-column declining">
            <h3>Needs Attention ({{ healthMetrics().declining.length }})</h3>
            @for (metric of healthMetrics().declining; track metric.id) {
              <div class="metric-row">
                <span>{{ metric.label }}</span>
                <span class="change negative"
                  >{{ metric.changePercent | number: '1.1-1' }}%</span
                >
              </div>
            } @empty {
              <p class="all-good">All metrics are healthy 🎉</p>
            }
          </div>
        </div>
      </section>
    </div>
  `,
})
export class AnalyticsDashboardComponent implements OnInit {
  private store = inject(Store);

  // selectSignal returns a Signal — no async pipe needed in template
  vm = this.store.selectSignal(selectDashboardViewModel);
  healthMetrics = this.store.selectSignal(selectMetricsByHealth);
  filterCount = this.store.selectSignal(selectActiveFilterCount);

  showFilters = false;

  ngOnInit(): void {
    this.store.dispatch(
      AnalyticsActions.initializeDashboard({ userId: 'current' }),
    );
  }

  toggleFilters(): void {
    this.showFilters = !this.showFilters;
  }

  onFilterApplied(filter: any): void {
    this.store.dispatch(AnalyticsActions.applyFilter({ filter }));
  }

  onFilterRemoved(filterId: string): void {
    this.store.dispatch(AnalyticsActions.removeFilter({ filterId }));
  }

  onClearFilters(): void {
    this.store.dispatch(AnalyticsActions.clearAllFilters());
  }

  exportAs(format: 'csv' | 'pdf' | 'xlsx'): void {
    this.store.dispatch(
      AnalyticsActions.exportReport({
        format,
        filters: this.vm().filters,
      }),
    );
  }
}