CPLv4.0/components/main/analogInputs/AnalogInputsTable.tsx

"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 { setIsChartModalOpen } from "@/redux/slices/analogInputs/analogInputsUiSlice";
import {
  setSelectedId,
  setAutoLoad,
} from "@/redux/slices/analogInputs/analogInputsHistorySlice";

export default function AnalogInputsTable({ loading }: { loading: boolean }) {
  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(setSelectedId(id));
    setActiveId(id);
    dispatch(setSelectedAnalogInput(input));
    dispatch(setAutoLoad(true));
  };

  return (
    <div
      className={`text-[var(--color-fg)] bg-[var(--color-surface)] dark:bg-[var(--color-surface)] shadow-sm border border-[var(--color-border)] p-3 rounded-lg laptop:p-1 xl:p-1 ${
        loading ? "cursor-wait opacity-70" : ""
      }`}
    >
      <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={`text-xs laptop:text-[10px] xl:text-xs 2xl:text-sm border-collapse w-full ${
            loading ? "cursor-wait" : ""
          }`}
        >
          <thead className="bg-[var(--color-surface-alt)]/60 dark:bg-[var(--color-surface-alt)]/30 text-[var(--color-fg)] border-b border-[var(--color-border)] items-center">
            <tr>
              <th className="border p-1 text-left bg-[var(--color-surface)] text-[var(--color-fg)] border-[var(--color-border)]">
                Eingang
              </th>
              <th className="border p-1 text-left bg-[var(--color-surface)] text-[var(--color-fg)] border-[var(--color-border)]">
                Messwert
              </th>
              <th className="border p-1 text-left bg-[var(--color-surface)] text-[var(--color-fg)] border-[var(--color-border)]">
                Einheit
              </th>
              <th className="border p-1 text-left bg-[var(--color-surface)] text-[var(--color-fg)] border-[var(--color-border)]">
                Bezeichnung
              </th>
              <th className="border p-1 text-left bg-[var(--color-surface)] text-[var(--color-fg)] border-[var(--color-border)]">
                Einstellungen
              </th>
              <th className="border p-1 text-left bg-[var(--color-surface)] text-[var(--color-fg)] border-[var(--color-border)]">
                Messkurve
              </th>
            </tr>
          </thead>
          <tbody>
            {Object.values(analogInputs)
              .filter(
                (analogInput) =>
                  analogInput &&
                  typeof analogInput.id === "number" &&
                  typeof analogInput.label === "string"
              )
              .slice(0, 8)
              .map((analogInput, index) => (
                <tr
                  key={index}
                  className={`transition cursor-pointer ${
                    loading
                      ? "cursor-wait"
                      : analogInput.id === activeId
                      ? "bg-[var(--color-accent-soft)] dark:bg-[var(--color-surface-alt)]/60 text-[var(--color-fg)]"
                      : "hover:bg-[var(--color-surface-alt)]/70 dark:hover:bg-[var(--color-surface-alt)]/30"
                  }`}
                >
                  <td
                    className="border p-2 bg-[var(--color-surface)] text-[var(--color-fg)] border-[var(--color-border)]"
                    onClick={() => handleSelect(analogInput.id!, analogInput)}
                  >
                    <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"
                      />
                      {analogInput.id ?? "-"}
                    </div>
                  </td>
                  <td
                    className="border p-2 text-right bg-[var(--color-surface)] text-[var(--color-fg)] border-[var(--color-border)]"
                    onClick={() => handleSelect(analogInput.id!, analogInput)}
                  >
                    {typeof analogInput.value === "number"
                      ? analogInput.value.toFixed(2)
                      : "-"}
                  </td>

                  <td
                    className="border p-2 bg-[var(--color-surface)] text-[var(--color-fg)] border-[var(--color-border)]"
                    onClick={() => handleSelect(analogInput.id!, analogInput)}
                  >
                    {analogInput.unit || "-"}
                  </td>
                  <td
                    className="border p-2 bg-[var(--color-surface)] text-[var(--color-fg)] border-[var(--color-border)]"
                    onClick={() => handleSelect(analogInput.id!, analogInput)}
                  >
                    {analogInput.label || "----"}
                  </td>

                  <td className="border p-2 text-center bg-[var(--color-surface)] text-[var(--color-fg)] border-[var(--color-border)]">
                    <button
                      onClick={() => {
                        handleSelect(analogInput.id!, analogInput);
                        dispatch(setIsSettingsModalOpen(true));
                      }}
                      className="text-gray-400 hover:text-gray-500 dark:text-gray-300 dark:hover:text-white"
                    >
                      <Icon icon={settingsIcon} className="text-xl" />
                    </button>
                  </td>
                  <td className="border p-2 text-center bg-[var(--color-surface)] text-[var(--color-fg)] border-[var(--color-border)]">
                    <button
                      onClick={() => {
                        handleSelect(analogInput.id!, analogInput);
                        dispatch(setIsChartModalOpen(true));
                      }}
                      className="text-gray-500 hover:text-gray-700 dark:text-gray-300 dark:hover:text-white"
                      title="Messkurve anzeigen"
                      aria-label="Messkurve anzeigen"
                    >
                      <span role="img" aria-hidden="true" className="text-lg">
                        📈
                      </span>
                    </button>
                  </td>
                </tr>
              ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}