'use client';

import { UserPreferences, JiraConfig } from '@/lib/types';
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 { UserPreferencesProvider } from '@/contexts/UserPreferencesContext';
import Link from 'next/link';

interface IntegrationsSettingsPageClientProps {
  initialPreferences: UserPreferences;
  initialJiraConfig: JiraConfig;
}

export function IntegrationsSettingsPageClient({ 
  initialPreferences, 
  initialJiraConfig 
}: IntegrationsSettingsPageClientProps) {
  return (
    <UserPreferencesProvider initialPreferences={initialPreferences}>
      <div className="min-h-screen bg-[var(--background)]">
        <Header 
          title="TowerControl"
          subtitle="Intégrations externes"
        />
        
        <div className="container mx-auto px-4 py-4">
          <div className="max-w-6xl 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)]">Intégrations</span>
            </div>

            {/* Page Header */}
            <div className="mb-6">
              <h1 className="text-2xl font-mono font-bold text-[var(--foreground)] mb-2">
                🔌 Intégrations externes
              </h1>
              <p className="text-[var(--muted-foreground)]">
                Configuration des intégrations avec les outils externes
              </p>
            </div>

            {/* Layout en 2 colonnes pour optimiser l'espace */}
            <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
              
              {/* Colonne principale: Configuration Jira */}
              <div className="xl:col-span-2 space-y-6">
                <Card>
                  <CardHeader>
                    <h2 className="text-xl font-semibold flex items-center gap-2">
                      <span className="text-blue-600">🏢</span>
                      Jira Cloud
                    </h2>
                    <p className="text-sm text-[var(--muted-foreground)]">
                      Synchronisation automatique des tickets Jira vers TowerControl
                    </p>
                  </CardHeader>
                  <CardContent>
                    <JiraConfigForm />
                  </CardContent>
                </Card>

                {/* Futures intégrations */}
                <Card>
                  <CardHeader>
                    <h2 className="text-xl font-semibold">Autres intégrations</h2>
                    <p className="text-sm text-[var(--muted-foreground)]">
                      Intégrations prévues pour les prochaines versions
                    </p>
                  </CardHeader>
                  <CardContent>
                    <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)]">
                        <div className="flex items-center gap-2 mb-2">
                          <span className="text-lg">📧</span>
                          <h3 className="font-medium">Slack/Teams</h3>
                        </div>
                        <p className="text-sm text-[var(--muted-foreground)]">
                          Notifications et commandes via chat
                        </p>
                      </div>
                      
                      <div className="p-4 bg-[var(--card)] rounded border border-dashed border-[var(--border)]">
                        <div className="flex items-center gap-2 mb-2">
                          <span className="text-lg">🐙</span>
                          <h3 className="font-medium">GitHub/GitLab</h3>
                        </div>
                        <p className="text-sm text-[var(--muted-foreground)]">
                          Synchronisation des issues et PR
                        </p>
                      </div>
                      
                      <div className="p-4 bg-[var(--card)] rounded border border-dashed border-[var(--border)]">
                        <div className="flex items-center gap-2 mb-2">
                          <span className="text-lg">📊</span>
                          <h3 className="font-medium">Calendriers</h3>
                        </div>
                        <p className="text-sm text-[var(--muted-foreground)]">
                          Google Calendar, Outlook, etc.
                        </p>
                      </div>
                      
                      <div className="p-4 bg-[var(--card)] rounded border border-dashed border-[var(--border)]">
                        <div className="flex items-center gap-2 mb-2">
                          <span className="text-lg">⏱️</span>
                          <h3 className="font-medium">Time tracking</h3>
                        </div>
                        <p className="text-sm text-[var(--muted-foreground)]">
                          Toggl, RescueTime, etc.
                        </p>
                      </div>
                    </div>
                  </CardContent>
                </Card>
              </div>

              {/* Colonne latérale: Actions et Logs Jira */}
              <div className="space-y-4">
                {initialJiraConfig?.enabled && (
                  <>
                    {/* Dashboard Analytics */}
                    {initialJiraConfig.projectKey && (
                      <Card>
                        <CardHeader>
                          <h3 className="text-sm font-semibold">📊 Analytics d&apos;équipe</h3>
                        </CardHeader>
                        <CardContent className="space-y-3">
                          <p className="text-xs text-[var(--muted-foreground)]">
                            Surveillance du projet {initialJiraConfig.projectKey}
                          </p>
                          <Link 
                            href="/jira-dashboard"
                            className="inline-flex items-center justify-center w-full px-3 py-2 text-sm font-medium bg-[var(--primary)] text-[var(--primary-foreground)] rounded-lg hover:bg-[var(--primary)]/90 transition-colors"
                          >
                            Voir le Dashboard
                          </Link>
                        </CardContent>
                      </Card>
                    )}
                    
                    <JiraSync />
                    <JiraLogs />
                  </>
                )}
                
                {!initialJiraConfig?.enabled && (
                  <Card>
                    <CardContent className="p-4">
                      <div className="text-center py-6">
                        <span className="text-4xl mb-4 block">🔧</span>
                        <p className="text-sm text-[var(--muted-foreground)]">
                          Configurez Jira pour accéder aux outils de synchronisation
                        </p>
                      </div>
                    </CardContent>
                  </Card>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </UserPreferencesProvider>
  );
}