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

const LoopTDRChartActionBar: React.FC = () => {
  const BASE_URL = "http://localhost:3002";

  const [vonDatum, setVonDatum] = useState<Date>(new Date());
  const [bisDatum, setBisDatum] = useState<Date>(new Date());
  const [filteredData, setFilteredData] = useState<any[]>([]);
  const [errorMessage, setErrorMessage] = useState<string | null>(null);

  useEffect(() => {
    handleAktualisieren();
  }, []);

  const fetchAllData = async () => {
    let index = 0;
    let allData: any[] = [];

    while (true) {
      const url = `${BASE_URL}/${index}`;
      try {
        const response = await fetch(url);

        if (!response.ok) {
          if (response.status === 404) {
            console.log(
              `📡 Kein weiteres Objekt gefunden bei Index ${index}, Stoppe Abruf.`
            );
            break;
          }
          throw new Error(`Fehler beim Abrufen von ${url}: ${response.status}`);
        }

        const jsonData = await response.json();
        allData.push(jsonData);
        index++; // Nächste URL abrufen
      } catch (error) {
        console.error(`❌ Fehler bei ${url}:`, error);
        break; // Falls ein Fehler auftritt, Abbruch der Schleife
      }
    }

    return allData;
  };

  const handleAktualisieren = async () => {
    try {
      setErrorMessage(null);
      setFilteredData([]);

      console.log("📡 API Haupt-URL:", BASE_URL);

      // **Alle verfügbaren JSON-Objekte abrufen**
      const allData = await fetchAllData();

      if (allData.length === 0) {
        console.error("❌ Keine Daten gefunden!");
        setErrorMessage("❌ Keine Daten gefunden.");
        return;
      }

      console.log("📥 Alle abgerufenen JSON-Daten:");
      console.table(allData);

      // **Daten filtern nach Datum**
      const vonTimestamp = new Date(vonDatum).setHours(0, 0, 0, 0);
      const bisTimestamp = new Date(bisDatum).setHours(23, 59, 59, 999);

      const filtered = allData.filter((item: any) => {
        const itemDateParts = item.t.split(" ")[0].split("-");
        const itemTimestamp = new Date(
          Number(itemDateParts[2]), // Jahr
          Number(itemDateParts[1]) - 1, // Monat (JS zählt ab 0)
          Number(itemDateParts[0]) // Tag
        ).setHours(0, 0, 0, 0);

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

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

      setFilteredData(filtered);
    } catch (error) {
      console.error("❌ Fehler beim Abrufen der Daten:", error);
      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>
    </div>
  );
};

export default LoopTDRChartActionBar;