"use client"; // app/wait/page.jsx
import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { ClipLoader } from "react-spinners";

// IndexedDB functions only in the browser
let storePage, getPage;
if (typeof window !== "undefined") {
  const indexedDBModule = require("../utils/indexedDB");
  storePage = indexedDBModule.storePage;
  getPage = indexedDBModule.getPage;
}

export default function WaitPage() {
  const router = useRouter();

  useEffect(() => {
    // Store the page as a Blob in IndexedDB in the background
    if (typeof window !== "undefined" && storePage) {
      const pageContent = `
        <div style="text-align: center; margin-top: 100px;">
          <h1>Bitte warten...</h1>
          <div class="spinner"></div>
          <p>Die Seite wird automatisch neu geladen.</p>
        </div>`;
      storePage("waitPage", new Blob([pageContent], { type: "text/html" }));
    }

    // Timer to redirect after 20 seconds
    const timer = setTimeout(() => {
      router.push("/");
    }, 20000);

    // Cleanup timer when component is unmounted
    return () => clearTimeout(timer);
  }, [router]);

  return (
    <div style={{ textAlign: "center", marginTop: "100px" }}>
      <h1>Bitte warten...</h1>
      <ClipLoader color={"#76c7c0"} size={50} /> {/* Spinner */}
      <p>Die Seite wird automatisch neu geladen.</p>
    </div>
  );
}