"use client"; // Falls notwendig
import React, { useState } from "react";
import { Icon } from "@iconify/react";

function EinAusgaenge() {
  const digitalInputs = [
    { id: 1, status: "active", description: "100V-Ausfall", isInverted: true },
    { id: 2, status: "inactive", description: "DE2", isInverted: false },
    { id: 3, status: "active", description: "DE3", isInverted: false },
    { id: 4, status: "inactive", description: "DE4", isInverted: false },
    { id: 5, status: "active", description: "DE5", isInverted: false },
    { id: 6, status: "inactive", description: "DE6", isInverted: false },
    { id: 7, status: "active", description: "DE7", isInverted: false },
    { id: 8, status: "inactive", description: "DE8", isInverted: false },
    { id: 9, status: "active", description: "DE9", isInverted: false },
    { id: 10, status: "inactive", description: "DE10", isInverted: false },
    { id: 11, status: "active", description: "DE11", isInverted: false },
    { id: 12, status: "inactive", description: "DE12", isInverted: false },
    { id: 13, status: "active", description: "DE13", isInverted: false },
    { id: 14, status: "inactive", description: "DE14", isInverted: false },
    { id: 15, status: "active", description: "DE15", isInverted: false },
    { id: 16, status: "inactive", description: "DE16", isInverted: false },
    { id: 17, status: "active", description: "DE17", isInverted: false },
    { id: 18, status: "inactive", description: "DE18", isInverted: false },
    { id: 19, status: "active", description: "DE19", isInverted: false },
    { id: 20, status: "inactive", description: "DE20", isInverted: false },
    { id: 21, status: "active", description: "DE21", isInverted: false },
    { id: 22, status: "inactive", description: "DE22", isInverted: false },
    { id: 23, status: "active", description: "DE23", isInverted: false },
    { id: 24, status: "inactive", description: "DE24", isInverted: false },
    { id: 25, status: "active", description: "DE25", isInverted: false },
    { id: 26, status: "inactive", description: "DE26", isInverted: false },
    { id: 27, status: "active", description: "DE27", isInverted: false },
    { id: 28, status: "inactive", description: "DE28", isInverted: false },
    { id: 29, status: "active", description: "DE29", isInverted: false },
    { id: 30, status: "inactive", description: "DE30", isInverted: false },
    { id: 31, status: "active", description: "DE31", isInverted: false },
    { id: 32, status: "inactive", description: "DE32", isInverted: false },
  ];

  // Aufteilen der Eingänge in zwei Gruppen
  const inputsGroup1 = digitalInputs.slice(0, 16);
  const inputsGroup2 = digitalInputs.slice(16);
  //-----------------------------------------
  const [digitalOutputs, setDigitalOutputs] = useState([
    { id: 1, description: "Ausgang1", toggle: true },
    { id: 2, description: "Ausgang2", toggle: false },
    { id: 3, description: "Ausgang3", toggle: true },
    { id: 4, description: "Ausgang4", toggle: false },
  ]);
  const toggleSwitch = (id) => {
    setDigitalOutputs((prevOutputs) =>
      prevOutputs.map((output) =>
        output.id === id ? { ...output, toggle: !output.toggle } : output
      )
    );
  };

  return (
    <div className="p-4">
      <h1 className="text-lg font-semibold mb-4">Ein- und Ausgänge</h1>
      <div className="flex gap-4">
        {/* Digitale Eingänge */}
        <div className="bg-white shadow-md rounded-lg border border-gray-200 p-4 w-3/5 flex-grow flex flex-col">
          <h2 className="text-md font-bold mb-4 flex items-center">
            <Icon icon="mdi:input" className="text-blue-500 mr-2 text-2xl" />
            Digitale Eingänge
          </h2>
          <div className="grid grid-cols-2 gap-4">
            {[inputsGroup1, inputsGroup2].map((group, index) => (
              <div key={index} className="flex-grow">
                <table className="w-full text-sm border-collapse bg-white rounded-lg">
                  <thead className="bg-gray-100 border-b">
                    <tr>
                      <th className="px-2 py-1 text-left">Eingang</th>
                      <th className="px-2 py-1 text-left">Zustand</th>
                      <th className="px-2 py-1 text-left">Bezeichnung</th>
                      <th className="px-2 py-1 text-left">Aktion</th>
                    </tr>
                  </thead>
                  <tbody>
                    {group.map((input) => (
                      <tr key={input.id} className="border-b">
                        <td className="flex items-center p-2 xl:py-0 2xl:p-1">
                          <Icon
                            icon="mdi:input"
                            className="text-black-500 mr-2 text-xl"
                          />
                          {input.id}
                        </td>
                        <td className="p-2 xl:py-0">
                          <div className="flex items-center">
                            {/* Status-Icon */}
                            <span
                              className={
                                input.status === "active"
                                  ? "text-green-500"
                                  : "text-red-500"
                              }
                            >
                              {input.status === "active" ? "●" : "⨉"}
                            </span>
                            {/* Swap-Icon wird angezeigt, wenn invertiert */}
                            {input.isInverted && (
                              <Icon
                                icon="mdi:swap-vertical"
                                className="text-red-500 ml-2 text-xl cursor-pointer"
                                title="Invertiert"
                              />
                            )}
                          </div>
                        </td>

                        <td className="p-2 xl:py-0">{input.description}</td>
                        <td className="p-2 xl:py-0">
                          <Icon
                            icon="mdi:settings"
                            className="text-gray-400 text-lg cursor-pointer"
                          />
                        </td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            ))}
          </div>
        </div>

        {/* Digitale Ausgänge */}
        <div className="bg-white shadow-md rounded-lg border border-gray-200 p-4 w-2/5 h-[fit-content]">
          <h2 className="text-md font-bold mb-4 flex items-center">
            <Icon icon="mdi:output" className="text-blue-500 mr-2 text-2xl" />
            Digitale Ausgänge
          </h2>
          <table className="w-full text-sm border-collapse bg-white rounded-lg">
            <thead className="bg-gray-100 border-b">
              <tr>
                <th className="px-2 py-1 text-left">Ausgang</th>
                <th className="px-2 py-1 text-left">Bezeichnung</th>
                <th className="px-2 py-1 text-left">Schalter</th>
                <th className="px-2 py-1 text-left">Aktion</th>
              </tr>
            </thead>
            <tbody>
              {digitalOutputs.map((output) => (
                <tr key={output.id} className="border-b">
                  <td className="flex items-center px-2 py-1">
                    <Icon
                      icon="mdi:output"
                      className="text-black-500 mr-2 text-xl"
                    />
                    {output.id}
                  </td>
                  <td className="px-2 py-1">{output.description}</td>
                  <td className="px-2 py-1">
                    <Icon
                      icon="ion:switch"
                      onClick={() => toggleSwitch(output.id)}
                      className={`cursor-pointer text-2xl transform  ${
                        output.toggle
                          ? "text-blue-500 scale-x-100"
                          : "text-gray-500 scale-x-[-1]"
                      }`}
                      title={`Schalter ${
                        output.toggle ? "EIN" : "AUS"
                      } schalten`}
                    />
                  </td>
                  <td className="px-2 py-1">
                    <Icon
                      icon="mdi:settings"
                      className="text-gray-400 text-lg cursor-pointer"
                    />
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>
      </div>
    </div>
  );
}

export default EinAusgaenge;