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

export default function AnalogeEingaengeTable() {
  useFetchAnalogeEingaenge();

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

  console.log("Aktuelle Redux-Daten:", analogeEingaenge);

  // State für das geöffnete Modal
  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="bg-blue-500 text-white text-xs px-2 py-1 rounded hover:bg-blue-600 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-3/4 max-w-3xl">
            <div className="flex justify-between items-center border-b pb-2">
              <h2 className="text-lg font-bold text-gray-700">
                Analoge Eingänge Einstellungen
              </h2>
              <button onClick={closeSettingsModal} className="text-gray-500">
                ❌
              </button>
            </div>

            <div className="mt-4">
              <label className="block text-sm text-gray-700">Eingang:</label>
              <input
                type="text"
                className="w-full border px-2 py-1 rounded"
                value={selectedEingang.id}
                readOnly
              />

              <label className="block text-sm text-gray-700 mt-2">
                Bezeichnung:
              </label>
              <input
                type="text"
                className="w-full border px-2 py-1 rounded"
                defaultValue={selectedEingang.name}
              />

              <label className="block text-sm text-gray-700 mt-2">Typ:</label>
              <input
                type="text"
                className="w-full border px-2 py-1 rounded"
                defaultValue="Spg."
                readOnly
              />

              <div className="grid grid-cols-4 gap-2 mt-4">
                <div>
                  <label className="block text-sm text-gray-700">uG:</label>
                  <input
                    type="number"
                    className="w-full border px-2 py-1 rounded"
                  />
                </div>
                <div>
                  <label className="block text-sm text-gray-700">uW:</label>
                  <input
                    type="number"
                    className="w-full border px-2 py-1 rounded"
                  />
                </div>
                <div>
                  <label className="block text-sm text-gray-700">oW:</label>
                  <input
                    type="number"
                    className="w-full border px-2 py-1 rounded"
                  />
                </div>
                <div>
                  <label className="block text-sm text-gray-700">oG:</label>
                  <input
                    type="number"
                    className="w-full border px-2 py-1 rounded"
                  />
                </div>
              </div>

              <div className="grid grid-cols-3 gap-2 mt-4">
                <div>
                  <label className="block text-sm text-gray-700">Faktor:</label>
                  <input
                    type="number"
                    className="w-full border px-2 py-1 rounded"
                  />
                </div>
                <div>
                  <label className="block text-sm text-gray-700">Offset:</label>
                  <input
                    type="number"
                    className="w-full border px-2 py-1 rounded"
                  />
                </div>
                <div>
                  <label className="block text-sm text-gray-700">
                    Filterzeit:
                  </label>
                  <input
                    type="number"
                    className="w-full border px-2 py-1 rounded"
                  />
                </div>
              </div>

              <label className="block text-sm text-gray-700 mt-2">
                Datenlogger:
              </label>
              <select className="w-full border px-2 py-1 rounded">
                <option>aus</option>
                <option>ein</option>
              </select>
            </div>

            <div className="flex justify-end mt-4">
              <button className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
                💾 Speichern
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}