'use client';

import { useState } from 'react';
import { Header } from '@/components/ui/Header';
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
import { JiraConfigForm } from '@/components/settings/JiraConfigForm';
import { JiraSync } from '@/components/jira/JiraSync';
import { JiraLogs } from '@/components/jira/JiraLogs';
import { useJiraConfig } from '@/hooks/useJiraConfig';

export function SettingsPageClient() {
  const { config: jiraConfig } = useJiraConfig();
  const [activeTab, setActiveTab] = useState<'general' | 'integrations' | 'advanced'>('general');

  const tabs = [
    { id: 'general' as const, label: 'Général', icon: '⚙️' },
    { id: 'integrations' as const, label: 'Intégrations', icon: '🔌' },
    { id: 'advanced' as const, label: 'Avancé', icon: '🛠️' }
  ];

  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-7xl mx-auto">
          {/* En-tête compact */}
          <div className="mb-4">
            <h1 className="text-xl font-mono font-bold text-[var(--foreground)] mb-1">
              Paramètres
            </h1>
            <p className="text-sm text-[var(--muted-foreground)]">
              Configuration de TowerControl et de ses intégrations
            </p>
          </div>

          <div className="flex gap-6">
            {/* Navigation latérale compacte */}
            <div className="w-56 flex-shrink-0">
              <Card>
                <CardContent className="p-0">
                  {tabs.map((tab) => (
                    <button
                      key={tab.id}
                      onClick={() => setActiveTab(tab.id)}
                      className={`w-full flex items-center gap-2 px-3 py-2 text-left transition-colors ${
                        activeTab === tab.id
                          ? 'bg-[var(--primary)]/10 text-[var(--primary)] border-r-2 border-[var(--primary)]'
                          : 'text-[var(--muted-foreground)] hover:bg-[var(--card-hover)] hover:text-[var(--foreground)]'
                      }`}
                    >
                      <span className="text-base">{tab.icon}</span>
                      <span className="font-medium text-sm">{tab.label}</span>
                    </button>
                  ))}
                </CardContent>
              </Card>
            </div>

            {/* Contenu principal */}
            <div className="flex-1 min-h-0">
              {activeTab === 'general' && (
                <div className="space-y-6">
                  <Card>
                    <CardHeader>
                      <h2 className="text-lg font-semibold">Préférences générales</h2>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      <div className="p-4 bg-[var(--card)] rounded border border-dashed border-[var(--border)]">
                        <p className="text-sm text-[var(--muted-foreground)]">
                          Les paramètres généraux seront disponibles dans une prochaine version.
                        </p>
                      </div>
                    </CardContent>
                  </Card>
                </div>
              )}

              {activeTab === 'integrations' && (
                <div className="h-full">
                  {/* Layout en 2 colonnes pour optimiser l'espace */}
                  <div className="grid grid-cols-1 xl:grid-cols-3 gap-4 h-full">
                    
                    {/* Colonne 1: Configuration Jira */}
                    <div className="xl:col-span-2">
                      <Card className="h-fit">
                        <CardHeader className="pb-3">
                          <h2 className="text-base font-semibold">🔌 Intégration Jira Cloud</h2>
                          <p className="text-xs text-[var(--muted-foreground)]">
                            Synchronisation automatique des tickets
                          </p>
                        </CardHeader>
                        <CardContent>
                          <JiraConfigForm />
                        </CardContent>
                      </Card>
                    </div>

                    {/* Colonne 2: Actions et Logs */}
                    <div className="space-y-4">
                      {jiraConfig?.enabled && (
                        <>
                          <JiraSync />
                          <JiraLogs />
                        </>
                      )}
                    </div>
                  </div>
                </div>
              )}

              {activeTab === 'advanced' && (
                <div className="space-y-6">
                  <Card>
                    <CardHeader>
                      <h2 className="text-lg font-semibold">Paramètres avancés</h2>
                    </CardHeader>
                    <CardContent className="space-y-4">
                      <div className="p-4 bg-[var(--card)] rounded border border-dashed border-[var(--border)]">
                        <p className="text-sm text-[var(--muted-foreground)]">
                          Les paramètres avancés seront disponibles dans une prochaine version.
                        </p>
                        <ul className="mt-2 text-xs text-[var(--muted-foreground)] space-y-1">
                          <li>• Configuration de la base de données</li>
                          <li>• Logs de debug</li>
                          <li>• Export/Import des données</li>
                          <li>• Réinitialisation</li>
                        </ul>
                      </div>
                    </CardContent>
                  </Card>
                </div>
              )}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}