"use client";
import React, { useState } from "react";

function AnalogeEingaenge() {
  const [activeConfig, setActiveConfig] = useState(null);

  // Beispiel-Daten, du kannst die Daten dynamisch laden
  const inputs = [
    {
      id: 1,
      value: 0,
      name: "------------------",
      uG: true,
      uW: true,
      oW: true,
      oG: true,
    },
    {
      id: 2,
      value: 0,
      name: "------------------",
      uG: true,
      uW: true,
      oW: true,
      oG: true,
    },
    {
      id: 3,
      value: 0,
      name: "------------------",
      uG: true,
      uW: true,
      oW: true,
      oG: true,
    },
    {
      id: 4,
      value: 0,
      name: "------------------",
      uG: true,
      uW: true,
      oW: true,
      oG: true,
    },
    {
      id: 5,
      value: 0,
      name: "------------------",
      uG: true,
      uW: true,
      oW: true,
      oG: true,
    },
    {
      id: 6,
      value: 0,
      name: "------------------",
      uG: true,
      uW: true,
      oW: true,
      oG: true,
    },
    {
      id: 7,
      value: 0,
      name: "------------------",
      uG: true,
      uW: true,
      oW: true,
      oG: true,
    },
    {
      id: 8,
      value: 0,
      name: "------------------",
      uG: true,
      uW: true,
      oW: true,
      oG: true,
    },
  ];

  return (
    <div className="bg-gray-100 min-h-screen p-8">
      <h1 className="text-2xl font-bold mb-4">Analoge Eingänge</h1>
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {inputs.map((input) => (
          <div key={input.id} className="bg-white rounded-lg shadow-lg p-6">
            <div className="flex justify-between items-center bg-blue-500 text-white rounded-t-lg p-4">
              <h2 className="text-lg">XIO-PM {input.id}</h2>
              <button
                className="bg-green-500 hover:bg-green-600 text-white py-2 px-4 rounded"
                onClick={() => setActiveConfig(input.id)}
              >
                Online
              </button>
            </div>
            <div className="p-4">
              <table className="min-w-full bg-white border border-gray-300">
                <thead>
                  <tr className="bg-gray-200 text-gray-600 uppercase text-sm leading-normal">
                    <th className="py-3 px-4 text-center">Eingang</th>
                    <th className="py-3 px-4 text-center">Wert</th>
                    <th className="py-3 px-4 text-left">Bezeichnung</th>
                    <th className="py-3 px-4 text-center">uG</th>
                    <th className="py-3 px-4 text-center">uW</th>
                    <th className="py-3 px-4 text-center">oW</th>
                    <th className="py-3 px-4 text-center">oG</th>
                    <th className="py-3 px-4 text-center">Konfig</th>
                  </tr>
                </thead>
                <tbody className="text-gray-600 text-sm">
                  <tr className="border-b border-gray-200">
                    <td className="py-3 px-4 text-center">{input.id}</td>
                    <td className="py-3 px-4 text-right">{input.value}</td>
                    <td className="py-3 px-4">{input.name}</td>
                    <td className="py-3 px-4 text-center">
                      <i
                        className={`bi bi-circle-fill text-${
                          input.uG ? "green" : "gray"
                        }-500`}
                      ></i>
                    </td>
                    <td className="py-3 px-4 text-center">
                      <i
                        className={`bi bi-circle-fill text-${
                          input.uW ? "green" : "gray"
                        }-500`}
                      ></i>
                    </td>
                    <td className="py-3 px-4 text-center">
                      <i
                        className={`bi bi-circle-fill text-${
                          input.oW ? "green" : "gray"
                        }-500`}
                      ></i>
                    </td>
                    <td className="py-3 px-4 text-center">
                      <i
                        className={`bi bi-circle-fill text-${
                          input.oG ? "green" : "gray"
                        }-500`}
                      ></i>
                    </td>
                    <td className="py-3 px-4 text-center">
                      <button
                        className="text-blue-500"
                        onClick={() => setActiveConfig(input.id)}
                      >
                        <i className="bi bi-gear-fill"></i>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        ))}
      </div>

      {/* Modal für Konfiguration */}
      {activeConfig && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
          <div className="bg-white p-8 rounded-lg shadow-lg w-96">
            <h2 className="text-xl font-bold mb-4">
              Konfiguration - XIO-PM {activeConfig}
            </h2>
            <button
              className="absolute top-4 right-4 text-gray-500 hover:text-gray-700"
              onClick={() => setActiveConfig(null)}
            >
              <i className="bi bi-x-lg"></i>
            </button>
            {/* Konfigurationsformular hier einfügen */}
            <form>
              <div className="mb-4">
                <label
                  className="block text-gray-700 text-sm font-bold mb-2"
                  htmlFor="bezeichnung"
                >
                  Bezeichnung
                </label>
                <input
                  type="text"
                  id="bezeichnung"
                  name="bezeichnung"
                  className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                  placeholder="Bezeichnung eingeben"
                />
              </div>
              <div className="mb-4">
                <label
                  className="block text-gray-700 text-sm font-bold mb-2"
                  htmlFor="ug"
                >
                  Unterer Grenzwert
                </label>
                <input
                  type="number"
                  id="ug"
                  name="ug"
                  className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
                  placeholder="Wert eingeben"
                />
              </div>
              {/* Weitere Felder hier hinzufügen */}
              <button
                type="button"
                className="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600"
                onClick={() => setActiveConfig(null)}
              >
                Speichern
              </button>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}

export default AnalogeEingaenge;