"use client";

import React, { useState } from "react";
import { useSelector } from "react-redux";
import { RootState, useAppDispatch } from "../../../../../redux/store";
import { updateKvzData } from "../../../../../redux/thunks/kvzThunks";
import { useAdminAuth } from "../../../settingsPageComponents/hooks/useAdminAuth";

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

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

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

  // KVZ System: 32 Slots mit je 4 LEDs
  const isKvzPresent = kvzSlice.kvzPresence?.[slot] === 1;
  const isKvzActive = kvzSlice.kvzActive?.[slot] === 1;

  // LED Status für diesen Slot (4 LEDs pro Slot)
  const getKvzLedStatus = (ledIndex: number) => {
    const arrayIndex = slot * 4 + ledIndex;
    return kvzSlice.kvzStatus?.[arrayIndex] === 1;
  };

  const [localKvzActive, setLocalKvzActive] = useState(() => isKvzActive);

  // Synchronisiere localState mit Redux State
  React.useEffect(() => {
    setLocalKvzActive(isKvzActive);
  }, [isKvzActive]);

  const handleKvzToggle = async () => {
    const newState = !localKvzActive;
    setLocalKvzActive(newState);

    try {
      // API Update mit neuem Thunk - kvzActive statt kvzPresence
      await dispatch(
        updateKvzData([{ key: "kvzActive", slot, value: newState ? 1 : 0 }])
      );

      const msg = newState
        ? "✅ KVz wurde aktiviert."
        : "⚠️ KVz wurde deaktiviert.";
      alert(msg);
      location.reload();
    } catch (error) {
      console.error("Fehler beim KVz-Toggle:", error);
      alert("Fehler beim Umschalten der KVz-Funktion.");
      // State zurücksetzen bei Fehler
      setLocalKvzActive(!newState);
    }
  };

  return (
    <div className="p-4 text-sm">
      {/* KVz-Funktion - nur anzeigen wenn KVZ vorhanden ist */}
      {isAdminLoggedIn && isKvzPresent && (
        <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={localKvzActive}
              onClick={handleKvzToggle}
              className={`relative inline-flex h-6 w-11 items-center rounded-full transition-colors duration-200 ${
                localKvzActive ? "bg-littwin-blue" : "bg-gray-300"
              }`}
            >
              <span
                className={`inline-block h-4 w-4 transform rounded-full bg-white transition-transform duration-200 ${
                  localKvzActive ? "translate-x-6" : "translate-x-1"
                }`}
              />
            </button>
            <span className="text-sm text-gray-600">
              {localKvzActive ? "aktiviert" : "deaktiviert"}
            </span>
          </div>
        </div>
      )}

      {/* Meldung wenn KVZ nicht vorhanden */}
      {!isKvzPresent && (
        <div className="mb-4 mt-4 p-4 bg-yellow-50 border border-yellow-200 rounded">
          <div className="flex items-center gap-2">
            <span className="text-yellow-600">⚠️</span>
            <p className="text-sm text-yellow-800">
              <strong>Kein KVZ-Gerät vorhanden</strong>
              <br />
              Für Slot {slot + 1} ist kein KVZ-Gerät installiert oder
              konfiguriert.
            </p>
          </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>
  );
}