"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()); // ✅ Holt die API-Daten nur im Client
  }, [dispatch]);

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

  const [selectedEingang, setSelectedEingang] = useState(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">uW</th>
                <th className="border p-3 text-center">uG</th>
                <th className="border p-3 text-center">oW</th>
                <th className="border p-3 text-center">oG</th>
                */}
                <th className="border p-3 text-center">Einstellung</th>
              </tr>
            </thead>
            <tbody>
              {Object.values(analogeEingaenge).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">
                    {eingang.uW ? "🟢" : "⚪"}
                  </td>
                  <td className="border p-3 text-center">
                    {eingang.uG ? "🟢" : "⚪"}
                  </td>
                  <td className="border p-3 text-center">
                    {eingang.oW ? "🟠" : "⚪"}
                  </td>
                  <td className="border p-3 text-center">
                    {eingang.oG ? "🟢" : "⚪"}
                  </td>
                  */}

                  <td className="border p-3 text-center">
                    <button
                      onClick={() => openSettingsModal(eingang)}
                      className=" text-white text-xs px-2 py-1 rounded hover:bg-blue-500 transition"
                    >
                      ⚙️
                    </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-blue-500">
                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.einheit}</div>

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

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

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

              <div>
                <strong>Loggerinterval:</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-blue-600 text-white rounded-lg transition"
              >
                Schließen
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}