waseel/app/(root)/book-ride.tsx

import { router, useLocalSearchParams } from "expo-router";
import { useCallback, useEffect, useState } from "react";
import {
  ActivityIndicator,
  Alert,
  Image,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

import { CustomButton } from "@/components/custom-button";
import { Map } from "@/components/map";
import { icons, images } from "@/constants";
import { ApiError, fetchAPI } from "@/lib/fetch";
import { formatTime } from "@/lib/utils";
import { useLocationStore } from "@/store";
import type { Ride } from "@/types/type";

const POLL_MS = 3000;

const statusLabel: Record<string, string> = {
  requested: "Finding your driver…",
  accepted: "Driver assigned — heading to you",
  en_route: "On your trip",
  completed: "You've arrived!",
  cancelled: "Ride cancelled",
};

// book-ride is now the live ride-status screen. The rider lands here after
// requesting a ride and polls its status until it completes (or they cancel).
const BookRide = () => {
  const { id } = useLocalSearchParams<{ id: string }>();
  const rideId = Number(id);
  const setUserLocation = useLocationStore((s) => s.setUserLocation);
  const setDestinationLocation = useLocationStore((s) => s.setDestinationLocation);

  const [ride, setRide] = useState<Ride | null>(null);
  const [loading, setLoading] = useState(true);
  const [cancelling, setCancelling] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const load = useCallback(async () => {
    try {
      const res = await fetchAPI(`/(api)/ride/${rideId}`);
      const r = res.data as Ride;
      setRide(r);

      // Keep the map's origin/destination in sync with the ride so the route
      // line renders even if the rider reached this screen via history.
      setUserLocation({
        latitude: r.origin_latitude,
        longitude: r.origin_longitude,
        address: r.origin_address,
      });
      setDestinationLocation({
        latitude: r.destination_latitude,
        longitude: r.destination_longitude,
        address: r.destination_address,
      });
    } catch (err) {
      console.log("[BOOK_RIDE_LOAD]: ", err);
      if (err instanceof ApiError && err.status === 404) {
        setError("Ride not found.");
      }
    } finally {
      setLoading(false);
    }
  }, [rideId, setUserLocation, setDestinationLocation]);

  useEffect(() => {
    void load();
  }, [load]);

  // Poll while the ride is still in a non-terminal state.
  useEffect(() => {
    const status = ride?.status;
    if (!status || status === "completed" || status === "cancelled") return;
    const timer = setInterval(() => void load(), POLL_MS);
    return () => clearInterval(timer);
  }, [ride?.status, load]);

  const cancel = async () => {
    setCancelling(true);
    try {
      await fetchAPI(`/(api)/ride/${rideId}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ status: "cancelled" }),
      });
      await load();
    } catch (err) {
      console.log("[BOOK_RIDE_CANCEL]: ", err);
      Alert.alert("Error", "Could not cancel this ride. Please try again.");
    } finally {
      setCancelling(false);
    }
  };

  if (loading) {
    return (
      <SafeAreaView className="flex-1 bg-white items-center justify-center">
        <ActivityIndicator size="large" color="#0286ff" />
      </SafeAreaView>
    );
  }

  if (error || !ride) {
    return (
      <SafeAreaView className="flex-1 bg-white items-center justify-center px-7">
        <Text className="text-base text-general-200 text-center">
          {error ?? "Could not load this ride."}
        </Text>
        <CustomButton
          title="Back Home"
          onPress={() => router.replace("/(root)/(tabs)/home")}
          className="mt-6"
        />
      </SafeAreaView>
    );
  }

  const driver = ride.driver;
  const terminal = ride.status === "completed" || ride.status === "cancelled";

  return (
    <SafeAreaView className="flex-1 bg-general-500">
      <View className="h-[45%] bg-blue-500">
        <Map />
      </View>

      <View className="flex-1 px-5 pt-4">
        <Text className="text-2xl font-JakartaExtraBold mb-2">
          {statusLabel[ride.status] ?? ride.status}
        </Text>

        {/* Searching state */}
        {ride.status === "requested" ? (
          <View className="items-center mt-6">
            <ActivityIndicator size="large" color="#0286ff" />
            <Text className="text-general-200 mt-3 text-center">
              We&apos;re matching you with the nearest {ride.service} driver.
            </Text>
          </View>
        ) : null}

        {/* Driver card — shown once a driver is assigned. */}
        {driver?.id ? (
          <View className="bg-white rounded-2xl p-4 mt-2">
            <View className="flex-row items-center">
              <Image
                source={{ uri: driver.profile_image_url ?? undefined }}
                className="w-16 h-16 rounded-full"
              />
              <View className="ml-4 flex-1">
                <Text className="text-lg font-JakartaSemiBold">
                  {driver.first_name} {driver.last_name}
                </Text>
                <View className="flex-row items-center mt-1">
                  <Image source={icons.star} className="w-4 h-4" />
                  <Text className="ml-1 text-general-200">
                    {driver.rating?.toFixed(1) ?? "—"}
                  </Text>
                  {driver.car_model ? (
                    <Text className="ml-3 text-general-200">
                      {driver.car_model}
                    </Text>
                  ) : null}
                </View>
              </View>
              <Text className="text-xs text-general-200 capitalize">
                {driver.service ?? ride.service}
              </Text>
            </View>

            <View className="flex-row items-center gap-x-2 mt-4">
              <Image source={icons.to} className="w-4 h-4" />
              <Text className="font-JakartaMedium text-sm" numberOfLines={1}>
                {ride.origin_address}
              </Text>
            </View>
            <View className="flex-row items-center gap-x-2 mt-2">
              <Image source={icons.point} className="w-4 h-4" />
              <Text className="font-JakartaMedium text-sm" numberOfLines={1}>
                {ride.destination_address}
              </Text>
            </View>

            <View className="flex-row justify-between mt-4 pt-3 border-t border-neutral-100">
              <Text className="text-general-200 text-xs">
                {ride.payment_status === "cash"
                  ? "💵 Cash to driver"
                  : "💳 Paid by card"}
              </Text>
              <Text className="font-JakartaBold text-emerald-600">
                ${(ride.fare_price / 100).toFixed(2)}
              </Text>
            </View>
          </View>
        ) : null}

        {/* Completed summary */}
        {ride.status === "completed" ? (
          <View className="bg-white rounded-2xl p-4 mt-4 items-center">
            <Image source={images.check} className="w-12 h-12" />
            <Text className="text-lg font-JakartaBold mt-3">
              Fare: ${(ride.fare_price / 100).toFixed(2)}
            </Text>
            <Text className="text-general-200 text-sm mt-1">
              Trip time {formatTime(ride.ride_time)}
            </Text>
          </View>
        ) : null}

        {/* Cancelled */}
        {ride.status === "cancelled" ? (
          <View className="bg-white rounded-2xl p-4 mt-4 items-center">
            <Text className="text-general-200">
              This ride was cancelled.
            </Text>
          </View>
        ) : null}

        <View className="mt-auto pt-6">
          {terminal ? (
            <CustomButton
              title="Back Home"
              onPress={() => router.replace("/(root)/(tabs)/home")}
            />
          ) : (
            <TouchableOpacity
              onPress={cancel}
              disabled={cancelling}
              className="rounded-full py-3 bg-white items-center border border-rose-300"
            >
              <Text className="font-JakartaBold text-rose-500">
                {cancelling ? "Cancelling…" : "Cancel Ride"}
              </Text>
            </TouchableOpacity>
          )}
        </View>
      </View>
    </SafeAreaView>
  );
};

export default BookRide;