"use client"; // components/modules/AnalogeEingaengeComponent.tsx
import React, { useState } from "react";
import { Icon } from "@iconify/react";

interface Input {
  id: number;
  value: number;
  name: string;
  uW: boolean;
  uG: boolean;
  oW: boolean;
  oG: boolean;
}

const AnalogeEingaengeComponent = () => {
  const [activeConfig, setActiveConfig] = useState<number | null>(null);

  // Mock-Daten für die analogen Eingänge
  const inputs = [
    { id: 1, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
    {
      id: 2,
      value: 22.91,
      name: "Feuchtigkeit",
      uW: true,
      uG: true,
      oW: true,
      oG: false,
    },
    { id: 3, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
    { id: 4, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
    { id: 5, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
    {
      id: 6,
      value: 21.0,
      name: "Temperatur",
      uW: true,
      uG: true,
      oW: false,
      oG: false,
    },
    { id: 7, value: 0, name: "----", uW: true, uG: true, oW: true, oG: true },
    { id: 8, value: 0, name: "----", uW: true, uG: true, oW: false, oG: true },
  ];

  return (
    <div className="border rounded-lg shadow-md p-6 bg-white flex flex-col h-full">
      <h3 className="text-sm font-semibold mb-1">Analoge Eingänge</h3>
      <div className="overflow-auto flex-grow">
        <table className="table-auto w-full h-full text-sm text-left border-collapse">
          <thead className="bg-gray-100 text-gray-700">
            <tr>
              <th className="px-2 py-1 whitespace-nowrap">Eingang</th>
              <th className="px-2 py-1 whitespace-nowrap">Wert</th>
              <th className="px-2 py-1 whitespace-nowrap">Bezeichnung</th>
              <th className="px-2 py-1 text-center whitespace-nowrap">uW</th>
              <th className="px-2 py-1 text-center whitespace-nowrap">uG</th>
              <th className="px-2 py-1 text-center whitespace-nowrap">oW</th>
              <th className="px-2 py-1 text-center whitespace-nowrap">oG</th>
              <th className="px-2 py-1 text-center whitespace-nowrap">
                Aktion
              </th>
            </tr>
          </thead>
          <tbody>
            {inputs.map((input) => (
              <tr key={input.id} className="border-t">
                <td className="px-2 py-1">{input.id}</td>
                <td className="px-2 py-1">{input.value}</td>
                <td className="px-2 py-1">{input.name}</td>
                <td className="px-2 py-1 text-center">
                  <span
                    className={input.uW ? "text-green-500" : "text-gray-400"}
                  >
                    ●
                  </span>
                </td>
                <td className="px-2 py-1 text-center">
                  <span
                    className={input.uG ? "text-green-500" : "text-gray-400"}
                  >
                    ●
                  </span>
                </td>
                <td className="px-2 py-1 text-center">
                  <span
                    className={input.oW ? "text-orange-500" : "text-gray-400"}
                  >
                    ●
                  </span>
                </td>
                <td className="px-2 py-1 text-center">
                  <span
                    className={input.oG ? "text-green-500" : "text-gray-400"}
                  >
                    ●
                  </span>
                </td>
                <td className="px-2 py-1 text-center">
                  <button
                    onClick={() => setActiveConfig(input.id)}
                    className="text-blue-500 hover:text-blue-700"
                  >
                    <Icon icon="mdi:cog-outline" />
                  </button>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
};

export default AnalogeEingaengeComponent;