"use client";

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 { useAdminAuth } from "../../../settingsPageComponents/hooks/useAdminAuth";

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 { isAdminLoggedIn } = useAdminAuth(true);

  const formCacheKey = `slot_${slot}`;
  if (typeof window !== "undefined") {
    window.__kueCache = window.__kueCache || {};
  }
  const cached =
    typeof window !== "undefined" ? window.__kueCache?.[formCacheKey] : null;

  const [formData, setFormData] = useState(() => {
    if (cached) return cached;
    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![formCacheKey] = updated;
    }
  };

  const handleSaveWrapper = async () => {
    const updatedKueID = [...kueID];
    //updatedKueID[slot] = formData.kueID;
    /*    if (Object.isFrozen(kueID)) {
      console.warn("kueID ist readonly!");
    }
   */
    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: updatedKueID[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;
    }

    // 🔧 handleSave aufrufen mit allen Daten
    await handleSave({
      slot,
      ids: kueID,
      kueName: updatedKueName,
      isolationsgrenzwerte: updatedLimit1,
      verzoegerung: updatedDelay1,
      untereSchleifenGrenzwerte: updatedLimit2Low,
      obereSchleifenGrenzwerte: updatedLimit2Low, // ggf. anpassen, falls du später High-Werte brauchst
      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={() => firmwareUpdate(slot)}
            className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
          >
            Firmware Update
          </button>
        )}
        <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>
  );
}