'use client';

import { useEffect, useState } from 'react';
import { usePathname, useRouter } from 'next/navigation';
import { useOutletAuthStore } from '@/store/outlet-auth';
import OutletNavbar from '@/components/OutletNavbar';

export default function OutletLayout({ children }: { children: React.ReactNode }) {
  const router = useRouter();
  const pathname = usePathname();
  const [ready, setReady] = useState(false);
  const isPublic = pathname === '/outlet/login';

  useEffect(() => {
    if (isPublic) { setReady(true); return; }
    useOutletAuthStore.getState().hydrate();
    const token = useOutletAuthStore.getState().token;
    if (!token) {
      router.replace('/outlet/login');
    } else {
      setReady(true);
    }
  }, [isPublic]);

  if (!ready) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-gray-400 text-sm">Memuat...</div>
      </div>
    );
  }

  if (isPublic) return <>{children}</>;

  return (
    <div className="min-h-screen bg-gray-50">
      <OutletNavbar />
      <main className="max-w-5xl mx-auto px-4 py-8">{children}</main>
    </div>
  );
}