waseel/app/(root)/driver-home.tsx

import { MaterialCommunityIcons } from "@expo/vector-icons";
import { router } from "expo-router";
import { useCallback, useEffect, useState } from "react";
import {
  ActivityIndicator,
  Alert,
  Image,
  ScrollView,
  Text,
  TextInput,
  TouchableOpacity,
  View,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";

import { CustomButton } from "@/components/custom-button";
import { icons, images } from "@/constants";
import { SERVICES, type ServiceId } from "@/constants/services";
import { ApiError, fetchAPI } from "@/lib/fetch";
import { useSession } from "@/lib/session";
import { useDriverLocation } from "@/lib/use-driver-location";
import { formatTime } from "@/lib/utils";

// Poll cadence for the driver dashboard (offers / active ride / earnings).
const POLL_MS = 4000;

type Profile = {
  id: number;
  first_name: string;
  last_name: string;
  profile_image_url: string | null;
  car_image_url: string | null;
  car_seats: number;
  rating: number;
  service: ServiceId;
  online: boolean;
  car_model: string | null;
};

type Offer = {
  offer_id: number;
  offered_at: string;
  ride_id: number;
  origin_address: string;
  destination_address: string;
  ride_time: number;
  fare_price: number;
  payment_status: string;
  service: string;
};

type ActiveRide = {
  ride_id: number;
  status: string;
  service: string;
  payment_status: string;
  origin_address: string;
  destination_address: string;
  ride_time: number;
  fare_price: number;
  rider_name: string | null;
  rider_phone: string | null;
};

type Dashboard = {
  offers: Offer[];
  active: ActiveRide | null;
  recent: { ride_id: number; fare_price: number; service: string }[];
  earnings: number;
};

const DriverHome = () => {
  const { signOut, user } = useSession();
  const [loading, setLoading] = useState(true);
  const [profile, setProfile] = useState<Profile | null>(null);
  const [online, setOnline] = useState(false);
  const [dashboard, setDashboard] = useState<Dashboard | null>(null);
  const [busy, setBusy] = useState(false);

  const loadProfile = useCallback(async () => {
    try {
      const res = await fetchAPI("/(api)/driver/profile");
      const p = res.data as Profile;
      setProfile(p);
      setOnline(p.online);
    } catch (err) {
      // 403 with code ONBOARD means no profile yet — show the onboarding form.
      if (err instanceof ApiError && err.status === 403) {
        setProfile(null);
      } else {
        console.log("[DRIVER_PROFILE_LOAD]: ", err);
      }
    } finally {
      setLoading(false);
    }
  }, []);

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

  // Keep the location heartbeat running only while the driver is online and
  // has completed onboarding.
  useDriverLocation(online && profile !== null);

  // Poll the dashboard while online. useCallback keeps the fetcher stable so the
  // interval effect doesn't re-subscribe on every render.
  const fetchDashboard = useCallback(async () => {
    try {
      const res = await fetchAPI("/(api)/driver/rides");
      setDashboard(res.data as Dashboard);
    } catch (err) {
      console.log("[DRIVER_DASHBOARD_POLL]: ", err);
    }
  }, []);

  useEffect(() => {
    if (!online || !profile) return;
    void fetchDashboard();
    const timer = setInterval(() => void fetchDashboard(), POLL_MS);
    return () => clearInterval(timer);
  }, [online, profile, fetchDashboard]);

  const toggleOnline = async () => {
    if (!profile) return;
    const next = !online;
    setBusy(true);
    try {
      await fetchAPI("/(api)/driver/profile", {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ online: next }),
      });
      setOnline(next);
      setProfile({ ...profile, online: next });
      if (!next) setDashboard(null);
    } catch (err) {
      console.log("[DRIVER_TOGGLE]: ", err);
      Alert.alert("Error", "Could not change your status. Please try again.");
    } finally {
      setBusy(false);
    }
  };

  const respond = async (offer: Offer, action: "accept" | "decline") => {
    setBusy(true);
    try {
      await fetchAPI(`/(api)/ride/${offer.ride_id}/respond`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ action }),
      });
      await fetchDashboard();
    } catch (err) {
      console.log("[DRIVER_RESPOND]: ", err);
      Alert.alert(
        "Error",
        action === "accept"
          ? "Could not accept this ride. It may have been taken or expired."
          : "Could not decline this ride. Please try again.",
      );
    } finally {
      setBusy(false);
    }
  };

  const advance = async (rideId: number, status: "en_route" | "completed") => {
    setBusy(true);
    try {
      await fetchAPI(`/(api)/ride/${rideId}`, {
        method: "PATCH",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ status }),
      });
      await fetchDashboard();
    } catch (err) {
      console.log("[DRIVER_ADVANCE]: ", err);
      Alert.alert("Error", "Could not update the ride. Please try again.");
    } finally {
      setBusy(false);
    }
  };

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

  if (!profile) {
    return (
      <Onboarding onCreated={loadProfile} signOut={signOut} userName={user?.name} />
    );
  }

  const earnings = dashboard?.earnings ?? 0;
  const rideCount = dashboard?.recent.length ?? 0;

  return (
    <SafeAreaView className="flex-1 bg-general-500">
      <ScrollView
        className="flex-1 px-5"
        contentContainerStyle={{ paddingBottom: 40 }}
      >
        <View className="flex-row items-center justify-between my-5">
          <Text className="text-2xl font-JakartaExtraBold">
            Driver mode
          </Text>
          <TouchableOpacity
            onPress={signOut}
            className="w-10 h-10 rounded-full bg-white items-center justify-center"
          >
            <Image source={icons.out} className="w-4 h-4" alt="Sign out" />
          </TouchableOpacity>
        </View>

        {/* Online / offline toggle */}
        <TouchableOpacity
          onPress={toggleOnline}
          disabled={busy}
          className={`rounded-2xl p-5 items-center mb-4 ${
            online ? "bg-emerald-500" : "bg-neutral-700"
          }`}
        >
          <Text className="text-white text-lg font-JakartaBold">
            {online ? "● Online — receiving ride requests" : "○ Go online to drive"}
          </Text>
        </TouchableOpacity>

        {/* Earnings summary */}
        <View className="bg-white rounded-2xl p-4 mb-4 flex-row justify-between">
          <View>
            <Text className="text-general-200 text-xs font-JakartaMedium">
              Today&apos;s earnings
            </Text>
            <Text className="text-2xl font-JakartaExtraBold">
              ${(earnings / 100).toFixed(2)}
            </Text>
          </View>
          <View className="items-end">
            <Text className="text-general-200 text-xs font-JakartaMedium">
              Completed today
            </Text>
            <Text className="text-2xl font-JakartaExtraBold">{rideCount}</Text>
          </View>
        </View>

        {/* Active ride */}
        {dashboard?.active ? (
          <ActiveRideCard
            ride={dashboard.active}
            busy={busy}
            onAdvance={advance}
          />
        ) : null}

        {/* Incoming offers */}
        <Text className="text-xl font-JakartaBold mt-4 mb-3">
          Incoming requests {online ? "" : "(offline)"}
        </Text>

        {!online ? null : dashboard?.offers.length ? (
          dashboard.offers.map((offer) => (
            <OfferCard
              key={offer.offer_id}
              offer={offer}
              busy={busy}
              onAccept={() => respond(offer, "accept")}
              onDecline={() => respond(offer, "decline")}
            />
          ))
        ) : (
          <View className="bg-white rounded-2xl p-6 items-center">
            <Image source={images.noResult} className="w-24 h-24" resizeMode="contain" />
            <Text className="text-general-200 mt-2">
              {online ? "Waiting for ride requests…" : "Go online to start driving."}
            </Text>
          </View>
        )}
      </ScrollView>
    </SafeAreaView>
  );
};

// --- Onboarding form ------------------------------------------------------

const Onboarding = ({
  onCreated,
  signOut,
  userName,
}: {
  onCreated: () => Promise<void>;
  signOut: () => Promise<void>;
  userName?: string | null;
}) => {
  const [service, setService] = useState<ServiceId>("car");
  const [carModel, setCarModel] = useState("");
  const [carSeats, setCarSeats] = useState("4");
  const [submitting, setSubmitting] = useState(false);

  const submit = async () => {
    const seats = Number(carSeats);
    if (!Number.isInteger(seats) || seats < 1 || seats > 8) {
      Alert.alert("Invalid seats", "Car seats must be a whole number 1–8.");
      return;
    }
    setSubmitting(true);
    try {
      await fetchAPI("/(api)/driver/profile", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          service,
          car_model: carModel.trim() || null,
          car_seats: seats,
        }),
      });
      await onCreated();
    } catch (err) {
      console.log("[DRIVER_ONBOARD]: ", err);
      Alert.alert("Error", "Could not create your driver profile. Please try again.");
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <SafeAreaView className="flex-1 bg-white">
      <ScrollView className="flex-1 px-5" contentContainerStyle={{ paddingBottom: 40 }}>
        <View className="flex-row items-center justify-between my-5">
          <Text className="text-2xl font-JakartaExtraBold">
            Welcome, {userName?.split(" ")[0] || "driver"}
          </Text>
          <TouchableOpacity
            onPress={signOut}
            className="w-10 h-10 rounded-full bg-neutral-100 items-center justify-center"
          >
            <Image source={icons.out} className="w-4 h-4" alt="Sign out" />
          </TouchableOpacity>
        </View>

        <Text className="text-base text-general-200 font-Jakarta mb-4">
          Set up your driver profile to start receiving ride requests.
        </Text>

        <Text className="text-lg font-JakartaSemiBold mb-3">
          What will you drive?
        </Text>
        <View className="flex-row gap-2 mb-5">
          {SERVICES.map((item) => {
            const active = item.id === service;
            return (
              <TouchableOpacity
                key={item.id}
                onPress={() => setService(item.id)}
                className={`flex-1 items-center rounded-2xl border py-3 ${
                  active
                    ? "border-primary-500 bg-primary-500/10"
                    : "border-neutral-100 bg-neutral-100"
                }`}
              >
                <MaterialCommunityIcons
                  name={item.icon}
                  size={24}
                  color={active ? "#0286ff" : "#858585"}
                />
                <Text
                  className={`mt-1.5 text-xs font-JakartaBold ${
                    active ? "text-primary-500" : "text-black"
                  }`}
                >
                  {item.label}
                </Text>
              </TouchableOpacity>
            );
          })}
        </View>

        <Text className="text-lg font-JakartaSemiBold mb-3">Car model</Text>
        <TextInput
          value={carModel}
          onChangeText={setCarModel}
          placeholder="e.g. Toyota Camry"
          className="bg-neutral-100 rounded-full px-4 py-4 font-JakartaSemiBold text-[15px] mb-4"
          autoCapitalize="words"
        />

        <Text className="text-lg font-JakartaSemiBold mb-3">Car seats</Text>
        <TextInput
          value={carSeats}
          onChangeText={setCarSeats}
          placeholder="4"
          keyboardType="number-pad"
          className="bg-neutral-100 rounded-full px-4 py-4 font-JakartaSemiBold text-[15px] mb-8"
        />

        <CustomButton
          title={submitting ? "Saving…" : "Start driving"}
          onPress={submit}
          disabled={submitting}
        />
      </ScrollView>
    </SafeAreaView>
  );
};

// --- Offer card -----------------------------------------------------------

const OfferCard = ({
  offer,
  busy,
  onAccept,
  onDecline,
}: {
  offer: Offer;
  busy: boolean;
  onAccept: () => void;
  onDecline: () => void;
}) => (
  <View className="bg-white rounded-2xl p-4 mb-3">
    <View className="flex-row items-center justify-between mb-2">
      <Text className="text-sm font-JakartaBold text-primary-500">
        New request · {offer.service}
      </Text>
      <Text className="text-xs text-general-200">
        {offer.payment_status === "cash" ? "💵 Cash" : "💳 Card"}
      </Text>
    </View>

    <View className="flex-row items-center gap-x-2 mb-1">
      <Image source={icons.to} alt="From" className="w-4 h-4" />
      <Text className="font-JakartaMedium" numberOfLines={1}>
        {offer.origin_address}
      </Text>
    </View>
    <View className="flex-row items-center gap-x-2 mb-3">
      <Image source={icons.point} alt="To" className="w-4 h-4" />
      <Text className="font-JakartaMedium" numberOfLines={1}>
        {offer.destination_address}
      </Text>
    </View>

    <View className="flex-row justify-between mb-3">
      <Text className="text-general-200 text-xs">Trip time</Text>
      <Text className="font-JakartaMedium text-xs">
        {formatTime(offer.ride_time)}
      </Text>
    </View>
    <View className="flex-row justify-between mb-3">
      <Text className="text-general-200 text-xs">Fare</Text>
      <Text className="font-JakartaMedium text-xs text-emerald-600">
        ${(offer.fare_price / 100).toFixed(2)}
      </Text>
    </View>

    <View className="flex-row gap-3">
      <TouchableOpacity
        onPress={onDecline}
        disabled={busy}
        className="flex-1 rounded-full py-3 bg-neutral-200 items-center"
      >
        <Text className="font-JakartaBold text-neutral-700">Decline</Text>
      </TouchableOpacity>
      <TouchableOpacity
        onPress={onAccept}
        disabled={busy}
        className="flex-1 rounded-full py-3 bg-emerald-500 items-center"
      >
        <Text className="font-JakartaBold text-white">
          {busy ? "…" : "Accept"}
        </Text>
      </TouchableOpacity>
    </View>
  </View>
);

// --- Active ride card -----------------------------------------------------

const ActiveRideCard = ({
  ride,
  busy,
  onAdvance,
}: {
  ride: ActiveRide;
  busy: boolean;
  onAdvance: (rideId: number, status: "en_route" | "completed") => void;
}) => {
  const statusLabel =
    ride.status === "accepted"
      ? "Head to pickup"
      : ride.status === "en_route"
        ? "Trip in progress"
        : ride.status;

  return (
    <View className="bg-primary-500/10 border border-primary-500 rounded-2xl p-4 mb-4">
      <View className="flex-row items-center justify-between mb-2">
        <Text className="text-sm font-JakartaBold text-primary-500">
          ● {statusLabel}
        </Text>
        <Text className="text-xs text-general-200">{ride.service}</Text>
      </View>

      {ride.rider_name ? (
        <Text className="font-JakartaBold mb-2">{ride.rider_name}</Text>
      ) : null}

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

      <View className="flex-row justify-between mb-4">
        <Text className="text-general-200 text-xs">Fare</Text>
        <Text className="font-JakartaMedium text-xs text-emerald-600">
          ${(ride.fare_price / 100).toFixed(2)}
        </Text>
      </View>

      {ride.status === "accepted" ? (
        <CustomButton
          title={busy ? "…" : "Start trip"}
          bgVariant="success"
          onPress={() => onAdvance(ride.ride_id, "en_route")}
          className="mb-2"
        />
      ) : null}
      {ride.status === "en_route" ? (
        <CustomButton
          title={busy ? "…" : "Complete trip"}
          bgVariant="success"
          onPress={() => onAdvance(ride.ride_id, "completed")}
        />
      ) : null}
    </View>
  );
};

export default DriverHome;