'use client';

import { useState, useEffect } from 'react';
import { Button } from '@/components/ui/Button';
import { Card, CardHeader, CardContent } from '@/components/ui/Card';
import { Badge } from '@/components/ui/Badge';
import { parseDate, getToday } from '@/lib/date-utils';

interface TfsSchedulerStatus {
  isRunning: boolean;
  isEnabled: boolean;
  interval: 'hourly' | 'daily' | 'weekly';
  nextSync: Date | null;
  tfsConfigured: boolean;
}

interface TfsSchedulerConfigProps {
  className?: string;
}

export function TfsSchedulerConfig({ className = "" }: TfsSchedulerConfigProps) {
  const [schedulerStatus, setSchedulerStatus] = useState<TfsSchedulerStatus | null>(null);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);

  // Charger le statut initial
  useEffect(() => {
    loadSchedulerStatus();
  }, []);

  const loadSchedulerStatus = async () => {
    try {
      const response = await fetch('/api/tfs/scheduler-status');
      if (response.ok) {
        const status = await response.json();
        setSchedulerStatus(status.data);
      }
    } catch (err) {
      console.error('Erreur lors du chargement du statut scheduler:', err);
    }
  };

  const toggleScheduler = async () => {
    if (!schedulerStatus) return;
    
    setIsLoading(true);
    setError(null);
    
    try {
      const response = await fetch('/api/tfs/scheduler-config', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          tfsAutoSync: !schedulerStatus.isRunning,
          tfsSyncInterval: schedulerStatus.interval
        })
      });
      
      if (response.ok) {
        const result = await response.json();
        setSchedulerStatus(result.data);
      } else {
        const error = await response.json();
        setError(error.error || 'Erreur lors du toggle scheduler');
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Erreur lors du toggle scheduler');
    } finally {
      setIsLoading(false);
    }
  };

  const updateInterval = async (interval: 'hourly' | 'daily' | 'weekly') => {
    if (!schedulerStatus) return;
    
    setIsLoading(true);
    setError(null);
    
    try {
      const response = await fetch('/api/tfs/scheduler-config', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({
          tfsAutoSync: true,
          tfsSyncInterval: interval
        })
      });
      
      if (response.ok) {
        const result = await response.json();
        setSchedulerStatus(result.data);
      } else {
        const error = await response.json();
        setError(error.error || 'Erreur lors de la mise à jour');
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : 'Erreur lors de la mise à jour');
    } finally {
      setIsLoading(false);
    }
  };

  const getStatusBadge = () => {
    if (!schedulerStatus) return null;
    
    if (!schedulerStatus.tfsConfigured) {
      return <Badge variant="warning" size="sm">⚠️ TFS non configuré</Badge>;
    }
    
    if (!schedulerStatus.isEnabled) {
      return <Badge variant="default" size="sm">⏸️ Désactivé</Badge>;
    }
    
    return schedulerStatus.isRunning ? (
      <Badge variant="success" size="sm">✅ Actif</Badge>
    ) : (
      <Badge variant="danger" size="sm">❌ Arrêté</Badge>
    );
  };

  const getNextSyncText = () => {
    if (!schedulerStatus?.nextSync) return 'Aucune synchronisation planifiée';
    
    const nextSync = typeof schedulerStatus.nextSync === 'string' 
      ? parseDate(schedulerStatus.nextSync) 
      : schedulerStatus.nextSync;
    const now = getToday();
    const diffMs = nextSync.getTime() - now.getTime();
    
    if (diffMs <= 0) return 'Synchronisation en cours...';
    
    const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
    const diffMinutes = Math.floor((diffMs % (1000 * 60 * 60)) / (1000 * 60));
    
    if (diffHours > 0) {
      return `Dans ${diffHours}h ${diffMinutes}min`;
    } else {
      return `Dans ${diffMinutes}min`;
    }
  };

  const getIntervalText = (interval: string) => {
    switch (interval) {
      case 'hourly': return 'Horaire';
      case 'daily': return 'Quotidien';
      case 'weekly': return 'Hebdomadaire';
      default: return interval;
    }
  };

  if (!schedulerStatus) {
    return (
      <Card className={className}>
        <CardHeader>
          <h3 className="text-lg font-semibold">⏰ Synchronisation automatique</h3>
        </CardHeader>
        <CardContent>
          <p className="text-gray-500">Chargement...</p>
        </CardContent>
      </Card>
    );
  }

  return (
    <Card className={className}>
      <CardHeader>
        <div className="flex items-center justify-between gap-3">
          <h3 className="text-base sm:text-lg font-semibold flex-1 min-w-0 truncate">⏰ Synchronisation automatique</h3>
          <div className="flex-shrink-0">
            {getStatusBadge()}
          </div>
        </div>
      </CardHeader>
      <CardContent className="space-y-4">
        {error && (
          <div className="p-3 bg-red-50 border border-red-200 rounded-md">
            <p className="text-red-700 text-sm">{error}</p>
          </div>
        )}

        {/* Statut actuel */}
        <div className="grid grid-cols-2 gap-4 text-sm">
          <div>
            <span className="font-medium text-gray-600">Statut:</span>
            <p className="mt-1">
              {schedulerStatus.isEnabled && schedulerStatus.isRunning ? '🟢 Actif' : '🔴 Arrêté'}
            </p>
          </div>
          <div>
            <span className="font-medium text-gray-600">Fréquence:</span>
            <p className="mt-1">{getIntervalText(schedulerStatus.interval)}</p>
          </div>
          <div className="col-span-2">
            <span className="font-medium text-gray-600">Prochaine synchronisation:</span>
            <p className="mt-1">{getNextSyncText()}</p>
          </div>
        </div>

        {/* Contrôles */}
        <div className="flex flex-col gap-3">
          {/* Toggle scheduler */}
          <div className="flex items-center justify-between">
            <span className="text-sm font-medium">Synchronisation automatique</span>
            <Button
              variant={schedulerStatus.isRunning ? "danger" : "primary"}
              size="sm"
              onClick={toggleScheduler}
              disabled={isLoading || !schedulerStatus.tfsConfigured}
            >
              {schedulerStatus.isRunning ? 'Désactiver' : 'Activer'}
            </Button>
          </div>

          {/* Sélecteur d'intervalle */}
          {schedulerStatus.isEnabled && (
            <div>
              <span className="text-sm font-medium text-gray-600 block mb-2">Fréquence de synchronisation</span>
              <div className="flex gap-2">
                {(['hourly', 'daily', 'weekly'] as const).map((interval) => (
                  <Button
                    key={interval}
                    variant={schedulerStatus.interval === interval ? "primary" : "secondary"}
                    size="sm"
                    onClick={() => updateInterval(interval)}
                    disabled={isLoading}
                  >
                    {getIntervalText(interval)}
                  </Button>
                ))}
              </div>
            </div>
          )}
        </div>

        {/* Avertissement si TFS non configuré */}
        {!schedulerStatus.tfsConfigured && (
          <div className="p-3 bg-yellow-50 border border-yellow-200 rounded-md">
            <p className="text-yellow-700 text-sm">
              ⚠️ Configurez d&apos;abord votre connexion TFS pour activer la synchronisation automatique.
            </p>
          </div>
        )}
      </CardContent>
    </Card>
  );
}