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

import { useT } from "@/lib/i18n";

// How the rider pays, asked at the moment it becomes a real question: after
// they have chosen a driver, not before they know one exists.
//
// The card path opens the gateway's hosted page and can take the better part
// of a minute, during which the driver they picked could be taken by someone
// else — so the sheet says what happens either way rather than dropping the
// rider into a browser with no warning.

type Props = {
  visible: boolean;
  driverName: string | null;
  fareCents: number;
  submitting: boolean;
  onPay: (method: "cash" | "card") => void;
  onCancel: () => void;
};

export const PaymentChoiceSheet = ({
  visible,
  driverName,
  fareCents,
  submitting,
  onPay,
  onCancel,
}: Props) => {
  const t = useT();
  const fare = (fareCents / 100).toFixed(2);

  return (
    <ReactNativeModal
      isVisible={visible}
      onBackdropPress={submitting ? undefined : onCancel}
    >
      <View className="bg-white dark:bg-neutral-900 rounded-2xl p-5">
        <Text className="text-lg font-JakartaBold text-black dark:text-white">
          {driverName
            ? t("bookRide.payment.titleNamed", { name: driverName })
            : t("bookRide.payment.title")}
        </Text>
        <Text className="text-sm text-general-200 dark:text-neutral-400 mt-1">
          {t("bookRide.payment.subtitle", { fare })}
        </Text>

        <TouchableOpacity
          onPress={() => onPay("cash")}
          disabled={submitting}
          className="flex-row items-center gap-x-3 rounded-2xl border border-neutral-200 dark:border-neutral-700 px-4 py-4 mt-4"
        >
          <MaterialCommunityIcons name="cash" size={22} color="#10b981" />
          <View className="flex-1">
            <Text className="font-JakartaBold text-black dark:text-white">
              {t("bookRide.payment.cash")}
            </Text>
            <Text className="text-xs text-general-200 dark:text-neutral-400">
              {t("bookRide.payment.cashHint")}
            </Text>
          </View>
          <MaterialCommunityIcons
            name="chevron-right"
            size={20}
            color="#9ca3af"
          />
        </TouchableOpacity>

        <TouchableOpacity
          onPress={() => onPay("card")}
          disabled={submitting}
          className="flex-row items-center gap-x-3 rounded-2xl border border-neutral-200 dark:border-neutral-700 px-4 py-4 mt-2"
        >
          <MaterialCommunityIcons
            name="credit-card-outline"
            size={22}
            color="#0286ff"
          />
          <View className="flex-1">
            <Text className="font-JakartaBold text-black dark:text-white">
              {t("bookRide.payment.card")}
            </Text>
            <Text className="text-xs text-general-200 dark:text-neutral-400">
              {t("bookRide.payment.cardHint")}
            </Text>
          </View>
          <MaterialCommunityIcons
            name="chevron-right"
            size={20}
            color="#9ca3af"
          />
        </TouchableOpacity>

        <TouchableOpacity
          onPress={onCancel}
          disabled={submitting}
          className="items-center py-3 mt-2"
        >
          <Text className="font-JakartaBold text-general-200 dark:text-neutral-400">
            {submitting ? t("bookRide.payment.working") : t("common.cancel")}
          </Text>
        </TouchableOpacity>
      </View>
    </ReactNativeModal>
  );
};