import "./globals.css";
import Provider from "./components/Provider";
import Nav from "./components/Navbar";
import { ReactQueryProvider } from "./ReactQueryProvider";
import { AuthOptions } from "@/app/api/auth/[...nextauth]/authOptions";
import { getServerSession } from "next-auth/next";
import { cache } from "react";
import { Inter, Manrope } from "next/font/google";
import { Toaster } from "@/app/shadcn_components/ui/toaster";
import { SpeedInsights } from "@vercel/speed-insights/next";
import type { Metadata } from "next";

// If loading a variable font, you don't need to specify the font weight
const inter = Inter({
  subsets: ["latin"],
  variable: "--font-inter",
});

const manrope = Manrope({
  subsets: ["latin"],
  variable: "--font-manrope",
  weight: ["400", "500", "700", "800"],
});

export const metadata = {
  title: "Ara",
  description: "Ara is Domna’s portfolio intelligence platform that turns housing stock data into clear, costed retrofit and investment plans.",
  icons: {
    icon: [
      {
        url: "/domna-favicon-navy.ico",
        media: "(prefers-color-scheme: light)",
      },
      {
        url: "/domna-favicon-white.ico",
        media: "(prefers-color-scheme: dark)",
      },
    ],
  },
};

const getSession = cache(async () => {
  const session = await getServerSession(AuthOptions);
  return session;
});

function Footer() {
  return (
    <footer className="bg-brandblue text-white p-4 text-center border-t border-gray-300 print:hidden">
      <p>
        &copy; {new Date().getFullYear()} Domna. All rights reserved. Domna
        proprietary IP.
      </p>
      <p>
        All intellectual property rights are retained by the respective owners.
      </p>
    </footer>
  );
}

export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const session = await getSession();
  const userImage = session?.user?.image;

  return (
    <html lang="en" className={`${inter.className} ${manrope.variable}`}>
      <body className="min-h-screen flex flex-col">
        <Provider>
          <ReactQueryProvider>
            <Nav userImage={userImage} />
            <main className="flex-grow">{children}</main>
            <Toaster />
            <Footer />
          </ReactQueryProvider>
        </Provider>
        <SpeedInsights />
      </body>
    </html>
  );
}
