'use client';

import { DashboardShell } from '@/components/dashboard-shell';
import { OfflineIndicator } from '@/components/offline-indicator';
import { useAuth } from '@/components/providers';
import { useClientSync } from '@/hooks/use-client-sync';
import { useRouter } from 'next/navigation';
import { useEffect } from 'react';

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const { user, isLoading } = useAuth();
  const router = useRouter();
  useClientSync();

  useEffect(() => {
    if (!isLoading && !user) {
      router.replace('/');
    }
  }, [user, isLoading, router]);

  if (isLoading) {
    /*
     * Transición breve durante la verificación de sesión: el logo aparece con
     * un fade-in silencioso en vez de un spinner, para no llamar la atención
     * sobre una pantalla que dura una fracción de segundo.
     */
    return (
      <div className="flex min-h-dvh items-center justify-center bg-background">
        <img
          src="/logo-mark.png"
          alt=""
          aria-hidden="true"
          className="h-10 w-10 animate-fade-in object-contain opacity-0 [animation-fill-mode:forwards]"
        />
      </div>
    );
  }

  if (!user) {
    return null;
  }

  return (
    <>
      <DashboardShell>{children}</DashboardShell>
      <OfflineIndicator />
    </>
  );
}