import { useState } from "react";
import { Text, TouchableOpacity, View } from "react-native";
import ReactNativeModal from "react-native-modal";

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

// Cancelling asks *why* before it asks "are you sure". The reason codes are
// fixed (lib/ride-lifecycle CANCELLATION_REASONS) rather than free text, so
// the admin portal can count them — "driver never showed" and "I changed my
// mind" are the same cancellation in the ledger otherwise, and only one of
// them is a problem worth chasing.

const RIDER_REASONS = [
  "wait_too_long",
  "driver_no_show",
  "unreachable",
  "wrong_address",
  "changed_mind",
  "other",
] as const;

const DRIVER_REASONS = [
  "rider_no_show",
  "unreachable",
  "wrong_address",
  "vehicle_issue",
  "other",
] as const;

type Props = {
  visible: boolean;
  audience: "rider" | "driver";
  submitting?: boolean;
  onCancel: () => void;
  onConfirm: (reason: string) => void;
};

export const CancelSheet = ({
  visible,
  audience,
  submitting,
  onCancel,
  onConfirm,
}: Props) => {
  const t = useT();
  const [reason, setReason] = useState<string | null>(null);
  const reasons = audience === "rider" ? RIDER_REASONS : DRIVER_REASONS;

  return (
    <ReactNativeModal isVisible={visible} onBackdropPress={onCancel}>
      <View className="bg-white dark:bg-neutral-900 p-6 rounded-2xl">
        <Text className="text-xl font-JakartaBold text-black dark:text-white">
          {t("cancelSheet.title")}
        </Text>
        <Text className="text-sm text-general-200 dark:text-neutral-400 mt-1 mb-4">
          {audience === "rider"
            ? t("cancelSheet.subtitleRider")
            : t("cancelSheet.subtitleDriver")}
        </Text>

        {reasons.map((code) => {
          const selected = reason === code;
          return (
            <TouchableOpacity
              key={code}
              onPress={() => setReason(code)}
              className={`rounded-2xl border px-4 py-3 mb-2 ${
                selected
                  ? "border-primary-500 bg-primary-500/10"
                  : "border-neutral-200 dark:border-neutral-800"
              }`}
            >
              <Text
                className={`font-JakartaMedium ${
                  selected ? "text-primary-500" : "text-black dark:text-white"
                }`}
              >
                {t(`cancelSheet.reasons.${code}`)}
              </Text>
            </TouchableOpacity>
          );
        })}

        <TouchableOpacity
          onPress={() => reason && onConfirm(reason)}
          disabled={!reason || submitting}
          className={`rounded-full py-3 items-center mt-3 bg-rose-500 ${
            !reason || submitting ? "opacity-50" : ""
          }`}
        >
          <Text className="font-JakartaBold text-white">
            {submitting
              ? t("cancelSheet.cancelling")
              : t("cancelSheet.confirm")}
          </Text>
        </TouchableOpacity>

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