waseel/components/rating-sheet.tsx

import { MaterialCommunityIcons } from "@expo/vector-icons";
import { useState } from "react";
import { Image, Text, TextInput, TouchableOpacity, View } from "react-native";
import ReactNativeModal from "react-native-modal";

import { CustomButton } from "@/components/custom-button";
import { driverPhotoUri } from "@/lib/driver-photo";
import { fetchAPI } from "@/lib/fetch";
import { useT } from "@/lib/i18n";
import { useTheme } from "@/lib/theme";

// The post-trip rating prompt, shared by both apps: a rider rates their driver
// and a driver rates their rider through the same endpoint, which infers who
// is rating from the caller's role on the ride. Both sides get the same sheet
// so the two directions can't drift apart.

type Props = {
  visible: boolean;
  rideId: number;
  /** Who is being rated — only used for the copy. */
  subjectName?: string | null;
  subjectAvatar?: string | null;
  /** Rider-facing copy differs from driver-facing copy. */
  audience: "rider" | "driver";
  onDone: () => void;
  /** Called on "not now"; omit to make the rating unskippable. */
  onSkip?: () => void;
};

export const RatingSheet = ({
  visible,
  rideId,
  subjectName,
  subjectAvatar,
  audience,
  onDone,
  onSkip,
}: Props) => {
  const t = useT();
  const { isDark } = useTheme();
  const [stars, setStars] = useState(0);
  const [comment, setComment] = useState("");
  const [submitting, setSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);

  const submit = async () => {
    if (stars < 1) return;
    setSubmitting(true);
    setError(null);
    try {
      await fetchAPI(`/(api)/ride/${rideId}/rate`, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({
          rating: stars,
          comment: comment.trim() || null,
        }),
      });
      onDone();
    } catch (err) {
      console.log("[RATE_RIDE]: ", err);
      setError(t("rating.error"));
    } finally {
      setSubmitting(false);
    }
  };

  return (
    <ReactNativeModal isVisible={visible} onBackdropPress={onSkip}>
      <View className="bg-white dark:bg-neutral-900 p-6 rounded-2xl">
        {subjectAvatar ? (
          <Image
            source={{ uri: driverPhotoUri(subjectAvatar) }}
            className="w-16 h-16 rounded-full self-center mb-3"
          />
        ) : null}

        <Text className="text-xl font-JakartaBold text-center text-black dark:text-white">
          {audience === "rider"
            ? t("rating.rateDriverTitle", { name: subjectName ?? "" })
            : t("rating.rateRiderTitle", { name: subjectName ?? "" })}
        </Text>
        <Text className="text-sm text-general-200 dark:text-neutral-400 text-center mt-1">
          {t("rating.subtitle")}
        </Text>

        <View className="flex-row justify-center gap-x-2 my-5">
          {[1, 2, 3, 4, 5].map((value) => (
            <TouchableOpacity
              key={value}
              onPress={() => setStars(value)}
              hitSlop={{ top: 8, bottom: 8, left: 4, right: 4 }}
              accessibilityLabel={t("rating.starLabel", { n: value })}
            >
              <MaterialCommunityIcons
                name={value <= stars ? "star" : "star-outline"}
                size={38}
                color={
                  value <= stars ? "#f5b301" : isDark ? "#525252" : "#d4d4d4"
                }
              />
            </TouchableOpacity>
          ))}
        </View>

        <TextInput
          value={comment}
          onChangeText={setComment}
          placeholder={t("rating.commentPlaceholder")}
          placeholderTextColor={isDark ? "#737373" : "#858585"}
          multiline
          maxLength={500}
          className="bg-neutral-100 dark:bg-neutral-800 text-black dark:text-white rounded-2xl px-4 py-3 font-Jakarta text-[15px] min-h-[72px]"
          textAlignVertical="top"
        />

        {error ? (
          <Text className="text-rose-500 text-sm text-center mt-3">
            {error}
          </Text>
        ) : null}

        <CustomButton
          title={submitting ? t("common.saving") : t("rating.submit")}
          onPress={submit}
          disabled={submitting || stars < 1}
          className={`mt-5 ${stars < 1 ? "opacity-50" : ""}`}
        />

        {onSkip ? (
          <TouchableOpacity onPress={onSkip} className="py-3 mt-1">
            <Text className="text-center font-JakartaMedium text-general-200 dark:text-neutral-400">
              {t("rating.notNow")}
            </Text>
          </TouchableOpacity>
        ) : null}
      </View>
    </ReactNativeModal>
  );
};