"use client";
// components/main/kabelueberwachung/kue705FO/modals/KueEinstellung.tsx
import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import type { RootState } from "../../../../../redux/store";
import handleSave from "../handlers/handleSave";
import handleDisplayEinschalten from "../handlers/handleDisplayEinschalten";
import firmwareUpdate from "../handlers/firmwareUpdate";
import ProgressModal from "@/components/main/settingsPageComponents/modals/ProgressModal";
import { toast } from "react-toastify";
import ConfirmModal from "@/components/common/ConfirmModal";

interface Props {
  slot: number;
  showModal: boolean;
  onClose?: () => void;
  onModulNameChange?: (id: string) => void;
}

const memoryIntervalOptions = [
  { value: 0, label: "Kein" },
  { value: 1, label: "1 Minute" },
  { value: 5, label: "5 Minuten" },
  { value: 10, label: "10 Minuten" },
  { value: 15, label: "15 Minuten" },
  { value: 30, label: "30 Minuten" },
  { value: 60, label: "60 Minuten" },
  { value: 360, label: "6 Stunden" },
  { value: 720, label: "12 Stunden" },
];

export default function KueEinstellung({
  slot,
  onClose = () => {},
  onModulNameChange,
}: Props) {
  const dispatch = useDispatch();
  const {
    kueID,
    kueName,
    kueLimit1,
    kueDelay1,
    kueLimit2Low,
    kueLoopInterval,
    memoryInterval,
  } = useSelector((state: RootState) => state.kueDataSlice);
  const reduxAdmin = useSelector(
    (state: RootState) => state.authSlice.isAdminLoggedIn
  );
  const [isAdminLoggedIn] = useState(() => reduxAdmin);

  const [showConfirmModal, setShowConfirmModal] = useState(false);

  const [isUpdating, setIsUpdating] = useState(false);
  const [progress, setProgress] = useState(0);
  const [formData, setFormData] = useState(() => {
    if (typeof window !== "undefined") {
      const cache = window.__kueCache?.[`slot_${slot}`];
      if (cache) return cache;
    }
    return {
      kueID: kueID[slot] || "",
      kueName: kueName[slot] || "",
      limit1: kueLimit1[slot]?.toString() ?? "",
      delay1: kueDelay1[slot]?.toString() ?? "",
      limit2Low: kueLimit2Low[slot]?.toString() ?? "",
      loopInterval: kueLoopInterval[slot]?.toString() ?? "",
      memoryInterval: memoryInterval[slot]?.toString() ?? "",
    };
  });

  const handleChange = (key: keyof typeof formData, value: string) => {
    const updated = { ...formData, [key]: value };
    setFormData(updated);
    if (typeof window !== "undefined") {
      window.__kueCache = window.__kueCache || {};
      window.__kueCache[`slot_${slot}`] = updated;
    }
  };

  const handleSaveWrapper = async () => {
    const updatedKueName = [...kueName];
    updatedKueName[slot] = formData.kueName;

    const updatedLimit1 = [...kueLimit1];
    updatedLimit1[slot] = Number(formData.limit1);

    const updatedDelay1 = [...kueDelay1];
    updatedDelay1[slot] = Number(formData.delay1);

    const updatedLimit2Low = [...kueLimit2Low];
    updatedLimit2Low[slot] = Number(formData.limit2Low);

    const updatedLoopInterval = [...kueLoopInterval];
    updatedLoopInterval[slot] = Number(formData.loopInterval);

    const updatedMemoryInterval = [...memoryInterval];
    updatedMemoryInterval[slot] = Number(formData.memoryInterval);

    const newData = {
      kueID: kueID[slot],
      kueName: updatedKueName[slot],
      limit1: updatedLimit1[slot].toString(),
      delay1: updatedDelay1[slot].toString(),
      limit2Low: updatedLimit2Low[slot].toString(),
      loopInterval: updatedLoopInterval[slot].toString(),
      memoryInterval: updatedMemoryInterval[slot].toString(),
    };
    setFormData(newData);
    if (typeof window !== "undefined") {
      window.__kueCache![`slot_${slot}`] = newData;
    }

    await handleSave({
      slot,
      ids: kueID,
      kueName: updatedKueName,
      isolationsgrenzwerte: updatedLimit1,
      verzoegerung: updatedDelay1,
      untereSchleifenGrenzwerte: updatedLimit2Low,
      obereSchleifenGrenzwerte: updatedLimit2Low,
      schleifenintervall: updatedLoopInterval,
      speicherintervall: updatedMemoryInterval,
      originalValues: {
        kueID,
        kueName,
        isolationsgrenzwerte: kueLimit1,
        verzoegerung: kueDelay1,
        untereSchleifenGrenzwerte: kueLimit2Low,
        obereSchleifenGrenzwerte: kueLimit2Low,
        schleifenintervall: kueLoopInterval,
        speicherintervall: memoryInterval,
      },
      dispatch,
      onModulNameChange: onModulNameChange ?? (() => {}),
      onClose,
    });
  };

  return (
    <div className="p-4 text-sm">
      {/* Kabelbezeichnung */}
      <div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
        <label className="">Kabelbezeichnung:</label>
        <input
          type="text"
          className="w-full border rounded p-1 bg-gray-100 text-gray-600"
          value={formData.kueID}
          readOnly
          title="Feld kann nicht bearbeitet werden"
        />
      </div>
      {/* Kabelname */}
      <div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
        <label className="">Kabelname:</label>
        <input
          type="text"
          className="w-full border rounded p-1"
          value={formData.kueName}
          onChange={(e) => handleChange("kueName", e.target.value)}
        />
      </div>
      {/* Speicherintervall */}
      <div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
        <label className="">Speicherintervall:</label>
        <select
          className="w-full border rounded p-1"
          value={formData.memoryInterval}
          onChange={(e) => handleChange("memoryInterval", e.target.value)}
        >
          {memoryIntervalOptions.map((opt) => (
            <option key={opt.value} value={opt.value}>
              {opt.label}
            </option>
          ))}
        </select>
      </div>
      {/* Isolationsmessung */}
      <div className="mb-4  w-full">
        <h3 className="font-bold mb-2">Isolationsmessung</h3>
        <div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
          <label className="w-48 ">Grenzwert:</label>
          <div className="relative w-36">
            <input
              type="number"
              className="border rounded px-2 py-1 pr-20 w-full text-right"
              value={formData.limit1}
              onChange={(e) => handleChange("limit1", e.target.value)}
            />
            <span className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">
              MOhm
            </span>
          </div>
        </div>
        <div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
          <label className="w-48 ">Verzögerung:</label>
          <div className="relative w-36">
            <input
              type="number"
              className="border rounded px-2 py-1 pr-20 w-full text-right"
              value={formData.delay1}
              onChange={(e) => handleChange("delay1", e.target.value)}
            />
            <span className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">
              Sekunden
            </span>
          </div>
        </div>
      </div>
      {/* Schleifenmessung */}
      <div className="mb-4">
        <h3 className="font-bold mb-2">Schleifenmessung</h3>
        <div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
          <label className="w-48 ">Grenzwert:</label>
          <div className="relative w-36">
            <input
              type="number"
              className="border rounded px-2 py-1 pr-20 w-full text-right"
              value={formData.limit2Low}
              onChange={(e) => handleChange("limit2Low", e.target.value)}
            />
            <span className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">
              kOhm
            </span>
          </div>
        </div>
        <div className="mb-4 grid grid-cols-3 items-center gap-2 w-full">
          <label className="w-48 ">Schleifenmessintervall:</label>
          <div className="relative w-36">
            <input
              type="number"
              className="border rounded px-2 py-1 pr-20 w-full text-right"
              value={formData.loopInterval}
              onChange={(e) => handleChange("loopInterval", e.target.value)}
            />
            <span className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-500 text-sm">
              Stunden
            </span>
          </div>
        </div>
      </div>
      <div className="flex justify-end gap-2  p-0 rounded">
        {isAdminLoggedIn && (
          <>
            <button
              onClick={() => setShowConfirmModal(true)}
              className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
            >
              Firmware Update
            </button>
          </>
        )}
        {showConfirmModal && (
          <ConfirmModal
            open={showConfirmModal}
            title="Firmware-Update starten?"
            message="⚠️ Das Firmware-Update kann einige Minuten dauern. Möchten Sie wirklich fortfahren?"
            onCancel={() => setShowConfirmModal(false)}
            onConfirm={async () => {
              setShowConfirmModal(false);
              toast.info("Firmware-Update gestartet. Bitte warten...");
              setIsUpdating(true);
              setProgress(0);

              const totalDuration = 5000;
              const intervalMs = 50;
              const steps = totalDuration / intervalMs;
              let currentStep = 0;

              const interval = setInterval(() => {
                currentStep++;
                const newProgress = Math.min((currentStep / steps) * 100, 100);
                setProgress(newProgress);

                if (currentStep >= steps) {
                  clearInterval(interval);
                  setProgress(100);
                  setTimeout(() => {
                    toast.success(
                      "✅ Firmwareupdate erfolgreich abgeschlossen."
                    );
                    setIsUpdating(false);
                  }, 300);
                }
              }, intervalMs);

              try {
                await firmwareUpdate(slot);
              } catch (err) {
                console.error("Firmware-Update-Fehler:", err);
                clearInterval(interval);
                toast.error("❌ Fehler beim Firmwareupdate");
                setIsUpdating(false);
              }
            }}
          />
        )}
        {isUpdating && (
          <ProgressModal visible={isUpdating} progress={progress} />
        )}
        <button
          onClick={() => handleDisplayEinschalten(slot)}
          className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
        >
          Display einschalten
        </button>{" "}
        <button
          onClick={handleSaveWrapper}
          className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
        >
          Speichern
        </button>
      </div>
    </div>
  );
}