import { useInfrastructureNodes } from '@/hooks/useInfrastructureNodes';
import { UptimeObject } from '@/components/ui/UptimeObject';
import { Card, CardContent } from '@/components/ui/Card';
import { Loader } from '@/components/ui/Loader';
import { EmptyState } from '@/components/ui/EmptyState';

export default function UptimeWidget() {
  const { nodes, isLoading, error } = useInfrastructureNodes();

  return (
    <Card>
      <CardContent className="p-6 flex flex-col h-full">
        <h2 className="text-lg font-semibold text-slate-900 dark:text-slate-400 mb-4 transition-all duration-300 ease-in-out">État des Services & SLA</h2>

        {/* 1. Gestion de l'erreur */}
        {error && (
          <EmptyState message={error} className="text-red-500 not-italic font-medium" />
        )}

        {/* 2. Gestion du chargement */}
        {isLoading && !error && <Loader />}

        {/* 3. Gestion de l'état vide */}
        {!isLoading && !error && nodes.length === 0 && (
          <EmptyState message="Aucun équipement enregistré pour ce contrat." />
        )}

        {/* 4. Affichage des données */}
        <table className="divide-y divide-slate-100 table-auto">
        {!isLoading && !error && nodes.length > 0 && (
            <tbody className=''>
              {nodes.map((node) => (
                <UptimeObject key={node.id} node={node} />
              ))}
            </tbody>
        )}
        </table>
      </CardContent>
    </Card>
  );
}