CPLv4.0/components/main/analogeEingaenge/AnalogeEingaengeTable.tsx

"use client";
// components/main/analogeEingaenge/AnalogeEingaengeTable.tsx
import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { RootState, AppDispatch } from "../../../redux/store";
import { fetchAnalogeEingaengeThunk } from "../../../redux/thunks/fetchAnalogeEingaengeThunk";

export default function AnalogeEingaengeTable() {
  const dispatch = useDispatch<AppDispatch>();

  useEffect(() => {
    dispatch(fetchAnalogeEingaengeThunk());
  }, [dispatch]);

  const analogeEingaenge = useSelector(
    (state: RootState) => state.analogeEingaengeSlice
  );

  const [selectedEingang, setSelectedEingang] = useState<any>(null);

  const openSettingsModal = (eingang: any) => {
    setSelectedEingang(eingang);
  };

  const closeSettingsModal = () => {
    setSelectedEingang(null);
  };

  return (
    <div className="w-full">
      <div className="bg-white shadow-lg rounded-lg p-4 border border-gray-200">
        <div className="overflow-x-auto">
          <table className="w-full border-collapse border border-gray-300 text-sm md:text-base">
            <thead>
              <tr className="bg-gray-100 text-gray-700">
                <th className="border p-1 text-left">Eingang</th>
                <th className="border p-3 text-left">Wert</th>
                <th className="border p-3 text-left">Bezeichnung</th>
                <th className="border p-3 text-center">Einstellung</th>
              </tr>
            </thead>
            <tbody>
              {Object.values(analogeEingaenge)
                .filter(
                  (eingang) => eingang?.id !== null && eingang?.id !== undefined
                )
                .map((eingang, index) => (
                  <tr
                    key={index}
                    className="text-gray-700 hover:bg-gray-50 transition"
                  >
                    <td className="border p-3">{eingang.id ?? "-"}</td>
                    <td className="border p-3">{eingang.value ?? "-"}</td>
                    <td className="border p-3">{eingang.name || "----"}</td>
                    <td className="border p-3 text-center">
                      <button
                        onClick={() => openSettingsModal(eingang)}
                        className="text-white bg-gray-100 hover:bg-gray-200 text-xs px-2 py-1 rounded transition"
                      >
                        <span className="text-blue-500 text-2xl laptop:text-sm md:text-lg lg:text-xl xl:text-2xl">
                          ⚙️
                        </span>
                      </button>
                    </td>
                  </tr>
                ))}
            </tbody>
          </table>
        </div>
      </div>

      {/* Modal */}
      {selectedEingang && (
        <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
          <div className="bg-white p-6 rounded-lg shadow-lg w-1/2 max-w-xl">
            <div className="border-b pb-2 mb-4">
              <h2 className="text-xl font-bold text-littwin-blue">
                Analoger Eingang {selectedEingang.id}
              </h2>
            </div>

            <div className="grid grid-cols-2 gap-x-4 gap-y-2">
              <div>
                <strong>Name:</strong>
              </div>
              <div>{selectedEingang.name}</div>

              <div>
                <strong>Einheit:</strong>
              </div>
              <div>{selectedEingang.unit}</div>

              <div>
                <strong>Faktor:</strong>
              </div>
              <div>{selectedEingang.factor}</div>

              <div>
                <strong>Offset:</strong>
              </div>
              <div>{selectedEingang.offset}</div>

              <div>
                <strong>Gewichtung:</strong>
              </div>
              <div>{selectedEingang.weighting}</div>

              <div>
                <strong>Logger-Intervall:</strong>
              </div>
              <div>{selectedEingang.loggerInterval} Minuten</div>
            </div>

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