"use client"; // /components/main/einausgaenge/modals/DigitalOutputsModal.tsx
import React, { useState, useEffect } from "react";
import { useSelector } from "react-redux";
import { RootState } from "../../../../redux/store";

export default function DigitalOutputsModal({
  selectedOutput,
  closeOutputModal,
  isOpen,
}: {
  selectedOutput: any;
  closeOutputModal: () => void;
  isOpen: boolean;
}) {
  const allOutputs = useSelector(
    (state: RootState) => state.digitalOutputsSlice.outputs
  );

  const [label, setLabel] = useState("");
  const [status, setStatus] = useState(false);
  const [timer, setTimer] = useState(0);
  const [isSaving, setIsSaving] = useState(false);
  const [errorMsg, setErrorMsg] = useState("");

  // ✅ Zustand neu setzen, wenn Modal geöffnet oder anderer Ausgang ausgewählt wird
  useEffect(() => {
    if (isOpen && selectedOutput) {
      setLabel(selectedOutput.label || "");
      setStatus(selectedOutput.status || false);
      setTimer(0);
      setErrorMsg("");
    }
  }, [isOpen, selectedOutput]);

  if (!isOpen || !selectedOutput) return null;

  const handleSave = async () => {
    setIsSaving(true);
    setErrorMsg("");

    const updatedOutputs = allOutputs.map((output) =>
      output.id === selectedOutput.id
        ? { ...output, label: label.trim(), status }
        : output
    );

    try {
      const res = await fetch("/api/cpl/updateDigitalOutputs", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ outputs: updatedOutputs }),
      });

      if (!res.ok) {
        const err = await res.json();
        setErrorMsg(err?.error || "Fehler beim Speichern.");
      } else {
        console.log(
          "✅ Status & Label gespeichert für Ausgang",
          selectedOutput.id
        );
        closeOutputModal();
      }
    } catch (err) {
      setErrorMsg("❌ Netzwerkfehler beim Speichern.");
    } finally {
      setIsSaving(false);
    }
  };

  return (
    <div className="fixed top-0 left-0 w-full h-full bg-black bg-opacity-50 flex justify-center items-center z-50">
      <div className="bg-white rounded-lg shadow-lg p-6 w-1/2 max-w-lg">
        <h2 className="text-base font-bold  mb-4 border-b pb-2">
          Einstellungen Schaltausgang {selectedOutput.id}
        </h2>

        <div className="grid grid-cols-2 gap-x-4 gap-y-3">
          <div>
            <span className="font-normal">Bezeichnung:</span>
          </div>
          <input
            type="text"
            value={label}
            onChange={(e) => setLabel(e.target.value)}
            className="w-full border border-gray-300 rounded px-3 py-2"
            placeholder="z. B. Licht Relais 1"
          />
        </div>

        {errorMsg && <p className="text-red-600 text-sm mb-2">{errorMsg}</p>}

        <div className="flex justify-end gap-2 mt-6">
          <button
            onClick={closeOutputModal}
            disabled={isSaving}
            className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
          >
            Schließen
          </button>
          <button
            onClick={handleSave}
            disabled={isSaving}
            className="bg-littwin-blue text-white px-4 py-2 rounded flex items-center"
          >
            {isSaving ? "Speichern..." : "Speichern"}
          </button>
        </div>
      </div>
    </div>
  );
}