import { Outlet, Navigate } from 'react-router-dom';
import { useAuthStore } from '@/stores/auth';
import Sidebar from './Sidebar';

export default function AppShell() {
  const { user, loading } = useAuthStore();

  if (loading) {
    return (
      <div className="flex items-center justify-center h-screen" style={{ background: 'var(--bg)' }}>
        <div className="animate-spin w-8 h-8 rounded-full border-2 border-t-transparent"
          style={{ borderColor: 'var(--ac)', borderTopColor: 'transparent' }} />
      </div>
    );
  }

  if (!user) return <Navigate to="/login" replace />;

  return (
    <div className="flex h-screen overflow-hidden">
      <Sidebar />
      <main className="flex-1 ml-[260px] overflow-y-auto h-screen" style={{ background: 'var(--bg)' }}>
        <Outlet />
      </main>
    </div>
  );
}