'use client';

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

interface Chauffeur {
  id: string;
  nom: string;
  prenom: string;
  dateNaissance: string;
  telephone: string;
  email: string;
  adresse: string;
  heuresContrat: number;
  dateDebutContrat: string;
  dateFinContrat: string | null;
  heuresRestantes?: number;
  status?: string;
}

export default function ChauffeursTable() {
  const [chauffeurs, setChauffeurs] = useState<Chauffeur[]>([]);
  const [search, setSearch] = useState('');
  const [loading, setLoading] = useState(true);
  const [showForm, setShowForm] = useState(false);
  const [editingChauffeur, setEditingChauffeur] = useState<Chauffeur | null>(null);
  const [viewingChauffeur, setViewingChauffeur] = useState<Chauffeur | null>(null);
  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
  const [showImportModal, setShowImportModal] = useState(false);
  const [resultModal, setResultModal] = useState<{
    show: boolean;
    type: 'success' | 'error' | 'info';
    title: string;
    message: string;
    details?: string[];
  } | null>(null);
  const [confirmDeleteModal, setConfirmDeleteModal] = useState<{
    show: boolean;
    id: string | null;
  } | null>(null);
  useBodyScrollLock(showImportModal || !!(resultModal?.show) || !!viewingChauffeur);

  const fetchChauffeurs = async (searchTerm: string = '') => {
    setLoading(true);
    try {
      const url = searchTerm
        ? `/api/chauffeurs?search=${encodeURIComponent(searchTerm)}`
        : '/api/chauffeurs';
      const response = await fetch(url);
      if (response.ok) {
        const data = await response.json();
        setChauffeurs(data);
      }
    } catch (error) {
      console.error('Erreur lors du chargement des chauffeurs:', error);
    } finally {
      setLoading(false);
    }
  };

  useEffect(() => {
    const timeoutId = setTimeout(() => {
      fetchChauffeurs(search);
    }, 300); // Debounce de 300ms pour la recherche

    return () => clearTimeout(timeoutId);
  }, [search]);

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

  const handleDelete = async (id: string) => {
    setConfirmDeleteModal({
      show: true,
      id,
    });
  };

  const confirmDelete = async () => {
    if (!confirmDeleteModal?.id) return;

    try {
      const response = await fetch(`/api/chauffeurs/${confirmDeleteModal.id}`, {
        method: 'DELETE',
      });

      if (response.ok) {
        fetchChauffeurs(search);
        setResultModal({
          show: true,
          type: 'success',
          title: 'Suppression réussie',
          message: 'Le chauffeur a été supprimé avec succès',
        });
      } else {
        setResultModal({
          show: true,
          type: 'error',
          title: 'Erreur',
          message: 'Erreur lors de la suppression',
        });
      }
    } catch (error) {
      console.error('Erreur lors de la suppression:', error);
      setResultModal({
        show: true,
        type: 'error',
        title: 'Erreur',
        message: 'Erreur lors de la suppression',
      });
    } finally {
      setConfirmDeleteModal(null);
    }
  };

  const handleEdit = (chauffeur: Chauffeur) => {
    setEditingChauffeur(chauffeur);
    setShowForm(true);
  };

  const handleView = async (id: string) => {
    try {
      const response = await fetch(`/api/chauffeurs/${id}`);
      if (response.ok) {
        const data = await response.json();
        setViewingChauffeur(data);
      }
    } catch (error) {
      console.error('Erreur lors de la récupération:', error);
    }
  };


  const handleFormClose = () => {
    setShowForm(false);
    setEditingChauffeur(null);
    fetchChauffeurs(search);
  };

  const getInitials = (nom: string, prenom: string) => {
    return `${prenom.charAt(0)}${nom.charAt(0)}`.toUpperCase();
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'Disponible':
        return 'bg-lblue text-white';
      case 'Vacances':
        return 'bg-lblue text-white';
      case 'Arrêt Maladie':
        return 'bg-lorange text-white';
      default:
        return 'bg-gray-200 text-gray-700';
    }
  };

  const formatDate = (dateString: string) => {
    const date = new Date(dateString);
    return date.toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric' });
  };

  const getProgressPercentage = (restantes: number, total: number) => {
    return ((total - restantes) / total) * 100;
  };

  const handleSelectAll = (checked: boolean) => {
    if (checked) {
      setSelectedIds(new Set(chauffeurs.map(c => c.id)));
    } else {
      setSelectedIds(new Set());
    }
  };

  const handleSelectOne = (id: string, checked: boolean) => {
    const newSelected = new Set(selectedIds);
    if (checked) {
      newSelected.add(id);
    } else {
      newSelected.delete(id);
    }
    setSelectedIds(newSelected);
  };

  const handleExport = () => {
    if (selectedIds.size === 0) {
      setResultModal({
        show: true,
        type: 'info',
        title: 'Aucune sélection',
        message: 'Veuillez sélectionner au moins un chauffeur à exporter',
      });
      return;
    }

    const selectedChauffeurs = chauffeurs.filter(c => selectedIds.has(c.id));
    
    // Créer les en-têtes CSV avec tous les champs disponibles
    const headers = [
      'Nom',
      'Prénom',
      'Date de naissance',
      'Téléphone',
      'Email',
      'Adresse',
      'Heures contrat',
      'Date début contrat',
      'Date fin contrat',
      'Status'
    ];

    // Créer les lignes CSV
    const rows = selectedChauffeurs.map(chauffeur => {
      const formatDateForCSV = (dateString: string) => {
        const date = new Date(dateString);
        return date.toLocaleDateString('fr-FR', { day: '2-digit', month: '2-digit', year: 'numeric' });
      };

      return [
        chauffeur.nom || '',
        chauffeur.prenom || '',
        formatDateForCSV(chauffeur.dateNaissance),
        chauffeur.telephone || '',
        chauffeur.email || '',
        chauffeur.adresse || '',
        chauffeur.heuresContrat?.toString() || '',
        formatDateForCSV(chauffeur.dateDebutContrat),
        chauffeur.dateFinContrat ? formatDateForCSV(chauffeur.dateFinContrat) : '',
        chauffeur.status || 'Disponible'
      ];
    });

    // Créer le contenu CSV
    const csvContent = [
      headers.join(','),
      ...rows.map(row => row.map(cell => `"${cell.replace(/"/g, '""')}"`).join(','))
    ].join('\n');

    // Créer le blob et télécharger
    const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' }); // BOM pour Excel
    const link = document.createElement('a');
    const url = URL.createObjectURL(blob);
    link.setAttribute('href', url);
    link.setAttribute('download', `chauffeurs_export_${new Date().toISOString().split('T')[0]}.csv`);
    link.style.visibility = 'hidden';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    
    // Réinitialiser la sélection
    setSelectedIds(new Set());
  };

  const handleDownloadTemplate = () => {
    const headers = [
      'Nom',
      'Prénom',
      'Date de naissance',
      'Téléphone',
      'Email',
      'Adresse',
      'Heures contrat',
      'Date début contrat',
      'Date fin contrat',
      'Status'
    ];

    // Ligne d'exemple
    const exampleRow = [
      'Dupont',
      'Jean',
      '15/03/1980',
      '0123456789',
      'jean.dupont@example.com',
      '123 Rue de la Paix, 75001 Paris',
      '35',
      '01/01/2024',
      '',
      'Disponible'
    ];

    const csvContent = [
      headers.join(','),
      exampleRow.map(cell => `"${cell}"`).join(',')
    ].join('\n');

    const blob = new Blob(['\ufeff' + csvContent], { type: 'text/csv;charset=utf-8;' });
    const link = document.createElement('a');
    const url = URL.createObjectURL(blob);
    link.setAttribute('href', url);
    link.setAttribute('download', 'modele_import_chauffeurs.csv');
    link.style.visibility = 'hidden';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  };

  const handleFileUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = async (e) => {
      const text = e.target?.result as string;
      const lines = text.split('\n').filter(line => line.trim());
      
      if (lines.length < 2) {
        setResultModal({
          show: true,
          type: 'error',
          title: 'Fichier invalide',
          message: 'Le fichier CSV doit contenir au moins une ligne d\'en-tête et une ligne de données',
        });
        return;
      }

      // Détecter le séparateur (virgule ou point-virgule)
      const detectSeparator = (firstLine: string): string => {
        const commaCount = (firstLine.match(/,/g) || []).length;
        const semicolonCount = (firstLine.match(/;/g) || []).length;
        return semicolonCount >= commaCount ? ';' : ',';
      };

      // Parser le CSV (gestion simple des guillemets avec détection automatique du séparateur)
      const parseCSVLine = (line: string, separator: string): string[] => {
        const result: string[] = [];
        let current = '';
        let inQuotes = false;
        
        for (let i = 0; i < line.length; i++) {
          const char = line[i];
          if (char === '"') {
            if (inQuotes && line[i + 1] === '"') {
              current += '"';
              i++;
            } else {
              inQuotes = !inQuotes;
            }
          } else if (char === separator && !inQuotes) {
            result.push(current.trim());
            current = '';
          } else {
            current += char;
          }
        }
        result.push(current.trim());
        return result;
      };

      // Fonction pour normaliser les noms de colonnes
      const normalizeHeader = (header: string): string => {
        return header
          .toLowerCase()
          .normalize('NFD')
          .replace(/[\u0300-\u036f]/g, '')
          .replace(/\s+/g, '')
          .trim();
      };

      // Fonction pour trouver une colonne avec plusieurs variantes possibles
      const findColumnIndex = (patterns: string[], excludePatterns: string[] = []): number => {
        for (let i = 0; i < headers.length; i++) {
          const normalized = normalizeHeader(headers[i]);
          const matchesPattern = patterns.some(pattern => normalized.includes(pattern));
          const matchesExclude = excludePatterns.some(pattern => normalized.includes(pattern));
          
          if (matchesPattern && !matchesExclude) {
            return i;
          }
        }
        return -1;
      };

      // Détecter le séparateur depuis la première ligne
      const separator = detectSeparator(lines[0]);
      
      const headers = parseCSVLine(lines[0], separator);
      const dataLines = lines.slice(1);

      // Mapping des colonnes avec leurs noms d'affichage
      const nomIndex = findColumnIndex(['nom'], ['prenom', 'prénom']);
      const nomHeader = nomIndex >= 0 ? headers[nomIndex] : 'Nom';
      const prenomIndex = findColumnIndex(['prenom', 'prénom']);
      const prenomHeader = prenomIndex >= 0 ? headers[prenomIndex] : 'Prénom';
      
      // Pour la date de naissance
      const dateNaissanceIndex = (() => {
        for (let i = 0; i < headers.length; i++) {
          const normalized = normalizeHeader(headers[i]);
          if ((normalized.includes('date') || normalized.includes('naissance') || normalized.includes('birth') || normalized.includes('dob')) &&
              (normalized.includes('naissance') || normalized.includes('birth') || normalized.includes('dob') || normalized.includes('date'))) {
            return i;
          }
        }
        return -1;
      })();
      const dateNaissanceHeader = dateNaissanceIndex >= 0 ? headers[dateNaissanceIndex] : 'Date de naissance';
      
      const telephoneIndex = findColumnIndex(['telephone', 'téléphone', 'tel', 'phone']);
      const telephoneHeader = telephoneIndex >= 0 ? headers[telephoneIndex] : 'Téléphone';
      const emailIndex = findColumnIndex(['email', 'mail', 'courriel']);
      const emailHeader = emailIndex >= 0 ? headers[emailIndex] : 'Email';
      const adresseIndex = findColumnIndex(['adresse']);
      const adresseHeader = adresseIndex >= 0 ? headers[adresseIndex] : 'Adresse';
      const heuresContratIndex = findColumnIndex(['heures', 'contrat'], ['debut', 'début', 'fin']);
      const heuresContratHeader = heuresContratIndex >= 0 ? headers[heuresContratIndex] : 'Heures contrat';
      const dateDebutContratIndex = findColumnIndex(['debut', 'début'], ['fin']);
      const dateDebutContratHeader = dateDebutContratIndex >= 0 ? headers[dateDebutContratIndex] : 'Date début contrat';
      const dateFinContratIndex = findColumnIndex(['fin'], ['debut', 'début']);
      const dateFinContratHeader = dateFinContratIndex >= 0 ? headers[dateFinContratIndex] : 'Date fin contrat';
      const statusIndex = findColumnIndex(['status', 'statut']);
      const statusHeader = statusIndex >= 0 ? headers[statusIndex] : 'Status';

      // Vérifier que les colonnes obligatoires sont présentes
      const missingRequiredColumns: string[] = [];
      if (nomIndex === -1) missingRequiredColumns.push('Nom');
      if (prenomIndex === -1) missingRequiredColumns.push('Prénom');
      if (dateNaissanceIndex === -1) missingRequiredColumns.push('Date de naissance');
      if (telephoneIndex === -1) missingRequiredColumns.push('Téléphone');
      if (emailIndex === -1) missingRequiredColumns.push('Email');
      if (adresseIndex === -1) missingRequiredColumns.push('Adresse');
      if (heuresContratIndex === -1) missingRequiredColumns.push('Heures contrat');
      if (dateDebutContratIndex === -1) missingRequiredColumns.push('Date début contrat');

      if (missingRequiredColumns.length > 0) {
        const availableColumns = headers.length > 0 ? headers : ['Aucune colonne détectée'];
        setResultModal({
          show: true,
          type: 'error',
          title: 'Colonnes manquantes',
          message: `Le fichier CSV ne contient pas les colonnes obligatoires suivantes : ${missingRequiredColumns.join(', ')}`,
          details: [
            'Colonnes détectées dans le fichier :',
            ...availableColumns.map(col => `  • ${col}`),
            '',
            'Conseil : Vérifiez que les noms de colonnes correspondent exactement au modèle (les accents et la casse sont importants).'
          ],
        });
        return;
      }

      let successCount = 0;
      let errorCount = 0;
      const errors: string[] = [];

      for (let i = 0; i < dataLines.length; i++) {
        const row = parseCSVLine(dataLines[i], separator);
        if (row.length === 0) continue;

        const nom = nomIndex >= 0 ? (row[nomIndex] || '').trim() : '';
        const prenom = prenomIndex >= 0 ? (row[prenomIndex] || '').trim() : '';
        const dateNaissance = dateNaissanceIndex >= 0 ? (row[dateNaissanceIndex] || '').trim() : '';
        const telephone = telephoneIndex >= 0 ? (row[telephoneIndex] || '').trim() : '';
        const email = emailIndex >= 0 ? (row[emailIndex] || '').trim() : '';
        const adresse = adresseIndex >= 0 ? (row[adresseIndex] || '').trim() : '';
        const heuresContrat = heuresContratIndex >= 0 ? (row[heuresContratIndex] || '').trim() : '';
        const dateDebutContrat = dateDebutContratIndex >= 0 ? (row[dateDebutContratIndex] || '').trim() : '';
        const dateFinContrat = dateFinContratIndex >= 0 ? (row[dateFinContratIndex] || '').trim() : '';
        const status = statusIndex >= 0 ? (row[statusIndex] || '').trim() : 'Disponible';

        // Validation des champs obligatoires avec identification précise des colonnes manquantes
        const missingFields: string[] = [];
        if (!nom) missingFields.push(nomHeader);
        if (!prenom) missingFields.push(prenomHeader);
        if (!dateNaissance) missingFields.push(dateNaissanceHeader);
        if (!telephone) missingFields.push(telephoneHeader);
        if (!email) missingFields.push(emailHeader);
        if (!adresse) missingFields.push(adresseHeader);
        if (!heuresContrat) missingFields.push(heuresContratHeader);
        if (!dateDebutContrat) missingFields.push(dateDebutContratHeader);

        if (missingFields.length > 0) {
          errorCount++;
          const fieldsList = missingFields.join(', ');
          errors.push(`Ligne ${i + 2}: Colonnes manquantes ou vides : ${fieldsList}`);
          continue;
        }

        // Convertir les dates au format ISO
        let dateNaissanceISO = '';
        let dateDebutContratISO = '';
        let dateFinContratISO: string | null = null;

        try {
          const dateParts = dateNaissance.split('/');
          if (dateParts.length === 3) {
            dateNaissanceISO = `${dateParts[2]}-${dateParts[1]}-${dateParts[0]}`;
          } else {
            dateNaissanceISO = new Date(dateNaissance).toISOString().split('T')[0];
          }
        } catch {
          errorCount++;
          errors.push(`Ligne ${i + 2}: Colonne "${dateNaissanceHeader}" - Format de date invalide (attendu: JJ/MM/AAAA)`);
          continue;
        }

        try {
          const dateParts = dateDebutContrat.split('/');
          if (dateParts.length === 3) {
            dateDebutContratISO = `${dateParts[2]}-${dateParts[1]}-${dateParts[0]}`;
          } else {
            dateDebutContratISO = new Date(dateDebutContrat).toISOString().split('T')[0];
          }
        } catch {
          errorCount++;
          errors.push(`Ligne ${i + 2}: Colonne "${dateDebutContratHeader}" - Format de date invalide (attendu: JJ/MM/AAAA)`);
          continue;
        }

        if (dateFinContrat) {
          try {
            const dateParts = dateFinContrat.split('/');
            if (dateParts.length === 3) {
              dateFinContratISO = `${dateParts[2]}-${dateParts[1]}-${dateParts[0]}`;
            } else {
              dateFinContratISO = new Date(dateFinContrat).toISOString().split('T')[0];
            }
          } catch {
            // Si la date de fin est invalide, on continue sans elle (elle est optionnelle)
          }
        }

        // Valider les heures contrat
        const heuresContratNum = parseInt(heuresContrat, 10);
        if (isNaN(heuresContratNum) || heuresContratNum <= 0) {
          errorCount++;
          errors.push(`Ligne ${i + 2}: Colonne "${heuresContratHeader}" - Doit être un nombre positif`);
          continue;
        }

        try {
          const response = await fetch('/api/chauffeurs', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({
              nom,
              prenom,
              dateNaissance: dateNaissanceISO,
              telephone,
              email,
              adresse,
              heuresContrat: heuresContratNum,
              dateDebutContrat: dateDebutContratISO,
              dateFinContrat: dateFinContratISO,
            }),
          });

          if (response.ok) {
            successCount++;
          } else {
            errorCount++;
            try {
              const errorData = await response.json();
              let errorMsg = errorData.error || 'Erreur lors de l\'import';
              if (errorMsg.includes('champs obligatoires')) {
                errorMsg = `Erreur de validation : ${errorMsg}`;
              }
              errors.push(`Ligne ${i + 2}: ${errorMsg}`);
            } catch {
              errors.push(`Ligne ${i + 2}: Erreur serveur lors de l'import`);
            }
          }
        } catch (error) {
          errorCount++;
          errors.push(`Ligne ${i + 2}: Erreur réseau - ${error instanceof Error ? error.message : 'Connexion impossible'}`);
        }
      }

      // Afficher les résultats dans une modale
      const title = errorCount > 0 
        ? `Import terminé avec ${errorCount} erreur(s)`
        : 'Import réussi';
      
      const message = errorCount === 0
        ? `${successCount} chauffeur(s) importé(s) avec succès`
        : `${successCount} chauffeur(s) importé(s) avec succès, ${errorCount} erreur(s)`;

      setResultModal({
        show: true,
        type: errorCount === 0 ? 'success' : 'error',
        title,
        message,
        details: errors.length > 0 ? errors : undefined,
      });

      // Rafraîchir la liste
      fetchChauffeurs(search);
      setShowImportModal(false);
    };

    reader.readAsText(file, 'UTF-8');
  };

  return (
    <>
      {/* Barre de recherche et actions */}
      <div className="bg-white rounded-lg shadow-sm p-4 mb-6">
        <div className="flex flex-col md:flex-row gap-4 items-center">
          {/* Barre de recherche */}
          <div className="flex-1 w-full md:w-auto">
            <div className="relative">
              <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
                <svg className="h-5 w-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
              </div>
              <input
                type="text"
                placeholder="Rechercher un chauffeur..."
                value={search}
                onChange={(e) => setSearch(e.target.value)}
                className="block w-full pl-10 pr-3 py-2 border border-gray-300 rounded-lg text-gray-900 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent"
              />
            </div>
          </div>

          {/* Boutons d'action */}
          <div className="flex gap-2 md:gap-3 w-full md:w-auto">
            <button
              onClick={() => {
                setEditingChauffeur(null);
                setShowForm(true);
              }}
              className="flex items-center gap-1 md:gap-2 px-3 md:px-4 py-2 bg-lgreen text-white rounded-lg hover:bg-dgreen transition-colors text-sm md:text-base flex-1 md:flex-none justify-center"
            >
              <svg className="w-4 h-4 md:w-5 md:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
              </svg>
              <span className="hidden sm:inline">Nouveau chauffeur</span>
              <span className="sm:hidden">Nouveau</span>
            </button>
            <button 
              onClick={() => setShowImportModal(true)}
              className="flex items-center gap-1 md:gap-2 px-3 md:px-4 py-2 bg-lblue text-white rounded-lg hover:bg-dblue transition-colors text-sm md:text-base"
            >
              <svg className="w-4 h-4 md:w-5 md:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
              </svg>
              <span className="hidden sm:inline">Importer</span>
            </button>
            <button 
              onClick={handleExport}
              disabled={selectedIds.size === 0}
              className="flex items-center gap-1 md:gap-2 px-3 md:px-4 py-2 bg-lorange text-white rounded-lg hover:bg-dorange transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm md:text-base"
            >
              <svg className="w-4 h-4 md:w-5 md:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4-4m0 0l-4-4m4 4V4" />
              </svg>
              <span className="hidden sm:inline">Exporter</span>
              {selectedIds.size > 0 && <span className="ml-1">({selectedIds.size})</span>}
            </button>
          </div>
        </div>
      </div>

      {/* Tableau - Desktop */}
      <div className="bg-white rounded-lg shadow-sm overflow-hidden">
        {loading ? (
          <div className="p-8 text-center text-gray-500">Chargement...</div>
        ) : chauffeurs.length === 0 ? (
          <div className="p-8 text-center text-gray-500">Aucun chauffeur trouvé</div>
        ) : (
          <>
            {/* Vue desktop - Tableau */}
            <div className="hidden md:block overflow-x-auto">
              <table className="min-w-full divide-y divide-gray-200">
                <thead className="bg-gray-50">
                  <tr>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                      <input
                        type="checkbox"
                        checked={chauffeurs.length > 0 && selectedIds.size === chauffeurs.length}
                        onChange={(e) => handleSelectAll(e.target.checked)}
                        className="w-4 h-4 text-lblue border-gray-300 rounded focus:ring-lblue"
                      />
                    </th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">NOM</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CONTACT</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ADRESSE</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">NOMBRES D'HEURES</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">STATUS</th>
                    <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">ACTIONS</th>
                  </tr>
                </thead>
                <tbody className="bg-white divide-y divide-gray-200">
                  {chauffeurs.map((chauffeur) => (
                    <tr key={chauffeur.id} className="hover:bg-gray-50">
                      <td className="px-6 py-4 whitespace-nowrap">
                        <input
                          type="checkbox"
                          checked={selectedIds.has(chauffeur.id)}
                          onChange={(e) => handleSelectOne(chauffeur.id, e.target.checked)}
                          className="w-4 h-4 text-lblue border-gray-300 rounded focus:ring-lblue"
                        />
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        <div className="flex items-center gap-3">
                          <div className="w-10 h-10 rounded-full bg-lorange flex items-center justify-center text-white font-semibold">
                            {getInitials(chauffeur.nom, chauffeur.prenom)}
                          </div>
                          <div>
                            <div className="text-sm font-semibold text-gray-900">
                              {chauffeur.prenom} {chauffeur.nom}
                            </div>
                            <div className="text-sm text-gray-500">
                              Né le {formatDate(chauffeur.dateNaissance)}
                            </div>
                          </div>
                        </div>
                      </td>
                      <td className="px-6 py-4">
                        <div className="text-sm text-gray-900">{chauffeur.telephone}</div>
                        <div className="text-sm text-gray-500">{chauffeur.email}</div>
                      </td>
                      <td className="px-6 py-4">
                        <div className="text-sm text-gray-900">{chauffeur.adresse}</div>
                      </td>
                      <td className="px-6 py-4">
                        <div className="w-48">
                          <div className="flex items-center justify-between mb-1">
                            <span className="text-xs text-gray-600">
                              {chauffeur.heuresRestantes || chauffeur.heuresContrat}h restantes sur {chauffeur.heuresContrat}h
                            </span>
                          </div>
                          <div className="w-full bg-gray-200 rounded-full h-2">
                            <div
                              className="bg-lgreen h-2 rounded-full"
                              style={{ width: `${getProgressPercentage(chauffeur.heuresRestantes || chauffeur.heuresContrat, chauffeur.heuresContrat)}%` }}
                            ></div>
                          </div>
                        </div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap">
                        {chauffeur.status && (
                          <span className={`px-3 py-1 inline-flex text-xs leading-5 font-semibold rounded-full ${getStatusColor(chauffeur.status)}`}>
                            {chauffeur.status}
                          </span>
                        )}
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                        <div className="flex items-center gap-3">
                          <button
                            onClick={() => handleView(chauffeur.id)}
                            className="text-lblue hover:text-dblue"
                            title="Voir"
                          >
                            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                            </svg>
                          </button>
                          <button
                            onClick={() => handleEdit(chauffeur)}
                            className="text-lblue hover:text-dblue"
                            title="Modifier"
                          >
                            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                            </svg>
                          </button>
                          <button
                            onClick={() => handleDelete(chauffeur.id)}
                            className="text-red-500 hover:text-red-700"
                            title="Supprimer"
                          >
                            <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                            </svg>
                          </button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>

            {/* Vue mobile - Cartes */}
            <div className="md:hidden divide-y divide-gray-200">
              {chauffeurs.map((chauffeur) => (
                <div key={chauffeur.id} className="p-4 hover:bg-gray-50">
                  <div className="flex items-start gap-3">
                    {/* Checkbox */}
                    <input
                      type="checkbox"
                      checked={selectedIds.has(chauffeur.id)}
                      onChange={(e) => handleSelectOne(chauffeur.id, e.target.checked)}
                      className="w-4 h-4 text-lblue border-gray-300 rounded focus:ring-lblue mt-1"
                    />
                    
                    {/* Avatar */}
                    <div className="w-12 h-12 rounded-full bg-lorange flex items-center justify-center text-white font-semibold flex-shrink-0">
                      {getInitials(chauffeur.nom, chauffeur.prenom)}
                    </div>
                    
                    {/* Contenu principal */}
                    <div className="flex-1 min-w-0">
                      {/* Nom et date de naissance */}
                      <div className="mb-2">
                        <div className="text-base font-semibold text-gray-900">
                          {chauffeur.prenom} {chauffeur.nom}
                        </div>
                        <div className="text-xs text-gray-500">
                          Né le {formatDate(chauffeur.dateNaissance)}
                        </div>
                      </div>
                      
                      {/* Contact */}
                      <div className="mb-2">
                        <div className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Contact</div>
                        <a href={`tel:${chauffeur.telephone}`} className="text-sm text-gray-900 block truncate">
                          {chauffeur.telephone}
                        </a>
                        <a href={`mailto:${chauffeur.email}`} className="text-sm text-gray-500 block truncate">
                          {chauffeur.email}
                        </a>
                      </div>
                      
                      {/* Adresse */}
                      <div className="mb-2">
                        <div className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Adresse</div>
                        <div className="text-sm text-gray-900 line-clamp-2">
                          {chauffeur.adresse}
                        </div>
                      </div>
                      
                      {/* Heures */}
                      <div className="mb-2">
                        <div className="flex items-center justify-between mb-1">
                          <span className="text-xs text-gray-600">
                            {chauffeur.heuresRestantes || chauffeur.heuresContrat}h restantes sur {chauffeur.heuresContrat}h
                          </span>
                        </div>
                        <div className="w-full bg-gray-200 rounded-full h-2">
                          <div
                            className="bg-lgreen h-2 rounded-full"
                            style={{ width: `${getProgressPercentage(chauffeur.heuresRestantes || chauffeur.heuresContrat, chauffeur.heuresContrat)}%` }}
                          ></div>
                        </div>
                      </div>
                      
                      {/* Status */}
                      {chauffeur.status && (
                        <div className="mb-3">
                          <span className={`px-2 py-1 inline-flex text-xs leading-4 font-semibold rounded-full ${getStatusColor(chauffeur.status)}`}>
                            {chauffeur.status}
                          </span>
                        </div>
                      )}
                      
                      {/* Actions */}
                      <div className="flex items-center gap-4 pt-2 border-t border-gray-200">
                        <button
                          onClick={() => handleView(chauffeur.id)}
                          className="flex items-center gap-1 text-lblue hover:text-dblue text-sm"
                        >
                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                          </svg>
                          Voir
                        </button>
                        <button
                          onClick={() => handleEdit(chauffeur)}
                          className="flex items-center gap-1 text-lblue hover:text-dblue text-sm"
                        >
                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                          </svg>
                          Modifier
                        </button>
                        <button
                          onClick={() => handleDelete(chauffeur.id)}
                          className="flex items-center gap-1 text-red-500 hover:text-red-700 text-sm ml-auto"
                        >
                          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                          </svg>
                          Supprimer
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              ))}
            </div>
          </>
        )}
      </div>

      {/* Modal formulaire */}
      {showForm && (
        <ChauffeurForm
          chauffeur={editingChauffeur}
          onClose={handleFormClose}
        />
      )}

      {/* Modal import */}
      {showImportModal && (
        <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-2xl 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">
                    Importer des chauffeurs
                  </h2>
                  <p className="text-sm text-gray-500 mt-1">
                    Téléchargez le modèle d'exemple, remplissez-le et importez-le ici
                  </p>
                </div>
                <button
                  onClick={() => setShowImportModal(false)}
                  className="text-gray-400 hover:text-gray-600 transition-colors p-1.5 hover:bg-gray-100 rounded"
                >
                  <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>

            {/* Contenu */}
            <div className="px-6 py-6">
              <div className="space-y-6">
                {/* Télécharger le modèle */}
                <div className="bg-blue-50 border border-blue-200 rounded-lg p-4">
                  <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 className="flex-1">
                      <h3 className="text-sm font-semibold text-blue-900 mb-1">
                        Télécharger le modèle d'exemple
                      </h3>
                      <p className="text-sm text-blue-700 mb-3">
                        Téléchargez le fichier CSV modèle pour voir le format attendu et remplir vos données.
                      </p>
                      <button
                        onClick={handleDownloadTemplate}
                        className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors text-sm"
                      >
                        <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
                        </svg>
                        Télécharger le modèle CSV
                      </button>
                    </div>
                  </div>
                </div>

                {/* Upload fichier */}
                <div>
                  <label className="block text-sm font-medium text-gray-700 mb-2">
                    Sélectionner le fichier CSV à importer
                  </label>
                  <div className="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg hover:border-lblue transition-colors">
                    <div className="space-y-1 text-center">
                      <svg className="mx-auto h-12 w-12 text-gray-400" stroke="currentColor" fill="none" viewBox="0 0 48 48">
                        <path d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" strokeWidth={2} strokeLinecap="round" strokeLinejoin="round" />
                      </svg>
                      <div className="flex text-sm text-gray-600">
                        <label htmlFor="file-upload-chauffeur" className="relative cursor-pointer bg-white rounded-md font-medium text-lblue hover:text-dblue focus-within:outline-none focus-within:ring-2 focus-within:ring-offset-2 focus-within:ring-lblue">
                          <span>Cliquez pour sélectionner un fichier</span>
                          <input
                            id="file-upload-chauffeur"
                            name="file-upload-chauffeur"
                            type="file"
                            accept=".csv"
                            onChange={handleFileUpload}
                            className="sr-only"
                          />
                        </label>
                        <p className="pl-1">ou glissez-déposez</p>
                      </div>
                      <p className="text-xs text-gray-500">CSV jusqu'à 10MB</p>
                    </div>
                  </div>
                </div>

                {/* Instructions */}
                <div className="bg-gray-50 border border-gray-200 rounded-lg p-4">
                  <h3 className="text-sm font-semibold text-gray-900 mb-2">
                    Instructions :
                  </h3>
                  <ul className="text-sm text-gray-600 space-y-1 list-disc list-inside">
                    <li>Les champs Nom, Prénom, Date de naissance, Téléphone, Email, Adresse, Heures contrat et Date début contrat sont obligatoires</li>
                    <li>Le format de date attendu est JJ/MM/AAAA</li>
                    <li>Les champs Date fin contrat et Status sont optionnels</li>
                    <li>Assurez-vous que le fichier utilise l'encodage UTF-8</li>
                  </ul>
                </div>
              </div>
            </div>

            {/* Footer */}
            <div className="border-t border-gray-200 px-6 py-4 bg-gray-50/50">
              <div className="flex justify-end">
                <button
                  onClick={() => setShowImportModal(false)}
                  className="px-4 py-2 text-sm font-medium text-gray-700 hover:text-gray-900 transition-colors"
                >
                  Fermer
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Modal résultat */}
      {resultModal && resultModal.show && (
        <div 
          className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-[60] p-4 animate-fadeIn"
          onClick={() => setResultModal(null)}
        >
          <div 
            className="bg-white rounded-lg shadow-xl max-w-lg w-full animate-slideUp border border-gray-200"
            onClick={(e) => e.stopPropagation()}
          >
            {/* Header */}
            <div className={`border-b border-gray-200 px-6 py-5 ${
              resultModal.type === 'success' ? 'bg-green-50' :
              resultModal.type === 'error' ? 'bg-red-50' :
              'bg-blue-50'
            }`}>
              <div className="flex items-center justify-between">
                <div className="flex items-center gap-3">
                  {resultModal.type === 'success' && (
                    <svg className="w-6 h-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                  )}
                  {resultModal.type === 'error' && (
                    <svg className="w-6 h-6 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                  )}
                  {resultModal.type === 'info' && (
                    <svg className="w-6 h-6 text-blue-600" 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>
                  )}
                  <h2 className={`text-xl font-semibold ${
                    resultModal.type === 'success' ? 'text-green-900' :
                    resultModal.type === 'error' ? 'text-red-900' :
                    'text-blue-900'
                  }`}>
                    {resultModal.title}
                  </h2>
                </div>
                <button
                  type="button"
                  onClick={() => setResultModal(null)}
                  className="text-gray-400 hover:text-gray-600 transition-colors p-1.5 hover:bg-white/50 rounded"
                >
                  <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>

            {/* Contenu */}
            <div className="px-6 py-6">
              <p className={`text-sm font-medium mb-4 ${
                resultModal.type === 'success' ? 'text-green-800' :
                resultModal.type === 'error' ? 'text-red-800' :
                'text-blue-800'
              }`}>
                {resultModal.message}
              </p>

              {resultModal.details && resultModal.details.length > 0 && (
                <div className="mt-4">
                  <h3 className="text-sm font-semibold text-gray-900 mb-2">
                    {resultModal.details[0].includes('Colonnes détectées') ? 'Détails :' : 'Erreurs :'}
                  </h3>
                  <div className={`border rounded-lg p-4 max-h-64 overflow-y-auto ${
                    resultModal.type === 'error' ? 'bg-red-50 border-red-200' : 'bg-gray-50 border-gray-200'
                  }`}>
                    <ul className="space-y-1">
                      {resultModal.details.map((detail, index) => (
                        <li key={index} className={`text-sm ${
                          resultModal.type === 'error' ? 'text-red-800' : 'text-gray-800'
                        }`}>
                          {detail}
                        </li>
                      ))}
                    </ul>
                  </div>
                </div>
              )}
            </div>

            {/* Footer */}
            <div className="border-t border-gray-200 px-6 py-4 bg-gray-50/50">
              <div className="flex justify-end">
                <button
                  type="button"
                  onClick={() => setResultModal(null)}
                  className={`px-6 py-2 text-sm font-medium rounded-lg transition-colors ${
                    resultModal.type === 'success' 
                      ? 'bg-green-600 text-white hover:bg-green-700' :
                      resultModal.type === 'error'
                      ? 'bg-red-600 text-white hover:bg-red-700' :
                      'bg-blue-600 text-white hover:bg-blue-700'
                  }`}
                >
                  OK
                </button>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* Modal de confirmation de suppression */}
      {confirmDeleteModal && (
        <ConfirmModal
          isOpen={confirmDeleteModal.show}
          title="Supprimer le chauffeur"
          message="Êtes-vous sûr de vouloir supprimer ce chauffeur ?"
          confirmText="Supprimer"
          cancelText="Annuler"
          confirmColor="danger"
          onConfirm={confirmDelete}
          onCancel={() => setConfirmDeleteModal(null)}
        />
      )}

      {/* Modal vue détaillée - Design épuré */}
      {viewingChauffeur && (
        <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-0 md:p-4 animate-fadeIn">
          <div className="bg-white rounded-none md:rounded-xl shadow-2xl max-w-5xl w-full h-full md:h-auto md:max-h-[95vh] overflow-hidden flex flex-col animate-slideUp border-0 md:border border-gray-200">
            {/* Header épuré */}
            <div className="border-b border-gray-200 px-4 md:px-8 py-4 md:py-6 bg-white">
              <div className="flex items-start justify-between">
                <div className="flex items-center gap-3 md:gap-5 flex-1 min-w-0">
                  <div className="w-12 h-12 md:w-16 md:h-16 rounded-full bg-lblue flex items-center justify-center text-white font-bold text-lg md:text-xl border-2 md:border-4 border-lblue/10 shadow-sm flex-shrink-0">
                    {getInitials(viewingChauffeur.nom, viewingChauffeur.prenom)}
                  </div>
                  <div className="flex-1 min-w-0">
                    <h2 className="text-xl md:text-2xl font-bold text-gray-900 mb-1 truncate">
                      {viewingChauffeur.prenom} {viewingChauffeur.nom}
                    </h2>
                    <p className="text-gray-500 text-xs md:text-sm mb-2">
                      Informations détaillées du chauffeur
                    </p>
                    {viewingChauffeur.status && (
                      <div>
                        <span className={`px-2 md:px-3 py-1 text-xs font-semibold rounded-full ${getStatusColor(viewingChauffeur.status)}`}>
                          {viewingChauffeur.status}
                        </span>
                      </div>
                    )}
                  </div>
                </div>
                <button
                  onClick={() => setViewingChauffeur(null)}
                  className="text-gray-400 hover:text-gray-600 transition-colors p-2 hover:bg-gray-100 rounded-lg flex-shrink-0 ml-2"
                >
                  <svg className="w-5 h-5 md:w-6 md:h-6" 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>

            {/* Contenu scrollable */}
            <div className="flex-1 overflow-y-auto">
              <div className="p-4 md:p-8">
                {/* Actions rapides */}
                <div className="mb-6 md:mb-8 flex flex-wrap gap-2 md:gap-3">
                  <a
                    href={`tel:${viewingChauffeur.telephone}`}
                    className="flex items-center gap-2 px-3 md:px-4 py-2 bg-gray-50 text-gray-700 border border-gray-200 rounded-lg hover:bg-gray-100 hover:border-lblue transition-colors flex-1 md:flex-none justify-center"
                  >
                    <svg className="w-4 h-4 md:w-5 md:h-5 text-lblue" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                    </svg>
                    <span className="text-xs md:text-sm font-medium">Appeler</span>
                  </a>
                  <a
                    href={`mailto:${viewingChauffeur.email}`}
                    className="flex items-center gap-2 px-3 md:px-4 py-2 bg-gray-50 text-gray-700 border border-gray-200 rounded-lg hover:bg-gray-100 hover:border-lblue transition-colors flex-1 md:flex-none justify-center"
                  >
                    <svg className="w-4 h-4 md:w-5 md:h-5 text-lblue" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                    </svg>
                    <span className="text-xs md:text-sm font-medium">Envoyer un email</span>
                  </a>
                </div>

                <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 md:gap-6">
                  {/* Carte Informations personnelles */}
                  <div className="bg-white rounded-lg md:rounded-xl border border-gray-200 p-4 md:p-6 shadow-sm">
                    <div className="flex items-center gap-2 md:gap-3 mb-4 md:mb-6 pb-3 md:pb-4 border-b border-gray-200">
                      <div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-lblue/10 flex items-center justify-center flex-shrink-0">
                        <svg className="w-4 h-4 md:w-5 md:h-5 text-lblue" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                        </svg>
                      </div>
                      <h3 className="text-base md:text-lg font-semibold text-gray-900">
                        Informations personnelles
                      </h3>
                    </div>
                    <div className="space-y-3 md:space-y-4">
                      <div className="flex items-start gap-3 md:gap-4">
                        <div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
                          <svg className="w-4 h-4 md:w-5 md:h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                          </svg>
                        </div>
                        <div className="flex-1 min-w-0">
                          <p className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Date de naissance</p>
                          <p className="text-sm font-semibold text-gray-900">{formatDate(viewingChauffeur.dateNaissance)}</p>
                        </div>
                      </div>

                      <div className="flex items-start gap-3 md:gap-4">
                        <div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
                          <svg className="w-4 h-4 md:w-5 md:h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z" />
                          </svg>
                        </div>
                        <div className="flex-1 min-w-0">
                          <p className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Téléphone</p>
                          <a href={`tel:${viewingChauffeur.telephone}`} className="text-sm font-semibold text-lblue hover:text-dblue transition-colors break-all">
                            {viewingChauffeur.telephone}
                          </a>
                        </div>
                      </div>

                      <div className="flex items-start gap-3 md:gap-4">
                        <div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
                          <svg className="w-4 h-4 md:w-5 md:h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
                          </svg>
                        </div>
                        <div className="flex-1 min-w-0">
                          <p className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Email</p>
                          <a href={`mailto:${viewingChauffeur.email}`} className="text-sm font-semibold text-lblue hover:text-dblue transition-colors break-all">
                            {viewingChauffeur.email}
                          </a>
                        </div>
                      </div>

                      <div className="flex items-start gap-3 md:gap-4">
                        <div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
                          <svg className="w-4 h-4 md:w-5 md:h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
                          </svg>
                        </div>
                        <div className="flex-1 min-w-0">
                          <p className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Adresse</p>
                          <p className="text-sm font-semibold text-gray-900 break-words">{viewingChauffeur.adresse}</p>
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Carte Informations contractuelles */}
                  <div className="bg-white rounded-lg md:rounded-xl border border-gray-200 p-4 md:p-6 shadow-sm">
                    <div className="flex items-center gap-2 md:gap-3 mb-4 md:mb-6 pb-3 md:pb-4 border-b border-gray-200">
                      <div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-lblue/10 flex items-center justify-center flex-shrink-0">
                        <svg className="w-4 h-4 md:w-5 md:h-5 text-lblue" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                        </svg>
                      </div>
                      <h3 className="text-base md:text-lg font-semibold text-gray-900">
                        Informations contractuelles
                      </h3>
                    </div>
                    <div className="space-y-3 md:space-y-4">
                      <div className="flex items-start gap-3 md:gap-4">
                        <div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
                          <svg className="w-4 h-4 md:w-5 md:h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />
                          </svg>
                        </div>
                        <div className="flex-1 min-w-0">
                          <p className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Contrat d'heure</p>
                          <p className="text-base md:text-lg font-bold text-gray-900">{viewingChauffeur.heuresContrat}h</p>
                        </div>
                      </div>

                      <div className="flex items-start gap-3 md:gap-4">
                        <div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
                          <svg className="w-4 h-4 md:w-5 md:h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                          </svg>
                        </div>
                        <div className="flex-1 min-w-0">
                          <p className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Date de début</p>
                          <p className="text-sm font-semibold text-gray-900">{formatDate(viewingChauffeur.dateDebutContrat)}</p>
                        </div>
                      </div>

                      {viewingChauffeur.dateFinContrat && (
                        <div className="flex items-start gap-3 md:gap-4">
                          <div className="w-8 h-8 md:w-10 md:h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
                            <svg className="w-4 h-4 md:w-5 md:h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                            </svg>
                          </div>
                          <div className="flex-1 min-w-0">
                            <p className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Date de fin</p>
                            <p className="text-sm font-semibold text-gray-900">{formatDate(viewingChauffeur.dateFinContrat)}</p>
                          </div>
                        </div>
                      )}

                      {viewingChauffeur.heuresRestantes !== undefined && (
                        <div className="pt-2">
                          <div className="flex items-center justify-between mb-2 md:mb-3">
                            <p className="text-xs font-medium text-gray-500 uppercase tracking-wide">Heures restantes</p>
                            <span className="text-base md:text-lg font-bold text-gray-900">
                              {viewingChauffeur.heuresRestantes}h <span className="text-xs md:text-sm font-normal text-gray-500">/ {viewingChauffeur.heuresContrat}h</span>
                            </span>
                          </div>
                          <div className="relative w-full bg-gray-200 rounded-full h-2 md:h-3 overflow-hidden">
                            <div
                              className={`h-2 md:h-3 rounded-full transition-all duration-500 ${
                                (viewingChauffeur.heuresRestantes / viewingChauffeur.heuresContrat) < 0.2
                                  ? 'bg-orange-500'
                                  : (viewingChauffeur.heuresRestantes / viewingChauffeur.heuresContrat) < 0.5
                                  ? 'bg-orange-400'
                                  : 'bg-lblue'
                              }`}
                              style={{ width: `${(viewingChauffeur.heuresRestantes / viewingChauffeur.heuresContrat) * 100}%` }}
                            ></div>
                          </div>
                          <p className="text-xs text-gray-500 mt-2">
                            {Math.round((viewingChauffeur.heuresRestantes / viewingChauffeur.heuresContrat) * 100)}% d'heures restantes
                          </p>
                        </div>
                      )}
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* Footer avec actions */}
            <div className="border-t border-gray-200 px-4 md:px-8 py-4 md:py-5 bg-white">
              <div className="flex flex-col-reverse md:flex-row items-stretch md:items-center justify-between gap-3 md:gap-0">
                <button
                  onClick={() => setViewingChauffeur(null)}
                  className="px-4 md:px-5 py-2.5 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors w-full md:w-auto"
                >
                  Fermer
                </button>
                <button
                  onClick={() => {
                    setViewingChauffeur(null);
                    handleEdit(viewingChauffeur);
                  }}
                  className="px-4 md:px-6 py-2.5 bg-lblue text-white text-sm font-semibold rounded-lg hover:bg-dblue transition-colors flex items-center justify-center gap-2 w-full md:w-auto"
                >
                  <svg className="w-4 h-4 md:w-5 md:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                  </svg>
                  Modifier le chauffeur
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
}