"use client";

import React, { useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { RootState } from "../../../../../redux/store";
import { setKueData } from "../../../../../redux/slices/kueDataSlice";
import { useAdminAuth } from "../../../settingsPageComponents/hooks/useAdminAuth";

type KvzData = {
  // Hier können später weitere KVz-spezifische Einstellungen hinzugefügt werden
  kvzSettings: string;
};

declare global {
  interface Window {
    __kvzCache?: Record<string, { data: KvzData; kvzActive: boolean }>;
  }
}

interface Props {
  slot: number;
  onClose?: () => void;
}

export default function KvzModalView({ slot, onClose }: Props) {
  const { isAdminLoggedIn } = useAdminAuth(true);
  const dispatch = useDispatch();
  const kvzSlice = useSelector((state: RootState) => state.kueDataSlice);

  const cacheKey = `kvz_slot_${slot}`;
  if (typeof window !== "undefined") {
    window.__kvzCache = window.__kvzCache || {};
  }
  const cachedKvz =
    typeof window !== "undefined"
      ? window.__kvzCache?.[cacheKey] ?? null
      : null;

  const [kvzData] = useState(
    () =>
      cachedKvz?.data || {
        kvzSettings: "", // Placeholder für zukünftige Einstellungen
      }
  );

  const [kvzActive, setKvzActive] = useState(
    () => cachedKvz?.kvzActive ?? kvzSlice.win_fallSensorsActive?.[slot] === 1
  );

  const updateCache = (data: typeof kvzData, active = kvzActive) => {
    if (typeof window !== "undefined") {
      (window.__kvzCache ??= {})[cacheKey] = {
        data,
        kvzActive: active,
      };
    }
  };

  const handleKvzToggle = () => {
    const newState = !kvzActive;
    setKvzActive(newState);
    updateCache(kvzData, newState);

    // Redux State sofort aktualisieren für UI-Update
    const updatedKvzActive = [...(kvzSlice.win_fallSensorsActive || [])];
    updatedKvzActive[slot] = newState ? 1 : 0;
    dispatch(setKueData({ win_fallSensorsActive: updatedKvzActive }));

    const isDev = window.location.hostname === "localhost";
    const slotParam = `KVZ${slot}=${newState ? 1 : 0}`;

    const reloadAfterConfirm = () => {
      const msg = newState
        ? "✅ KVz wurde aktiviert."
        : "⚠️ KVz wurde deaktiviert.";
      alert(msg);
      location.reload();
    };

    if (isDev) {
      const updates = [
        { key: "win_fallSensorsActive", slot, value: newState ? 1 : 0 },
      ];

      fetch("/api/cpl/updateKvzSettingsDataAPIHandler", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ updates }),
      })
        .then((res) => res.json())
        .then(() => {
          console.log("KVz-Aktiv-Status gespeichert.");
          reloadAfterConfirm();
        })
        .catch((err) => {
          console.error("Fehler beim Speichern von KVz aktiv:", err);
        });
    } else {
      const url = `${window.location.origin}/CPL?/kabelueberwachung.html&${slotParam}`;
      fetch(url)
        .then((res) => {
          if (!res.ok) throw new Error("KVz-Befehl fehlgeschlagen");
          console.log("KVz aktiviert/deaktiviert:", res.status);
          reloadAfterConfirm();
        })
        .catch((err) => {
          console.error("Fehler beim KVz-Befehl:", err);
          alert("Fehler beim Umschalten der KVz-Funktion.");
        });
    }
  };

  const handleSave = () => {
    const isDev = window.location.hostname === "localhost";

    if (isDev) {
      const updates = [
        { key: "win_fallSensorsActive", slot, value: kvzActive ? 1 : 0 },
        // Hier können später weitere KVz-Einstellungen hinzugefügt werden
      ];

      fetch("/api/cpl/updateKvzSettingsDataAPIHandler", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ updates }),
      })
        .then((res) => res.json())
        .then(() => {
          alert("KVz-Einstellungen erfolgreich gespeichert.");
          if (typeof onClose === "function") onClose();
        })
        .catch((err) => {
          console.error("Fehler beim Speichern:", err);
          alert("Speichern fehlgeschlagen.");
        });
    } else {
      // Originaler Webservice-Teil für Produktionsumgebung
      alert("KVz-Einstellungen gespeichert.");
      if (typeof onClose === "function") onClose();
    }

    updateCache(kvzData, kvzActive);
  };

  return (
    <div className="p-4 text-sm">
      {/* KVz-Funktion */}
      {isAdminLoggedIn && (
        <div className="mb-4 mt-4 grid grid-cols-3 items-center gap-2 w-full">
          <span className="text-sm font-medium">KVz-Funktion:</span>
          <div className="col-span-2 flex items-center gap-4">
            <button
              type="button"
              role="switch"
              aria-checked={kvzActive}
              onClick={handleKvzToggle}
              className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ${
                kvzActive ? "bg-littwin-blue" : "bg-gray-300"
              }`}
            >
              <span
                className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-200 ${
                  kvzActive ? "translate-x-6" : "translate-x-1"
                }`}
              />
            </button>
            <span className="text-sm text-gray-600">
              {kvzActive ? "aktiviert" : "deaktiviert"}
            </span>
          </div>
        </div>
      )}

      {/* Zukünftige KVz-Einstellungen können hier hinzugefügt werden */}
      {!isAdminLoggedIn && (
        <div className="mt-6 mb-4">
          <div className="mb-4">
            <p className="text-sm text-gray-600">
              Nur Admin-Benutzer können diese Einstellungen ändern.
            </p>
          </div>
        </div>
      )}

      {/* Speichern Button */}

      {/*       <div className="mt-36">
        <div className="flex justify-end gap-2 p-3 rounded">
          <button
            onClick={handleSave}
            className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
          >
            Speichern
          </button>
        </div>
      </div> */}
    </div>
  );
}