import { useNavigate } from 'react-router-dom';
import UptimeWidget from '@/components/widgets/UptimeWidget';
import BackupWidget from '@/components/widgets/BackupWidget';
import SecurityWidget from '@/components/widgets/SecurityWidget';
import ServicesWidget from '@/components/widgets/ServicesWidget';
import SupportCtaWidget from '@/components/widgets/SupportCtaWidget';
import { PageHeader } from '@/components/ui/PageHeader';

export default function TrustCenter() {
  const navigate = useNavigate();

  return (
    <div className="font-sans relative min-h-[calc(100vh-4rem)]">
      <main className="max-w-7xl mx-auto px-8 sm:px-8 space-y-6 m-4">
        
        {/* HEADER EXTRAIT */}
        <PageHeader
          title="Tableau de bord de l'infrastructure"
          description="Espace sécurisé AEGIS • Synchronisation en temps réel"
        >
          {/* L'indicateur de connexion devient le "children" du header */}
          <div className="flex items-center space-x-3 bg-slate-50 px-3 py-1.5 rounded-md border border-slate-100">
            <span className="flex h-2.5 w-2.5 relative">
              <span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-emerald-400 opacity-75"></span>
              <span className="relative inline-flex rounded-full h-2.5 w-2.5 bg-emerald-500"></span>
            </span>
            <span className="text-xs font-semibold uppercase tracking-wide text-slate-600">
              Connexion chiffrée
            </span>
          </div>
        </PageHeader>

        {/* GRILLE DES WIDGETS */}
        <div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
          <div className="lg:col-span-3 space-y-6">
            <UptimeWidget />
            <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
              <BackupWidget onClick={() => navigate('/backups')} />
              <SecurityWidget onClick={() => navigate('/analytics')} />
            </div>
          </div>

          <div className="space-y-6 lg:col-span-2">
            <ServicesWidget />
            <SupportCtaWidget />
          </div>
        </div>
        
      </main>
    </div>
  );
}