import React, { useState } from "react";
import {
  View,
  Text,
  TouchableOpacity,
  StyleSheet,
  Platform,
  Modal,
} from "react-native";
import { Ionicons } from "@expo/vector-icons";
import DateTimePicker from "@react-native-community/datetimepicker";
import { useI18n } from "@/hooks/use-i18n";
import { useThemeContext } from "@/hooks/use-theme-context";

interface TripDurationPickerProps {
  startDate: Date | null;
  endDate: Date | null;
  onStartDateChange: (date: Date | null) => void;
  onEndDateChange: (date: Date | null) => void;
}

export default function TripDurationPicker({
  startDate,
  endDate,
  onStartDateChange,
  onEndDateChange,
}: TripDurationPickerProps) {
  const { t } = useI18n();
  const { colors, colorScheme } = useThemeContext();
  const [showStartPicker, setShowStartPicker] = useState(false);
  const [showEndPicker, setShowEndPicker] = useState(false);

  const formatDate = (date: Date | null) => {
    if (!date) return "";
    const day = date.getDate().toString().padStart(2, "0");
    const month = (date.getMonth() + 1).toString().padStart(2, "0");
    const year = date.getFullYear();
    return `${day}/${month}/${year}`;
  };

  const handleStartDateChange = (event: any, selectedDate?: Date) => {
    setShowStartPicker(Platform.OS === "ios");
    if (selectedDate) {
      onStartDateChange(selectedDate);
    }
  };

  const handleEndDateChange = (event: any, selectedDate?: Date) => {
    setShowEndPicker(Platform.OS === "ios");
    if (selectedDate) {
      onEndDateChange(selectedDate);
    }
  };

  const themedStyles = {
    label: { color: colors.text },
    dateInput: {
      backgroundColor: colors.card,
      borderColor: colors.border,
    },
    dateText: { color: colors.text },
    placeholder: { color: colors.textSecondary },
    pickerContainer: { backgroundColor: colors.card },
    pickerHeader: { borderBottomColor: colors.border },
    pickerTitle: { color: colors.text },
    cancelButton: { color: colors.textSecondary },
  };

  return (
    <View style={styles.container}>
      <Text style={[styles.label, themedStyles.label]}>
        {t("diary.tripDuration")}
      </Text>
      <View style={styles.dateRangeContainer}>
        {/* Start Date */}
        <View style={styles.dateSection}>
          <Text style={[styles.subLabel, themedStyles.placeholder]}>
            {t("diary.startDate")}
          </Text>
          <TouchableOpacity
            style={[styles.dateInput, themedStyles.dateInput]}
            onPress={() => setShowStartPicker(true)}
            activeOpacity={0.7}
          >
            <Text
              style={[
                styles.dateText,
                themedStyles.dateText,
                !startDate && themedStyles.placeholder,
              ]}
            >
              {startDate ? formatDate(startDate) : t("diary.selectDate")}
            </Text>
            <Ionicons
              name="calendar-outline"
              size={20}
              color={colors.textSecondary}
            />
          </TouchableOpacity>
        </View>

        {/* End Date */}
        <View style={styles.dateSection}>
          <Text style={[styles.subLabel, themedStyles.placeholder]}>
            {t("diary.endDate")}
          </Text>
          <TouchableOpacity
            style={[styles.dateInput, themedStyles.dateInput]}
            onPress={() => setShowEndPicker(true)}
            activeOpacity={0.7}
          >
            <Text
              style={[
                styles.dateText,
                themedStyles.dateText,
                !endDate && themedStyles.placeholder,
              ]}
            >
              {endDate ? formatDate(endDate) : t("diary.selectDate")}
            </Text>
            <Ionicons
              name="calendar-outline"
              size={20}
              color={colors.textSecondary}
            />
          </TouchableOpacity>
        </View>
      </View>

      {/* Start Date Picker */}
      {showStartPicker && (
        <Modal transparent animationType="fade" visible={showStartPicker}>
          <View style={styles.modalOverlay}>
            <View style={[styles.pickerContainer, themedStyles.pickerContainer]}>
              <View style={[styles.pickerHeader, themedStyles.pickerHeader]}>
                <TouchableOpacity onPress={() => setShowStartPicker(false)}>
                  <Text style={[styles.cancelButton, themedStyles.cancelButton]}>
                    {t("common.cancel")}
                  </Text>
                </TouchableOpacity>
                <Text style={[styles.pickerTitle, themedStyles.pickerTitle]}>
                  {t("diary.selectStartDate")}
                </Text>
                <TouchableOpacity onPress={() => setShowStartPicker(false)}>
                  <Text style={styles.doneButton}>{t("common.done")}</Text>
                </TouchableOpacity>
              </View>
              <DateTimePicker
                value={startDate || new Date()}
                mode="date"
                display={Platform.OS === "ios" ? "spinner" : "default"}
                onChange={handleStartDateChange}
                maximumDate={endDate || undefined}
                themeVariant={colorScheme}
                textColor={colors.text}
              />
            </View>
          </View>
        </Modal>
      )}

      {/* End Date Picker */}
      {showEndPicker && (
        <Modal transparent animationType="fade" visible={showEndPicker}>
          <View style={styles.modalOverlay}>
            <View style={[styles.pickerContainer, themedStyles.pickerContainer]}>
              <View style={[styles.pickerHeader, themedStyles.pickerHeader]}>
                <TouchableOpacity onPress={() => setShowEndPicker(false)}>
                  <Text style={[styles.cancelButton, themedStyles.cancelButton]}>
                    {t("common.cancel")}
                  </Text>
                </TouchableOpacity>
                <Text style={[styles.pickerTitle, themedStyles.pickerTitle]}>
                  {t("diary.selectEndDate")}
                </Text>
                <TouchableOpacity onPress={() => setShowEndPicker(false)}>
                  <Text style={styles.doneButton}>{t("common.done")}</Text>
                </TouchableOpacity>
              </View>
              <DateTimePicker
                value={endDate || new Date()}
                mode="date"
                display={Platform.OS === "ios" ? "spinner" : "default"}
                onChange={handleEndDateChange}
                minimumDate={startDate || undefined}
                themeVariant={colorScheme}
                textColor={colors.text}
              />
            </View>
          </View>
        </Modal>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginBottom: 20,
  },
  label: {
    fontSize: 16,
    fontWeight: "600",
    marginBottom: 12,
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
  subLabel: {
    fontSize: 14,
    marginBottom: 6,
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
  dateRangeContainer: {
    flexDirection: "row",
    gap: 12,
  },
  dateSection: {
    flex: 1,
  },
  dateInput: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    borderWidth: 1,
    borderRadius: 8,
    paddingHorizontal: 12,
    paddingVertical: 12,
  },
  dateText: {
    fontSize: 15,
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
  modalOverlay: {
    flex: 1,
    backgroundColor: "rgba(0, 0, 0, 0.5)",
    justifyContent: "flex-end",
  },
  pickerContainer: {
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    paddingBottom: 20,
  },
  pickerHeader: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    paddingHorizontal: 20,
    paddingVertical: 16,
    borderBottomWidth: 1,
  },
  pickerTitle: {
    fontSize: 16,
    fontWeight: "600",
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
  cancelButton: {
    fontSize: 16,
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
  doneButton: {
    fontSize: 16,
    fontWeight: "600",
    color: "#3B82F6",
    fontFamily: Platform.select({
      ios: "System",
      android: "Roboto",
      default: "System",
    }),
  },
});