'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 SettingsIndexPageClientProps {
  initialPreferences: UserPreferences;
}

export function SettingsIndexPageClient({ initialPreferences }: SettingsIndexPageClientProps) {
  const settingsPages = [
    {
      href: '/settings/general',
      icon: '⚙️',
      title: 'Paramètres généraux',
      description: 'Interface, thème, préférences d\'affichage',
      status: 'En développement'
    },
    {
      href: '/settings/integrations',
      icon: '🔌',
      title: 'Intégrations',
      description: 'Jira, GitHub, Slack et autres services externes',
      status: 'Fonctionnel'
    },
    {
      href: '/settings/advanced',
      icon: '🛠️',
      title: 'Paramètres avancés',
      description: 'Sauvegarde, logs, debug et maintenance',
      status: 'Prochainement'
    }
  ];

  return (
    <UserPreferencesProvider initialPreferences={initialPreferences}>
      <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 */}
            <div className="grid grid-cols-1 md:grid-cols-3 gap-4 mb-8">
              <Card>
                <CardContent className="p-4">
                  <div className="flex items-center gap-3">
                    <span className="text-2xl">🎨</span>
                    <div>
                      <p className="text-sm text-[var(--muted-foreground)]">Thème actuel</p>
                      <p className="font-medium capitalize">{initialPreferences.viewPreferences.theme}</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
              
              <Card>
                <CardContent className="p-4">
                  <div className="flex items-center gap-3">
                    <span className="text-2xl">🔌</span>
                    <div>
                      <p className="text-sm text-[var(--muted-foreground)]">Jira</p>
                      <p className="font-medium">
                        {initialPreferences.jiraConfig.enabled ? 'Configuré' : 'Non configuré'}
                      </p>
                    </div>
                  </div>
                </CardContent>
              </Card>
              
              <Card>
                <CardContent className="p-4">
                  <div className="flex items-center gap-3">
                    <span className="text-2xl">📏</span>
                    <div>
                      <p className="text-sm text-[var(--muted-foreground)]">Taille police</p>
                      <p className="font-medium capitalize">{initialPreferences.viewPreferences.fontSize}</p>
                    </div>
                  </div>
                </CardContent>
              </Card>
            </div>

            {/* Settings Sections */}
            <div className="space-y-4">
              <h2 className="text-xl font-semibold text-[var(--foreground)] mb-4">
                Sections de configuration
              </h2>
              
              <div className="grid grid-cols-1 md:grid-cols-1 gap-4">
                {settingsPages.map((page) => (
                  <Link key={page.href} href={page.href}>
                    <Card className="transition-all hover:shadow-md hover:border-[var(--primary)]/30 cursor-pointer">
                      <CardContent className="p-6">
                        <div className="flex items-start justify-between">
                          <div className="flex items-start gap-4">
                            <span className="text-3xl">{page.icon}</span>
                            <div className="flex-1">
                              <h3 className="text-lg font-semibold text-[var(--foreground)] mb-1">
                                {page.title}
                              </h3>
                              <p className="text-[var(--muted-foreground)] mb-2">
                                {page.description}
                              </p>
                              <div className="flex items-center gap-2">
                                <span className={`px-2 py-1 rounded text-xs font-medium ${
                                  page.status === 'Fonctionnel' 
                                    ? 'bg-[var(--success)]/20 text-[var(--success)]'
                                    : page.status === 'En développement'
                                    ? 'bg-[var(--warning)]/20 text-[var(--warning)]'
                                    : 'bg-[var(--muted)]/20 text-[var(--muted-foreground)]'
                                }`}>
                                  {page.status}
                                </span>
                              </div>
                            </div>
                          </div>
                          <svg 
                            className="w-5 h-5 text-[var(--muted-foreground)]" 
                            fill="none" 
                            stroke="currentColor" 
                            viewBox="0 0 24 24"
                          >
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
                          </svg>
                        </div>
                      </CardContent>
                    </Card>
                  </Link>
                ))}
              </div>
            </div>

            {/* Quick Actions */}
            <div className="mt-8">
              <h2 className="text-xl font-semibold text-[var(--foreground)] mb-4">
                Actions rapides
              </h2>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <Card>
                  <CardContent className="p-4">
                    <div className="flex items-center justify-between">
                      <div>
                        <h3 className="font-medium mb-1">Sauvegarde manuelle</h3>
                        <p className="text-sm text-[var(--muted-foreground)]">
                          Créer une sauvegarde des données
                        </p>
                      </div>
                      <button className="px-3 py-1.5 bg-[var(--primary)] text-[var(--primary-foreground)] rounded text-sm">
                        Sauvegarder
                      </button>
                    </div>
                  </CardContent>
                </Card>
                
                <Card>
                  <CardContent className="p-4">
                    <div className="flex items-center justify-between">
                      <div>
                        <h3 className="font-medium mb-1">Test Jira</h3>
                        <p className="text-sm text-[var(--muted-foreground)]">
                          Tester la connexion Jira
                        </p>
                      </div>
                      <button 
                        className="px-3 py-1.5 bg-[var(--card)] text-[var(--foreground)] border border-[var(--border)] rounded text-sm"
                        disabled={!initialPreferences.jiraConfig.enabled}
                      >
                        Tester
                      </button>
                    </div>
                  </CardContent>
                </Card>
              </div>
            </div>

            {/* System Info */}
            <Card className="mt-8">
              <CardHeader>
                <h2 className="text-lg font-semibold">ℹ️ Informations système</h2>
              </CardHeader>
              <CardContent>
                <div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
                  <div>
                    <p className="text-[var(--muted-foreground)]">Version</p>
                    <p className="font-medium">TowerControl v1.0.0</p>
                  </div>
                  <div>
                    <p className="text-[var(--muted-foreground)]">Dernière maj</p>
                    <p className="font-medium">Il y a 2 jours</p>
                  </div>
                  <div>
                    <p className="text-[var(--muted-foreground)]">Env</p>
                    <p className="font-medium">Development</p>
                  </div>
                </div>
              </CardContent>
            </Card>
          </div>
        </div>
      </div>
    </UserPreferencesProvider>
  );
}