"use client"; // Wichtig, um sicherzustellen, dass der Code nur auf dem Client ausgeführt wird
import React, { useEffect, useState, useRef } from "react";
import { Icon } from "@iconify/react";

// indexDB-Funktionen nur im Browser importieren
let storePDF, getPDF;
if (typeof window !== "undefined") {
  const indexedDBModule = require("../utils/indexedDB");
  storePDF = indexedDBModule.storePDF;
  getPDF = indexedDBModule.getPDF;
}

function Footer() {
  const [pdfName, setPdfName] = useState("");
  const [showSlider, setShowSlider] = useState(false);
  const sliderRef = useRef(null);

  const pdfFiles = [
    // "ACCESS.PDF",
    // "CPL.PDF",
    //"CPL220.PDF",
    //"CPL3.PDF",
    //"Daten_APL.pdf",
    //"Daten_CDO.pdf",
    //"Daten_DPL.pdf",
    //"KUE605.PDF",
    //"KUE605uC.PDF",
    //"KUE605uF.PDF",
    "KUE705FO.PDF",
    //"Modem.pdf",
    //"PST212.PDF",
    //"Temper.pdf",
    //"Wasser.pdf",
    //"XIOPM.PDF",
  ];

  useEffect(() => {
    if (typeof window !== "undefined" && getPDF && storePDF) {
      async function loadAndStorePDFs() {
        try {
          for (const fileName of pdfFiles) {
            const storedPdf = await getPDF(fileName);
            if (!storedPdf) {
              const response = await fetch(`/doku/${fileName}`);
              const pdfBlob = await response.blob();
              await storePDF(fileName, pdfBlob);
              console.log(`${fileName} in IndexedDB gespeichert.`);
            }
          }
        } catch (error) {
          console.error("Fehler beim Laden oder Speichern der PDFs:", error);
        }
      }

      loadAndStorePDFs();
    }
  }, [getPDF, storePDF]);

  const loadPDF = async (fileName) => {
    if (typeof window !== "undefined" && getPDF) {
      const storedPdf = await getPDF(fileName);
      if (storedPdf) {
        const pdfUrl = URL.createObjectURL(storedPdf);
        window.open(pdfUrl, "_blank"); // Öffnet die PDF in einem neuen Tab
        setPdfName(fileName);
        setShowSlider(false);
      } else {
        console.error("PDF nicht in IndexedDB gefunden");
      }
    }
  };

  // Close slider when clicking outside
  useEffect(() => {
    function handleClickOutside(event) {
      if (sliderRef.current && !sliderRef.current.contains(event.target)) {
        setShowSlider(false);
      }
    }

    if (showSlider) {
      document.addEventListener("mousedown", handleClickOutside);
    } else {
      document.removeEventListener("mousedown", handleClickOutside);
    }

    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [showSlider]);

  return (
    <footer className="relative bg-gray-300 p-4 overflow-hidden text-black">
      <div className="container mx-auto flex justify-between">
        <div className="flex flex-row space-x-2">
          <Icon
            icon="material-symbols:factory-outline"
            className="text-xl text-blue-400"
          />
          <p className="text-sm">Littwin Systemtechnik GmbH & Co. KG</p>
        </div>
        <div className="flex flex-row space-x-2">
          <Icon icon="charm:phone" className="text-xl text-blue-400" />
          <p className="text-sm">Telefon: 04402 972577-0</p>
        </div>
        <div className="flex flex-row space-x-2">
          <Icon icon="mdi:email-outline" className="text-xl text-blue-400" />
          <p className="text-sm">kontakt@littwin-systemtechnik.de</p>
        </div>
        <div
          className="flex flex-row space-x-2 cursor-pointer"
          onClick={() => setShowSlider(true)}
        >
          <Icon icon="bi:book" className="text-xl text-blue-400" />
          <p className="text-sm">Handbücher</p>
        </div>
      </div>

      <div
        ref={sliderRef}
        className={`fixed top-0 right-0 w-64 h-full bg-white shadow-lg transform transition-transform duration-300 ${
          showSlider ? "translate-x-0" : "translate-x-full"
        }`}
      >
        <div className="p-4 flex justify-between items-center border-b">
          <h3 className="text-lg font-semibold">PDF Handbücher</h3>
          <button
            className="text-gray-500 hover:text-gray-800"
            onClick={() => setShowSlider(false)}
          >
            <Icon icon="carbon:close" className="text-2xl" />
          </button>
        </div>

        <div className="p-4">
          <ul>
            {pdfFiles.map((fileName) => (
              <li
                key={fileName}
                className="cursor-pointer text-blue-500 hover:underline mb-2"
                onClick={() => loadPDF(fileName)}
              >
                {fileName}
              </li>
            ))}
          </ul>
        </div>
      </div>
    </footer>
  );
}

export default Footer;