'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 { jiraClient } from '@/clients/jira-client';
import {
  JiraSyncResult,
  JiraSyncAction,
} from '@/services/integrations/jira/jira';
import { Emoji } from '@/components/ui/Emoji';

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

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

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

    try {
      const status = await jiraClient.testConnection();
      setIsConnected(status.connected);
      if (!status.connected) {
        setError(status.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 result = await jiraClient.syncTasks();
      setLastSyncResult(result);

      if (result.success) {
        onSyncComplete?.();
      }
    } catch (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,
      tasksFound,
      tasksCreated,
      tasksUpdated,
      tasksSkipped,
      tasksDeleted = 0,
      errors,
      unknownStatuses = [],
      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' : 'danger'} size="sm">
              {success ? (
                <>
                  <Emoji emoji="✓" /> Succès
                </>
              ) : (
                <>
                  <Emoji emoji="⚠" /> Erreurs
                </>
              )}
            </Badge>
            <span className="text-[var(--muted-foreground)] text-xs">
              {getToday().toLocaleTimeString()}
            </span>
          </div>
          <div className="text-xs text-[var(--muted-foreground)]">
            {tasksFound} trouvé{tasksFound > 1 ? 's' : ''} dans Jira
          </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">
              {tasksCreated}
            </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">
              {tasksUpdated}
            </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">
              {tasksSkipped}
            </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">
              {tasksDeleted}
            </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.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)]">
            {tasksCreated > 0 &&
              `${tasksCreated} nouvelle${tasksCreated > 1 ? 's' : ''} • `}
            {tasksUpdated > 0 &&
              `${tasksUpdated} mise${tasksUpdated > 1 ? 's' : ''} à jour • `}
            {tasksDeleted > 0 &&
              `${tasksDeleted} supprimée${tasksDeleted > 1 ? 's' : ''} (réassignées) • `}
            {tasksSkipped > 0 &&
              `${tasksSkipped} ignorée${tasksSkipped > 1 ? 's' : ''} • `}
            {tasksCreated + tasksUpdated + tasksDeleted + tasksSkipped === 0 &&
              'Aucune modification'}
          </div>
        </div>

        {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>
        )}

        {unknownStatuses.length > 0 && (
          <div className="p-2 bg-[var(--accent)]/10 border border-[var(--accent)]/20 rounded text-xs">
            <div className="font-semibold text-[var(--accent)] mb-1 flex items-center gap-1">
              <Emoji emoji="⚠️" /> Statuts inconnus ({unknownStatuses.length})
            </div>
            <div className="text-[var(--muted-foreground)] mb-2 text-xs">
              Ces statuts ont été mappés vers &quot;todo&quot; par défaut :
            </div>
            <div className="space-y-1 max-h-20 overflow-y-auto">
              {unknownStatuses.map((status, i) => (
                <div
                  key={i}
                  className="text-[var(--accent)] font-mono text-xs flex items-center gap-1"
                >
                  <span className="text-[var(--muted-foreground)]">→</span>
                  &quot;{status}&quot;
                </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(--blue)' }}
            ></div>
            <h3 className="font-mono text-sm font-bold text-blue-400 uppercase tracking-wider">
              JIRA 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>
            ) : (
              <>
                <Emoji emoji="🔄" />
                &nbsp;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 (Jira → TowerControl)</div>
          <div>• Les modifications locales sont préservées</div>
          <div>• Seuls les tickets assignés sont synchronisés</div>
          <div>• Les tickets réassignés sont automatiquement supprimés</div>
        </div>
      </CardContent>

      {/* Modal détails de synchronisation */}
      {lastSyncResult && (
        <Modal
          isOpen={showDetails}
          onClose={() => setShowDetails(false)}
          title={
            <>
              <Emoji emoji="📋" /> 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">
                    <Emoji emoji="📝" />
                  </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: JiraSyncAction[] }) {
  const getActionIcon = (type: JiraSyncAction['type']) => {
    switch (type) {
      case 'created':
        return <Emoji emoji="➕" />;
      case 'updated':
        return <Emoji emoji="🔄" />;
      case 'skipped':
        return <Emoji emoji="⏭️" />;
      case 'deleted':
        return <Emoji emoji="🗑️" />;
      default:
        return <Emoji emoji="❓" />;
    }
  };

  const getActionColor = (type: JiraSyncAction['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: JiraSyncAction['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, JiraSyncAction[]>
  );

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

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

          // 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 JiraSyncAction['type'])}`}
                >
                  {getActionIcon(type as JiraSyncAction['type'])}
                  {getActionLabel(type as JiraSyncAction['type'])} (
                  {typeActions.length})
                </h4>

                {/* Tâches 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">
                                  {action.taskKey}
                                </span>
                                <span className="text-sm text-[var(--muted-foreground)] truncate">
                                  {action.taskTitle}
                                </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">
                              <Emoji emoji="💡" /> {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>
                )}

                {/* Tâches 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">
                                  {action.taskKey}
                                </span>
                                <span className="text-sm text-[var(--muted-foreground)] truncate">
                                  {action.taskTitle}
                                </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">
                              <Emoji emoji="💡" /> {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 JiraSyncAction['type'])}`}
              >
                {getActionIcon(type as JiraSyncAction['type'])}
                {getActionLabel(type as JiraSyncAction['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">
                            {action.taskKey}
                          </span>
                          <span className="text-sm text-[var(--muted-foreground)] truncate">
                            {action.taskTitle}
                          </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">
                        <Emoji emoji="💡" /> {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-blue-400/30"
                          >
                            {change}
                          </div>
                        ))}
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>
          );
        })}
    </div>
  );
}
