"use client";

import { useEffect, useState } from "react";
import { AppShell } from "@/components/AppShell";
import { api } from "@/lib/api-client";

export default function Home() {
  const [username, setUsername] = useState<string | null>(null);

  useEffect(() => {
    api
      .get<{ user: { username: string } }>("/api/auth/me")
      .then((data) => setUsername(data.user.username))
      .catch(() => {
        // Session abgelaufen/ungültig -- Middleware leitet beim nächsten Request um.
        window.location.href = "/login";
      });
  }, []);

  // Nach dem Abmelden führt der Zurück-Knopf zu dieser Seite aus dem Browser-Cache (bfcache)
  // zurück -- OHNE neue Anfrage, also ohne dass Middleware oder Session-Prüfung greifen. Die
  // eingefrorene Ansicht darf nicht stehen bleiben: Bei einer aus dem bfcache zurückgeholten
  // Seite die Session erneut prüfen und bei fehlender Anmeldung sofort auf /login gehen.
  useEffect(() => {
    function onPageShow(e: PageTransitionEvent) {
      if (!e.persisted) return;
      api.get("/api/auth/me").catch(() => {
        window.location.href = "/login";
      });
    }
    window.addEventListener("pageshow", onPageShow);
    return () => window.removeEventListener("pageshow", onPageShow);
  }, []);

  if (username === null) {
    return (
      <div className="flex flex-1 items-center justify-center">
        <p className="text-sm text-muted">Lädt…</p>
      </div>
    );
  }

  return <AppShell username={username} />;
}