"use client"; // LoopChartView.tsx

import React, { useEffect } from "react";
import { Listbox } from "@headlessui/react";
import ReactModal from "react-modal";
import LoopMeasurementChart from "./LoopMeasurementChart";
import Report from "../IsoMeasurementChart/Report";
import LoopChartActionBar from "./LoopChartActionBar";
import { useSelector, useDispatch } from "react-redux";
import { AppDispatch } from "@/redux/store";
import { RootState } from "@/redux/store";
import {
  setChartOpen,
  setFullScreen,
  setSlotNumber,
} from "@/redux/slices/kabelueberwachungChartSlice";
import { setChartTitle as setLoopChartTitle } from "@/redux/slices/loopChartTypeSlice";

import { resetBrushRange } from "@/redux/slices/brushSlice";
import { useLoopChartLoader } from "./LoopChartActionBar";

import {
  setVonDatum,
  setBisDatum,
  setSelectedMode,
  setSelectedSlotType,
} from "@/redux/slices/kabelueberwachungChartSlice";

interface LoopChartViewProps {
  isOpen: boolean;
  onClose: () => void;
  slotIndex: number;
}

const LoopChartView: React.FC<LoopChartViewProps> = ({
  isOpen,
  onClose,
  slotIndex,
}) => {
  const dispatch = useDispatch<AppDispatch>();
  const chartTitle = useSelector(
    (state: RootState) => state.loopChartType.chartTitle
  );

  const isFullScreen = useSelector(
    (state: RootState) => state.kabelueberwachungChartSlice.isFullScreen
  );

  // useLoopChartLoader hook
  const loadLoopChartData = useLoopChartLoader();

  // slotNumber nicht direkt benötigt – wird intern über Redux genutzt

  // **Modal schließen + Redux-Status zurücksetzen**
  const handleClose = () => {
    const today = new Date();
    const thirtyDaysAgo = new Date();
    thirtyDaysAgo.setDate(today.getDate() - 30);

    const toISO = (date: Date) => date.toLocaleDateString("sv-SE");

    // Reset Datum
    dispatch(setVonDatum(toISO(thirtyDaysAgo)));
    dispatch(setBisDatum(toISO(today)));

    // Reset Dropdowns
    dispatch(setSelectedMode("DIA1"));
    dispatch(setSelectedSlotType("schleifenwiderstand"));

    // Sonstiges Reset
    dispatch(setChartOpen(false));
    dispatch(setFullScreen(false));
    dispatch(resetBrushRange());

    onClose();
  };

  // **Vollbildmodus umschalten**
  const toggleFullScreen = () => {
    dispatch(setFullScreen(!isFullScreen));
  };

  // Modal öffnen - RSL spezifische Einstellungen
  useEffect(() => {
    if (isOpen) {
      const today = new Date();
      const thirtyDaysAgo = new Date();
      thirtyDaysAgo.setDate(today.getDate() - 30);

      const toISO = (date: Date) => date.toLocaleDateString("sv-SE");

      // Set slot number first
      dispatch(setSlotNumber(slotIndex));

      // Set dates
      dispatch(setVonDatum(toISO(thirtyDaysAgo)));
      dispatch(setBisDatum(toISO(today)));

      // Set RSL specific settings
      dispatch(setSelectedSlotType("schleifenwiderstand"));

      // Load data for Schleife mode after a small delay to ensure Redux state is updated
      setTimeout(() => {
        loadLoopChartData.loadLoopChartData();
      }, 10);
    }
    //ESLint ignore
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [isOpen, slotIndex, dispatch]);

  return (
    <ReactModal
      isOpen={isOpen}
      onRequestClose={handleClose}
      ariaHideApp={false}
      style={{
        overlay: { backgroundColor: "rgba(0, 0, 0, 0.5)" },
        content: {
          top: "50%",
          left: "50%",
          bottom: "auto",
          marginRight: "-50%",
          transform: "translate(-50%, -50%)",
          width: isFullScreen ? "90vw" : "70rem",
          height: isFullScreen ? "90vh" : "35rem",
          padding: "1rem",
          transition: "all 0.3s ease-in-out",
          display: "flex",
          flexDirection: "column",
        },
      }}
    >
      {/* Action-Buttons */}
      <div
        style={{
          position: "absolute",
          top: "0.625rem",
          right: "0.625rem",
          display: "flex",
          gap: "0.75rem",
        }}
      >
        {/* Fullscreen-Button */}
        <button
          onClick={toggleFullScreen}
          style={{
            background: "transparent",
            border: "none",
            fontSize: "1.5rem",
            cursor: "pointer",
          }}
        >
          <i
            className={
              isFullScreen ? "bi bi-fullscreen-exit" : "bi bi-arrows-fullscreen"
            }
          ></i>
        </button>

        {/* Schließen-Button */}
        <button
          onClick={handleClose}
          style={{
            background: "transparent",
            border: "none",
            fontSize: "1.5rem",
            cursor: "pointer",
          }}
        >
          <i className="bi bi-x-circle-fill"></i>
        </button>
      </div>

      {/* Chart-Container */}
      <div
        style={{
          flex: 1,
          display: "flex",
          flexDirection: "column",
          height: "100%",
        }}
      >
        <div className="flex justify-between items-center mb-2 pr-24">
          <h3 className="text-lg font-semibold">
            {chartTitle === "Messkurve" ? "Schleifenwiderstand" : "Meldungen"}
          </h3>
          <Listbox
            value={chartTitle}
            onChange={(value: "Messkurve" | "Meldungen") =>
              dispatch(setLoopChartTitle(value))
            }
          >
            <div className="relative w-40">
              <Listbox.Button className="w-full border px-3 py-1 rounded text-left bg-white flex justify-between items-center text-sm">
                <span>{chartTitle}</span>
                <svg
                  className="w-5 h-5 text-gray-400"
                  viewBox="0 0 20 20"
                  fill="currentColor"
                >
                  <path
                    fillRule="evenodd"
                    d="M5.23 7.21a.75.75 0 011.06.02L10 10.585l3.71-3.355a.75.75 0 111.02 1.1l-4.25 3.85a.75.75 0 01-1.02 0l-4.25-3.85a.75.75 0 01.02-1.06z"
                    clipRule="evenodd"
                  />
                </svg>
              </Listbox.Button>
              <Listbox.Options className="absolute z-50 mt-1 w-full border rounded bg-white shadow max-h-60 overflow-auto text-sm">
                {(["Messkurve", "Meldungen"] as const).map((option) => (
                  <Listbox.Option
                    key={option}
                    value={option}
                    className={({
                      selected,
                      active,
                    }: {
                      selected: boolean;
                      active: boolean;
                    }) =>
                      `px-4 py-1 cursor-pointer ${
                        selected
                          ? "bg-littwin-blue text-white"
                          : active
                          ? "bg-gray-200"
                          : ""
                      }`
                    }
                  >
                    {option}
                  </Listbox.Option>
                ))}
              </Listbox.Options>
            </div>
          </Listbox>
        </div>
        <LoopChartActionBar />
        <div style={{ flex: 1, height: "90%" }}>
          {chartTitle === "Messkurve" ? (
            <LoopMeasurementChart />
          ) : (
            <Report moduleType="RSL" />
          )}
        </div>
      </div>
    </ReactModal>
  );
};

export default LoopChartView;