import React, { useEffect } from "react";
import DatePicker from "react-datepicker";
import { useSelector, useDispatch } from "react-redux";
import { RootState } from "../../../../../../redux/store";
import {
  setVonDatum,
  setBisDatum,
} from "../../../../../../redux/slices/kabelueberwachungChartSlice";
import "react-datepicker/dist/react-datepicker.css";

const DateRangePicker: React.FC = () => {
  const dispatch = useDispatch();

  const reduxVonDatum = useSelector(
    (state: RootState) => state.kabelueberwachungChartSlice.vonDatum
  );
  const reduxBisDatum = useSelector(
    (state: RootState) => state.kabelueberwachungChartSlice.bisDatum
  );

  const today = new Date();
  const thirtyDaysAgo = new Date();
  thirtyDaysAgo.setDate(today.getDate() - 30);

  const sixMonthsAgo = new Date();
  sixMonthsAgo.setMonth(today.getMonth() - 6);

  // Redux speichert ISO ("YYYY-MM-DD") → Für DatePicker geeignet
  const parseISODate = (isoDate: string) => {
    const [year, month, day] = isoDate.split("-").map(Number);
    return new Date(year, month - 1, day);
  };

  useEffect(() => {
    if (!reduxVonDatum)
      dispatch(setVonDatum(thirtyDaysAgo.toISOString().split("T")[0]));
    if (!reduxBisDatum)
      dispatch(setBisDatum(today.toISOString().split("T")[0]));
  }, [dispatch, reduxVonDatum, reduxBisDatum]);

  return (
    <div className="flex space-x-4 items-center">
      <div className="flex items-center space-x-2">
        <label className="block text-sm font-semibold">Von</label>
        <DatePicker
          selected={reduxVonDatum ? parseISODate(reduxVonDatum) : thirtyDaysAgo}
          onChange={(date) => {
            if (date) {
              dispatch(setVonDatum(date.toISOString().split("T")[0]));
            }
          }}
          selectsStart
          startDate={
            reduxVonDatum ? parseISODate(reduxVonDatum) : thirtyDaysAgo
          }
          endDate={reduxBisDatum ? parseISODate(reduxBisDatum) : today}
          minDate={sixMonthsAgo} // ⬅️ 6 Monate zurück erlaubt
          maxDate={today}
          dateFormat="dd.MM.yyyy"
          className="border px-2 py-1 rounded"
        />
      </div>

      <div className="flex items-center space-x-2">
        <label className="block text-sm font-semibold">Bis</label>
        <DatePicker
          selected={reduxBisDatum ? parseISODate(reduxBisDatum) : today}
          onChange={(date) => {
            if (date) {
              dispatch(setBisDatum(date.toISOString().split("T")[0]));
            }
          }}
          selectsEnd
          startDate={
            reduxVonDatum ? parseISODate(reduxVonDatum) : thirtyDaysAgo
          }
          endDate={reduxBisDatum ? parseISODate(reduxBisDatum) : today}
          minDate={sixMonthsAgo}
          maxDate={today}
          dateFormat="dd.MM.yyyy"
          className="border px-2 py-1 rounded"
        />
      </div>
    </div>
  );
};

export default DateRangePicker;