import { useState, useEffect } from "react";
import { View, Text, Pressable, StyleSheet } from "react-native";
import DateTimePicker, {
  DateTimePickerEvent,
} from "@react-native-community/datetimepicker";
import { format } from "date-fns";
import { MaterialIcons } from "@expo/vector-icons";
import { Colors } from "@/constants/theme";
import { Label } from "@/components/ui/Input";

interface DatePickerProps {
  label: string;
  initialDate?: Date;
  onChange: (date: Date) => void;
  minimumDate?: Date;
  maximumDate?: Date;
}

export const DatePickerField: React.FC<DatePickerProps> = ({
  label,
  initialDate = new Date(),
  onChange,
  minimumDate,
  maximumDate,
}) => {
  const [date, setDate] = useState(initialDate);
  const [show, setShow] = useState(false);

  useEffect(() => {
    setDate(initialDate);
  }, [initialDate]);

  const openPicker = () => setShow(true);

  const handleChange = (event: DateTimePickerEvent, selectedDate?: Date) => {
    setShow(false);

    if (selectedDate) {
      setDate(selectedDate);
      if (onChange) onChange(selectedDate);
    }
  };

  const formatted = format(date, "dd/MM/yyyy");

  return (
    <View>
      <Label text={label} />

      <Pressable
        onPress={openPicker}
        style={({ pressed }) => [styles.container, pressed && styles.pressed]}
      >
        <Text style={styles.dateText}>{formatted}</Text>
        <MaterialIcons name="calendar-month" size={22} color="#6B7280" />
      </Pressable>

      {show && (
        <DateTimePicker
          value={date}
          mode="date"
          display={"default"}
          onChange={handleChange}
          minimumDate={minimumDate}
          maximumDate={maximumDate}
        />
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  label: {
    fontWeight: "500",
    color: Colors.light.textSecondary,
    fontSize: 12,
    marginBottom: 8,
    letterSpacing: 0.5,
    textTransform: "uppercase",
  },
  container: {
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    backgroundColor: "#F3F4F6", // light gray pill
    paddingVertical: 14,
    paddingHorizontal: 16,
    borderRadius: 10,
    borderWidth: 0.5,
    borderColor: "#E5E7EB",
    minWidth: 220,
  },
  pressed: {
    opacity: 0.8,
  },
  dateText: {
    color: "#111827",
    fontSize: 16,
    fontWeight: "600",
  },
});