'use client';

import React, { useState, useRef, useEffect } from 'react';
import { Card } from 'primereact/card';
import { Button } from 'primereact/button';
import { DataTable } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { Toast } from 'primereact/toast';
import { Toolbar } from 'primereact/toolbar';
import { Tag } from 'primereact/tag';
import { Dialog } from 'primereact/dialog';
import { Calendar } from 'primereact/calendar';
import { Dropdown } from 'primereact/dropdown';
import { InputSwitch } from 'primereact/inputswitch';
import { InputNumber } from 'primereact/inputnumber';
import { ProgressBar } from 'primereact/progressbar';
import { FileUpload } from 'primereact/fileupload';
import { Checkbox } from 'primereact/checkbox';
import { RadioButton } from 'primereact/radiobutton';
import { Timeline } from 'primereact/timeline';
import { ConfirmDialog, confirmDialog } from 'primereact/confirmdialog';
import { Divider } from 'primereact/divider';
import { Panel } from 'primereact/panel';
import { Badge } from 'primereact/badge';
import { TabView, TabPanel } from 'primereact/tabview';
import { SpeedDial } from 'primereact/speeddial';
import { Accordion, AccordionTab } from 'primereact/accordion';
import { Avatar } from 'primereact/avatar';
import { AvatarGroup } from 'primereact/avatargroup';
import { Chip } from 'primereact/chip';
import { Message } from 'primereact/message';
import { Messages } from 'primereact/messages';
import { Skeleton } from 'primereact/skeleton';
import { ScrollPanel } from 'primereact/scrollpanel';
import { Splitter, SplitterPanel } from 'primereact/splitter';
import { DataView } from 'primereact/dataview';
import { Knob } from 'primereact/knob';
// import { MeterGroup } from 'primereact/metergroup'; // Non disponible dans cette version
import { Chart } from 'primereact/chart';
import { Sidebar } from 'primereact/sidebar';
import { OverlayPanel } from 'primereact/overlaypanel';
import { ContextMenu } from 'primereact/contextmenu';
import { Menu } from 'primereact/menu';
import { TieredMenu } from 'primereact/tieredmenu';
import { Fieldset } from 'primereact/fieldset';
import { Steps } from 'primereact/steps';
import { MenuItem } from 'primereact/menuitem';
import { InputText } from 'primereact/inputtext';
import { Rating } from 'primereact/rating';
import { Slider } from 'primereact/slider';
import { ToggleButton } from 'primereact/togglebutton';
import { SelectButton } from 'primereact/selectbutton';
import { ColorPicker } from 'primereact/colorpicker';
import { MultiSelect } from 'primereact/multiselect';
import { ListBox } from 'primereact/listbox';
import { OrderList } from 'primereact/orderlist';
import { PickList } from 'primereact/picklist';
import { DataScroller } from 'primereact/datascroller';
import { VirtualScroller } from 'primereact/virtualscroller';
import { Galleria } from 'primereact/galleria';
import { Image } from 'primereact/image';
import { Carousel } from 'primereact/carousel';
import { Terminal } from 'primereact/terminal';
import { DeferredContent } from 'primereact/deferredcontent';
import { InlineMessage } from 'primereact/inlinemessage';
import { ScrollTop } from 'primereact/scrolltop';
import { BlockUI } from 'primereact/blockui';
import { TreeTable } from 'primereact/treetable';
import { Tree } from 'primereact/tree';
import { Mention } from 'primereact/mention';
import { Editor } from 'primereact/editor';
import { AutoComplete } from 'primereact/autocomplete';
import { InputMask } from 'primereact/inputmask';
import { Password } from 'primereact/password';
import { CascadeSelect } from 'primereact/cascadeselect';
import { TreeSelect } from 'primereact/treeselect';

interface Backup {
    id: string;
    nom: string;
    type: string;
    statut: 'EN_COURS' | 'TERMINE' | 'ERREUR';
    dateCreation: Date;
    dateModification?: Date;
    taille: number;
    destination: string;
    checksum?: string;
    description?: string;
}

interface BackupSchedule {
    id: string;
    nom: string;
    frequence: string;
    heure: Date;
    actif: boolean;
    prochainExecution: Date;
    derniereExecution?: Date;
    nombreBackups: number;
    description?: string;
    inclureBase: boolean;
    inclureFichiers: boolean;
    inclureConfig: boolean;
    compression: boolean;
    joursSelection?: string[];
}

interface RestorePoint {
    id: string;
    nom: string;
    dateCreation: Date;
    taille: number;
    description?: string;
}

const SauvegardePage = () => {
    const [backups, setBackups] = useState<Backup[]>([]);
    const [schedules, setSchedules] = useState<BackupSchedule[]>([]);
    const [restorePoints, setRestorePoints] = useState<RestorePoint[]>([]);
    const [loading, setLoading] = useState(false);
    const [blocked, setBlocked] = useState(false);
    const [backupInProgress, setBackupInProgress] = useState(false);
    const [restoreInProgress, setRestoreInProgress] = useState(false);
    const [progress, setProgress] = useState(0);
    const [restoreProgress, setRestoreProgress] = useState(0);
    const [globalFilter, setGlobalFilter] = useState('');
    const [scheduleDialog, setScheduleDialog] = useState(false);
    const [restoreDialog, setRestoreDialog] = useState(false);
    const [monitoringDialog, setMonitoringDialog] = useState(false);
    const [analyticsDialog, setAnalyticsDialog] = useState(false);
    const [configDialog, setConfigDialog] = useState(false);
    const [selectedBackup, setSelectedBackup] = useState<Backup | null>(null);
    const [selectedSchedule, setSelectedSchedule] = useState<BackupSchedule | null>(null);
    const [activeIndex, setActiveIndex] = useState(0);
    const [sidebarVisible, setSidebarVisible] = useState(false);
    const [autoRefresh, setAutoRefresh] = useState(true);
    const [refreshInterval, setRefreshInterval] = useState(30);
    const [viewMode, setViewMode] = useState<'table' | 'grid' | 'timeline'>('table');
    const [storageQuota, setStorageQuota] = useState(85);
    const [systemHealth, setSystemHealth] = useState(92);
    const [backupSpeed, setBackupSpeed] = useState(45);
    const [securityLevel, setSecurityLevel] = useState(88);
    const [compressionRatio, setCompressionRatio] = useState(67);
    const [networkBandwidth, setNetworkBandwidth] = useState(234);
    const [activeConnections, setActiveConnections] = useState(12);
    const [encryptionStrength, setEncryptionStrength] = useState(256);
    const [retentionCompliance, setRetentionCompliance] = useState(95);
    const [replicationStatus, setReplicationStatus] = useState('active');
    const [cloudSync, setCloudSync] = useState(true);
    const [incrementalBackup, setIncrementalBackup] = useState(true);
    const [verificationEnabled, setVerificationEnabled] = useState(true);
    const [compressionLevel, setCompressionLevel] = useState(6);
    const [notificationLevel, setNotificationLevel] = useState('all');
    const [searchTerm, setSearchTerm] = useState('');
    const [selectedBackups, setSelectedBackups] = useState<Backup[]>([]);
    const [kpiData, setKpiData] = useState({
        totalBackups: 0,
        successRate: 0,
        storageUsed: 0,
        avgDuration: 0,
        lastBackup: null,
        scheduledCount: 0
    });
    const [chartData, setChartData] = useState({});
    const [performanceMetrics, setPerformanceMetrics] = useState([]);
    const [alertsData, setAlertsData] = useState([]);
    const [storageAnalytics, setStorageAnalytics] = useState([]);
    const [complianceReport, setComplianceReport] = useState([]);
    const [auditTrail, setAuditTrail] = useState([]);
    const [backupVerification, setBackupVerification] = useState([]);
    const [cloudProviders, setCloudProviders] = useState([]);
    const [replicationTargets, setReplicationTargets] = useState([]);
    const [comparisonMode, setComparisonMode] = useState(false);
    const [selectedForComparison, setSelectedForComparison] = useState<Backup[]>([]);
    const [exportProgress, setExportProgress] = useState(0);
    const [importProgress, setImportProgress] = useState(0);
    const [terminalVisible, setTerminalVisible] = useState(false);
    const [wizardMode, setWizardMode] = useState(false);
    const [wizardStep, setWizardStep] = useState(0);
    const [smartRecommendations, setSmartRecommendations] = useState([]);
    const [predictiveAnalysis, setPredictiveAnalysis] = useState({});
    const [costOptimization, setCostOptimization] = useState([]);
    
    const toast = useRef<Toast>(null);
    const messages = useRef<Messages>(null);
    const overlayPanel = useRef<OverlayPanel>(null);
    const contextMenu = useRef<ContextMenu>(null);
    const terminal = useRef<Terminal>(null);
    const dt = useRef<DataTable>(null);

    // Configuration pour l'interface utilisateur ultra-avancée
    const frequenceOptions = [
        { label: 'Toutes les heures', value: 'HORAIRE', icon: 'pi pi-clock' },
        { label: 'Quotidien', value: 'QUOTIDIEN', icon: 'pi pi-calendar' },
        { label: 'Hebdomadaire', value: 'HEBDOMADAIRE', icon: 'pi pi-calendar-times' },
        { label: 'Mensuel', value: 'MENSUEL', icon: 'pi pi-calendar-plus' },
        { label: 'Temps réel', value: 'REALTIME', icon: 'pi pi-bolt' },
        { label: 'Sur événement', value: 'EVENT', icon: 'pi pi-exclamation-triangle' }
    ];

    const viewModeOptions = [
        { label: 'Tableau', value: 'table', icon: 'pi pi-table' },
        { label: 'Grille', value: 'grid', icon: 'pi pi-th-large' },
        { label: 'Timeline', value: 'timeline', icon: 'pi pi-calendar' }
    ];

    const notificationOptions = [
        { label: 'Toutes', value: 'all' },
        { label: 'Erreurs uniquement', value: 'errors' },
        { label: 'Critiques', value: 'critical' },
        { label: 'Aucune', value: 'none' }
    ];

    const speedDialActions = [
        { label: 'Sauvegarde rapide', icon: 'pi pi-save', command: () => startManualBackup() },
        { label: 'Restauration', icon: 'pi pi-replay', command: () => setRestoreDialog(true) },
        { label: 'Nouvelle planification', icon: 'pi pi-calendar-plus', command: () => setScheduleDialog(true) },
        { label: 'Nettoyage', icon: 'pi pi-trash', command: () => cleanupOldBackups() },
        { label: 'Synchronisation cloud', icon: 'pi pi-cloud-upload', command: () => syncToCloud() },
        { label: 'Vérification intégrité', icon: 'pi pi-shield', command: () => verifyBackups() }
    ];

    const wizardSteps = [
        { label: 'Configuration', icon: 'pi pi-cog' },
        { label: 'Destination', icon: 'pi pi-folder' },
        { label: 'Planification', icon: 'pi pi-calendar' },
        { label: 'Sécurité', icon: 'pi pi-shield' },
        { label: 'Validation', icon: 'pi pi-check' }
    ];

    const cloudProvidersData = [
        { name: 'AWS S3', status: 'connected', quota: 1000, used: 345, icon: 'pi pi-amazon' },
        { name: 'Google Cloud', status: 'connected', quota: 500, used: 123, icon: 'pi pi-google' },
        { name: 'Azure Blob', status: 'disconnected', quota: 750, used: 0, icon: 'pi pi-microsoft' },
        { name: 'Dropbox', status: 'error', quota: 100, used: 89, icon: 'pi pi-cloud' }
    ];

    const alertsExample = [
        { type: 'warning', message: 'Espace de stockage à 85%', time: new Date(), severity: 'warn' },
        { type: 'error', message: 'Échec sauvegarde AWS S3', time: new Date(), severity: 'error' },
        { type: 'info', message: 'Sauvegarde programmée terminée', time: new Date(), severity: 'success' },
        { type: 'critical', message: 'Corruption détectée dans backup_2024_01_15', time: new Date(), severity: 'error' }
    ];

    const performanceData = [
        { label: 'Vitesse sauvegarde', value: backupSpeed, color: '#3B82F6', unit: 'MB/s' },
        { label: 'Compression', value: compressionRatio, color: '#10B981', unit: '%' },
        { label: 'Bande passante', value: networkBandwidth, color: '#F59E0B', unit: 'Mbps' },
        { label: 'Vérifications', value: retentionCompliance, color: '#8B5CF6', unit: '%' }
    ];

    // Fonctions utilitaires
    const formatFileSize = (bytes: number) => {
        if (bytes === 0) return '0 Bytes';
        const k = 1024;
        const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB'];
        const i = Math.floor(Math.log(bytes) / Math.log(k));
        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    };

    const formatDuration = (seconds: number) => {
        const hours = Math.floor(seconds / 3600);
        const minutes = Math.floor((seconds % 3600) / 60);
        const secs = seconds % 60;
        
        if (hours > 0) {
            return `${hours}h ${minutes}m ${secs}s`;
        } else if (minutes > 0) {
            return `${minutes}m ${secs}s`;
        }
        return `${secs}s`;
    };

    const formatDateTime = (date: Date) => {
        return new Date(date).toLocaleString('fr-FR');
    };

    const formatDate = (date: Date) => {
        return new Date(date).toLocaleDateString('fr-FR');
    };

    // Effets et chargement des données
    useEffect(() => {
        loadBackupData();
        loadKPIData();
        loadAnalytics();
        loadAlertsData();
        setCloudProviders(cloudProvidersData);
        setAlertsData(alertsExample);
        setPerformanceMetrics(performanceData);
        
        if (autoRefresh) {
            const interval = setInterval(() => {
                loadBackupData();
                loadKPIData();
                updateRealtimeMetrics();
            }, refreshInterval * 1000);
            return () => clearInterval(interval);
        }
    }, [autoRefresh, refreshInterval]);

    const loadBackupData = async () => {
        setLoading(true);
        // TODO: Remplacer par un appel API réel
        const mockBackups: Backup[] = [];
        setBackups(mockBackups);
        
        const mockSchedules: BackupSchedule[] = [];
        setSchedules(mockSchedules);
        
        const mockRestorePoints: RestorePoint[] = [];
        setRestorePoints(mockRestorePoints);
        
        setLoading(false);
    };

    const loadKPIData = async () => {
        // TODO: Remplacer par un appel API réel
        const mockKPI = {
            totalBackups: 156,
            successRate: 94.2,
            storageUsed: 2.4,
            avgDuration: 4.2,
            lastBackup: new Date(),
            scheduledCount: 8
        };
        setKpiData(mockKPI);
    };

    const loadAnalytics = async () => {
        // TODO: Remplacer par un appel API réel pour les analytics
        const mockChartData = {
            labels: ['Jan', 'Fév', 'Mar', 'Avr', 'Mai', 'Jun'],
            datasets: [
                {
                    label: 'Sauvegardes réussies',
                    data: [25, 32, 28, 45, 38, 42],
                    backgroundColor: '#10B981',
                    borderColor: '#047857'
                },
                {
                    label: 'Sauvegardes échouées',
                    data: [2, 1, 3, 2, 1, 2],
                    backgroundColor: '#EF4444',
                    borderColor: '#DC2626'
                }
            ]
        };
        setChartData(mockChartData);
    };

    const loadAlertsData = async () => {
        // TODO: Remplacer par un appel API réel
        setAlertsData(alertsExample);
    };

    const updateRealtimeMetrics = () => {
        setStorageQuota(Math.floor(Math.random() * 15) + 80);
        setSystemHealth(Math.floor(Math.random() * 10) + 85);
        setBackupSpeed(Math.floor(Math.random() * 50) + 30);
        setNetworkBandwidth(Math.floor(Math.random() * 100) + 200);
        setActiveConnections(Math.floor(Math.random() * 20) + 5);
    };

    // Actions principales
    const startManualBackup = () => {
        setBackupInProgress(true);
        setProgress(0);
        
        const interval = setInterval(() => {
            setProgress(prev => {
                if (prev >= 100) {
                    clearInterval(interval);
                    setBackupInProgress(false);
                    toast.current?.show({
                        severity: 'success',
                        summary: 'Sauvegarde terminée',
                        detail: 'La sauvegarde manuelle a été créée avec succès',
                        life: 3000
                    });
                    loadBackupData();
                    return 100;
                }
                return prev + 5;
            });
        }, 200);
    };

    const cleanupOldBackups = () => {
        confirmDialog({
            message: 'Supprimer toutes les sauvegardes de plus de 90 jours ?',
            header: 'Nettoyage automatique',
            icon: 'pi pi-exclamation-triangle',
            acceptLabel: 'Nettoyer',
            rejectLabel: 'Annuler',
            acceptClassName: 'p-button-warning',
            accept: () => {
                setBlocked(true);
                setTimeout(() => {
                    setBlocked(false);
                    toast.current?.show({
                        severity: 'success',
                        summary: 'Nettoyage terminé',
                        detail: '12 anciennes sauvegardes supprimées - 4.2 GB libérés',
                        life: 5000
                    });
                }, 3000);
            }
        });
    };

    const syncToCloud = () => {
        setBlocked(true);
        let progress = 0;
        const interval = setInterval(() => {
            progress += 10;
            if (progress >= 100) {
                clearInterval(interval);
                setBlocked(false);
                toast.current?.show({
                    severity: 'success',
                    summary: 'Synchronisation terminée',
                    detail: 'Toutes les sauvegardes ont été synchronisées avec le cloud',
                    life: 3000
                });
            }
        }, 300);
    };

    const verifyBackups = () => {
        setBlocked(true);
        setTimeout(() => {
            setBlocked(false);
            toast.current?.show({
                severity: 'success',
                summary: 'Vérification terminée',
                detail: 'Toutes les sauvegardes ont été vérifiées avec succès',
                life: 3000
            });
        }, 5000);
    };

    // Composants de rendu
    const renderKPIDashboard = () => (
        <div className="grid mb-4">
            <div className="col-12 md:col-2">
                <Card className="bg-gradient-to-r from-blue-500 to-blue-600 text-white text-center">
                    <div className="flex flex-column align-items-center">
                        <Knob 
                            value={kpiData.successRate} 
                            readOnly 
                            size={60}
                            strokeWidth={8}
                            valueColor="white"
                            rangeColor="rgba(255,255,255,0.3)"
                        />
                        <div className="text-sm mt-2 opacity-90">Taux de succès</div>
                    </div>
                </Card>
            </div>
            
            <div className="col-12 md:col-2">
                <Card className="bg-gradient-to-r from-green-500 to-green-600 text-white text-center">
                    <div className="flex flex-column align-items-center">
                        <div className="text-2xl font-bold">{kpiData.totalBackups}</div>
                        <div className="text-sm opacity-90">Sauvegardes</div>
                        <Avatar icon="pi pi-database" size="large" className="mt-2 bg-white-alpha-20" />
                    </div>
                </Card>
            </div>
            
            <div className="col-12 md:col-2">
                <Card className="bg-gradient-to-r from-purple-500 to-purple-600 text-white text-center">
                    <div className="flex flex-column align-items-center">
                        <div className="text-2xl font-bold">{kpiData.storageUsed}TB</div>
                        <div className="text-sm opacity-90">Stockage utilisé</div>
                        <ProgressBar 
                            value={storageQuota} 
                            className="mt-2 w-full" 
                            style={{ height: '4px' }}
                        />
                    </div>
                </Card>
            </div>
            
            <div className="col-12 md:col-2">
                <Card className="bg-gradient-to-r from-orange-500 to-orange-600 text-white text-center">
                    <div className="flex flex-column align-items-center">
                        <div className="text-2xl font-bold">{kpiData.avgDuration}min</div>
                        <div className="text-sm opacity-90">Durée moyenne</div>
                        <Avatar icon="pi pi-clock" size="large" className="mt-2 bg-white-alpha-20" />
                    </div>
                </Card>
            </div>
            
            <div className="col-12 md:col-2">
                <Card className="bg-gradient-to-r from-teal-500 to-teal-600 text-white text-center">
                    <div className="flex flex-column align-items-center">
                        <div className="text-2xl font-bold">{kpiData.scheduledCount}</div>
                        <div className="text-sm opacity-90">Planifiées actives</div>
                        <Avatar icon="pi pi-calendar" size="large" className="mt-2 bg-white-alpha-20" />
                    </div>
                </Card>
            </div>
            
            <div className="col-12 md:col-2">
                <Card className="bg-gradient-to-r from-pink-500 to-pink-600 text-white text-center">
                    <div className="flex flex-column align-items-center">
                        <Knob 
                            value={systemHealth} 
                            readOnly 
                            size={60}
                            strokeWidth={8}
                            valueColor="white"
                            rangeColor="rgba(255,255,255,0.3)"
                        />
                        <div className="text-sm mt-2 opacity-90">Santé système</div>
                    </div>
                </Card>
            </div>
        </div>
    );

    const renderRealtimeMonitoring = () => (
        <Card title="Monitoring temps réel" className="mb-4">
            <div className="grid">
                <div className="col-12 md:col-8">
                    <div className="mb-4">
                        {performanceMetrics.map((metric, index) => (
                            <div key={index} className="mb-3">
                                <div className="flex justify-content-between mb-1">
                                    <span className="text-sm font-medium">{metric.label}</span>
                                    <span className="text-sm font-bold">{metric.value}{metric.unit}</span>
                                </div>
                                <ProgressBar 
                                    value={metric.value} 
                                    className="h-1rem"
                                    style={{ '--p-progressbar-value-bg': metric.color } as any}
                                />
                            </div>
                        ))}
                    </div>
                    
                    <Chart 
                        type="line" 
                        data={{
                            labels: ['00:00', '04:00', '08:00', '12:00', '16:00', '20:00'],
                            datasets: [{
                                label: 'Vitesse de sauvegarde (MB/s)',
                                data: [20, 35, 60, 45, 70, 30],
                                borderColor: '#3B82F6',
                                backgroundColor: 'rgba(59, 130, 245, 0.1)',
                                tension: 0.4
                            }]
                        }}
                        options={{
                            responsive: true,
                            plugins: {
                                legend: { position: 'top' }
                            },
                            scales: {
                                y: {
                                    beginAtZero: true
                                }
                            }
                        }}
                    />
                </div>
                
                <div className="col-12 md:col-4">
                    <div className="grid">
                        <div className="col-12">
                            <div className="bg-blue-50 p-3 border-round text-center">
                                <i className="pi pi-server text-blue-500 text-2xl mb-2" />
                                <div className="text-lg font-bold text-blue-700">{activeConnections}</div>
                                <div className="text-sm text-600">Connexions actives</div>
                            </div>
                        </div>
                        
                        <div className="col-12">
                            <div className="bg-green-50 p-3 border-round text-center">
                                <i className="pi pi-shield text-green-500 text-2xl mb-2" />
                                <div className="text-lg font-bold text-green-700">AES-{encryptionStrength}</div>
                                <div className="text-sm text-600">Chiffrement</div>
                            </div>
                        </div>
                        
                        <div className="col-12">
                            <div className="bg-purple-50 p-3 border-round text-center">
                                <i className="pi pi-cloud text-purple-500 text-2xl mb-2" />
                                <div className="text-lg font-bold text-purple-700">
                                    {replicationStatus === 'active' ? 'Actif' : 'Inactif'}
                                </div>
                                <div className="text-sm text-600">Réplication</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </Card>
    );

    const renderCloudProviders = () => (
        <Card title="Fournisseurs Cloud" className="mb-4">
            <DataView 
                value={cloudProviders}
                itemTemplate={(provider) => (
                    <div className="col-12 md:col-6 lg:col-3 p-2">
                        <Card className="h-full">
                            <div className="flex align-items-center justify-content-between mb-3">
                                <div className="flex align-items-center">
                                    <Avatar 
                                        icon={provider.icon} 
                                        className="mr-2" 
                                        style={{ backgroundColor: '#DEE2E6', color: '#495057' }}
                                    />
                                    <span className="font-bold">{provider.name}</span>
                                </div>
                                <Tag 
                                    value={provider.status} 
                                    severity={
                                        provider.status === 'connected' ? 'success' :
                                        provider.status === 'error' ? 'danger' : 'secondary'
                                    }
                                />
                            </div>
                            
                            <div className="mb-3">
                                <div className="flex justify-content-between text-sm mb-1">
                                    <span>Utilisation</span>
                                    <span>{provider.used}GB / {provider.quota}GB</span>
                                </div>
                                <ProgressBar 
                                    value={(provider.used / provider.quota) * 100} 
                                    className="h-1rem"
                                />
                            </div>
                            
                            <div className="flex gap-2">
                                <Button 
                                    label="Configurer" 
                                    size="small" 
                                    className="flex-1"
                                />
                                <Button 
                                    icon="pi pi-cog" 
                                    size="small" 
                                    outlined
                                />
                            </div>
                        </Card>
                    </div>
                )}
                layout="grid"
            />
        </Card>
    );

    const renderAlertsPanel = () => (
        <Card title="Alertes et notifications" className="mb-4">
            <div className="flex align-items-center justify-content-between mb-3">
                <div className="flex align-items-center gap-2">
                    <Badge value={alertsData.length} severity="warning" />
                    <span>alertes actives</span>
                </div>
                <Button 
                    label="Tout marquer comme lu" 
                    size="small" 
                    text
                />
            </div>
            
            <Timeline 
                value={alertsData}
                content={(item) => (
                    <div className="flex align-items-center">
                        <Badge 
                            value={item.type} 
                            severity={item.severity}
                            className="mr-2"
                        />
                        <div className="flex-1">
                            <div className="font-medium">{item.message}</div>
                            <div className="text-sm text-600">{item.time.toLocaleTimeString('fr-FR')}</div>
                        </div>
                        <Button 
                            icon="pi pi-times" 
                            size="small" 
                            text 
                            rounded
                        />
                    </div>
                )}
                className="w-full"
            />
        </Card>
    );

    const renderAdvancedToolbar = () => (
        <div className="flex flex-wrap align-items-center justify-content-between gap-3 p-3 bg-gradient-to-r from-indigo-500 to-purple-600 text-white border-round mb-4">
            <div className="flex align-items-center gap-3">
                <Avatar icon="pi pi-database" className="bg-white-alpha-20" style={{ color: 'white' }} />
                <div>
                    <div className="text-xl font-bold">Centre de Sauvegarde Avancé</div>
                    <div className="text-sm opacity-90">
                        {kpiData.totalBackups} sauvegardes | {kpiData.successRate}% de réussite | {kpiData.storageUsed}TB utilisés
                    </div>
                </div>
            </div>
            
            <div className="flex align-items-center gap-2">
                <SelectButton 
                    value={viewMode} 
                    options={viewModeOptions} 
                    onChange={(e) => setViewMode(e.value)}
                    optionLabel="label"
                    optionValue="value"
                    className="view-mode-selector"
                />
                
                <div className="flex align-items-center gap-2 bg-white-alpha-20 px-3 py-1 border-round">
                    <i className="pi pi-wifi" />
                    <span className="text-sm">Auto-refresh</span>
                    <ToggleButton 
                        checked={autoRefresh} 
                        onChange={(e) => setAutoRefresh(e.value)}
                        onIcon="pi pi-pause" 
                        offIcon="pi pi-play"
                        className="ml-2"
                        size="small"
                    />
                </div>
                
                <Button 
                    icon="pi pi-chart-line" 
                    rounded 
                    text 
                    onClick={() => setAnalyticsDialog(true)}
                    tooltip="Analytics avancées"
                    className="text-white"
                />
                
                <Button 
                    icon="pi pi-desktop" 
                    rounded 
                    text 
                    onClick={() => setTerminalVisible(true)}
                    tooltip="Terminal"
                    className="text-white"
                />
                
                <Button 
                    icon="pi pi-cog" 
                    rounded 
                    text 
                    onClick={() => setSidebarVisible(true)}
                    tooltip="Configuration"
                    className="text-white"
                />
            </div>
        </div>
    );

    const renderBackupList = () => (
        <Card title="Liste des sauvegardes">
            <DataTable
                ref={dt}
                value={backups}
                paginator
                rows={10}
                rowsPerPageOptions={[10, 25, 50]}
                loading={loading}
                globalFilter={globalFilter}
                emptyMessage="Aucune sauvegarde trouvée"
                responsiveLayout="stack"
                breakpoint="768px"
            >
                <Column field="nom" header="Nom" sortable />
                <Column field="type" header="Type" sortable />
                <Column field="statut" header="Statut" sortable />
                <Column field="dateCreation" header="Date" sortable />
                <Column field="taille" header="Taille" sortable />
                <Column header="Actions" />
            </DataTable>
        </Card>
    );

    const renderSchedules = () => (
        <Card title="Planifications">
            <DataTable
                value={schedules}
                emptyMessage="Aucune planification configurée"
            >
                <Column field="nom" header="Nom" />
                <Column field="frequence" header="Fréquence" />
                <Column field="actif" header="Actif" />
                <Column header="Actions" />
            </DataTable>
        </Card>
    );

    return (
        <div className="backup-management-system">
            <BlockUI blocked={blocked}>
                <Toast ref={toast} />
                <Messages ref={messages} />
                <ConfirmDialog />
                
                {renderAdvancedToolbar()}
                
                {(backupInProgress || restoreInProgress || exportProgress > 0) && (
                    <Card className="mb-4">
                        <div className="grid">
                            {backupInProgress && (
                                <div className="col-12 md:col-4">
                                    <div className="flex align-items-center gap-3">
                                        <i className="pi pi-spin pi-save text-blue-500" />
                                        <div className="flex-1">
                                            <p className="m-0 font-bold">Sauvegarde en cours...</p>
                                            <ProgressBar value={progress} className="mt-2" />
                                        </div>
                                    </div>
                                </div>
                            )}
                            
                            {restoreInProgress && (
                                <div className="col-12 md:col-4">
                                    <div className="flex align-items-center gap-3">
                                        <i className="pi pi-spin pi-replay text-green-500" />
                                        <div className="flex-1">
                                            <p className="m-0 font-bold">Restauration en cours...</p>
                                            <ProgressBar value={restoreProgress} className="mt-2" />
                                        </div>
                                    </div>
                                </div>
                            )}
                            
                            {exportProgress > 0 && exportProgress < 100 && (
                                <div className="col-12 md:col-4">
                                    <div className="flex align-items-center gap-3">
                                        <i className="pi pi-spin pi-download text-purple-500" />
                                        <div className="flex-1">
                                            <p className="m-0 font-bold">Export en cours...</p>
                                            <ProgressBar value={exportProgress} className="mt-2" />
                                        </div>
                                    </div>
                                </div>
                            )}
                        </div>
                    </Card>
                )}
                
                <TabView activeIndex={activeIndex} onTabChange={(e) => setActiveIndex(e.index)}>
                    <TabPanel header="Vue d'ensemble" leftIcon="pi pi-home mr-2">
                        {renderKPIDashboard()}
                        {renderRealtimeMonitoring()}
                        {renderAlertsPanel()}
                    </TabPanel>
                    
                    <TabPanel header="Sauvegardes" leftIcon="pi pi-database mr-2">
                        {renderBackupList()}
                    </TabPanel>
                    
                    <TabPanel header="Planifications" leftIcon="pi pi-calendar mr-2">
                        {renderSchedules()}
                    </TabPanel>
                    
                    <TabPanel header="Cloud" leftIcon="pi pi-cloud mr-2">
                        {renderCloudProviders()}
                    </TabPanel>
                    
                    <TabPanel header="Analytics" leftIcon="pi pi-chart-bar mr-2">
                        <div className="grid">
                            <div className="col-12 md:col-8">
                                <Card title="Tendances des sauvegardes">
                                    <Chart type="bar" data={chartData} className="w-full" />
                                </Card>
                            </div>
                            
                            <div className="col-12 md:col-4">
                                <Card title="Répartition par destination">
                                    <Chart 
                                        type="doughnut" 
                                        data={{
                                            labels: ['Local', 'AWS S3', 'Google Cloud', 'Azure'],
                                            datasets: [{
                                                data: [40, 30, 20, 10],
                                                backgroundColor: ['#3B82F6', '#10B981', '#F59E0B', '#8B5CF6']
                                            }]
                                        }}
                                        options={{
                                            plugins: {
                                                legend: { position: 'bottom' }
                                            }
                                        }}
                                    />
                                </Card>
                            </div>
                        </div>
                    </TabPanel>
                    
                    <TabPanel header="Sécurité" leftIcon="pi pi-shield mr-2">
                        <div className="grid">
                            <div className="col-12 md:col-6">
                                <Card title="Chiffrement et sécurité">
                                    <Fieldset legend="Configuration du chiffrement">
                                        <div className="field">
                                            <label>Algorithme de chiffrement</label>
                                            <Dropdown 
                                                value="AES-256" 
                                                options={[
                                                    { label: 'AES-128', value: 'AES-128' },
                                                    { label: 'AES-256', value: 'AES-256' },
                                                    { label: 'RSA-2048', value: 'RSA-2048' }
                                                ]}
                                                className="w-full"
                                            />
                                        </div>
                                        
                                        <div className="field">
                                            <div className="flex align-items-center gap-2">
                                                <InputSwitch checked={verificationEnabled} onChange={(e) => setVerificationEnabled(e.value)} />
                                                <label>Vérification d'intégrité</label>
                                            </div>
                                        </div>
                                    </Fieldset>
                                </Card>
                            </div>
                            
                            <div className="col-12 md:col-6">
                                <Card title="Audit Trail">
                                    <Timeline 
                                        value={[
                                            { event: 'Sauvegarde créée', time: new Date(), user: 'Admin' },
                                            { event: 'Accès à la sauvegarde', time: new Date(), user: 'User1' },
                                            { event: 'Restauration initialisée', time: new Date(), user: 'Admin' }
                                        ]}
                                        content={(item) => (
                                            <div>
                                                <div className="font-bold">{item.event}</div>
                                                <div className="text-sm text-600">{item.user} - {item.time.toLocaleTimeString()}</div>
                                            </div>
                                        )}
                                    />
                                </Card>
                            </div>
                        </div>
                    </TabPanel>
                    
                    <TabPanel header="Maintenance" leftIcon="pi pi-wrench mr-2">
                        <Splitter style={{ height: '500px' }}>
                            <SplitterPanel size={30}>
                                <ScrollPanel style={{ width: '100%', height: '100%' }}>
                                    <div className="p-3">
                                        <h6>Actions de maintenance</h6>
                                        <Menu 
                                            model={[
                                                { label: 'Nettoyage automatique', icon: 'pi pi-trash', command: cleanupOldBackups },
                                                { label: 'Vérification intégrité', icon: 'pi pi-shield', command: verifyBackups },
                                                { label: 'Optimisation stockage', icon: 'pi pi-cog' },
                                                { label: 'Synchronisation cloud', icon: 'pi pi-cloud-upload', command: syncToCloud },
                                                { label: 'Rapport de santé', icon: 'pi pi-chart-line' },
                                                { label: 'Réindexation', icon: 'pi pi-refresh' }
                                            ]}
                                        />
                                    </div>
                                </ScrollPanel>
                            </SplitterPanel>
                            
                            <SplitterPanel size={70}>
                                <ScrollPanel style={{ width: '100%', height: '100%' }}>
                                    <div className="p-3">
                                        <Card title="Console de maintenance">
                                            <Terminal 
                                                ref={terminal}
                                                welcomeMessage="Console de maintenance BTpXpress - Tapez 'help' pour les commandes disponibles"
                                                prompt="backup $"
                                                className="bg-gray-900 text-white"
                                            />
                                        </Card>
                                    </div>
                                </ScrollPanel>
                            </SplitterPanel>
                        </Splitter>
                    </TabPanel>
                </TabView>
                
                <SpeedDial 
                    model={speedDialActions}
                    radius={80}
                    type="semi-circle"
                    direction="up-left"
                    style={{ left: 'calc(50% - 2rem)', bottom: 0 }}
                    buttonClassName="p-button-help"
                    maskClassName="bg-black-alpha-30"
                />
                
                <Sidebar 
                    visible={sidebarVisible} 
                    onHide={() => setSidebarVisible(false)}
                    position="right"
                    className="w-25rem"
                >
                    <h3>Configuration avancée</h3>
                    
                    <Accordion multiple>
                        <AccordionTab header="Paramètres généraux">
                            <div className="field">
                                <label>Mode d'affichage</label>
                                <SelectButton 
                                    value={viewMode} 
                                    options={viewModeOptions} 
                                    onChange={(e) => setViewMode(e.value)}
                                    optionLabel="label"
                                    optionValue="value"
                                    className="w-full mt-2"
                                />
                            </div>
                            
                            <div className="field">
                                <div className="flex align-items-center gap-2">
                                    <InputSwitch 
                                        checked={autoRefresh} 
                                        onChange={(e) => setAutoRefresh(e.value)}
                                    />
                                    <label>Actualisation automatique</label>
                                </div>
                            </div>
                            
                            <div className="field">
                                <label>Intervalle (secondes)</label>
                                <Slider 
                                    value={refreshInterval} 
                                    onChange={(e) => setRefreshInterval(e.value as number)}
                                    min={10} 
                                    max={300} 
                                    step={10}
                                    className="w-full mt-2"
                                />
                            </div>
                        </AccordionTab>
                        
                        <AccordionTab header="Compression et optimisation">
                            <div className="field">
                                <label>Niveau de compression</label>
                                <Knob 
                                    value={compressionLevel} 
                                    onChange={(e) => setCompressionLevel(e.value)}
                                    min={1} 
                                    max={9}
                                    size={80}
                                    className="mt-2"
                                />
                            </div>
                            
                            <div className="field">
                                <div className="flex align-items-center gap-2">
                                    <InputSwitch 
                                        checked={incrementalBackup} 
                                        onChange={(e) => setIncrementalBackup(e.value)}
                                    />
                                    <label>Sauvegarde incrémentale</label>
                                </div>
                            </div>
                        </AccordionTab>
                        
                        <AccordionTab header="Notifications">
                            <div className="field">
                                <label>Niveau de notification</label>
                                <Dropdown 
                                    value={notificationLevel} 
                                    options={notificationOptions} 
                                    onChange={(e) => setNotificationLevel(e.value)}
                                    className="w-full"
                                />
                            </div>
                            
                            <div className="field">
                                <div className="flex align-items-center gap-2">
                                    <InputSwitch 
                                        checked={cloudSync} 
                                        onChange={(e) => setCloudSync(e.value)}
                                    />
                                    <label>Synchronisation cloud</label>
                                </div>
                            </div>
                        </AccordionTab>
                    </Accordion>
                </Sidebar>
                
                <Dialog 
                    header="Assistant de configuration" 
                    visible={wizardMode} 
                    onHide={() => setWizardMode(false)}
                    style={{ width: '70vw' }}
                    modal
                >
                    <Steps 
                        model={wizardSteps} 
                        activeIndex={wizardStep}
                        onSelect={(e) => setWizardStep(e.index)}
                        readOnly={false}
                        className="mb-4"
                    />
                    
                    <div className="wizard-content">
                        {wizardStep === 0 && (
                            <div>
                                <h4>Configuration de base</h4>
                                <p>Définissons les paramètres fondamentaux de votre système de sauvegarde.</p>
                                <div className="field">
                                    <label>Fréquence par défaut</label>
                                    <Dropdown options={frequenceOptions} className="w-full" />
                                </div>
                            </div>
                        )}
                        {wizardStep === 4 && (
                            <div className="text-center">
                                <i className="pi pi-check-circle text-green-500 text-6xl mb-3" />
                                <h4>Configuration terminée !</h4>
                                <p>Votre système de sauvegarde est maintenant configuré et opérationnel.</p>
                            </div>
                        )}
                    </div>
                    
                    <div className="flex justify-content-between mt-4">
                        <Button 
                            label="Précédent" 
                            icon="pi pi-chevron-left" 
                            outlined
                            disabled={wizardStep === 0}
                            onClick={() => setWizardStep(wizardStep - 1)}
                        />
                        <Button 
                            label={wizardStep === wizardSteps.length - 1 ? 'Terminer' : 'Suivant'}
                            icon={wizardStep === wizardSteps.length - 1 ? 'pi pi-check' : 'pi pi-chevron-right'}
                            iconPos="right"
                            onClick={() => {
                                if (wizardStep === wizardSteps.length - 1) {
                                    setWizardMode(false);
                                    toast.current?.show({
                                        severity: 'success',
                                        summary: 'Configuration terminée',
                                        detail: 'Votre système de sauvegarde a été configuré avec succès',
                                        life: 5000
                                    });
                                } else {
                                    setWizardStep(wizardStep + 1);
                                }
                            }}
                        />
                    </div>
                </Dialog>
                
                <ScrollTop threshold={600} className="w-3rem h-3rem border-round bg-primary" />
            </BlockUI>
        </div>
    );
};

export default SauvegardePage;

// Styles CSS pour l'interface ultra-professionnelle de sauvegarde
const customStyles = `
.backup-management-system .p-tabview-nav {
    background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
    border-radius: 10px 10px 0 0;
}

.backup-management-system .p-tabview-nav li .p-tabview-nav-link {
    color: white;
    border: none;
}

.backup-management-system .p-tabview-nav li.p-highlight .p-tabview-nav-link {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    margin: 4px;
}

.view-mode-selector .p-button {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
}

.view-mode-selector .p-button.p-highlight {
    background: rgba(255, 255, 255, 0.3);
}

.hover\\:shadow-lg:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s ease;
}

.transition-shadow {
    transition: box-shadow 0.3s ease;
}

.bg-gradient-to-r {
    background: linear-gradient(90deg, var(--tw-gradient-stops));
}

.from-blue-500 {
    --tw-gradient-from: #3b82f6;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(59, 130, 246, 0));
}

.to-blue-600 {
    --tw-gradient-to: #2563eb;
}

.from-green-500 {
    --tw-gradient-from: #22c55e;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(34, 197, 94, 0));
}

.to-green-600 {
    --tw-gradient-to: #16a34a;
}

.from-purple-500 {
    --tw-gradient-from: #a855f7;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(168, 85, 247, 0));
}

.to-purple-600 {
    --tw-gradient-to: #9333ea;
}

.from-orange-500 {
    --tw-gradient-from: #f97316;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(249, 115, 22, 0));
}

.to-orange-600 {
    --tw-gradient-to: #ea580c;
}

.from-teal-500 {
    --tw-gradient-from: #14b8a6;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(20, 184, 166, 0));
}

.to-teal-600 {
    --tw-gradient-to: #0d9488;
}

.from-pink-500 {
    --tw-gradient-from: #ec4899;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(236, 72, 153, 0));
}

.to-pink-600 {
    --tw-gradient-to: #db2777;
}

.from-indigo-500 {
    --tw-gradient-from: #6366f1;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(99, 102, 241, 0));
}

.to-purple-600 {
    --tw-gradient-to: #9333ea;
}

.bg-white-alpha-20 {
    background: rgba(255, 255, 255, 0.2);
}

.wizard-content {
    min-height: 300px;
}
`;

// Injection du style dans le document
if (typeof document !== 'undefined') {
    const style = document.createElement('style');
    style.textContent = customStyles;
    document.head.appendChild(style);
}