CPLv4.0/components/modales/kueModal/LoopTDRChartActionBar.tsx

import React, { useState } from "react";
import DateRangePicker from "./DateRangePicker";

const LoopTDRChartActionBar: React.FC = () => {
  const BASE_URL =
    process.env.NODE_ENV === "development"
      ? process.env.NEXT_PUBLIC_MOCK_API ||
        "http://localhost:3002/kabelueberwachung"
      : `${window.location.origin}/CPL`;

  const [vonDatum, setVonDatum] = useState<Date>(new Date()); // Standard: Heute
  const [bisDatum, setBisDatum] = useState<Date>(new Date()); // Standard: Heute

  const [filteredData, setFilteredData] = useState<any[]>([]); // Speichert die gefilterten Daten
  const [errorMessage, setErrorMessage] = useState<string | null>(null); // Fehlernachricht

  const handleAktualisieren = () => {
    if (!vonDatum || !bisDatum) {
      console.error("❌ Bitte wählen Sie ein gültiges Startdatum aus.");
      return;
    }

    // Falls `bisDatum` nicht gesetzt ist, verwende `vonDatum`
    const bisDatumValid = bisDatum ? bisDatum : vonDatum;

    // Setze Fehlermeldung zurück, bevor eine neue Anfrage gestartet wird
    setErrorMessage(null);
    setFilteredData([]);

    // **Von- und Bis-Datum in Unix-Timestamp (nur Datum, ohne Uhrzeit)**
    const vonTimestamp = new Date(
      vonDatum.getFullYear(),
      vonDatum.getMonth(),
      vonDatum.getDate(),
      0,
      0,
      0,
      0
    ).getTime();

    const bisTimestamp = new Date(
      bisDatumValid.getFullYear(),
      bisDatumValid.getMonth(),
      bisDatumValid.getDate(),
      23,
      59,
      59,
      999
    ).getTime();

    const apiUrl = `${BASE_URL}?seite.ACP&DIA1=${
      new Date(vonTimestamp).toISOString().split("T")[0]
    };${new Date(bisTimestamp).toISOString().split("T")[0]};2;4`;

    console.log("📡 API URL:", apiUrl);

    fetch(apiUrl)
      .then((res) => {
        if (!res.ok) {
          throw new Error(`HTTP Fehler! Status: ${res.status}`);
        }
        return res.json();
      })
      .then((data) => {
        console.log("📡 API URL:", apiUrl);
        console.log("📥 Rohdaten (vor Filterung):", data);

        // **Filtere die Daten basierend auf Unix-Zeit**
        const filtered = data.filter((item: any) => {
          const itemDateParts = item.t.split(" ")[0].split("-"); // Trenne Datum von Uhrzeit
          const itemTimestamp = new Date(
            Number(itemDateParts[2]), // Jahr
            Number(itemDateParts[1]) - 1, // Monat (JS zählt ab 0)
            Number(itemDateParts[0]), // Tag
            0,
            0,
            0,
            0
          ).getTime();

          return itemTimestamp >= vonTimestamp && itemTimestamp <= bisTimestamp;
        });

        console.log("🔍 Gefilterte Daten:", filtered);

        if (filtered.length > 0) {
          // Falls Daten vorhanden sind, zeige sie an und entferne die Fehlermeldung
          setFilteredData(filtered);
          setErrorMessage(null);
        } else {
          // Falls gar keine Daten für den Zeitraum existieren
          setFilteredData([]);
          setErrorMessage("❌ Kein Daten im gewählten Zeitraum gefunden.");
        }
      })
      .catch((err) => {
        console.error("❌ Fehler beim Abrufen der Daten:", err);
        setErrorMessage("❌ Fehler beim Laden der Daten.");
      });
  };

  return (
    <div className="flex flex-wrap justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2 mr-4">
      <DateRangePicker setVonDatum={setVonDatum} setBisDatum={setBisDatum} />

      <button
        onClick={handleAktualisieren}
        className="px-3 py-1 bg-green-500 text-white rounded text-sm"
      >
        Aktualisieren
      </button>

      {errorMessage && <p className="text-red-500 mt-2">{errorMessage}</p>}
    </div>
  );
};

export default LoopTDRChartActionBar;