'use client';

import React, { useEffect } from 'react';
import { useRouter, usePathname } from 'next/navigation';
import { AuthProvider, useAuth } from '@/lib/AuthContext';
import LayoutShell from './LayoutShell';

const PUBLIC_PATHS = ['/login'];

function AuthGate({ children }: { children: React.ReactNode }) {
  const { isAuthenticated, loading } = useAuth();
  const router = useRouter();
  const pathname = usePathname();

  useEffect(() => {
    if (loading) return;
    const isPublic = PUBLIC_PATHS.includes(pathname);
    if (!isAuthenticated && !isPublic) {
      router.replace('/login');
    }
    if (isAuthenticated && isPublic) {
      router.replace('/');
    }
  }, [isAuthenticated, loading, pathname, router]);

  if (loading) {
    return (
      <div style={{
        display: 'flex', alignItems: 'center', justifyContent: 'center',
        height: '100vh', background: '#151515', color: '#8A8A8A',
        fontFamily: 'monospace', fontSize: '12px',
      }}>
        AUTHENTICATING...
      </div>
    );
  }

  const isPublic = PUBLIC_PATHS.includes(pathname);
  if (isPublic) return <>{children}</>;

  return <LayoutShell>{children}</LayoutShell>;
}

export default function AppShell({ children }: { children: React.ReactNode }) {
  return (
    <AuthProvider>
      <AuthGate>{children}</AuthGate>
    </AuthProvider>
  );
}