import React from 'react';
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
import BackButton from '@/components/ui/BackButton';

export const Analytics: React.FC = () => {

  return (
    <div className="max-w-5xl mx-auto py-8 px-8">
      <BackButton to="/dashboard" label="Retour au tableau de bord" className="mb-6" />

      <Card>
        <CardHeader className="bg-slate-50">
          <h3 className="text-xl font-bold text-slate-900">Télémétrie & Analytics</h3>
          <p className="text-sm text-slate-500">Données réseau en temps réel</p>
        </CardHeader>
        
        <CardContent>
          <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-8">
            <div className="bg-slate-50 border border-slate-100 p-4 rounded-xl text-center">
              <p className="text-xs text-slate-500 uppercase font-semibold mb-1">Disponibilité (30j)</p>
              <p className="text-2xl font-bold text-emerald-600">100%</p>
            </div>
            <div className="bg-slate-50 border border-slate-100 p-4 rounded-xl text-center">
              <p className="text-xs text-slate-500 uppercase font-semibold mb-1">Charge CPU moy.</p>
              <p className="text-2xl font-bold text-slate-900">14%</p>
            </div>
            <div className="bg-slate-50 border border-slate-100 p-4 rounded-xl text-center">
              <p className="text-xs text-slate-500 uppercase font-semibold mb-1">Trafic chiffré</p>
              <p className="text-2xl font-bold text-slate-900">1.2 TB</p>
            </div>
            <div className="bg-slate-50 border border-slate-100 p-4 rounded-xl text-center">
              <p className="text-xs text-slate-500 uppercase font-semibold mb-1">Requêtes bloquées</p>
              <p className="text-2xl font-bold text-blue-900">3,492</p>
            </div>
          </div>
          
          {/* Représentation visuelle du graphe */}
          <h4 className="text-sm font-semibold text-slate-900 mb-3">Trafic Réseau WAN (Dernières 24h)</h4>
          <div className="h-48 w-full bg-slate-50 border border-slate-100 rounded-lg flex items-end p-2 space-x-1">
            {[40, 20, 60, 80, 50, 30, 70, 90, 60, 40, 30, 20, 10, 50, 80, 60, 40, 70, 90, 100, 80, 60, 40, 50].map((val, i) => (
              <div key={i} className="bg-blue-200 hover:bg-blue-400 w-full rounded-t-sm transition-colors" style={{ height: `${val}%` }}></div>
            ))}
          </div>
        </CardContent>
      </Card>
    </div>
  );
};

export default Analytics;