"use client";

import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";

import { Open_Sans, Oswald } from "next/font/google";
import HeaderBefore from "@/components/header-before";
import FooterBefore from "@/components/footer-before";
import 'bootstrap/dist/css/bootstrap.min.css';
import '../../styles/before-style.css';
import '../../styles/login-style.css';
import '../../styles/slide-menu.css';
import "../../styles/dark-style.css";
import '../../styles/header-footer.css';
import "../../styles/intlTelInput-min.css";




const openSans = Open_Sans({
  subsets: ['latin'],
  variable: '--font-open-sans',
});

const oswald = Oswald({
  subsets: ['latin'],
  variable: '--font-oswald',
});

// export const metadata: Metadata = {
//   title: "Global Influencer Marketing Agency & Platform | TheAgency",
//   description: "We are global Influencer marketing experts offering cutting-edge digital, TikTok, Instagram & YouTube influencer marketing campaigns, content creation, performance tracking and more.",
// };

export default function UnauthenticatedLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {

  const [authenticated, setAuthenticated] = useState(false);
  const [checked, setChecked] = useState(false);
  const router = useRouter();

  useEffect(() => {
    if (typeof window !== "undefined") {
      const token = localStorage.getItem("access_token");
      setAuthenticated(!!token);
    }
    setChecked(true);
  }, []);

  // Redirect to dashboard if authenticated
  useEffect(() => {
    if (checked && authenticated) {
      window.location.href = "/brand-offers"; // for MVP
      // window.location.href = "/dashboard"
    }
  }, [checked, authenticated, router]);

  // While checking auth or if authenticated, render nothing
  if (!checked || authenticated) {
    return null;
  }

  return (

    <div
      className={`${openSans.variable} ${oswald.variable} antialiased`}
    >
      {/* <ReactQueryProvider> */}
      <HeaderBefore />
      {children}
      <FooterBefore />
      {/* </ReactQueryProvider> */}
    </div>
  );
}