'use client';

import { ErrorBoundary } from '@/components/common/error-boundary';
import { LoadingSpinner } from '@/components/common/loading-spinner';
import { Sidebar } from '@/components/layout/sidebar';
import { Topbar } from '@/components/layout/topbar';
import { ComponentSize } from '@/enums';
import { useAuthGuard } from '@/hooks/auth/use-auth-guard';
import { usePreferenceBootstrap } from '@/hooks/settings/use-preference-bootstrap';
import { useTranslation } from '@/lib/i18n';

export default function PortalLayout({ children }: { children: React.ReactNode }) {
  const { isReady } = useAuthGuard();
  const { t } = useTranslation();
  usePreferenceBootstrap();

  if (!isReady) {
    return (
      <div className="flex min-h-screen items-center justify-center">
        <LoadingSpinner size={ComponentSize.LG} label={t('auth.authenticating')} />
      </div>
    );
  }

  return (
    <div className="flex h-screen overflow-hidden">
      <Sidebar />
      <div className="flex flex-1 flex-col overflow-hidden">
        <Topbar />
        <main className="flex-1 overflow-y-auto p-3 sm:p-6">
          <ErrorBoundary>{children}</ErrorBoundary>
        </main>
      </div>
    </div>
  );
}
