"use client"; // pages/analogeEingaenge.js
import React, { useState } from "react";
import AnalogeEingaengeComponent from "../components/modules/AnalogeEingaengeComponent";
import XioPM from "../components/modules/XioPM";

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

  // Mock-Daten für XIO-PM 1
  const xioPm1Inputs = [
    {
      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: 7.94,
      name: "----",
      uW: true,
      uG: true,
      oW: true,
      oG: true,
    },
    {
      id: 7,
      value: 7.94,
      name: "----",
      uW: true,
      uG: true,
      oW: true,
      oG: true,
    },
    {
      id: 8,
      value: 7.94,
      name: "----",
      uW: true,
      uG: true,
      oW: true,
      oG: true,
    },
  ];

  // Mock-Daten für XIO-PM 2
  const xioPm2Inputs = [
    {
      id: 1,
      value: 2.78,
      name: "Test2",
      uW: true,
      uG: false,
      oW: true,
      oG: false,
    },
    {
      id: 2,
      value: 4.33,
      name: "----",
      uW: false,
      uG: true,
      oW: false,
      oG: true,
    },
    {
      id: 3,
      value: 8.94,
      name: "----",
      uW: true,
      uG: true,
      oW: false,
      oG: true,
    },
    {
      id: 4,
      value: 9.44,
      name: "----",
      uW: true,
      uG: false,
      oW: true,
      oG: false,
    },
    {
      id: 5,
      value: 6.13,
      name: "----",
      uW: true,
      uG: true,
      oW: true,
      oG: true,
    },
    {
      id: 6,
      value: 7.94,
      name: "----",
      uW: true,
      uG: true,
      oW: true,
      oG: true,
    },
    {
      id: 7,
      value: 7.94,
      name: "----",
      uW: true,
      uG: true,
      oW: true,
      oG: true,
    },
    {
      id: 8,
      value: 7.94,
      name: "----",
      uW: true,
      uG: true,
      oW: true,
      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">
      <div className="flex-grow grid grid-cols-2 gap-4 p-4">
        <AnalogeEingaengeComponent />

        {/* 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>

        <XioPM
          title="XIO-PM 1"
          data={xioPm1Inputs}
          onConfigClick={(id) => setActiveConfig(id)}
        />

        <XioPM
          title="XIO-PM 2"
          data={xioPm2Inputs}
          onConfigClick={(id) => setActiveConfig(id)}
        />
      </div>
    </div>
  );
}

export default AnalogeEingaenge;