'use client';

import { useEffect } from 'react';
import { useRouter } from 'next/navigation';
import { useAutenticacion } from '@/proveedores/autenticacion';
import { Skeleton } from '@/components/ui/skeleton';

export default function DashboardPage() {
  const { usuario, cargando } = useAutenticacion();
  const router = useRouter();

  useEffect(() => {
    if (!cargando && usuario) {
      // Redirigir según el rol del usuario
      if (usuario.rol === 'admin') {
        router.push('/dashboard/admin');
      } else {
        router.push('/dashboard/profile');
      }
    }
  }, [usuario, cargando, router]);

  // Mostrar esqueleto mientras se carga
  if (cargando) {
    return (
      <div className="container mx-auto px-4 py-12">
        <div className="space-y-4">
          <Skeleton className="h-8 w-48" />
          <Skeleton className="h-64 w-full" />
        </div>
      </div>
    );
  }

  // Si no hay usuario, no debería llegar aquí (layout debe proteger)
  return (
    <div className="container mx-auto px-4 py-12">
      <h1 className="text-3xl font-bold">Dashboard</h1>
      <p className="text-muted-foreground mt-2">Redirigiendo...</p>
    </div>
  );
}