Trip History

import { computed, signal } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

export class TripsComponent implements OnInit {
  segment = signal<'active' | 'history'>('active');
  
  constructor(
    private router: Router,
    private route: ActivatedRoute
  ) {}
  
  ngOnInit() {
    // Sync segment with URL
    this.setSegmentFromUrl(this.router.url);
    
    // Track navigation
    this.router.events
      .pipe(filter(e => e instanceof NavigationEnd))
      .subscribe(e => this.setSegmentFromUrl(e.urlAfterRedirects));
  }
  
  onSegmentChange(ev: CustomEvent) {
    const value = ev.detail.value as 'active' | 'history';
    this.router.navigate([value], { relativeTo: this.route });
  }
  
  private setSegmentFromUrl(url: string) {
    const last = url.split('/').filter(Boolean).pop();
    this.segment.set(last === 'history' ? 'history' : 'active');
  }
}

import { TripActiveFacade } from '@/app/store/trips/trip-active.facade';

export class ActiveComponent implements OnInit {
  private facade = inject(TripActiveFacade);
  
  vm = computed(() => {
    const hasTrip = this.facade.hasTrip();
    const status = this.facade.status();
    
    const waitingSeconds = this.facade.waitingSeconds() ?? 0;
    const mm = Math.floor(waitingSeconds / 60).toString().padStart(2, '0');
    const ss = (waitingSeconds % 60).toString().padStart(2, '0');
    
    return {
      hasTrip,
      status,  // 'assigning' | 'accepted' | 'en_route' | 'arriving' | 'in_progress'
      tripId: this.facade.tripId(),
      
      // Driver info
      driver: this.facade.driver(),
      driverName: this.facade.driverName(),
      driverRating: this.facade.driverRating(),
      driverTrips: this.facade.driverTrips(),
      driverPhoneRaw: this.facade.driverPhoneRaw(),
      
      // Vehicle info
      vehicle: this.facade.vehicle(),
      plate: this.facade.plate(),
      vehicleTitle: this.facade.vehicleTitle(),  // "Toyota Corolla 2019"
      vehicleColor: this.facade.vehicleColor(),
      
      // Trip details
      etaMinutes: this.facade.etaMinutes(),
      priceAmount: this.facade.priceAmount(),
      priceCurrency: this.facade.priceCurrency(),
      
      // Waiting time
      waitingSeconds,
      waitingClock: `${mm}:${ss}`,
      waitingPenaltyApplied: this.facade.waitingPenaltyApplied(),
      waitingPenaltyText: this.facade.waitingPenaltyText()
    };
  });
}

interface TripSummary {
  id: string;
  status: 'completed' | 'cancelled';
  createdAt: string;           // ISO timestamp
  completedAt?: string | null;
  
  // Location
  pickupAddress?: string;
  destinationAddress?: string;
  distanceKm?: number;
  
  // Driver
  driverName?: string;
  driverRating?: number;
  
  // Pricing
  fareTotal?: number;
  currency: string;
  
  // Rating
  passengerRating?: number;    // Rating given by passenger
  passengerRatedAt?: string;
}

export class TripDetailsComponent implements OnInit {
  private route = inject(ActivatedRoute);
  private tripsApi = inject(TripsApiService);
  
  trip = signal<TripDetails | null>(null);
  loading = signal(false);
  
  async ngOnInit() {
    const tripId = this.route.snapshot.paramMap.get('id');
    if (!tripId) return;
    
    this.loading.set(true);
    try {
      const result = await firstValueFrom(
        this.tripsApi.fetchTripById(tripId)
      );
      this.trip.set(result);
    } finally {
      this.loading.set(false);
    }
  }
}

interface TripDetails extends TripSummary {
  // Full location data
  pickupPoint: { lat: number; lng: number };
  stops: Array<{
    point: { lat: number; lng: number };
    address?: string;
  }>;
  
  // Full driver data
  driver?: {
    id: string;
    name: string;
    profilePictureUrl?: string;
    ratingAvg?: number;
    ratingCount?: number;
    phone?: string;
  };
  
  // Full vehicle data
  vehicle?: {
    id: string;
    plateNumber?: string;
    make?: string;
    model?: string;
    year?: number;
    color?: string;
  };
  
  // Detailed pricing
  fareBreakdown?: {
    base: number;
    distance: number;
    time: number;
    waitingPenalty?: number;
    surge?: number;
  };
  
  // Route geometry (for map)
  routeGeometry?: FeatureCollection<LineString>;
  
  // Timeline
  timeline?: Array<{
    status: TripStatus;
    at: string;
  }>;
}

export class TripsApiService {
  // Create a new trip
  createTrip(body: CreateTripRequest): Observable<TripResponseDto | null>
  
  // Estimate fare for a planned trip
  estimateTrip(body: EstimateTripRequest): Observable<FareQuote | null>
  
  // Fetch trip history for a passenger
  fetchTripHistory(passengerId: string): Observable<TripSummary[]>
  
  // Fetch full details for a specific trip
  fetchTripById(tripId: string): Observable<TripDetails | null>
  
  // Rate a completed trip
  rateTrip(tripId: string, rating: number, comment?: string): Observable<void>
}