'use client';

import { JiraConfig } from '@/lib/types';
import { TfsConfig } from '@/services/integrations/tfs/tfs';
import { Header } from '@/components/ui/Header';
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
import { JiraConfigForm } from './jira/JiraConfigForm';
import { JiraSync } from '@/components/jira/JiraSync';
import { JiraLogs } from '@/components/jira/JiraLogs';
import { JiraSchedulerConfig } from '@/components/jira/JiraSchedulerConfig';
import { TfsConfigForm } from './tfs/TfsConfigForm';
import { TfsSync } from './tfs/TfsSync';
import { TfsSchedulerConfig } from './tfs/TfsSchedulerConfig';
import Link from 'next/link';

interface IntegrationsSettingsPageClientProps {
  initialJiraConfig: JiraConfig;
  initialTfsConfig: TfsConfig;
}

export function IntegrationsSettingsPageClient({
  initialJiraConfig,
  initialTfsConfig,
}: IntegrationsSettingsPageClientProps) {
  return (
    <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>

          {/* Section Jira */}
          <div className="mb-12">
            <div className="mb-6">
              <h2 className="text-xl font-mono font-bold text-[var(--foreground)] mb-2 flex items-center gap-2">
                <span className="text-blue-600">🏢</span>
                Jira Cloud
              </h2>
              <p className="text-[var(--muted-foreground)]">
                Synchronisation automatique des tickets Jira vers TowerControl
              </p>
            </div>

            <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
              {/* Configuration Jira */}
              <div className="xl:col-span-2">
                <Card>
                  <CardContent>
                    <JiraConfigForm />
                  </CardContent>
                </Card>
                <div className="mt-6">
                  <JiraLogs />
                </div>
              </div>

              {/* Actions 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>
                    )}

                    <JiraSchedulerConfig />
                    <JiraSync />
                  </>
                ) : (
                  <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>

          {/* Diviseur entre les sections */}
          <div className="relative my-12">
            <div className="absolute inset-0 flex items-center">
              <div className="w-full border-t border-[var(--border)]"></div>
            </div>
            <div className="relative flex justify-center text-sm uppercase">
              <span className="bg-[var(--background)] px-6 text-[var(--muted-foreground)] font-medium tracking-wider">
                • • •
              </span>
            </div>
          </div>

          {/* Section TFS */}
          <div>
            <div className="mb-6">
              <h2 className="text-xl font-mono font-bold text-[var(--foreground)] mb-2 flex items-center gap-2">
                <span className="text-blue-500">🔧</span>
                Azure DevOps / TFS
              </h2>
              <p className="text-[var(--muted-foreground)]">
                Synchronisation des Pull Requests depuis Azure DevOps vers
                TowerControl
              </p>
            </div>

            <div className="grid grid-cols-1 xl:grid-cols-3 gap-6">
              {/* Configuration TFS */}
              <div className="xl:col-span-2">
                <Card>
                  <CardContent>
                    <TfsConfigForm />
                  </CardContent>
                </Card>
              </div>

              {/* Actions TFS */}
              <div className="space-y-4">
                {initialTfsConfig?.enabled ? (
                  <>
                    <TfsSchedulerConfig />
                    <TfsSync />
                  </>
                ) : (
                  <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 Azure DevOps pour accéder aux outils de
                          synchronisation
                        </p>
                      </div>
                    </CardContent>
                  </Card>
                )}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
