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

// On pourrait extraire ces données dans un Custom Hook plus tard
const BACKUP_HISTORY = [
  { date: 'Aujourd\'hui, 03:00 AM', node: 'Cluster Proxmox (Compta)', type: 'Incrémentielle', size: '12 GB' },
  { date: 'Hier, 03:00 AM', node: 'Cluster Proxmox (Compta)', type: 'Incrémentielle', size: '8.4 GB' },
  { date: 'Dimanche, 01:00 AM', node: 'Cluster Proxmox (Compta)', type: 'Totale (Full)', size: '240 GB' },
  { date: 'Samedi, 03:00 AM', node: 'Cluster Proxmox (Compta)', type: 'Incrémentielle', size: '4.1 GB' },
];

export const Backups: 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">Historique des Sauvegardes PRA</h3>
          <p className="text-sm text-slate-500">Journal d'exécution de la règle 3-2-1-1-0</p>
        </CardHeader>
        
        {/* On retire le padding sur le content pour que le tableau touche les bords */}
        <CardContent className="p-0 overflow-x-auto">
          <table className="min-w-full divide-y divide-slate-200">
            <thead className="bg-white">
              <tr>
                <th className="px-6 py-4 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Date d'exécution</th>
                <th className="px-6 py-4 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Cible (Nœud)</th>
                <th className="px-6 py-4 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Type</th>
                <th className="px-6 py-4 text-left text-xs font-semibold text-slate-500 uppercase tracking-wider">Volume</th>
                <th className="px-6 py-4 text-right text-xs font-semibold text-slate-500 uppercase tracking-wider">Statut</th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-slate-100">
              {BACKUP_HISTORY.map((bkp, i) => (
                <tr key={i} className="hover:bg-slate-50 transition-colors">
                  <td className="px-6 py-4 whitespace-nowrap text-sm font-medium text-slate-900">{bkp.date}</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{bkp.node}</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{bkp.type}</td>
                  <td className="px-6 py-4 whitespace-nowrap text-sm text-slate-500">{bkp.size}</td>
                  <td className="px-6 py-4 whitespace-nowrap text-right">
                     <span className="inline-flex items-center px-2.5 py-1 rounded-md text-xs font-medium bg-emerald-50 text-emerald-700 border border-emerald-200/60">
                      Succès (Chiffré)
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>
        </CardContent>
      </Card>
    </div>
  );
};

export default Backups;