'use client';

import { useState, useEffect } from 'react';
import { useNotification } from './NotificationProvider';
import { useBodyScrollLock } from '@/lib/body-scroll-lock';

interface Trajet {
  id: string;
  date: string;
  adresseDepart: string;
  adresseArrivee: string;
  chauffeur?: {
    id: string;
    nom: string;
    prenom: string;
  } | null;
}

interface ValidationModalProps {
  trajet: Trajet;
  onClose: () => void;
  onSuccess: () => void;
}

export default function ValidationModal({ trajet, onClose, onSuccess }: ValidationModalProps) {
  const { showNotification } = useNotification();
  useBodyScrollLock(true);
  const [loading, setLoading] = useState(false);
  const [dureeTrajet, setDureeTrajet] = useState<number | null>(null);

  // Calculer la durée du trajet en heures
  const calculateDuration = async () => {
    if (!trajet.adresseDepart || !trajet.adresseArrivee) {
      return;
    }

    try {
      // Géocoder l'adresse de départ
      const departResponse = await fetch(
        `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(trajet.adresseDepart)}&limit=1&countrycodes=fr`,
        {
          headers: {
            'User-Agent': 'MAD Platform',
            'Accept-Language': 'fr-FR,fr;q=0.9',
          },
        }
      );

      if (!departResponse.ok) {
        return;
      }

      // Attendre avant la deuxième requête
      await new Promise(resolve => setTimeout(resolve, 1000));

      const arriveeResponse = await fetch(
        `https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(trajet.adresseArrivee)}&limit=1&countrycodes=fr`,
        {
          headers: {
            'User-Agent': 'MAD Platform',
            'Accept-Language': 'fr-FR,fr;q=0.9',
          },
        }
      );

      if (departResponse.ok && arriveeResponse.ok) {
        const [departData, arriveeData] = await Promise.all([
          departResponse.json(),
          arriveeResponse.json(),
        ]);

        if (departData.length > 0 && arriveeData.length > 0) {
          const lat1 = parseFloat(departData[0].lat);
          const lon1 = parseFloat(departData[0].lon);
          const lat2 = parseFloat(arriveeData[0].lat);
          const lon2 = parseFloat(arriveeData[0].lon);

          // Calcul de la distance (Haversine)
          const R = 6371; // Rayon de la Terre en km
          const dLat = ((lat2 - lat1) * Math.PI) / 180;
          const dLon = ((lon2 - lon1) * Math.PI) / 180;
          const a =
            Math.sin(dLat / 2) * Math.sin(dLat / 2) +
            Math.cos((lat1 * Math.PI) / 180) *
              Math.cos((lat2 * Math.PI) / 180) *
              Math.sin(dLon / 2) *
              Math.sin(dLon / 2);
          const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
          const distance = R * c; // Distance en km

          // Estimation du temps : vitesse moyenne de 50 km/h en ville
          // On multiplie par 1.3 pour tenir compte des détours
          const distanceWithDetour = distance * 1.3;
          const vitesseMoyenne = 50; // km/h
          const dureeEnHeures = distanceWithDetour / vitesseMoyenne;

          setDureeTrajet(Math.round(dureeEnHeures * 10) / 10); // Arrondir à 1 décimale
        }
      }
    } catch (error) {
      console.error('Erreur lors du calcul de la durée:', error);
    }
  };

  useEffect(() => {
    calculateDuration();
  }, []);

  const handleValidate = async () => {
    if (!trajet.chauffeur) {
      showNotification('warning', 'Aucun chauffeur assigné à ce trajet');
      return;
    }
    if (!dureeTrajet) {
      showNotification('warning', 'Impossible de calculer la durée du trajet');
      return;
    }

    setLoading(true);
    try {
      const response = await fetch(`/api/trajets/${trajet.id}/validate`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          dureeHeures: dureeTrajet,
        }),
      });

      if (response.ok) {
        showNotification('success', `Trajet validé avec succès (${dureeTrajet}h déduites)`);
        onSuccess();
        onClose();
      } else {
        const error = await response.json();
        showNotification('error', error.error || 'Erreur lors de la validation du trajet');
      }
    } catch (error) {
      console.error('Erreur lors de la validation:', error);
      showNotification('error', 'Erreur lors de la validation du trajet');
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4 animate-fadeIn">
      <div className="bg-white rounded-lg shadow-xl max-w-md w-full animate-slideUp border border-gray-200">
        {/* Header */}
        <div className="border-b border-gray-200 px-6 py-5 bg-white">
          <div className="flex items-center justify-between">
            <div>
              <h2 className="text-xl font-semibold text-gray-900">Valider le trajet</h2>
              <p className="text-sm text-gray-500 mt-1">Confirmer la validation du trajet</p>
            </div>
            <button
              onClick={onClose}
              className="text-gray-400 hover:text-gray-600 transition-colors p-2 hover:bg-gray-100 rounded-lg"
            >
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
        </div>

        {/* Content */}
        <div className="px-6 py-6">
          <div className="space-y-4">
            <div className="p-4 bg-blue-50 rounded-lg border border-blue-200">
              <div className="flex items-start gap-3">
                <svg className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <div>
                  <p className="text-sm font-medium text-blue-900 mb-1">
                    En validant ce trajet, les heures seront déduites du contrat du chauffeur.
                  </p>
                  <p className="text-xs text-blue-700">
                    Cette action ne peut pas être annulée.
                  </p>
                </div>
              </div>
            </div>

            {trajet.chauffeur && (
              <div>
                <label className="text-sm font-medium text-gray-700 mb-2 block">Chauffeur</label>
                <div className="p-3 bg-gray-50 rounded-lg border border-gray-200">
                  <span className="text-sm font-medium text-gray-900">
                    {trajet.chauffeur.prenom} {trajet.chauffeur.nom}
                  </span>
                </div>
              </div>
            )}

            {dureeTrajet !== null ? (
              <div>
                <label className="text-sm font-medium text-gray-700 mb-2 block">Durée estimée du trajet</label>
                <div className="p-4 bg-gradient-to-r from-lgreen/10 to-lblue/10 rounded-lg border border-gray-200">
                  <div className="flex items-center justify-between">
                    <span className="text-sm text-gray-600">Temps estimé</span>
                    <span className="text-2xl font-bold text-gray-900">
                      {dureeTrajet.toFixed(1)}h
                    </span>
                  </div>
                  <div className="mt-2 pt-2 border-t border-gray-200">
                    <p className="text-xs text-gray-500">
                      {dureeTrajet.toFixed(1)} heure{dureeTrajet >= 2 ? 's' : ''} sera{dureeTrajet < 2 ? '' : 'ont'} déduite{dureeTrajet < 2 ? '' : 's'} des heures disponibles du chauffeur.
                    </p>
                  </div>
                </div>
              </div>
            ) : (
              <div className="p-4 bg-gray-50 rounded-lg border border-gray-200">
                <div className="flex items-center gap-2 text-gray-500">
                  <svg className="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                  </svg>
                  <span className="text-sm">Calcul de la durée du trajet...</span>
                </div>
              </div>
            )}
          </div>
        </div>

        {/* Footer */}
        <div className="border-t border-gray-200 px-6 py-4 bg-gray-50/50">
          <div className="flex justify-end gap-3">
            <button
              type="button"
              onClick={onClose}
              disabled={loading}
              className="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors disabled:opacity-50"
            >
              Annuler
            </button>
            <button
              type="button"
              onClick={handleValidate}
              disabled={loading || dureeTrajet === null || !trajet.chauffeur}
              className="px-6 py-2 bg-lgreen text-white text-sm font-medium rounded-lg hover:bg-dgreen transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
            >
              {loading ? (
                <>
                  <svg className="animate-spin h-4 w-4" fill="none" viewBox="0 0 24 24">
                    <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
                    <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                  </svg>
                  Validation...
                </>
              ) : (
                <>
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                  </svg>
                  Confirmer la validation
                </>
              )}
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}