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

const LoopTDRChartActionBar: React.FC = () => {
  // Dynamische Basis-URL
  const BASE_URL =
    process.env.NODE_ENV === "development"
      ? process.env.NEXT_PUBLIC_MOCK_API ||
        "http://localhost:3001/kabelueberwachung"
      : `${window.location.origin}/CPL`; // Automatische Anpassung in Production

  const [vonDatum, setVonDatum] = useState<Date | null>(null);
  const [bisDatum, setBisDatum] = useState<Date | null>(null);

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

    // Datum formatieren
    const von = vonDatum.toISOString().split("T")[0];
    const bis = bisDatum.toISOString().split("T")[0];

    const [vonJahr, vonMonat, vonTag] = von.split("-");
    const [bisJahr, bisMonat, bisTag] = bis.split("-");

    // **Dynamische API-URL für Production und Development**
    const apiUrl = `${BASE_URL}?seite.ACP&DIA1=${vonJahr};${vonMonat};${vonTag};${bisJahr};${bisMonat};${bisTag};2;4`;

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

    fetch(apiUrl)
      .then((res) => {
        if (!res.ok) {
          throw new Error(`HTTP Fehler! Status: ${res.status}`);
        }
        return res.text();
      })
      .then((text) => {
        console.log("⬇️ API Antwort (Rohdaten):", text);
        try {
          const data = JSON.parse(text);
          console.log("✅ API Antwort (JSON):", data);
        } catch (error) {
          console.error("❌ Fehler: Antwort ist kein JSON!", text);
        }
      })
      .catch((err) => console.error("❌ Fehler beim Abrufen der Daten:", err));
  };

  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;