'use client';

import { usePathname } from 'next/navigation';
import { useState, useEffect } from 'react';
import { Header } from './Header';
import { Footer } from './Footer';
import { UpdateNotification } from './UpdateNotification';
import * as swRegistration from '../lib/serviceWorkerRegistration';

export function RootLayoutClient({ children }: { children: React.ReactNode }) {
  const pathname = usePathname();
  const isAdminRoute = pathname?.startsWith('/admin');
  const isCheckoutSuccess = pathname?.startsWith('/checkout/success');
  const [updateAvailable, setUpdateAvailable] = useState<ServiceWorkerRegistration | null>(null);

  useEffect(() => {
    // Register service worker with update detection
    swRegistration.register({
      onUpdate: (registration) => {
        console.log('New version available!');
        setUpdateAvailable(registration);
      },
      onSuccess: () => {
        console.log('Service worker registered successfully');
      }
    });
  }, []);

  if (isAdminRoute || isCheckoutSuccess) {
    // Admin routes and checkout success render without header/footer
    return (
      <>
        {children}
        <UpdateNotification registration={updateAvailable} />
      </>
    );
  }

  // Regular routes render with header/footer
  return (
    <>
      <Header />
      <main className="flex-1 max-w-[1600px] w-full mx-auto pb-8 sm:pb-12 px-4 sm:px-6 lg:px-8 overflow-hidden" style={{ paddingTop: '110px' }}>
        {children}
      </main>
      <Footer />
      <UpdateNotification registration={updateAvailable} />
    </>
  );
}