'use client';

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

interface UniversPro {
  id: string;
  nom: string;
  prenom: string;
  telephone: string;
  email: string;
  adresse: string;
  nomEntreprise: string;
}

export default function UniversProTable() {
  const [contacts, setContacts] = useState<UniversPro[]>([]);
  const [search, setSearch] = useState('');
  const [loading, setLoading] = useState(true);
  const [showForm, setShowForm] = useState(false);
  const [editingContact, setEditingContact] = useState<UniversPro | null>(null);
  const [viewingContact, setViewingContact] = useState<UniversPro | 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) || !!viewingContact);

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

  useEffect(() => {
    const timeoutId = setTimeout(() => {
      fetchContacts(search);
    }, 300);

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

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

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

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

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

      if (response.ok) {
        fetchContacts(search);
        setResultModal({
          show: true,
          type: 'success',
          title: 'Suppression réussie',
          message: 'Le contact 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 = (contact: UniversPro) => {
    setEditingContact(contact);
    setShowForm(true);
  };

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

  const handleFormClose = () => {
    setShowForm(false);
    setEditingContact(null);
    fetchContacts(search);
  };

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

  const handleSelectAll = (checked: boolean) => {
    if (checked) {
      setSelectedIds(new Set(contacts.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 contact à exporter',
      });
      return;
    }

    const selectedContacts = contacts.filter(c => selectedIds.has(c.id));
    
    // Créer les en-têtes CSV avec tous les champs disponibles
    const headers = [
      'Nom',
      'Prénom',
      'Téléphone',
      'Email',
      'Adresse',
      'Nom entreprise'
    ];

    // Créer les lignes CSV
    const rows = selectedContacts.map(contact => {
      return [
        contact.nom || '',
        contact.prenom || '',
        contact.telephone || '',
        contact.email || '',
        contact.adresse || '',
        contact.nomEntreprise || ''
      ];
    });

    // 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', `contacts_pro_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',
      'Téléphone',
      'Email',
      'Adresse',
      'Nom entreprise'
    ];

    // Ligne d'exemple
    const exampleRow = [
      'Dupont',
      'Jean',
      '0123456789',
      'jean.dupont@example.com',
      '123 Rue de la Paix, 75001 Paris',
      'BNP Paribas'
    ];

    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_contacts_pro.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';
      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 nomEntrepriseIndex = findColumnIndex(['entreprise', 'company', 'societe', 'société']);
      const nomEntrepriseHeader = nomEntrepriseIndex >= 0 ? headers[nomEntrepriseIndex] : 'Nom entreprise';

      // 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 (telephoneIndex === -1) missingRequiredColumns.push('Téléphone');
      if (emailIndex === -1) missingRequiredColumns.push('Email');
      if (adresseIndex === -1) missingRequiredColumns.push('Adresse');
      if (nomEntrepriseIndex === -1) missingRequiredColumns.push('Nom entreprise');

      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 telephone = telephoneIndex >= 0 ? (row[telephoneIndex] || '').trim() : '';
        const email = emailIndex >= 0 ? (row[emailIndex] || '').trim() : '';
        const adresse = adresseIndex >= 0 ? (row[adresseIndex] || '').trim() : '';
        const nomEntreprise = nomEntrepriseIndex >= 0 ? (row[nomEntrepriseIndex] || '').trim() : '';

        // 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 (!telephone) missingFields.push(telephoneHeader);
        if (!email) missingFields.push(emailHeader);
        if (!adresse) missingFields.push(adresseHeader);
        if (!nomEntreprise) missingFields.push(nomEntrepriseHeader);

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

        try {
          const response = await fetch('/api/univers-pro', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({
              nom,
              prenom,
              telephone,
              email,
              adresse,
              nomEntreprise,
            }),
          });

          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} contact(s) importé(s) avec succès`
        : `${successCount} contact(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
      fetchContacts(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 contact..."
                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={() => {
                setEditingContact(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 contact</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>
        ) : contacts.length === 0 ? (
          <div className="p-8 text-center text-gray-500">Aucun contact 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={contacts.length > 0 && selectedIds.size === contacts.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">ENTREPRISE</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">
                  {contacts.map((contact) => (
                    <tr key={contact.id} className="hover:bg-gray-50">
                      <td className="px-6 py-4 whitespace-nowrap">
                        <input
                          type="checkbox"
                          checked={selectedIds.has(contact.id)}
                          onChange={(e) => handleSelectOne(contact.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-lblue flex items-center justify-center text-white font-semibold">
                            {getInitials(contact.nom, contact.prenom)}
                          </div>
                          <div>
                            <div className="text-sm font-semibold text-gray-900">
                              {contact.prenom} {contact.nom}
                            </div>
                          </div>
                        </div>
                      </td>
                      <td className="px-6 py-4">
                        <div className="text-sm text-gray-900">{contact.telephone}</div>
                        <div className="text-sm text-gray-500">{contact.email}</div>
                      </td>
                      <td className="px-6 py-4">
                        <div className="text-sm text-gray-900">{contact.adresse}</div>
                      </td>
                      <td className="px-6 py-4">
                        <div className="text-sm font-medium text-gray-900">{contact.nomEntreprise}</div>
                      </td>
                      <td className="px-6 py-4 whitespace-nowrap text-sm font-medium">
                        <div className="flex items-center gap-3">
                          <button
                            onClick={() => handleView(contact.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(contact)}
                            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(contact.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">
              {contacts.map((contact) => (
                <div key={contact.id} className="p-4 hover:bg-gray-50">
                  <div className="flex items-start gap-3">
                    {/* Checkbox */}
                    <input
                      type="checkbox"
                      checked={selectedIds.has(contact.id)}
                      onChange={(e) => handleSelectOne(contact.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-lblue flex items-center justify-center text-white font-semibold flex-shrink-0">
                      {getInitials(contact.nom, contact.prenom)}
                    </div>
                    
                    {/* Contenu principal */}
                    <div className="flex-1 min-w-0">
                      {/* Nom */}
                      <div className="mb-2">
                        <div className="text-base font-semibold text-gray-900">
                          {contact.prenom} {contact.nom}
                        </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:${contact.telephone}`} className="text-sm text-gray-900 block truncate">
                          {contact.telephone}
                        </a>
                        <a href={`mailto:${contact.email}`} className="text-sm text-gray-500 block truncate">
                          {contact.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">
                          {contact.adresse}
                        </div>
                      </div>
                      
                      {/* Entreprise */}
                      <div className="mb-3">
                        <div className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Entreprise</div>
                        <div className="text-sm font-medium text-gray-900">
                          {contact.nomEntreprise}
                        </div>
                      </div>
                      
                      {/* Actions */}
                      <div className="flex items-center gap-4 pt-2 border-t border-gray-200">
                        <button
                          onClick={() => handleView(contact.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(contact)}
                          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(contact.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 && (
        <UniversProForm
          contact={editingContact}
          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 contacts
                  </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-pro" 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-pro"
                            name="file-upload-pro"
                            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>Tous les champs sont obligatoires : Nom, Prénom, Téléphone, Email, Adresse, Nom entreprise</li>
                    <li>Assurez-vous que le fichier utilise l'encodage UTF-8</li>
                    <li>Le séparateur peut être une virgule (,) ou un point-virgule (;)</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 contact"
          message="Êtes-vous sûr de vouloir supprimer ce contact ?"
          confirmText="Supprimer"
          cancelText="Annuler"
          confirmColor="danger"
          onConfirm={confirmDelete}
          onCancel={() => setConfirmDeleteModal(null)}
        />
      )}

      {/* Modal vue détaillée - Design épuré */}
      {viewingContact && (
        <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(viewingContact.nom, viewingContact.prenom)}
                  </div>
                  <div className="flex-1 min-w-0">
                    <h2 className="text-xl md:text-2xl font-bold text-gray-900 mb-1 truncate">
                      {viewingContact.prenom} {viewingContact.nom}
                    </h2>
                    <p className="text-gray-500 text-xs md:text-sm">
                      Informations détaillées du contact professionnel
                    </p>
                  </div>
                </div>
                <button
                  onClick={() => setViewingContact(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:${viewingContact.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:${viewingContact.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 de contact */}
                  <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 de contact
                      </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="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:${viewingContact.telephone}`} className="text-sm font-semibold text-lblue hover:text-dblue transition-colors break-all">
                            {viewingContact.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:${viewingContact.email}`} className="text-sm font-semibold text-lblue hover:text-dblue transition-colors break-all">
                            {viewingContact.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">{viewingContact.adresse}</p>
                        </div>
                      </div>
                    </div>
                  </div>

                  {/* Carte Informations entreprise */}
                  <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="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                        </svg>
                      </div>
                      <h3 className="text-base md:text-lg font-semibold text-gray-900">
                        Informations entreprise
                      </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="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                          </svg>
                        </div>
                        <div className="flex-1 min-w-0">
                          <p className="text-xs font-medium text-gray-500 uppercase tracking-wide mb-1">Nom de l'entreprise</p>
                          <p className="text-base md:text-lg font-bold text-gray-900">{viewingContact.nomEntreprise}</p>
                        </div>
                      </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={() => setViewingContact(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={() => {
                    setViewingContact(null);
                    handleEdit(viewingContact);
                  }}
                  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 contact
                </button>
              </div>
            </div>
          </div>
        </div>
      )}
    </>
  );
}