'use client';

import { UserPreferences } from '@/lib/types';
import { Header } from '@/components/ui/Header';
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
import { UserPreferencesProvider } from '@/contexts/UserPreferencesContext';
import Link from 'next/link';

interface AdvancedSettingsPageClientProps {
  initialPreferences: UserPreferences;
}

export function AdvancedSettingsPageClient({ initialPreferences }: AdvancedSettingsPageClientProps) {
  return (
    <UserPreferencesProvider initialPreferences={initialPreferences}>
      <div className="min-h-screen bg-[var(--background)]">
        <Header 
          title="TowerControl"
          subtitle="Paramètres avancés"
        />
        
        <div className="container mx-auto px-4 py-4">
          <div className="max-w-4xl mx-auto">
            {/* Breadcrumb */}
            <div className="mb-4 text-sm">
              <Link href="/settings" className="text-[var(--muted-foreground)] hover:text-[var(--primary)]">
                Paramètres
              </Link>
              <span className="mx-2 text-[var(--muted-foreground)]">/</span>
              <span className="text-[var(--foreground)]">Avancé</span>
            </div>

            {/* Page Header */}
            <div className="mb-6">
              <h1 className="text-2xl font-mono font-bold text-[var(--foreground)] mb-2">
                🛠️ Paramètres avancés
              </h1>
              <p className="text-[var(--muted-foreground)]">
                Configuration système, sauvegarde et outils de développement
              </p>
            </div>

            <div className="space-y-6">
              {/* Sauvegarde et données */}
              <Card>
                <CardHeader>
                  <h2 className="text-lg font-semibold">💾 Sauvegarde et données</h2>
                  <p className="text-sm text-[var(--muted-foreground)]">
                    Gestion des sauvegardes automatiques et manuelles
                  </p>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="p-4 bg-[var(--card)] rounded border border-dashed border-[var(--border)]">
                      <h3 className="font-medium mb-2">Sauvegarde automatique</h3>
                      <p className="text-sm text-[var(--muted-foreground)] mb-2">
                        Sauvegarde toutes les 6 heures (configurable)
                      </p>
                      <p className="text-xs text-[var(--muted-foreground)]">
                        Prochaine sauvegarde: dans 3h 42min
                      </p>
                    </div>
                    
                    <div className="p-4 bg-[var(--card)] rounded border border-dashed border-[var(--border)]">
                      <h3 className="font-medium mb-2">Sauvegardes disponibles</h3>
                      <p className="text-sm text-[var(--muted-foreground)] mb-2">
                        5 sauvegardes conservées
                      </p>
                      <p className="text-xs text-[var(--muted-foreground)]">
                        Dernière: il y a 2h 18min
                      </p>
                    </div>
                  </div>
                  
                  <div className="flex gap-2 pt-2">
                    <button className="px-3 py-1.5 bg-[var(--primary)] text-[var(--primary-foreground)] rounded text-sm font-medium">
                      Créer une sauvegarde
                    </button>
                    <button className="px-3 py-1.5 bg-[var(--card)] text-[var(--foreground)] border border-[var(--border)] rounded text-sm font-medium">
                      Gérer les sauvegardes
                    </button>
                  </div>
                </CardContent>
              </Card>

              {/* Base de données */}
              <Card>
                <CardHeader>
                  <h2 className="text-lg font-semibold">🗄️ Base de données</h2>
                  <p className="text-sm text-[var(--muted-foreground)]">
                    Informations et maintenance de la base de données
                  </p>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
                    <div className="p-4 bg-[var(--card)] rounded border border-dashed border-[var(--border)]">
                      <h3 className="font-medium mb-1">Tâches</h3>
                      <p className="text-2xl font-bold text-[var(--primary)]">247</p>
                      <p className="text-xs text-[var(--muted-foreground)]">entrées</p>
                    </div>
                    
                    <div className="p-4 bg-[var(--card)] rounded border border-dashed border-[var(--border)]">
                      <h3 className="font-medium mb-1">Tags</h3>
                      <p className="text-2xl font-bold text-[var(--primary)]">18</p>
                      <p className="text-xs text-[var(--muted-foreground)]">entrées</p>
                    </div>
                    
                    <div className="p-4 bg-[var(--card)] rounded border border-dashed border-[var(--border)]">
                      <h3 className="font-medium mb-1">Taille DB</h3>
                      <p className="text-2xl font-bold text-[var(--primary)]">2.4</p>
                      <p className="text-xs text-[var(--muted-foreground)]">MB</p>
                    </div>
                  </div>
                </CardContent>
              </Card>

              {/* Export / Import */}
              <Card>
                <CardHeader>
                  <h2 className="text-lg font-semibold">📤 Export / Import</h2>
                  <p className="text-sm text-[var(--muted-foreground)]">
                    Sauvegarde et restauration des données
                  </p>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="p-4 bg-[var(--card)] rounded border border-dashed border-[var(--border)]">
                      <h3 className="font-medium mb-2">Export des données</h3>
                      <p className="text-sm text-[var(--muted-foreground)] mb-3">
                        Exporter toutes les données au format JSON
                      </p>
                      <button className="px-3 py-1.5 bg-[var(--primary)] text-[var(--primary-foreground)] rounded text-sm">
                        Télécharger export
                      </button>
                    </div>
                    
                    <div className="p-4 bg-[var(--card)] rounded border border-dashed border-[var(--border)]">
                      <h3 className="font-medium mb-2">Import des données</h3>
                      <p className="text-sm text-[var(--muted-foreground)] mb-3">
                        Restaurer des données depuis un fichier JSON
                      </p>
                      <button className="px-3 py-1.5 bg-[var(--card)] text-[var(--foreground)] border border-[var(--border)] rounded text-sm">
                        Choisir fichier
                      </button>
                    </div>
                  </div>
                </CardContent>
              </Card>

              {/* Logs et debug */}
              <Card>
                <CardHeader>
                  <h2 className="text-lg font-semibold">🐛 Debug et logs</h2>
                  <p className="text-sm text-[var(--muted-foreground)]">
                    Outils de diagnostic et de résolution de problèmes
                  </p>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <div className="p-4 bg-[var(--card)] rounded border border-dashed border-[var(--border)]">
                      <h3 className="font-medium mb-2">Logs système</h3>
                      <p className="text-sm text-[var(--muted-foreground)] mb-3">
                        Consultation des logs d&apos;erreur et d&apos;activité
                      </p>
                      <button className="px-3 py-1.5 bg-[var(--card)] text-[var(--foreground)] border border-[var(--border)] rounded text-sm">
                        Voir les logs
                      </button>
                    </div>
                    
                    <div className="p-4 bg-[var(--card)] rounded border border-dashed border-[var(--border)]">
                      <h3 className="font-medium mb-2">Mode debug</h3>
                      <p className="text-sm text-[var(--muted-foreground)] mb-3">
                        Activer les informations de debug détaillées
                      </p>
                      <button className="px-3 py-1.5 bg-[var(--card)] text-[var(--foreground)] border border-[var(--border)] rounded text-sm">
                        Activer debug
                      </button>
                    </div>
                  </div>
                </CardContent>
              </Card>

              {/* Zone dangereuse */}
              <Card>
                <CardHeader>
                  <h2 className="text-lg font-semibold text-[var(--destructive)]">⚠️ Zone dangereuse</h2>
                  <p className="text-sm text-[var(--muted-foreground)]">
                    Actions irréversibles - à utiliser avec précaution
                  </p>
                </CardHeader>
                <CardContent className="space-y-4">
                  <div className="p-4 bg-[var(--destructive)]/5 border border-[var(--destructive)]/20 rounded">
                    <h3 className="font-medium mb-2 text-[var(--destructive)]">Réinitialisation complète</h3>
                    <p className="text-sm text-[var(--muted-foreground)] mb-3">
                      Supprime toutes les données (tâches, tags, préférences)
                    </p>
                    <button className="px-3 py-1.5 bg-[var(--destructive)] text-[var(--destructive-foreground)] rounded text-sm">
                      Réinitialiser
                    </button>
                  </div>
                </CardContent>
              </Card>

              {/* Note développement futur */}
              <Card>
                <CardContent className="p-4">
                  <div className="p-4 bg-[var(--warning)]/10 border border-[var(--warning)]/20 rounded">
                    <p className="text-sm text-[var(--warning)] font-medium mb-2">
                      🚧 Fonctionnalités en développement
                    </p>
                    <p className="text-xs text-[var(--muted-foreground)]">
                      La plupart des fonctions avancées seront implémentées dans les prochaines versions.
                      Cette page sert de prévisualisation de l&apos;interface à venir.
                    </p>
                  </div>
                </CardContent>
              </Card>
            </div>
          </div>
        </div>
      </div>
    </UserPreferencesProvider>
  );
}