'use client';

import { useLayoutEffect, useState } from 'react';
import { usePathname } from 'next/navigation';
import { Navbar } from './Navbar';
import { shouldHideChromeForSessionFlow } from '@/utils/sessionFlow';

const CHROMELESS_PREFIXES = ['/mobile', '/session-page'];

export function SiteChrome({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const [hideSessionPaymentChrome, setHideSessionPaymentChrome] = useState(() =>
    shouldHideChromeForSessionFlow(pathname),
  );

  useLayoutEffect(() => {
    setHideSessionPaymentChrome(shouldHideChromeForSessionFlow(pathname));
  }, [pathname]);

  const hideChrome =
    CHROMELESS_PREFIXES.some((prefix) => pathname?.startsWith(prefix)) ||
    hideSessionPaymentChrome;

  if (hideChrome) {
    return (
      <div className="min-h-[100dvh] flex flex-col">
        <main className="flex-1 min-h-0 flex flex-col">{children}</main>
      </div>
    );
  }

  return (
    <div className="min-h-screen flex flex-col">
      <Navbar />
      <main className="flex-1 pt-16">{children}</main>
    </div>
  );
}