import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import Header from './Header';
import BottomNav from './BottomNav';
import { useAuthStore } from '@/stores/authStore';
import { useUIStore } from '@/stores/uiStore';

export default function AppShell({ children }: { children: React.ReactNode }) {
  const { isAuthenticated } = useAuthStore();
  const { isOnline, setOnline } = useUIStore();
  const location = useLocation();

  // Don't show header/nav on login pages
  const isLoginPage = ['/admin', '/coach', '/student', '/admin/login', '/login'].some(path => 
    location.pathname === path || location.pathname.startsWith('/login/')
  );

  useEffect(() => {
    const handleOnline = () => setOnline(true);
    const handleOffline = () => setOnline(false);
    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);
    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, [setOnline]);

  return (
    <div className="min-h-screen bg-gray-50">
      {isLoginPage || !isAuthenticated ? (
        <main className="min-h-screen">{children}</main>
      ) : (
        <>
          <Header />
          <main className="pt-14 pb-20 min-h-screen">{children}</main>
          <BottomNav />
        </>
      )}
    </div>
  );
}
