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

function AnalogeEingaenge() {
  const [activeConfig, setActiveConfig] = useState(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 },
  ];

  // Mock-Daten für XIO-PM 1
  const xioPmInputs = [
    {
      id: 1,
      value: 1.34,
      name: "Test1",
      uW: true,
      uG: true,
      oW: false,
      oG: true,
    },
    {
      id: 2,
      value: 7.94,
      name: "----",
      uW: true,
      uG: true,
      oW: true,
      oG: true,
    },
    {
      id: 3,
      value: 7.94,
      name: "----",
      uW: false,
      uG: true,
      oW: true,
      oG: true,
    },
    {
      id: 4,
      value: 7.94,
      name: "----",
      uW: true,
      uG: true,
      oW: true,
      oG: true,
    },
    {
      id: 5,
      value: 6.13,
      name: "----",
      uW: true,
      uG: true,
      oW: true,
      oG: true,
    },
    {
      id: 6,
      value: 8.77,
      name: "----",
      uW: true,
      uG: true,
      oW: false,
      oG: true,
    },
    {
      id: 7,
      value: 10.59,
      name: "----",
      uW: true,
      uG: true,
      oW: true,
      oG: true,
    },
    {
      id: 8,
      value: 15.11,
      name: "----",
      uW: true,
      uG: true,
      oW: false,
      oG: true,
    },
  ];

  return (
    <div className="flex flex-col h-[calc(100vh-13vh-8vh)] laptop:h-[calc(100vh-10vh-6vh)] xl:h-[calc(100vh-10vh-6vh)] bg-gray-100">
      {/* Main Content */}
      <div className="flex-grow grid grid-cols-2 gap-4 p-4">
        {/* Erste Box */}
        <div className="border rounded-lg shadow-md p-2 bg-white">
          <h3 className="text-sm font-semibold mb-1">Analoge Eingänge</h3>
          <table className="w-full text-xs text-left ">
            <thead className="bg-gray-100 text-gray-700">
              <tr>
                <th className="px-1 py-1">Eingang</th>
                <th className="px-1 py-1">Wert</th>
                <th className="px-1 py-1">Bezeichnung</th>
                <th className="px-1 py-1 text-center">uW</th>
                <th className="px-1 py-1 text-center">uG</th>
                <th className="px-1 py-1 text-center">oW</th>
                <th className="px-1 py-1 text-center">oG</th>
                <th className="px-1 py-1 text-center">Aktion</th>
              </tr>
            </thead>
            <tbody>
              {inputs.map((input) => (
                <tr key={input.id} className="border-t">
                  <td className="px-1 py-1">{input.id}</td>
                  <td className="px-1 py-1">{input.value}</td>
                  <td className="px-1 py-1">{input.name}</td>
                  <td className="px-1 py-1 text-center">
                    <span
                      className={input.uW ? "text-green-500" : "text-gray-400"}
                    >
                      ●
                    </span>
                  </td>
                  <td className="px-1 py-1 text-center">
                    <span
                      className={input.uG ? "text-green-500" : "text-gray-400"}
                    >
                      ●
                    </span>
                  </td>
                  <td className="px-1 py-1 text-center">
                    <span
                      className={input.oW ? "text-orange-500" : "text-gray-400"}
                    >
                      ●
                    </span>
                  </td>
                  <td className="px-1 py-1 text-center">
                    <span
                      className={input.oG ? "text-green-500" : "text-gray-400"}
                    >
                      ●
                    </span>
                  </td>
                  <td className="px-1 py-1 text-center">
                    <button
                      onClick={() => setActiveConfig(input.id)}
                      className="text-blue-500 hover:text-blue-700"
                    >
                      <iconify-icon icon="mdi:cog-outline"></iconify-icon>
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Zweite Box */}
        <div className="border rounded-lg shadow-md p-2 bg-white">
          <h3 className="text-sm font-semibold mb-1">Diagramm</h3>
          <p>Diagramm wird hier eingefügt</p>
        </div>

        {/* Dritte Box */}
        <div className="border rounded-lg shadow-md p-2 bg-white">
          <h3 className="text-sm font-semibold mb-1">XIO-PM 1</h3>
          <table className="w-full text-xs text-left">
            <thead className="bg-gray-100 text-gray-700">
              <tr>
                <th className="px-1 py-1">Eingang</th>
                <th className="px-1 py-1">Wert</th>
                <th className="px-1 py-1">Bezeichnung</th>
                <th className="px-1 py-1 text-center">uW</th>
                <th className="px-1 py-1 text-center">uG</th>
                <th className="px-1 py-1 text-center">oW</th>
                <th className="px-1 py-1 text-center">oG</th>
                <th className="px-1 py-1 text-center">Aktion</th>
              </tr>
            </thead>
            <tbody>
              {xioPmInputs.map((input) => (
                <tr key={input.id} className="border-t">
                  <td className="px-1 py-1">{input.id}</td>
                  <td className="px-1 py-1">{input.value}</td>
                  <td className="px-1 py-1">{input.name}</td>
                  <td className="px-1 py-1 text-center">
                    <span
                      className={input.uW ? "text-green-500" : "text-gray-400"}
                    >
                      ●
                    </span>
                  </td>
                  <td className="px-1 py-1 text-center">
                    <span
                      className={input.uG ? "text-green-500" : "text-gray-400"}
                    >
                      ●
                    </span>
                  </td>
                  <td className="px-1 py-1 text-center">
                    <span
                      className={input.oW ? "text-orange-500" : "text-gray-400"}
                    >
                      ●
                    </span>
                  </td>
                  <td className="px-1 py-1 text-center">
                    <span
                      className={input.oG ? "text-green-500" : "text-gray-400"}
                    >
                      ●
                    </span>
                  </td>
                  <td className="px-1 py-1 text-center">
                    <button
                      onClick={() => setActiveConfig(input.id)}
                      className="text-blue-500 hover:text-blue-700"
                    >
                      <iconify-icon icon="mdi:cog-outline"></iconify-icon>
                    </button>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Vierte Box */}
        <div className="border rounded-lg shadow-md p-2 bg-white">
          <h3 className="text-sm font-semibold mb-1">XIO-PM 2</h3>
          <p>Inhalt für XIO-PM 2 wird hier eingefügt</p>
        </div>
      </div>
    </div>
  );
}

export default AnalogeEingaenge;