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

// --- Helper Types ---
type LocationData = string;

// --- Component Props ---
export interface HotelFormProps {
  // Initial values
  initialDestination?: LocationData;
  initialCheckinDate?: string; // Expect YYYY-MM-DD string
  initialCheckoutDate?: string; // Expect YYYY-MM-DD string
  initialNationality?: string; // Added initial nationality

  // Callbacks
  onTextChange?: (text: string) => void;
  onInputFocus?: (input: FormInputType) => void;
  onSearchPress?: (details: {
    destination: LocationData | undefined; // Renamed from destintation
    checkin: string | undefined; // Send YYYY-MM-DD
    checkout: string | undefined; // Send YYYY-MM-DD
    nationality: string | undefined;
  }) => void;

  onSelectionChange?: (details: {
    destination: LocationData | undefined; // Renamed from destintation
    checkin: string | undefined; // Send YYYY-MM-DD
    checkout: string | undefined; // Send YYYY-MM-DD
    nationality: string | undefined;
  }) => void;

  // Labels & Placeholders
  destinationLabel?: string;
  destinationPlaceholder?: string;
  checkinLabel?: string;
  checkoutLabel?: string;
  nationalityLabel?: string; // Added nationality label

  // Icons
  searchIconName?: keyof typeof Ionicons.glyphMap;

  // Data & Config
  suggestionData?: HotelSuggestions[];
  nationalityData?: { label: string; value: string }[];
  calendarThemeOverrides?: object;

  // --- Style Props ---
  containerStyle?: StyleProp<ViewStyle>;
  inputWrapperStyle?: StyleProp<ViewStyle>;
  customInputContainerStyle?: StyleProp<ViewStyle>;
  labelStyle?: StyleProp<TextStyle>;
  checkoutRowStyle?: 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
  suggestionListContainerStyle?: StyleProp<ViewStyle>;
  suggestionItemStyle?: StyleProp<ViewStyle>;
  suggestionItemTextStyle?: StyleProp<TextStyle>;

  // Nationality Picker specific styles
  nationalityPickerWrapperStyle?: StyleProp<ViewStyle>;
  nationalityPickerLabelStyle?: StyleProp<TextStyle>;
  nationalityPickerPlaceholderColor?: string;
  nationalityPickerPlaceholder?: string;
  pickerContainerStyle?: StyleProp<ViewStyle>;
  pickerStyle?: StyleProp<TextStyle>;
}

const defaultNationalities = [
  { label: "United States", value: "US" },
  { label: "Canada", value: "CA" },
  { label: "United Kingdom", value: "GB" },
  { label: "India", value: "IN" },
  { label: "Australia", value: "AU" },
  { label: "Germany", value: "DE" },
  { label: "France", value: "FR" },
];

// --- Component ---
const HotelForm: React.FC<HotelFormProps> = ({
  // Initial values
  initialDestination,
  initialCheckinDate,
  initialCheckoutDate,
  initialNationality,
  // Callbacks
  onSearchPress,
  onInputFocus,
  onTextChange,
  // Labels & Placeholders
  destinationLabel = "DESTINATION",
  destinationPlaceholder = "Enter city or hotel name",
  checkinLabel = "CHECK-IN",
  checkoutLabel = "CHECK-OUT",
  nationalityLabel = "NATIONALITY", // Default label
  // Icons
  searchIconName = "search",
  // Data & Config
  suggestionData,
  nationalityData = defaultNationalities, // Use default or provided data
  calendarThemeOverrides = {},
  // Style Props
  containerStyle,
  inputWrapperStyle,
  customInputContainerStyle,
  labelStyle,
  checkoutRowStyle,
  searchButtonStyle,
  searchIconStyle,
  dateRangePickerOuterContainerStyle,
  dateRangePickerLabelStyle,
  dateRangePickerInputGroupStyle,
  dateRangePickerCalendarContainerStyle,
  suggestionListContainerStyle,
  suggestionItemStyle,
  suggestionItemTextStyle,
  nationalityPickerWrapperStyle,
  nationalityPickerLabelStyle,
  pickerContainerStyle,
  pickerStyle,
  onSelectionChange,
  dateRangePickerInputContainerStyle,
  nationalityPickerPlaceholderColor,
  nationalityPickerPlaceholder = "Select Nationality...",
}) => {
  const { theme, isRTL } = useTheme();
  const styles = useMemo(() => themedStyles(theme, isRTL), [theme, isRTL]);
  const destinationInputRef = useRef<TextInput>(null);

  // --- State ---
  const [destination, setDestination] = useState<LocationData | undefined>(
    initialDestination
  );
  // Note: DateRangePicker uses departure/return internally. Map them to checkin/checkout.
  const [checkinDate, setCheckinDate] = useState<string | undefined>(
    initialCheckinDate
  );
  const [checkoutDate, setCheckoutDate] = useState<string | undefined>(
    initialCheckoutDate
  );
  const [selectedNationality, setSelectedNationality] = useState<
    string | undefined
  >(initialNationality);
  const [focusedInput, setFocusedInput] = useState<FormInputType>();

  useEffect(() => {
    onSelectionChange?.({
      destination: destination,
      checkin: checkinDate,
      checkout: checkoutDate,
      nationality: selectedNationality,
    });
  }, [
    destination,
    checkinDate,
    checkoutDate,
    selectedNationality,
    onSelectionChange,
  ]);

  // --- Handlers ---
  const handleSearch = useCallback(() => {
    onSearchPress?.({
      destination: destination, // Corrected name
      checkin: checkinDate,
      checkout: checkoutDate,
      nationality: selectedNationality,
    });
  }, [
    destination,
    checkinDate,
    checkoutDate,
    selectedNationality,
    onSearchPress,
  ]);

  // --- Shared Suggestion Render Item ---
  const suggestionRenderItem = (item: HotelSuggestions) => (
    <TouchableOpacity
      key={item.id}
      onPress={() => {
        setDestination(item.value);
        destinationInputRef.current?.blur();
        setFocusedInput(undefined); // Hide suggestions
      }}
      style={[styles.suggestionItem, suggestionItemStyle]} // Apply style prop
    >
      <Text style={[styles.suggestionItemText, suggestionItemTextStyle]}>
        {item.value}
      </Text>
    </TouchableOpacity>
  );

  return (
    <View style={[styles.container, containerStyle]}>
      <View style={[styles.inputWrapper, inputWrapperStyle]}>
        <CustomInput
          ref={destinationInputRef}
          onChangeText={(t) => {
            onTextChange?.(t);
            setDestination(t); // Correctly update state
          }}
          value={destination}
          label={destinationLabel}
          labelStyle={[styles.label, labelStyle]}
          placeholder={destinationPlaceholder}
          onFocus={() => {
            setFocusedInput(FormInputType.HOTEL_DEST);
            onInputFocus?.(FormInputType.HOTEL_DEST);
          }}
          onBlur={() => {
            setTimeout(() => {
              if (focusedInput === FormInputType.HOTEL_DEST) {
                setFocusedInput(undefined);
              }
            }, 150);
          }}
          inputContainerStyle={customInputContainerStyle}
        />
        {suggestionData && (
          <SuggestionList
            data={suggestionData}
            visible={focusedInput === FormInputType.HOTEL_DEST}
            renderItemContent={suggestionRenderItem}
            containerStyle={suggestionListContainerStyle}
          />
        )}
      </View>

      <DateRangePicker
        departureLabel={checkinLabel}
        returnLabel={checkoutLabel}
        outerContainerStyle={[
          styles.dateRangePickerOuterContainer,
          dateRangePickerOuterContainerStyle,
        ]}
        labelStyle={[labelStyle, dateRangePickerLabelStyle]}
        inputContainerStyle={dateRangePickerInputContainerStyle}
        inputGroupStyle={dateRangePickerInputGroupStyle}
        calendarContainerStyle={dateRangePickerCalendarContainerStyle}
        calendarThemeOverrides={calendarThemeOverrides}
        onDatesChange={(d) => {
          setCheckinDate(d.departure);
          setCheckoutDate(d.return);
        }}
        // initialDepartureDate={initialCheckinDate}
        // initialReturnDate={initialCheckoutDate}
        isOneWay={false}
      />

      <View style={[styles.checkoutRow, checkoutRowStyle]}>
        <View
          style={[
            styles.nationalityPickerWrapper,
            nationalityPickerWrapperStyle,
          ]}
        >
          <Text style={[styles.label, labelStyle, nationalityPickerLabelStyle]}>
            {nationalityLabel}
          </Text>
          <View style={[styles.pickerContainer, pickerContainerStyle]}>
            <RNPickerSelect
              items={nationalityData}
              onValueChange={setSelectedNationality}
              placeholder={{
                label: nationalityPickerPlaceholder,
                color: nationalityPickerPlaceholderColor,
              }}
            />
          </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,
    },
    inputWrapper: {
      marginBottom: 15,
      position: "relative",
    },
    label: {
      color: theme.labelText,
      fontSize: 12,
      fontWeight: "600",
      textTransform: "uppercase",
      textAlign: isRTL ? "right" : "left",
      marginBottom: 6,
    },
    dateRangePickerOuterContainer: {
      marginTop: 10,
    },
    checkoutRow: {
      flexDirection: isRTL ? "row-reverse" : "row",
      alignItems: "flex-end",
      marginTop: 20,
      gap: 10,
    },
    nationalityPickerWrapper: {
      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: {
      paddingVertical: 10,
      paddingHorizontal: 12,
      borderBottomWidth: StyleSheet.hairlineWidth,
      borderBottomColor: theme.border,
      backgroundColor: theme.surface,
    },
    suggestionItemText: {
      fontSize: 14,
      color: theme.onSurface,
    },
  });

export default HotelForm;