towercontrol/src/components/settings/SettingsIndexPageClient.tsx

'use client';

import { Header } from '@/components/ui/Header';
import { useUserPreferences } from '@/contexts/UserPreferencesContext';
import { useState, useEffect, useTransition } from 'react';
import { backupClient } from '@/clients/backup-client';
import { jiraClient } from '@/clients/jira-client';
import { getSystemInfo } from '@/actions/system-info';
import { SystemInfo } from '@/services/core/system-info';
import { QuickStats } from './index/QuickStats';
import { SettingsNavigation } from './index/SettingsNavigation';
import { QuickActions } from './index/QuickActions';
import { SystemInfo as SystemInfoComponent } from './index/SystemInfo';

interface SettingsIndexPageClientProps {
  initialSystemInfo: SystemInfo;
}

export function SettingsIndexPageClient({ initialSystemInfo }: SettingsIndexPageClientProps) {
  const { preferences } = useUserPreferences();
  // États pour les actions
  const [isBackupLoading, setIsBackupLoading] = useState(false);
  const [isJiraTestLoading, setIsJiraTestLoading] = useState(false);
  const [systemInfo, setSystemInfo] = useState<SystemInfo | null>(initialSystemInfo || null);
  const [messages, setMessages] = useState<{
    backup?: { type: 'success' | 'error', text: string };
    jira?: { type: 'success' | 'error', text: string };
  }>({});
  
  // useTransition pour le server action
  const [isSystemInfoLoading, startTransition] = useTransition();

  // Fonction pour recharger les infos système (server action)
  const loadSystemInfo = () => {
    startTransition(async () => {
      try {
        const result = await getSystemInfo();
        if (result.success && result.data) {
          setSystemInfo(result.data);
        } else {
          console.error('Error loading system info:', result.error);
        }
      } catch (error) {
        console.error('Error loading system info:', error);
      }
    });
  };

  // Fonction pour créer une sauvegarde manuelle
  const handleCreateBackup = async () => {
    setIsBackupLoading(true);
    try {
      const backup = await backupClient.createBackup();
      if (backup) {
        setMessages(prev => ({
          ...prev,
          backup: { type: 'success', text: `Sauvegarde créée: ${backup.filename}` }
        }));
      } else {
        setMessages(prev => ({
          ...prev,
          backup: { type: 'success', text: 'Sauvegarde sautée: aucun changement détecté' }
        }));
      }
      
      // Recharger les infos système pour mettre à jour le nombre de sauvegardes
      loadSystemInfo();
    } catch {
      setMessages(prev => ({
        ...prev,
        backup: { type: 'error', text: 'Erreur lors de la création de la sauvegarde' }
      }));
    } finally {
      setIsBackupLoading(false);
    }
  };

  // Fonction pour tester la connexion Jira
  const handleTestJira = async () => {
    setIsJiraTestLoading(true);
    try {
      const status = await jiraClient.testConnection();
      setMessages(prev => ({
        ...prev,
        jira: { 
          type: status.connected ? 'success' : 'error', 
          text: status.connected ? 'Connexion Jira réussie !' : `Erreur: ${status.message || 'Connexion échouée'}` 
        }
      }));
    } catch {
      setMessages(prev => ({
        ...prev,
        jira: { type: 'error', text: 'Erreur lors du test de connexion Jira' }
      }));
    } finally {
      setIsJiraTestLoading(false);
    }
  };

  // Auto-dismiss des messages après 5 secondes
  useEffect(() => {
    Object.keys(messages).forEach(key => {
      if (messages[key as keyof typeof messages]) {
        const timer = setTimeout(() => {
          setMessages(prev => ({ ...prev, [key]: undefined }));
        }, 5000);
        return () => clearTimeout(timer);
      }
    });
  }, [messages]);

  const settingsPages = [
    {
      href: '/settings/general',
      icon: '⚙️',
      title: 'Paramètres généraux',
      description: 'Interface, thème, préférences d\'affichage',
      status: 'Fonctionnel'
    },
    {
      href: '/settings/integrations',
      icon: '🔌',
      title: 'Intégrations',
      description: 'Jira, GitHub, Slack et autres services externes',
      status: 'Fonctionnel'
    },
    {
      href: '/settings/backup',
      icon: '💾',
      title: 'Sauvegardes',
      description: 'Gestion des sauvegardes automatiques et manuelles',
      status: 'Fonctionnel'
    },
    {
      href: '/settings/advanced',
      icon: '🛠️',
      title: 'Paramètres avancés',
      description: 'Logs, debug et maintenance système',
      status: 'Fonctionnel'
    }
  ];

  return (
    <div className="min-h-screen bg-[var(--background)]">
        <Header 
          title="TowerControl"
          subtitle="Configuration & Paramètres"
        />
        
        <div className="container mx-auto px-4 py-4">
          <div className="max-w-4xl mx-auto">
            {/* Page Header */}
            <div className="mb-8">
              <h1 className="text-3xl font-mono font-bold text-[var(--foreground)] mb-3">
                Paramètres
              </h1>
              <p className="text-[var(--muted-foreground)] text-lg">
                Configuration de TowerControl et de ses intégrations
              </p>
            </div>

            {/* Quick Stats */}
            <QuickStats preferences={preferences} systemInfo={systemInfo} />

            {/* Settings Sections */}
            <SettingsNavigation settingsPages={settingsPages} />

            {/* Quick Actions */}
            <QuickActions
              onCreateBackup={handleCreateBackup}
              onTestJira={handleTestJira}
              isBackupLoading={isBackupLoading}
              isJiraTestLoading={isJiraTestLoading}
              jiraEnabled={preferences.jiraConfig.enabled}
              messages={messages}
            />

            {/* System Info */}
            <SystemInfoComponent
              systemInfo={systemInfo}
              isLoading={isSystemInfoLoading}
              onRefresh={loadSystemInfo}
            />
          </div>
        </div>
      </div>
  );
}