"use client";

import { Suspense, useEffect } from "react";
import { Box } from "@mantine/core";
import { RequireAuth } from "@/components/auth/RequireAuth";
import { PremiumLoader } from "@/components/motion/PremiumLoader";
import { useThemeStore } from "@/store/themeStore";
import { gradients } from "@/styles/tokens";

export default function ContratarLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  useEffect(() => {
    const root = document.documentElement;
    const scheme = useThemeStore.getState().colorScheme;
    root.setAttribute("data-mantine-color-scheme", "dark");
    return () => {
      root.setAttribute("data-mantine-color-scheme", scheme);
    };
  }, []);

  return (
    <Box
      component="main"
      className="noga-grid-bg"
      style={{
        minHeight: "100vh",
        background: gradients.dark,
        color: "#dce3f1",
      }}
    >
      <Suspense
        fallback={
          <PremiumLoader
            fullScreen
            label="Preparando configurador…"
          />
        }
      >
        <RequireAuth loadingLabel="Verificando sua conta…">
          {children}
        </RequireAuth>
      </Suspense>
    </Box>
  );
}