import { ThemeType, useTheme } from "../../theme";
import React, {
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from "react";
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  StyleProp,
  ViewStyle,
  TextStyle,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import CustomInput from "../Input/Input";
import DateRangePicker from "../DateRangePicker/DateRangePicker";
import SuggestionList from "../Suggestions/SuggestionList";
import { TextInput } from "react-native-gesture-handler";
import { CarSuggestions, FormInputType } from "./types";
import RNPickerSelect from "react-native-picker-select";

export const mockCarSuggestions: CarSuggestions[] = [
  { id: 1, city: "Beirut", country: "Lebanon", value: "BEIRUT, LEBANON" },
  { id: 2, city: "Dubai", country: "UAE", value: "DUBAI, UAE" },
  { id: 3, city: "London", country: "UK", value: "LONDON, UK" },
  { id: 4, city: "Paris", country: "France", value: "PARIS, FRANCE" },
  { id: 5, city: "New York", country: "USA", value: "NEW YORK, USA" },
];

type LocationData = string;

export interface CarRentalFormProps {
  initialFromLocation?: LocationData;
  initialToLocation?: LocationData;
  initialPickupDate?: string;
  initialDropoffDate?: string;

  onTextChange?: (text: string) => void;
  onInputFocus?: (input: FormInputType) => void;
  onSwapPress?: (
    currentFrom: LocationData | undefined,
    currentTo: LocationData | undefined
  ) => void;
  onSearchPress?: (details: {
    from: LocationData | undefined;
    to: LocationData | undefined;
    pickup: string | undefined;
    dropoff: string | undefined;
    driverAge: number | undefined;
  }) => void;

  onSelectionChange?: (details: {
    from: LocationData | undefined;
    to: LocationData | undefined;
    pickup: string | undefined;
    dropoff: string | undefined;
    driverAge: number | undefined;
  }) => void;

  fromLabel?: string;
  fromPlaceholder?: string;

  toLabel?: string;
  toPlaceholder?: string;

  pickupLabel?: string;
  dropoffLabel?: string;
  swapIconName?: keyof typeof Ionicons.glyphMap;
  searchIconName?: keyof typeof Ionicons.glyphMap;
  calendarThemeOverrides?: object; // Passed to DateRangePicker

  ageLabel?: string;

  isOneWay?: boolean;

  suggestionData?: CarSuggestions[];

  // --- Style Props ---
  containerStyle?: StyleProp<ViewStyle>;
  inputGroupContainerStyle?: StyleProp<ViewStyle>;
  inputWrapperStyle?: StyleProp<ViewStyle>;
  inputGroupStyle?: StyleProp<ViewStyle>;
  labelStyle?: StyleProp<TextStyle>;
  swapButtonContainerStyle?: StyleProp<ViewStyle>;
  swapButtonStyle?: StyleProp<ViewStyle>;
  swapIconStyle?: StyleProp<TextStyle>;
  pickupRowStyle?: StyleProp<ViewStyle>;
  searchButtonStyle?: StyleProp<ViewStyle>;
  searchIconStyle?: StyleProp<TextStyle>;

  // DateRangePicker specific styles (passed down)
  dateRangePickerOuterContainerStyle?: StyleProp<ViewStyle>;
  dateRangePickerLabelStyle?: StyleProp<TextStyle>;
  dateRangePickerInputGroupStyle?: StyleProp<ViewStyle>;
  dateRangePickerCalendarContainerStyle?: StyleProp<ViewStyle>;
  dateRangePickerInputContainerStyle?: StyleProp<ViewStyle>;

  // SuggestionList specific styles (passed down / used in renderItem)
  suggestionListContainerStyle?: StyleProp<ViewStyle>;
  suggestionItemStyle?: StyleProp<ViewStyle>;
  suggestionItemTextStyle?: StyleProp<TextStyle>;

  // Age Picker specific styles
  agePickerWrapperStyle?: StyleProp<ViewStyle>;
  agePickerLabelStyle?: StyleProp<TextStyle>;
  agePickerPlaceholder?: string;
  agePickerPlaceholderColor?: string;
  pickerContainerStyle?: StyleProp<ViewStyle>;
  pickerStyle?: StyleProp<TextStyle>;
}

// --- Component ---
const CarRentalForm: React.FC<CarRentalFormProps> = ({
  initialFromLocation,
  initialToLocation,
  initialPickupDate,
  initialDropoffDate,
  onSwapPress,
  onSearchPress,
  fromLabel = "PICK-UP",
  toLabel = "DROP-OFF",
  fromPlaceholder = "From Where?",
  toPlaceholder = "To Where?",
  pickupLabel = "PICK-UP DATE",
  dropoffLabel = "DROP-OFF DATE",
  swapIconName = "swap-horizontal",
  searchIconName = "search",
  calendarThemeOverrides = {},
  containerStyle,
  inputGroupContainerStyle, // Added
  inputWrapperStyle, // Added
  inputGroupStyle,
  labelStyle,
  swapButtonContainerStyle,
  swapButtonStyle,
  swapIconStyle,
  pickupRowStyle,
  searchButtonStyle,
  searchIconStyle,
  isOneWay,
  suggestionData,
  onInputFocus,
  onTextChange,
  dateRangePickerOuterContainerStyle,
  dateRangePickerLabelStyle,
  dateRangePickerInputGroupStyle,
  dateRangePickerCalendarContainerStyle,
  suggestionListContainerStyle,
  suggestionItemStyle,
  suggestionItemTextStyle,
  agePickerWrapperStyle,
  agePickerLabelStyle,
  pickerContainerStyle,
  pickerStyle,
  onSelectionChange,
  ageLabel = "Driver's Age",
  agePickerPlaceholder = "Select Age...",
  agePickerPlaceholderColor,
  dateRangePickerInputContainerStyle,
}) => {
  const { theme, isRTL } = useTheme();
  const styles = useMemo(() => themedStyles(theme, isRTL), [theme, isRTL]);
  const fromInputRef = useRef<TextInput>(null);
  const toInputRef = useRef<TextInput>(null);

  // --- State ---
  const [fromLocation, setFromLocation] = useState<LocationData | undefined>(
    initialFromLocation
  );
  const [toLocation, setToLocation] = useState<LocationData | undefined>(
    initialToLocation
  );
  const [pickupDate, setPickupDate] = useState<string | undefined>(
    initialPickupDate
  );
  const [dropoffDate, setDropoffDate] = useState<string | undefined>(
    initialDropoffDate
  );
  const [age, setAge] = useState<number>();
  const [focusedInput, setFocusedInput] = useState<FormInputType>();

  useEffect(() => {
    onSelectionChange?.({
      from: fromLocation,
      to: toLocation,
      pickup: pickupDate,
      dropoff: dropoffDate,
      driverAge: age,
    });
  }, [
    fromLocation,
    toLocation,
    pickupDate,
    dropoffDate,
    age,
    onSelectionChange,
  ]);

  // --- Handlers ---
  const handleSwap = useCallback(() => {
    const currentFrom = fromLocation;
    const currentTo = toLocation;
    setFromLocation(currentTo);
    setToLocation(currentFrom);
    onSwapPress?.(currentFrom, currentTo);
  }, [fromLocation, toLocation, onSwapPress]);

  const handleSearch = useCallback(() => {
    onSearchPress?.({
      from: fromLocation,
      to: toLocation,
      pickup: pickupDate,
      dropoff: dropoffDate,
      driverAge: age,
    });
  }, [fromLocation, toLocation, pickupDate, dropoffDate, age, onSearchPress]);

  // --- Shared Suggestion Render Item ---
  const suggestionRenderItem = (item: CarSuggestions) => (
    <TouchableOpacity
      key={item.id}
      onPress={() => {
        if (focusedInput === FormInputType.CAR_PICKUP) {
          setFromLocation(item.value);
          fromInputRef.current?.blur();
        } else if (focusedInput === FormInputType.CAR_DROP_OFF) {
          setToLocation(item.value);
          toInputRef.current?.blur();
        }
      }}
      style={[styles.suggestionItem, suggestionItemStyle]}
    >
      <Text style={[styles.suggestionItemText, suggestionItemTextStyle]}>
        {item.value}
      </Text>
    </TouchableOpacity>
  );

  return (
    <View style={[styles.container, containerStyle]}>
      {/* Apply inputGroupContainerStyle */}
      <View style={[styles.inputGroupContainer, inputGroupContainerStyle]}>
        {/* Apply inputWrapperStyle */}
        <View style={[styles.inputWrapper, inputWrapperStyle]}>
          <CustomInput
            ref={fromInputRef}
            onChangeText={(t) => {
              onTextChange?.(t);
              setFromLocation(t);
            }}
            label={fromLabel}
            value={fromLocation}
            labelStyle={[styles.label, labelStyle]}
            placeholder={fromPlaceholder}
            onFocus={() => {
              onInputFocus?.(FormInputType.CAR_PICKUP);
              setFocusedInput(FormInputType.CAR_PICKUP);
            }}
            onBlur={() => {
              // Delay blur slightly to allow suggestion press
              setTimeout(() => {
                if (focusedInput === FormInputType.CAR_PICKUP) {
                  setFocusedInput(undefined);
                }
              }, 150);
            }}
            containerStyle={inputGroupStyle}
          />
          {suggestionData && (
            <SuggestionList
              data={suggestionData}
              visible={focusedInput === FormInputType.CAR_PICKUP}
              renderItemContent={suggestionRenderItem}
              containerStyle={suggestionListContainerStyle}
            />
          )}
        </View>
        {onSwapPress && (
          <View style={[styles.swapButtonContainer, swapButtonContainerStyle]}>
            <TouchableOpacity
              style={[styles.swapButton, swapButtonStyle]}
              onPress={handleSwap}
              activeOpacity={0.7}
            >
              <Ionicons
                name={swapIconName}
                size={20}
                color={theme.onSurface}
                style={swapIconStyle}
              />
            </TouchableOpacity>
          </View>
        )}

        {/* Apply inputWrapperStyle */}
        <View style={[styles.inputWrapper, inputWrapperStyle]}>
          <CustomInput
            ref={toInputRef}
            onChangeText={(t) => {
              setToLocation(t);
              onTextChange?.(t);
            }}
            label={toLabel}
            value={toLocation}
            labelStyle={[styles.label, labelStyle]}
            placeholder={toPlaceholder}
            onFocus={() => {
              onInputFocus?.(FormInputType.CAR_DROP_OFF);
              setFocusedInput(FormInputType.CAR_DROP_OFF);
            }}
            onBlur={() => {
              setTimeout(() => {
                if (focusedInput === FormInputType.CAR_DROP_OFF) {
                  setFocusedInput(undefined);
                }
              }, 150);
            }}
            containerStyle={inputGroupStyle}
          />
          {suggestionData && (
            <SuggestionList
              data={suggestionData}
              visible={focusedInput === FormInputType.CAR_DROP_OFF}
              renderItemContent={suggestionRenderItem}
              containerStyle={suggestionListContainerStyle} // Use new prop
            />
          )}
        </View>
      </View>

      <DateRangePicker
        departureLabel={pickupLabel}
        returnLabel={dropoffLabel}
        outerContainerStyle={[
          styles.dateRangePickerOuterContainer,
          dateRangePickerOuterContainerStyle,
        ]}
        labelStyle={[labelStyle, dateRangePickerLabelStyle]}
        inputGroupStyle={dateRangePickerInputGroupStyle}
        inputContainerStyle={dateRangePickerInputContainerStyle}
        calendarContainerStyle={dateRangePickerCalendarContainerStyle}
        calendarThemeOverrides={calendarThemeOverrides}
        onDatesChange={(d) => {
          setDropoffDate(d.return);
          setPickupDate(d.departure);
        }}
        isOneWay={isOneWay}
      />

      <View style={[styles.pickupRow, pickupRowStyle]}>
        <View style={[styles.agePickerWrapper, agePickerWrapperStyle]}>
          <Text style={[styles.label, labelStyle, agePickerLabelStyle]}>
            {ageLabel}
          </Text>
          <View style={[styles.pickerContainer, pickerContainerStyle]}>
            <RNPickerSelect
              items={Array.from({ length: 80 - 21 + 1 }, (_, i) => i + 21).map(
                (n) => ({
                  label: n.toString(),
                  value: n,
                })
              )}
              onValueChange={setAge}
              placeholder={{
                label: agePickerPlaceholder,
                color: agePickerPlaceholderColor,
              }}
            />
          </View>
        </View>
        {onSearchPress && (
          <TouchableOpacity
            style={[styles.searchButton, searchButtonStyle]}
            onPress={handleSearch}
            activeOpacity={0.8}
          >
            <Ionicons
              name={searchIconName}
              size={24}
              color={theme.onPrimary}
              style={searchIconStyle}
            />
          </TouchableOpacity>
        )}
      </View>
    </View>
  );
};

// --- Styles ---
const themedStyles = (theme: ThemeType, isRTL: boolean) =>
  StyleSheet.create({
    container: {
      padding: 16,
      backgroundColor: theme.surface,
      borderBottomRightRadius: 8,
      borderBottomLeftRadius: 8,
    },
    inputGroupContainer: {
      position: "relative",
    },
    inputWrapper: {
      marginBottom: 15,
      position: "relative",
    },
    label: {
      color: theme.labelText,
      fontSize: 12,
      fontWeight: "600",
      textTransform: "uppercase",
      textAlign: isRTL ? "right" : "left",
      marginBottom: 6,
    },
    swapButtonContainer: {
      // // Centering the button between the input wrappers
      // position: "absolute",
      // left: 0,
      // right: 0,
      // top: "50%", // Position roughly in the middle vertically
      // transform: [{ translateY: -18 }], // Adjust based on button height / 2
      alignItems: "center",
      // zIndex: 1, // Ensure swap button is above inputs if they overlap slightly
    },
    swapButton: {
      width: 36,
      height: 36,
      borderRadius: 18,
      backgroundColor: theme.surface,
      borderColor: theme.border,
      borderWidth: 1,
      justifyContent: "center",
      alignItems: "center",
    },
    dateRangePickerOuterContainer: {
      marginTop: 10, // Default margin, can be overridden
    },
    pickupRow: {
      flexDirection: isRTL ? "row-reverse" : "row",
      alignItems: "flex-end",
      marginTop: 20,
      gap: 10,
    },
    agePickerWrapper: {
      flex: 1,
    },
    pickerContainer: {
      borderWidth: 1,
      borderColor: theme.border,
      borderRadius: 8,
      backgroundColor: theme.surface,
      justifyContent: "center",
      height: 50,
    },
    picker: {
      width: "100%",
      color: theme.onSurface,
    },
    searchButton: {
      backgroundColor: theme.primary,
      width: 50,
      height: 50,
      borderRadius: 8,
      justifyContent: "center",
      alignItems: "center",
    },
    suggestionItem: {
      padding: 12,
      borderBottomWidth: StyleSheet.hairlineWidth,
      borderBottomColor: theme.border,
      backgroundColor: theme.surface,
    },
    suggestionItemText: {
      fontSize: 14,
      color: theme.onSurface,
    },
  });

export default CarRentalForm;