"use client";
// components/main/analogeEingaenge/AnalogInputsChart.tsx
import React, { useState, useEffect } from "react";
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  ResponsiveContainer,
} from "recharts";

interface HistoryDataPoint {
  t: string; // Timestamp
  m: number; // Messwert (Value)
  v: number; // Gültigkeit (0/1)
}

export default function AnalogInputsChart() {
  const [selectedInput, setSelectedInput] = useState<number>(1);
  const [historyData, setHistoryData] = useState<HistoryDataPoint[]>([]);
  const [isLoading, setIsLoading] = useState(false);

  // Simulierter API-Aufruf für Historische Daten
  const fetchHistoryData = async (inputNumber: number) => {
    setIsLoading(true);
    try {
      // Hier ersetzt du später mit deinem echten API-Call
      // Beispiel: const response = await fetch(`/api/analogInputs/history?input=${inputNumber}`);
      // const data = await response.json();

      // Temporär: Dummy-Daten für Simulation
      const now = new Date();
      const dummyData = Array.from({ length: 24 }, (_, i) => ({
        t: new Date(now.getTime() - i * 60 * 60 * 1000).toISOString(), // letzte 24 Stunden
        m: Math.random() * 100, // Zufälliger Wert
        v: 1, // Gültig
      })).reverse();

      setHistoryData(dummyData);
    } catch (error) {
      console.error("Fehler beim Laden der Historie:", error);
      setHistoryData([]);
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    fetchHistoryData(selectedInput);
  }, [selectedInput]);

  const handleInputChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setSelectedInput(Number(e.target.value));
  };

  return (
    <div className="w-full bg-white shadow-md rounded-lg p-4 border border-gray-200">
      <h2 className="text-lg font-bold mb-4">
        Historische Werte für Analogen Eingang der letzten 24 Stunden
      </h2>

      <div className="mb-4">
        <label className="mr-2 font-semibold" htmlFor="inputSelect">
          Eingang wählen:
        </label>
        <select
          id="inputSelect"
          className="border rounded p-1"
          value={selectedInput}
          onChange={handleInputChange}
        >
          {[...Array(8)].map((_, index) => (
            <option key={index} value={index + 1}>
              Eingang {index + 1}
            </option>
          ))}
        </select>
      </div>

      {isLoading ? (
        <div className="text-center text-gray-500">Lade Daten...</div>
      ) : (
        <div className="w-full h-[350px]">
          <ResponsiveContainer width="100%" height="100%">
            <LineChart
              data={historyData}
              margin={{ top: 10, right: 20, left: 0, bottom: 10 }}
            >
              <CartesianGrid strokeDasharray="3 3" />
              <XAxis
                dataKey="t"
                tickFormatter={(str) => str.substring(11, 16)}
              />
              <YAxis />
              <Tooltip labelFormatter={(label) => `Zeit: ${label}`} />
              <Line
                type="monotone"
                dataKey="m"
                stroke="#4A90E2"
                strokeWidth={2}
                dot={false}
              />
            </LineChart>
          </ResponsiveContainer>
        </div>
      )}
    </div>
  );
}