'use client';

import { useState } from 'react';
import { Button } from '@/components/ui/Button';
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
import { Badge } from '@/components/ui/Badge';
import { getToday } from '@/lib/date-utils';
import { Modal } from '@/components/ui/Modal';
import { TfsSyncResult, TfsSyncAction } from '@/services/integrations/tfs/tfs';

interface TfsSyncProps {
  onSyncComplete?: () => void;
  className?: string;
}

export function TfsSync({ onSyncComplete, className = '' }: TfsSyncProps) {
  const [isConnected, setIsConnected] = useState<boolean | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [isSyncing, setIsSyncing] = useState(false);
  const [lastSyncResult, setLastSyncResult] = useState<TfsSyncResult | null>(
    null
  );
  const [error, setError] = useState<string | null>(null);
  const [showDetails, setShowDetails] = useState(false);

  const testConnection = async () => {
    setIsLoading(true);
    setError(null);

    try {
      const response = await fetch('/api/tfs/test');
      const result = await response.json();
      setIsConnected(result.connected);
      if (!result.connected) {
        setError(result.error || result.message);
      }
    } catch (err) {
      setIsConnected(false);
      setError(err instanceof Error ? err.message : 'Erreur de connexion');
    } finally {
      setIsLoading(false);
    }
  };

  const startSync = async () => {
    setIsSyncing(true);
    setError(null);

    try {
      const response = await fetch('/api/tfs/sync', { method: 'POST' });
      const result = await response.json();

      console.log('TFS Sync API Response:', result);

      // L'API retourne { message: '...', data: result } ou { error: '...', data: result }
      const syncResult = result.data || result;
      console.log('TFS Sync Result:', syncResult);

      setLastSyncResult(syncResult);

      // Considérer comme succès si on a une réponse (même avec status 207)
      if (response.ok || response.status === 207) {
        onSyncComplete?.();
      }
    } catch (err) {
      console.error('TFS Sync Error:', err);
      setError(
        err instanceof Error ? err.message : 'Erreur de synchronisation'
      );
    } finally {
      setIsSyncing(false);
    }
  };

  const getConnectionStatus = () => {
    if (isConnected === null) return null;
    return isConnected ? (
      <Badge variant="success" size="sm">
        ✓ Connecté
      </Badge>
    ) : (
      <Badge variant="danger" size="sm">
        ✗ Déconnecté
      </Badge>
    );
  };

  const getSyncStatus = () => {
    if (!lastSyncResult) return null;

    const {
      success,
      totalPullRequests = 0,
      pullRequestsCreated = 0,
      pullRequestsUpdated = 0,
      pullRequestsSkipped = 0,
      pullRequestsDeleted = 0,
      errors = [],
      actions = [],
    } = lastSyncResult;

    return (
      <div className="space-y-3 text-sm">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-2">
            <Badge
              variant={
                success
                  ? 'success'
                  : errors.length > 0
                    ? 'danger'
                    : totalPullRequests > 0
                      ? 'warning'
                      : 'success'
              }
              size="sm"
            >
              {success
                ? '✓ Succès'
                : errors.length > 0
                  ? '⚠ Erreurs'
                  : totalPullRequests > 0
                    ? '✓ À jour'
                    : '✓ Synchronisé'}
            </Badge>
            <span className="text-[var(--muted-foreground)] text-xs">
              {getToday().toLocaleTimeString()}
            </span>
          </div>
          <div className="text-xs text-[var(--muted-foreground)]">
            {totalPullRequests > 0
              ? `${totalPullRequests} PR${totalPullRequests > 1 ? 's' : ''} trouvée${totalPullRequests > 1 ? 's' : ''}`
              : 'Aucune PR trouvée'}
          </div>
        </div>

        <div className="grid grid-cols-2 gap-2 text-xs">
          <div className="text-center p-2 bg-[var(--card)] rounded">
            <div className="font-mono font-bold text-emerald-400">
              {pullRequestsCreated}
            </div>
            <div className="text-[var(--muted-foreground)]">Créées</div>
          </div>
          <div className="text-center p-2 bg-[var(--card)] rounded">
            <div className="font-mono font-bold text-blue-400">
              {pullRequestsUpdated}
            </div>
            <div className="text-[var(--muted-foreground)]">Mises à jour</div>
          </div>
          <div className="text-center p-2 bg-[var(--card)] rounded">
            <div className="font-mono font-bold text-orange-400">
              {pullRequestsSkipped}
            </div>
            <div className="text-[var(--muted-foreground)]">Ignorées</div>
          </div>
          <div className="text-center p-2 bg-[var(--card)] rounded">
            <div className="font-mono font-bold text-red-400">
              {pullRequestsDeleted}
            </div>
            <div className="text-[var(--muted-foreground)]">Supprimées</div>
          </div>
        </div>

        {/* Résumé textuel avec bouton détails */}
        <div className="p-2 bg-[var(--muted)]/5 rounded text-xs">
          <div className="flex items-center justify-between mb-1">
            <div className="font-medium text-[var(--muted-foreground)]">
              Résumé:
            </div>
            {actions && actions.length > 0 && (
              <Button
                onClick={() => setShowDetails(true)}
                variant="secondary"
                size="sm"
                className="text-xs px-2 py-1 h-auto"
              >
                Voir détails ({actions.length})
              </Button>
            )}
          </div>
          <div className="text-[var(--muted-foreground)]">
            {pullRequestsCreated > 0 &&
              `${pullRequestsCreated} nouvelle${pullRequestsCreated > 1 ? 's' : ''} • `}
            {pullRequestsUpdated > 0 &&
              `${pullRequestsUpdated} mise${pullRequestsUpdated > 1 ? 's' : ''} à jour • `}
            {pullRequestsDeleted > 0 &&
              `${pullRequestsDeleted} supprimée${pullRequestsDeleted > 1 ? 's' : ''} (fermées) • `}
            {pullRequestsSkipped > 0 &&
              `${pullRequestsSkipped} déjà synchronisée${pullRequestsSkipped > 1 ? 's' : ''} • `}
            {pullRequestsCreated +
              pullRequestsUpdated +
              pullRequestsDeleted +
              pullRequestsSkipped ===
              0 && 'Aucune PR trouvée'}
          </div>
        </div>

        {errors && errors.length > 0 && (
          <div className="p-2 bg-[var(--destructive)]/10 border border-[var(--destructive)]/20 rounded text-xs">
            <div className="font-semibold text-[var(--destructive)] mb-1">
              Erreurs ({errors.length}):
            </div>
            <div className="space-y-1 max-h-20 overflow-y-auto">
              {errors.map((err, i) => (
                <div
                  key={i}
                  className="text-[var(--destructive)] font-mono text-xs"
                >
                  {err}
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    );
  };

  return (
    <Card className={`${className}`}>
      <CardHeader className="pb-4">
        <div className="flex items-center justify-between">
          <div className="flex items-center gap-3">
            <div
              className="w-2 h-2 rounded-full animate-pulse"
              style={{ backgroundColor: 'var(--purple)' }}
            ></div>
            <h3 className="font-mono text-sm font-bold text-purple-400 uppercase tracking-wider">
              TFS SYNC
            </h3>
          </div>
          {getConnectionStatus()}
        </div>
      </CardHeader>

      <CardContent className="space-y-4">
        {/* Test de connexion */}
        <div className="flex gap-2">
          <Button
            onClick={testConnection}
            disabled={isLoading}
            variant="secondary"
            size="sm"
            className="flex-1"
          >
            {isLoading ? (
              <div className="flex items-center gap-2">
                <div className="w-3 h-3 border border-[var(--muted-foreground)] border-t-transparent rounded-full animate-spin"></div>
                Test...
              </div>
            ) : (
              'Tester connexion'
            )}
          </Button>

          <Button
            onClick={startSync}
            disabled={isSyncing || isConnected === false}
            variant="primary"
            size="sm"
            className="flex-1"
          >
            {isSyncing ? (
              <div className="flex items-center gap-2">
                <div className="w-3 h-3 border border-white border-t-transparent rounded-full animate-spin"></div>
                Sync...
              </div>
            ) : (
              '🔄 Synchroniser'
            )}
          </Button>
        </div>

        {/* Messages d'erreur */}
        {error && (
          <div className="p-3 bg-[var(--destructive)]/10 border border-[var(--destructive)]/20 rounded text-sm text-[var(--destructive)]">
            {error}
          </div>
        )}

        {/* Résultats de sync */}
        {getSyncStatus()}

        {/* Info */}
        <div className="text-xs text-[var(--muted-foreground)] space-y-1">
          <div>• Synchronisation unidirectionnelle (TFS → TowerControl)</div>
          <div>• Les modifications locales sont préservées</div>
          <div>• Seules les Pull Requests assignées sont synchronisées</div>
          <div>• Les PRs fermées sont automatiquement supprimées</div>
        </div>
      </CardContent>

      {/* Modal détails de synchronisation */}
      {lastSyncResult && (
        <Modal
          isOpen={showDetails}
          onClose={() => setShowDetails(false)}
          title="📋 DÉTAILS DE SYNCHRONISATION"
          size="xl"
        >
          <div className="space-y-4">
            <p className="text-sm text-[var(--muted-foreground)]">
              {(lastSyncResult.actions || []).length} action
              {(lastSyncResult.actions || []).length > 1 ? 's' : ''} effectuée
              {(lastSyncResult.actions || []).length > 1 ? 's' : ''}
            </p>

            <div className="max-h-[60vh] overflow-y-auto">
              {(lastSyncResult.actions || []).length > 0 ? (
                <SyncActionsList actions={lastSyncResult.actions || []} />
              ) : (
                <div className="text-center py-8 text-[var(--muted-foreground)]">
                  <div className="text-2xl mb-2">📝</div>
                  <div>Aucun détail disponible pour cette synchronisation</div>
                  <div className="text-sm mt-1">
                    Les détails sont disponibles pour les nouvelles
                    synchronisations
                  </div>
                </div>
              )}
            </div>
          </div>
        </Modal>
      )}
    </Card>
  );
}

// Composant pour afficher la liste des actions
function SyncActionsList({ actions }: { actions: TfsSyncAction[] }) {
  const getActionIcon = (type: TfsSyncAction['type']) => {
    switch (type) {
      case 'created':
        return '➕';
      case 'updated':
        return '🔄';
      case 'skipped':
        return '⏭️';
      case 'deleted':
        return '🗑️';
      default:
        return '❓';
    }
  };

  const getActionColor = (type: TfsSyncAction['type']) => {
    switch (type) {
      case 'created':
        return 'text-emerald-400';
      case 'updated':
        return 'text-blue-400';
      case 'skipped':
        return 'text-orange-400';
      case 'deleted':
        return 'text-red-400';
      default:
        return 'text-gray-400';
    }
  };

  const getActionLabel = (type: TfsSyncAction['type']) => {
    switch (type) {
      case 'created':
        return 'Créée';
      case 'updated':
        return 'Mise à jour';
      case 'skipped':
        return 'Ignorée';
      case 'deleted':
        return 'Supprimée';
      default:
        return 'Inconnue';
    }
  };

  // Grouper les actions par type
  const groupedActions = actions.reduce(
    (acc, action) => {
      if (!acc[action.type]) acc[action.type] = [];
      acc[action.type].push(action);
      return acc;
    },
    {} as Record<string, TfsSyncAction[]>
  );

  // Ordre d'affichage : créées, mises à jour, supprimées, ignorées (toujours en dernier)
  const displayOrder: TfsSyncAction['type'][] = [
    'created',
    'updated',
    'deleted',
    'skipped',
  ];

  return (
    <div className="space-y-6">
      {displayOrder
        .filter((type) => groupedActions[type]?.length > 0)
        .map((type) => {
          const typeActions = groupedActions[type] as TfsSyncAction[];

          // Pour les actions skipped, séparer celles avec champs préservés de celles sans changement
          if (type === 'skipped') {
            const withPreservedFields = typeActions.filter(
              (action) => action.changes && action.changes.length > 0
            );
            const withoutChanges = typeActions.filter(
              (action) => !action.changes || action.changes.length === 0
            );

            return (
              <div key={type} className="space-y-4">
                <h4
                  className={`font-bold text-sm flex items-center gap-2 ${getActionColor(type as TfsSyncAction['type'])}`}
                >
                  {getActionIcon(type as TfsSyncAction['type'])}
                  {getActionLabel(type as TfsSyncAction['type'])} (
                  {typeActions.length})
                </h4>

                {/* PRs avec champs préservés */}
                {withPreservedFields.length > 0 && (
                  <div className="space-y-3">
                    <div className="text-xs font-semibold text-[var(--muted-foreground)] uppercase tracking-wide flex items-center gap-2">
                      <div className="h-px flex-1 bg-[var(--border)]"></div>
                      <span className="text-orange-400">
                        Avec champs préservés ({withPreservedFields.length})
                      </span>
                      <div className="h-px flex-1 bg-[var(--border)]"></div>
                    </div>
                    <div className="space-y-2">
                      {withPreservedFields.map((action, index) => (
                        <div
                          key={index}
                          className="p-2 bg-[var(--muted)]/10 rounded border border-orange-400/30"
                        >
                          <div className="flex items-start justify-between gap-3">
                            <div className="flex-1 min-w-0">
                              <div className="flex items-baseline gap-2">
                                <span className="font-mono text-sm font-bold text-[var(--foreground)] shrink-0">
                                  PR #{action.pullRequestId}
                                </span>
                                <span className="text-sm text-[var(--muted-foreground)] truncate">
                                  {action.prTitle}
                                </span>
                              </div>
                            </div>
                            <Badge
                              variant="outline"
                              size="sm"
                              className="shrink-0"
                            >
                              {getActionLabel(action.type)}
                            </Badge>
                          </div>

                          {action.reason && (
                            <div className="mt-1 text-xs text-[var(--muted-foreground)] italic">
                              💡 {action.reason}
                            </div>
                          )}

                          {action.changes && action.changes.length > 0 && (
                            <div className="mt-1 space-y-0.5">
                              <div className="text-xs font-medium text-[var(--muted-foreground)]">
                                Champs préservés:
                              </div>
                              {action.changes.map((change, changeIndex) => (
                                <div
                                  key={changeIndex}
                                  className="text-xs font-mono text-[var(--foreground)] pl-2 border-l-2 border-orange-400/30"
                                >
                                  {change}
                                </div>
                              ))}
                            </div>
                          )}
                        </div>
                      ))}
                    </div>
                  </div>
                )}

                {/* PRs sans changement */}
                {withoutChanges.length > 0 && (
                  <div className="space-y-3">
                    {withPreservedFields.length > 0 && (
                      <div className="text-xs font-semibold text-[var(--muted-foreground)] uppercase tracking-wide flex items-center gap-2">
                        <div className="h-px flex-1 bg-[var(--border)]"></div>
                        <span className="text-[var(--muted-foreground)]">
                          Aucun changement ({withoutChanges.length})
                        </span>
                        <div className="h-px flex-1 bg-[var(--border)]"></div>
                      </div>
                    )}
                    <div className="space-y-2">
                      {withoutChanges.map((action, index) => (
                        <div
                          key={index}
                          className="p-2 bg-[var(--muted)]/5 rounded border border-[var(--border)] opacity-75"
                        >
                          <div className="flex items-start justify-between gap-3">
                            <div className="flex-1 min-w-0">
                              <div className="flex items-baseline gap-2">
                                <span className="font-mono text-sm font-bold text-[var(--muted-foreground)] shrink-0">
                                  PR #{action.pullRequestId}
                                </span>
                                <span className="text-sm text-[var(--muted-foreground)] truncate">
                                  {action.prTitle}
                                </span>
                              </div>
                            </div>
                            <Badge
                              variant="outline"
                              size="sm"
                              className="shrink-0 opacity-75"
                            >
                              {getActionLabel(action.type)}
                            </Badge>
                          </div>

                          {action.reason && (
                            <div className="mt-1 text-xs text-[var(--muted-foreground)] italic">
                              💡 {action.reason}
                            </div>
                          )}
                        </div>
                      ))}
                    </div>
                  </div>
                )}
              </div>
            );
          }

          // Pour les autres types, affichage normal
          return (
            <div key={type} className="space-y-3">
              <h4
                className={`font-bold text-sm flex items-center gap-2 ${getActionColor(type as TfsSyncAction['type'])}`}
              >
                {getActionIcon(type as TfsSyncAction['type'])}
                {getActionLabel(type as TfsSyncAction['type'])} (
                {typeActions.length})
              </h4>

              <div className="space-y-2">
                {typeActions.map((action, index) => (
                  <div
                    key={index}
                    className="p-2 bg-[var(--muted)]/10 rounded border border-[var(--border)]"
                  >
                    <div className="flex items-start justify-between gap-3">
                      <div className="flex-1 min-w-0">
                        <div className="flex items-baseline gap-2">
                          <span className="font-mono text-sm font-bold text-[var(--foreground)] shrink-0">
                            PR #{action.pullRequestId}
                          </span>
                          <span className="text-sm text-[var(--muted-foreground)] truncate">
                            {action.prTitle}
                          </span>
                        </div>
                      </div>
                      <Badge variant="outline" size="sm" className="shrink-0">
                        {getActionLabel(action.type)}
                      </Badge>
                    </div>

                    {action.reason && (
                      <div className="mt-1 text-xs text-[var(--muted-foreground)] italic">
                        💡 {action.reason}
                      </div>
                    )}

                    {action.changes && action.changes.length > 0 && (
                      <div className="mt-1 space-y-0.5">
                        <div className="text-xs font-medium text-[var(--muted-foreground)]">
                          Modifications:
                        </div>
                        {action.changes.map((change, changeIndex) => (
                          <div
                            key={changeIndex}
                            className="text-xs font-mono text-[var(--foreground)] pl-2 border-l-2 border-purple-400/30"
                          >
                            {change}
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>
          );
        })}
    </div>
  );
}
