import React, { useState, useEffect } from "react";
import { useDispatch } from "react-redux";
import { setTDRChartData } from "../../../../../../redux/slices/kabelueberwachungChartSlice";

const TDRChartActionBar: React.FC = () => {
  const dispatch = useDispatch();
  const [jahr, setJahr] = useState(new Date().getFullYear());
  const [monat, setMonat] = useState(new Date().getMonth() + 1);
  const [dateiListe, setDateiListe] = useState<string[]>([]);
  const [ausgewählteDatei, setAusgewählteDatei] = useState<string>("");
  const [sortAscending, setSortAscending] = useState(true);

  const getYearFolderName = (year: number): string => {
    return `Year_${String(year).slice(-2)}`;
  };

  // 📌 Laden der Datei-Liste aus directory.json
  useEffect(() => {
    const loadDirectory = async () => {
      const yearFolder = getYearFolderName(jahr);
      const monthFolder = `Month_${monat.toString().padStart(2, "0")}`;
      const path = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/directory.json`;

      try {
        const response = await fetch(path);
        if (!response.ok) {
          console.error(`Fehler beim Laden der Datei.`);
          setDateiListe([]);
          setAusgewählteDatei("");
          return;
        }

        const data = await response.json();
        let files = data.files.map(
          (file: { filename: string }) => file.filename
        );

        if (!sortAscending) {
          files.reverse(); // 🔄 Falls bereits sortiert, Reihenfolge umkehren
        }

        setDateiListe(files);
        if (files.length > 0) {
          setAusgewählteDatei(files[0]); // 🟢 Automatische Auswahl der ersten Datei
          loadAndStoreChartData(files[0]); // 🟢 Chart-Daten sofort aktualisieren
        }
      } catch (error) {
        console.error("Fehler beim Laden der Datei directory.json:", error);
      }
    };

    loadDirectory();
  }, [jahr, monat, sortAscending]);

  // 📌 Daten für die ausgewählte Datei laden
  const handleDateiAuswahl = (event: React.ChangeEvent<HTMLSelectElement>) => {
    const selectedFile = event.target.value;
    setAusgewählteDatei(selectedFile);
    loadAndStoreChartData(selectedFile);
  };

  // 📌 Sortieren der Datei-Liste und Chart sofort aktualisieren
  const handleSortToggle = () => {
    setSortAscending(!sortAscending);
    setDateiListe((prevListe) => {
      const newListe = [...prevListe].reverse(); // 🔄 Reihenfolge umkehren
      if (newListe.length > 0) {
        setAusgewählteDatei(newListe[0]); // 🟢 Erste Datei nach dem Sortieren auswählen
        loadAndStoreChartData(newListe[0]); // 🟢 Chart sofort aktualisieren
      }
      return newListe;
    });
  };

  // 📌 Daten abrufen und in Redux speichern
  const loadAndStoreChartData = async (filename: string) => {
    const yearFolder = getYearFolderName(jahr);
    const monthFolder = `Month_${monat.toString().padStart(2, "0")}`;
    const filePath = `/CPLmockData/LastTDR/kue_01/${yearFolder}/${monthFolder}/${filename}`;

    try {
      const response = await fetch(filePath);
      if (!response.ok) {
        console.error(`Fehler beim Laden der Datei.`);
        return;
      }

      const data = await response.json();
      dispatch(setTDRChartData(data));
    } catch (error) {
      console.error("Fehler beim Laden der JSON-Daten:", error);
    }
  };

  return (
    <div className="flex flex-wrap justify-end items-center p-2 bg-gray-100 rounded-lg space-x-2">
      {/* Jahr Auswahl */}
      <label htmlFor="jahrSelect" className="text-sm font-semibold">
        Jahr
      </label>
      <select
        id="jahrSelect"
        className="border rounded px-2 py-1"
        value={jahr}
        onChange={(e) => setJahr(Number(e.target.value))}
      >
        {Array.from({ length: 11 }, (_, i) => 2020 + i).map((year) => (
          <option key={year} value={year}>
            {year}
          </option>
        ))}
      </select>

      {/* Monat Auswahl */}
      <label htmlFor="monatSelect" className="text-sm font-semibold">
        Monat
      </label>
      <select
        id="monatSelect"
        className="border rounded px-2 py-1"
        value={monat}
        onChange={(e) => setMonat(Number(e.target.value))}
      >
        {Array.from({ length: 12 }, (_, i) => i + 1).map((month) => (
          <option key={month} value={month}>
            {month.toString().padStart(2, "0")}
          </option>
        ))}
      </select>

      {/* Datei Auswahl */}
      <label htmlFor="dateiSelect" className="text-sm font-semibold">
        Auswahl
      </label>
      <select
        id="dateiSelect"
        className="border rounded px-2 py-1"
        value={ausgewählteDatei}
        onChange={handleDateiAuswahl}
      >
        {dateiListe.map((file, index) => (
          <option key={index} value={file}>
            {file}
          </option>
        ))}
      </select>

      {/* Sortieren-Button */}
      <button
        onClick={handleSortToggle}
        className="px-3 py-1 bg-blue-500 text-white rounded text-sm"
      >
        <i className={`bi bi-arrow-${sortAscending ? "down" : "up"}-short`} />
        <span className="ml-1">Sortieren</span>
      </button>
    </div>
  );
};

export default TDRChartActionBar;