"use client"; // /components/main/analogInputs/AnalogInputsTable.tsx
import type { AnalogInput } from "@/types/analogInput";
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { RootState, AppDispatch } from "@/redux/store";
import { getAnalogInputsThunk } from "@/redux/thunks/getAnalogInputsThunk";
import { Icon } from "@iconify/react";
import settingsIcon from "@iconify/icons-mdi/settings";
import waveformIcon from "@iconify/icons-mdi/waveform";
import { setSelectedAnalogInput } from "@/redux/slices/analogInputs/selectedAnalogInputSlice";
import { setIsSettingsModalOpen } from "@/redux/slices/analogInputs/analogInputsUiSlice";
import { setSelectedId } from "@/redux/slices/analogInputs/analogInputsHistorySlice";

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

  const [activeId, setActiveId] = React.useState<number | null>(null);

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

  const analogInputs = useSelector(
    (state: RootState) => state.analogInputs ?? []
  );

  const handleSelect = (id: number, input: AnalogInput) => {
    dispatch(setIsSettingsModalOpen(true));
    dispatch(setSelectedId(id));
    setActiveId(id);
    dispatch(setSelectedAnalogInput(input));
  };

  return (
    <div className="bg-white shadow-md border border-gray-200 p-3 rounded-lg w-full laptop:p-1 xl:p-1">
      <h2 className="laptop:text-sm  md:text-base 2xl:text-lg font-bold mb-3 flex items-center">
        <Icon
          icon={waveformIcon}
          className="text-littwin-blue mr-2 text-2xl laptop:text-lg xl:text-xl 2xl:text-2xl border-2 border-littwin-blue rounded-md"
        />
        Messwerteingänge
      </h2>
      <div className="overflow-x-auto">
        <table className="w-full text-xs laptop:text-[10px] xl:text-xs 2xl:text-sm border-collapse">
          <thead className="bg-gray-100 border-b items-center ">
            <tr>
              <th className="border p-1 text-left">Eingang</th>
              <th className="border p-1 text-left">Messwert</th>
              <th className="border p-1 text-left">Einheit</th>
              <th className="border p-1 text-left">Bezeichnung</th>
              <th className="border p-1 text-left">Aktion</th>
            </tr>
          </thead>
          <tbody>
            {Object.values(analogInputs)
              .filter(
                (e) =>
                  e && typeof e.id === "number" && typeof e.label === "string"
              )
              .slice(0, 8)
              .map((e, index) => (
                <tr
                  key={index}
                  className={`transition cursor-pointer ${
                    e.id === activeId ? "bg-blue-100" : "hover:bg-gray-100"
                  }`}
                >
                  <td
                    className="border p-2"
                    onClick={() => handleSelect(e.id!, e)}
                  >
                    <div className="flex items-center gap-1 ">
                      <Icon
                        icon={waveformIcon}
                        className="text-gray-600 text-base laptop:text-sm xl:text-sm 2xl:text-lg"
                      />
                      {e.id ?? "-"}
                    </div>
                  </td>
                  <td
                    className="border p-2 text-right"
                    onClick={() => handleSelect(e.id!, e)}
                  >
                    {typeof e.value === "number" ? e.value.toFixed(2) : "-"}
                  </td>

                  <td className="border p-2">{e.unit || "-"}</td>
                  <td
                    className="border p-2"
                    onClick={() => handleSelect(e.id!, e)}
                  >
                    {e.label || "----"}
                  </td>

                  <td className="border p-2 text-center">
                    <button
                      onClick={() => {
                        handleSelect(e.id!, e);
                      }}
                      className="text-gray-400 hover:text-gray-500"
                    >
                      <Icon icon={settingsIcon} className="text-xl" />
                    </button>
                  </td>
                </tr>
              ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}