import { useNavigate } from "@tanstack/react-router";
import { useEffect, useState, type ReactNode } from "react";
import { cerrarSesion, sesionValida, useAppState } from "@/lib/store";
import { BrandMark } from "@/components/BrandLogo";

/** Bloquea el acceso al panel si no hay token Bearer vigente del API de socios. */
export function RequireAuth({ children }: { children: ReactNode }) {
  const navigate = useNavigate();
  const estado = useAppState();
  const [listo, setListo] = useState(false);

  useEffect(() => {
    setListo(true);
  }, []);

  const autenticado = sesionValida(estado);

  useEffect(() => {
    if (!listo || autenticado) return;
    // Token ausente o expirado: se limpia la sesión y se vuelve al login.
    if (estado.sesionActiva || estado.auth) cerrarSesion();
    void navigate({ to: "/", replace: true });
  }, [listo, autenticado, estado.sesionActiva, estado.auth, navigate]);

  if (!listo || !autenticado) {
    return (
      <div className="grid min-h-screen place-items-center bg-background px-4 font-sans">
        <div className="flex flex-col items-center gap-4 text-center">
          <BrandMark />
          <p className="text-sm text-muted-foreground">Verificando tu sesión de socio…</p>
        </div>
      </div>
    );
  }

  return <>{children}</>;
}