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 { FlightSuggestions, FormInputType } from "./types";
import { TextInput } from "react-native-gesture-handler";

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

// --- Component Props ---
export interface FlightFormProps {
  initialFromLocation?: LocationData;
  initialToLocation?: LocationData;
  initialDepartureDate?: string; // Expect YYYY-MM-DD string
  initialReturnDate?: string; // Expect YYYY-MM-DD string

  onInputFocus?: (input: FormInputType) => void;
  onSwapPress?: (
    currentFrom: LocationData | undefined,
    currentTo: LocationData | undefined
  ) => void;
  onSearchPress?: (details: {
    from: LocationData | undefined;
    to: LocationData | undefined;
    departure: string | undefined; // Send YYYY-MM-DD
    return?: string | undefined; // Send YYYY-MM-DD
  }) => void;
  onTextChange?: (text: string) => void;

  onSelectionChange?: (details: {
    from: LocationData | undefined;
    to: LocationData | undefined;
    departure: string | undefined; // Send YYYY-MM-DD
    return?: string | undefined; // Send YYYY-MM-DD
  }) => void;

  fromLabel?: string;
  fromPlaceholder?: string;

  toLabel?: string;
  toPlaceholder?: string;

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

  isOneWay?: boolean;

  suggestionData?: FlightSuggestions[];

  // --- Style Props ---
  containerStyle?: StyleProp<ViewStyle>;
  inputGroupContainerStyle?: StyleProp<ViewStyle>;
  inputWrapperStyle?: StyleProp<ViewStyle>;
  customInputContainerStyle?: StyleProp<ViewStyle>;
  inputStyle?: StyleProp<ViewStyle>;
  labelStyle?: StyleProp<TextStyle>;
  swapButtonContainerStyle?: StyleProp<ViewStyle>;
  swapButtonStyle?: StyleProp<ViewStyle>;
  swapIconStyle?: StyleProp<TextStyle>;
  departureRowStyle?: 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>;
  // Styles for the default suggestion item rendering
  suggestionItemGroupStyle?: StyleProp<ViewStyle>;
  suggestionCityRowStyle?: StyleProp<ViewStyle>;
  suggestionCityIconStyle?: StyleProp<TextStyle>;
  suggestionCityTextStyle?: StyleProp<TextStyle>;
  suggestionAirportTouchableStyle?: StyleProp<ViewStyle>;
  suggestionAirportIconStyle?: StyleProp<TextStyle>;
  suggestionAirportTextStyle?: StyleProp<TextStyle>;
}
// --- Component ---
const FlightForm: React.FC<FlightFormProps> = ({
  initialFromLocation = "Beirut, Beirut Intl Arpt - BEY",
  initialToLocation = "Dubai, Dubai Intl Arpt - DXB",
  initialDepartureDate,
  initialReturnDate,
  onSwapPress,
  onSearchPress,
  onInputFocus,
  onTextChange,
  fromLabel = "FROM",
  toLabel = "TO",
  fromPlaceholder = "From Where?",
  toPlaceholder = "To Where?",
  departureLabel = "DEPARTURE",
  returnLabel = "RETURN",
  swapIconName = "swap-horizontal",
  searchIconName = "search",
  calendarThemeOverrides = {},
  isOneWay,
  suggestionData,
  // Style Props
  containerStyle,
  inputGroupContainerStyle,
  inputWrapperStyle,
  customInputContainerStyle, // Renamed from inputStyle for clarity
  labelStyle,
  swapButtonContainerStyle,
  swapButtonStyle,
  swapIconStyle,
  departureRowStyle,
  searchButtonStyle,
  searchIconStyle,
  dateRangePickerOuterContainerStyle,
  dateRangePickerLabelStyle,
  dateRangePickerInputGroupStyle,
  dateRangePickerCalendarContainerStyle,
  suggestionListContainerStyle,
  suggestionItemGroupStyle,
  suggestionCityRowStyle,
  suggestionCityIconStyle,
  suggestionCityTextStyle,
  suggestionAirportTouchableStyle,
  suggestionAirportIconStyle,
  suggestionAirportTextStyle,
  inputStyle,
  onSelectionChange,
  dateRangePickerInputContainerStyle,
}) => {
  const { theme, isRTL } = useTheme();
  const styles = useMemo(() => themedStyles(theme, isRTL), [theme, isRTL]);
  const toLocationInput = useRef<TextInput>(null);
  const fromLocationInput = useRef<TextInput>(null);

  // --- State ---
  const [fromLocation, setFromLocation] = useState<LocationData | undefined>(
    initialFromLocation
  );
  const [toLocation, setToLocation] = useState<LocationData | undefined>(
    initialToLocation
  );
  const [departureDate, setDepartureDate] = useState<string | undefined>(
    initialDepartureDate
  );
  const [returnDate, setReturnDate] = useState<string | undefined>(
    initialReturnDate
  );
  const [focusedInput, setFocusedInput] = useState<FormInputType>();

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

  useEffect(() => {
    onSelectionChange?.({
      from: fromLocation,
      to: toLocation,
      departure: departureDate,
      return: isOneWay ? undefined : returnDate,
    });
  }, [
    fromLocation,
    toLocation,
    departureDate,
    returnDate,
    isOneWay,
    onSelectionChange,
  ]);

  const handleSearch = useCallback(() => {
    onSearchPress?.({
      from: fromLocation,
      to: toLocation,
      departure: departureDate,
      return: isOneWay ? undefined : returnDate, // Only send return if not one way
    });
  }, [
    fromLocation,
    toLocation,
    departureDate,
    returnDate,
    isOneWay,
    onSearchPress,
  ]);

  // --- Default Suggestion Renderer (Now Stylable) ---
  const suggestionRenderItem = (item: FlightSuggestions) => (
    <View
      key={item.id}
      style={[styles.suggestionItemGroup, suggestionItemGroupStyle]}
    >
      <View style={[styles.suggestionCityRow, suggestionCityRowStyle]}>
        <Ionicons
          name="airplane" // Consider making icon name a prop too if needed
          size={20}
          color={theme.primary}
          style={[styles.suggestionCityIcon, suggestionCityIconStyle]}
        />
        <Text style={[styles.suggestionCityText, suggestionCityTextStyle]}>
          {item.city}
        </Text>
      </View>
      {item.airports.map((airport, index) => (
        <TouchableOpacity
          key={`${item.id}-${index}`}
          style={[
            styles.suggestionAirportTouchable,
            suggestionAirportTouchableStyle,
          ]}
          onPress={() => {
            if (focusedInput == FormInputType.FLIGHT_TO) {
              setToLocation(airport);
              toLocationInput.current?.blur();
            } else {
              setFromLocation(airport);
              fromLocationInput.current?.blur();
            }
          }}
        >
          <Ionicons
            name="arrow-forward"
            size={18}
            color={theme.primary}
            style={[styles.suggestionAirportIcon, suggestionAirportIconStyle]}
          />
          <Text
            style={[styles.suggestionAirportText, suggestionAirportTextStyle]}
          >
            {airport}
          </Text>
        </TouchableOpacity>
      ))}
    </View>
  );

  return (
    <View style={[styles.container, containerStyle]}>
      <View style={[styles.inputGroupContainer, inputGroupContainerStyle]}>
        <View style={[styles.inputWrapper, inputWrapperStyle]}>
          <CustomInput
            ref={fromLocationInput}
            onChangeText={(text) => {
              setFromLocation(text);
              onTextChange?.(text);
            }}
            inputStyle={inputStyle}
            label={fromLabel}
            value={fromLocation}
            labelStyle={[styles.label, labelStyle]}
            placeholder={fromPlaceholder}
            onFocus={() => {
              setFocusedInput(FormInputType.FLIGHT_FROM);
              onInputFocus?.(FormInputType.FLIGHT_FROM);
            }}
            onBlur={() => {
              setTimeout(() => {
                if (focusedInput === FormInputType.FLIGHT_FROM) {
                  setFocusedInput(undefined);
                }
              }, 150);
            }}
            inputContainerStyle={customInputContainerStyle}
          />
          {suggestionData && (
            <SuggestionList
              data={suggestionData}
              visible={focusedInput === FormInputType.FLIGHT_FROM}
              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={toLocationInput}
            onChangeText={(text) => {
              setToLocation(text);
              onTextChange?.(text);
            }}
            label={toLabel}
            value={toLocation}
            inputStyle={inputStyle}
            labelStyle={[styles.label, labelStyle]}
            placeholder={toPlaceholder}
            onFocus={() => {
              setFocusedInput(FormInputType.FLIGHT_TO);
              onInputFocus?.(FormInputType.FLIGHT_TO);
            }}
            onBlur={() => {
              setTimeout(() => {
                if (focusedInput === FormInputType.FLIGHT_TO) {
                  setFocusedInput(undefined);
                }
              }, 150);
            }}
            inputContainerStyle={customInputContainerStyle}
          />
          {suggestionData && (
            <SuggestionList
              data={suggestionData}
              visible={focusedInput === FormInputType.FLIGHT_TO}
              renderItemContent={suggestionRenderItem}
              // Apply suggestionListContainerStyle
              containerStyle={suggestionListContainerStyle}
            />
          )}
        </View>
      </View>

      {/* Apply departureRowStyle */}
      <View style={[styles.departureRow, departureRowStyle]}>
        <DateRangePicker
          returnLabel={returnLabel}
          departureLabel={departureLabel}
          outerContainerStyle={[
            styles.dateRangePickerOuterContainer,
            dateRangePickerOuterContainerStyle,
          ]}
          inputContainerStyle={dateRangePickerInputContainerStyle}
          labelStyle={[labelStyle, dateRangePickerLabelStyle]}
          inputGroupStyle={dateRangePickerInputGroupStyle}
          calendarContainerStyle={dateRangePickerCalendarContainerStyle}
          calendarThemeOverrides={calendarThemeOverrides}
          onDatesChange={(d) => {
            setDepartureDate(d.departure);
            setReturnDate(d.return);
          }}
          isOneWay={isOneWay}
          // departureDate={initialDepartureDate}
          // initialReturnDate={initialReturnDate}
        />
        {/* Search Button */}
        {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: {
      // Position swap button between the two input wrappers
      // position: "absolute",
      // left: 0,
      // right: 0,
      // top: "50%", // Adjust as needed based on CustomInput height
      // transform: [{ translateY: -18 }], // Half the button height
      alignItems: "center",
      // zIndex: 1, // Ensure button is clickable above inputs
    },
    swapButton: {
      width: 36,
      height: 36,
      borderRadius: 18,
      backgroundColor: theme.surface,
      borderColor: theme.border,
      borderWidth: 1,
      justifyContent: "center",
      alignItems: "center",
    },
    departureRow: {
      flexDirection: isRTL ? "row-reverse" : "row",
      alignItems: "flex-end",
      marginTop: 10,
      gap: 10,
    },
    dateRangePickerOuterContainer: {
      flex: 1,
    },
    searchButton: {
      backgroundColor: theme.primary,
      width: 50,
      height: 50,
      borderRadius: 8,
      justifyContent: "center",
      alignItems: "center",
    },
    suggestionItemGroup: {
      paddingVertical: 8,
      paddingHorizontal: 12,
      borderBottomWidth: StyleSheet.hairlineWidth,
      borderBottomColor: theme.border,
      backgroundColor: theme.surface,
    },
    suggestionCityRow: {
      flexDirection: "row",
      alignItems: "center",
      gap: 10,
      marginBottom: 5,
    },
    suggestionCityIcon: {},
    suggestionCityText: {
      fontSize: 15,
      fontWeight: "600",
      color: theme.onSurface,
    },
    suggestionAirportTouchable: {
      flexDirection: "row",
      alignItems: "center",
      gap: 10,
      paddingVertical: 4,
      marginLeft: 25,
    },
    suggestionAirportIcon: {},
    suggestionAirportText: {
      fontSize: 14,
      color: theme.onSurface,
    },
  });

export default FlightForm;