"use client"; // components/main/analogeEingaenge/AnalogeEingaengeTable.tsx
import React from "react";
import { useSelector } from "react-redux";
import { RootState } from "../../../redux/store";
import { useFetchAnalogeEingaenge } from "./hooks/useFetchAnalogeEingaenge"; // ✅ Hook importieren

export default function AnalogeEingaengeTable() {
  useFetchAnalogeEingaenge(); // ✅ Hook aufrufen (lädt Daten und aktualisiert sie regelmäßig)

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

  console.log("Aktuelle Redux-Daten:", analogeEingaenge); // 🔍 Prüfen, ob Redux wirklich aktualisiert wird

  return (
    <div className="w-full">
      <div className="bg-white shadow-lg rounded-lg p-4 border border-gray-200">
        <h2 className="text-lg md:text-xl font-semibold mb-4 text-gray-700">
          Analoge Eingänge
        </h2>
        <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-3 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>
              </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>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}