"use client";
import React, { useEffect, useState } from "react";
import { useSelector, useDispatch } from "react-redux";
import { RootState } from "../../../../redux/store";
import {
  updateInvertierung,
  updateName,
} from "../../../../redux/slices/digitalInputsSlice";

export default function InputModal({ selectedInput, closeInputModal, isOpen }) {
  const [invertiert, setInvertiert] = useState(false);
  const [name, setName] = useState("");
  const dispatch = useDispatch();

  const reduxInput = useSelector((state: RootState) =>
    state.digitalInputsSlice.inputs.find(
      (input) => input.id === Number(selectedInput?.id)
    )
  );

  useEffect(() => {
    if (reduxInput) {
      setInvertiert(reduxInput.invertierung);
      setName(reduxInput.name || "");
    }
  }, [reduxInput]);

  if (!isOpen || !selectedInput || !reduxInput) return null;

  const handleInvertierungToggle = () => {
    const neueInvertierung = !invertiert;
    dispatch(
      updateInvertierung({ id: reduxInput.id, invertierung: neueInvertierung })
    );
    setInvertiert(neueInvertierung);
  };

  const handleNameSpeichern = () => {
    dispatch(updateName({ id: reduxInput.id, name }));
  };

  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-xl font-semibold text-blue-500 mb-4 border-b pb-2">
          Parameter für Eingang {selectedInput.id}
        </h2>

        <div className="grid grid-cols-2 gap-x-4 gap-y-3">
          <div>
            <strong>Status:</strong>
          </div>
          <div className="flex items-center gap-3 text-xl font-semibold col-span-1">
            {reduxInput.status ? (
              <>
                <span className="w-4 h-4 bg-red-500 rounded-full inline-block"></span>
                <span className="text-red-600">Inaktiv</span>
              </>
            ) : (
              <>
                <span className="w-4 h-4 bg-green-500 rounded-full inline-block"></span>
                <span className="text-green-600">Aktiv</span>
              </>
            )}
          </div>

          <div>
            <strong>Name:</strong>
          </div>
          <div className="flex gap-2">
            <input
              type="text"
              value={name}
              onChange={(e) => setName(e.target.value)}
              className="border border-gray-300 rounded px-2 py-1 w-full"
              maxLength={32}
            />
            <button
              onClick={handleNameSpeichern}
              className="px-2 py-1 text-sm bg-blue-500 hover:bg-blue-600 text-white rounded"
            >
              Speichern
            </button>
          </div>

          <div className="flex items-center gap-2 col-span-2">
            <strong>Invertierung:</strong>
            <span>{invertiert ? "Ein" : "Aus"}</span>
            <button
              onClick={handleInvertierungToggle}
              className="ml-auto px-3 py-1 text-sm bg-gray-200 hover:bg-gray-300 rounded"
            >
              Umschalten
            </button>
          </div>

          <div>
            <strong>Zählerstand:</strong>
          </div>
          <div>{reduxInput.counter}</div>

          <div>
            <strong>Filterzeit:</strong>
          </div>
          <div>{reduxInput.filterzeit} ms</div>

          <div>
            <strong>Gewichtung:</strong>
          </div>
          <div>{reduxInput.gewichtung}</div>

          <div>
            <strong>Zähler aktiv:</strong>
          </div>
          <div>{reduxInput.zaehlerAktiv ? "Ja" : "Nein"}</div>

          <div>
            <strong>Eingang offline:</strong>
          </div>
          <div>{reduxInput.eingangOffline ? "Offline" : "Online"}</div>
        </div>

        <button
          onClick={closeInputModal}
          className="mt-6 px-4 py-2 bg-blue-500 hover:bg-blue-600 text-white rounded-lg transition"
        >
          Schließen
        </button>
      </div>
    </div>
  );
}