"use client"; // KueEinstellung.tsx – komplett angepasst mit window.__kueCache zum Schutz vor Remount-Reset

import { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import type { RootState } from "../../../../../redux/store";
import { setKueData } from "../../../../../redux/slices/kueDataSlice";
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,
  showModal,
  onClose = () => {},
}: Props) {
  const dispatch = useDispatch();
  const {
    kueID,
    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 {
      name: kueID[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 = () => {
    const updatedKueID = [...kueID];
    updatedKueID[slot] = formData.name;

    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);

    dispatch(
      setKueData({
        kueID: updatedKueID,
        kueLimit1: updatedLimit1,
        kueDelay1: updatedDelay1,
        kueLimit2Low: updatedLimit2Low,
        kueLoopInterval: updatedLoopInterval,
        memoryInterval: updatedMemoryInterval,
      })
    );

    if (typeof window !== "undefined") {
      delete window.__kueCache[formCacheKey];
    }

    onClose();
  };

  return (
    <div className="text-black space-y-6">
      <div>
        <label className="font-bold">Kabelbezeichnung:</label>
        <input
          type="text"
          className="w-full border rounded p-1 text-sm"
          value={formData.name}
          onChange={(e) => handleChange("name", e.target.value)}
        />
      </div>

      <div>
        <h3 className="font-bold text-center mb-2">Isolationsmessung</h3>
        <table className="w-full border-collapse text-sm">
          <thead className="bg-gray-100">
            <tr>
              <th className="border p-2 text-center">Grenzwert (MOhm)</th>
              <th className="border p-2 text-center">Verzögerung (sek)</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td className="border p-2 text-center">
                <input
                  type="number"
                  step="0.1"
                  className="w-[6rem] border rounded p-1"
                  value={formData.limit1}
                  onChange={(e) => handleChange("limit1", e.target.value)}
                />
              </td>
              <td className="border p-2 text-center">
                <input
                  type="number"
                  step="0.1"
                  className="w-[6rem] border rounded p-1"
                  value={formData.delay1}
                  onChange={(e) => handleChange("delay1", e.target.value)}
                />
              </td>
            </tr>
          </tbody>
        </table>
      </div>

      <div>
        <h3 className="font-bold text-center mb-2">Schleifenmessung</h3>
        <table className="w-full border-collapse text-sm mb-2">
          <thead className="bg-gray-100">
            <tr>
              <th className="border p-2 text-center">Grenzwert (kOhm)</th>
              <th className="border p-2 text-center">Schleifenintervall (h)</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td className="border p-2 text-center">
                <input
                  type="number"
                  step="0.1"
                  className="w-[6rem] border rounded p-1"
                  value={formData.limit2Low}
                  onChange={(e) => handleChange("limit2Low", e.target.value)}
                />
              </td>
              <td className="border p-2 text-center">
                <input
                  type="number"
                  step="0.1"
                  className="w-[6rem] border rounded p-1"
                  value={formData.loopInterval}
                  onChange={(e) => handleChange("loopInterval", e.target.value)}
                />
              </td>
            </tr>
          </tbody>
        </table>

        <div>
          <label className="font-bold block mb-1">Speicherintervall</label>
          <select
            className="w-full border rounded p-1 text-sm"
            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>
      </div>

      <div className="flex justify-end gap-2 bg-gray-100 p-3 rounded">
        {isAdminLoggedIn && (
          <button
            onClick={() => firmwareUpdate(slot)}
            className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
          >
            <span className="mr-2">🔧</span> Firmware Update
          </button>
        )}
        <button
          onClick={() => handleDisplayEinschalten(slot)}
          className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
        >
          <span className="mr-2">📺</span> Display einschalten
        </button>
        <button
          onClick={handleSaveWrapper}
          className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
        >
          <span className="mr-2">💾</span> Speichern
        </button>
      </div>
    </div>
  );
}