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

import { CustomButton } from "@/components/custom-button";
import { useT } from "@/lib/i18n";
import { useTheme } from "@/lib/theme";

// The driver's half of the pickup handshake: they ask the rider for the code
// on the rider's screen and type it here to start the trip. The code is never
// sent to the driver's device, so a wrong entry is a real mismatch — either
// the wrong passenger got in, or the driver is at the wrong car.

type Props = {
  visible: boolean;
  submitting?: boolean;
  /** Set when the server rejected the last attempt. */
  error?: string | null;
  onCancel: () => void;
  onSubmit: (code: string) => void;
};

export const PickupCodeSheet = ({
  visible,
  submitting,
  error,
  onCancel,
  onSubmit,
}: Props) => {
  const t = useT();
  const { isDark } = useTheme();
  const [code, setCode] = useState("");

  return (
    <ReactNativeModal
      isVisible={visible}
      onBackdropPress={onCancel}
      avoidKeyboard
    >
      <View className="bg-white dark:bg-neutral-900 p-6 rounded-2xl">
        <Text className="text-xl font-JakartaBold text-center text-black dark:text-white">
          {t("pickupCode.title")}
        </Text>
        <Text className="text-sm text-general-200 dark:text-neutral-400 text-center mt-1">
          {t("pickupCode.subtitle")}
        </Text>

        <TextInput
          value={code}
          onChangeText={(v) => setCode(v.replace(/\D/g, "").slice(0, 4))}
          keyboardType="number-pad"
          maxLength={4}
          autoFocus
          placeholder="0000"
          placeholderTextColor={isDark ? "#525252" : "#d4d4d4"}
          className="bg-neutral-100 dark:bg-neutral-800 text-black dark:text-white rounded-2xl py-4 my-5 text-center text-3xl font-JakartaExtraBold tracking-[10px]"
        />

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

        <CustomButton
          title={submitting ? "…" : t("pickupCode.startTrip")}
          bgVariant="success"
          onPress={() => onSubmit(code)}
          disabled={code.length < 4 || submitting}
          className={code.length < 4 ? "opacity-50" : ""}
        />

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