import { Pressable, StyleSheet, Text, View } from "react-native";
import PhoneInput, {
  PhoneInputProps,
} from "react-native-international-phone-number";

import DateTimepicker, {
  AndroidNativeProps,
} from "@react-native-community/datetimepicker";

import Icon from "@expo/vector-icons/Ionicons";
import { useState } from "react";
import { TextInput, type TextInputProps } from "react-native";
import { IoniconsType } from "../../lib/types";
import { Input as ReusableInput } from "./../ui/input";

type InputProps = TextInputProps & {
  ref?: React.RefObject<TextInput>;
  label?: string;
  icon?: IoniconsType;
  right?: React.ReactNode;
};

function InputBase({
  label,
  children,
  right,
  icon,
}: {
  label?: string;
  icon?: IoniconsType;
  children: React.ReactNode;
  right?: React.ReactNode;
}) {
  return (
    <View className="my-2 w-full border-b border-b-gray-400">
      {label && <Text className=" font-bold text-gray-600">{label}</Text>}
      <View className="relative">
        {icon && (
          <Icon
            name={icon}
            size={20}
            color="#333"
            style={{
              position: "absolute",
              left: 4,
              top: 0,
              bottom: 0,
              verticalAlign: "middle",
              zIndex: 10,
            }}
          />
        )}
        {children}
        {right && (
          <View
            style={{
              position: "absolute",
              right: 4,
              top: 0,
              bottom: 0,
              justifyContent: "center",
              zIndex: 10,
            }}
            className="z-100 absolute right-0 top-0 bottom-0 align-middle flex"
          >
            {right}
          </View>
        )}
      </View>
    </View>
  );
}

export function Input(args: InputProps) {
  return (
    <InputBase label={args.label} icon={args.icon} right={args.right}>
      <ReusableInput
        inputMode={args.inputMode}
        autoComplete={args.autoComplete}
        autoCapitalize={args.autoCapitalize}
        keyboardType={args.keyboardType}
        secureTextEntry={args.secureTextEntry}
        value={args.value}
        onChangeText={args.onChangeText}
        focusable={args.focusable}
        autoFocus={args.autoFocus}
        onChange={args.onChange}
        placeholder={args.placeholder}
        // Match SelectComponent: transparent bg, border-b only, same height/padding
        className="h-12 min-h-12 rounded-none border-0 bg-transparent text-base"
        style={{
          paddingLeft: args.icon ? 28 : 0, // Consistent spacing when icon is present
          paddingRight: 12,
        }}
        placeholderTextColor="#888"
      />
    </InputBase>
  );
}

export function InputPhone(args: PhoneInputProps & { label: string }) {
  return (
    <InputBase label={args.label}>
      <PhoneInput
        {...args}
        language="tr"
        placeholderTextColor="#777"
        phoneInputStyles={{
          container: {
            backgroundColor: "transparent",
            borderRadius: 0,
            borderWidth: 0,
            height: 48,
            minHeight: 48,
            paddingLeft: 0,
          },
          flagContainer: {
            backgroundColor: "transparent",
            borderRightWidth: 0,
            paddingRight: 0,
            paddingLeft: 4,
          },
          caret: { display: "none" },
          divider: { display: "none" },
          input: {
            height: "100%",
            paddingLeft: 4,
          },
          callingCode: {
            color: "#111",
            fontSize: 15,
            fontWeight: "500",
          },
        }}
      />
    </InputBase>
  );
}

export function InputDateTime(
  args: AndroidNativeProps & {
    label: string;
    icon?: IoniconsType;
    value?: Date | null;
    onChange: (event: any, date?: Date) => void;
  }
) {
  const [showModal, setShowModal] = useState(false);

  const displayText = args.value
    ? args.value.toLocaleDateString("tr-TR")
    : "Tarih seçiniz";

  return (
    <InputBase label={args.label} icon={args.icon}>
      <Pressable
        onPress={() => {
          setShowModal(true);
        }}
        className="p-0 justify-center flex"
        style={[
          styles.dateInput,
          {
            backgroundColor: "transparent",
            borderRadius: 0,
            height: 48,
            minHeight: 48,
            paddingLeft: args.icon ? 28 : 0, // Consistent spacing when icon is present
            paddingRight: 12,
          },
        ]}
      >
        <Text style={{ color: args.value ? "#222" : "#888", fontSize: 15 }}>
          {displayText}
        </Text>
      </Pressable>
      {showModal && (
        <DateTimepicker
          value={args.value || new Date()}
          mode="date"
          display="default"
          onChange={(event, date) => {
            setShowModal(false);
            args.onChange(event, date);
          }}
        />
      )}
    </InputBase>
  );
}

const styles = StyleSheet.create({
  dateInput: {
    justifyContent: "center",
    // All other style is now inline for SelectComponent match
  },
});