"use client";

import { ResponsiveNav } from "@/layout/ResponsiveNav";
import { useNavigation } from "@/hooks/useNavigation";
import React, { ReactNode } from "react";
import { useAuth } from "@/hooks/auth";
import { isProfileComplete as checkProfileComplete } from "@/lib/utils.client";
import { useProfileBannerPreference } from "@/hooks/preferences/useProfileBannerPreference";

export default function ClientLayout({ children }: { readonly children: ReactNode }) {
  const { isMobile } = useNavigation();
  const { state } = useAuth();
  const { user } = state;
  const { ignoreBanner, setIgnoreBanner } = useProfileBannerPreference(user?.id);

  // Determine if the profile banner will be visible.
  // The banner is shown if a user exists AND their profile is incomplete.
  const isBannerVisible = !!user && !checkProfileComplete(user) && !ignoreBanner;

  // Consolidate all padding/margin logic into one variable
  let topSpacing = "";
  
  if (isMobile) {
    // Mobile: base padding + additional margin if banner is visible
    topSpacing = isBannerVisible ? "mt-36" : "mt-24"; 
  } else {
    // Desktop: base padding + additional margin if banner is visible  
    topSpacing = isBannerVisible ? "mt-32" : "mt-20";
  }

  return (
    <div className="min-h-screen xl:flex">
      {/* Pass the banner's visibility state to the navigation component */}
      <ResponsiveNav bannerVisible={isBannerVisible} onDismissBanner={() => {setIgnoreBanner(true);}} />

      <main
        className={`p-4 ${topSpacing} pb-24 mx-auto max-w-[1536px] md:p-6 w-full`}
      >
        {children}
      </main>
    </div>
  );
}