create-crm-tmp 2.0.0 → 2.1.0

package/template/src/components/settings/integrations/GoogleSheetIntegration.tsx

@@ -0,0 +1,809 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { Plus, Trash2, ArrowRight } from 'lucide-react';
+import { cn, indexToColumn, devToast } from '@/lib/utils';
+import { useAppToast } from '@/contexts/app-toast-context';
+import { useConfirm } from '@/hooks/use-confirm';
+import { useFetch } from '@/hooks/use-fetch';
+import { CONFIG_LINKS } from '@/lib/config-links';
+import { ImportResultDialog, type ImportResultItem } from './ImportResultDialog';
+import { StatusSelect } from '@/components/ui/status-select';
+import { GoogleSheetConfigMonitoringModal } from './GoogleSheetConfigMonitoringModal';
+import { ConfigErrorAlert } from '@/components/config-error-alert';
+
+interface ColumnMapping {
+  id: string;
+  columnName: string;
+  action: 'map' | 'note' | 'ignore';
+  crmField?: string;
+}
+
+interface GoogleSheetConfig {
+  id: string;
+  name: string;
+  active: boolean;
+  spreadsheetId: string;
+  sheetName: string;
+  headerRow: number;
+  phoneColumn: string;
+  firstNameColumn: string | null;
+  lastNameColumn: string | null;
+  emailColumn: string | null;
+  cityColumn: string | null;
+  postalCodeColumn: string | null;
+  originColumn: string | null;
+  columnMappings?: ColumnMapping[];
+  defaultStatusId: string | null;
+  defaultAssignedUserId: string | null;
+}
+
+interface GoogleSheetIntegrationProps {
+  statuses: Array<{ id: string; name: string; color: string }>;
+  users: Array<{ id: string; name: string; email: string }>;
+}
+
+type GoogleSheetJobStatus = 'QUEUED' | 'RUNNING' | 'SUCCEEDED' | 'FAILED';
+type GoogleSheetJobResult = {
+  totalImported?: number;
+  totalUpdated?: number;
+  totalSkipped?: number;
+  results?: ImportResultItem[];
+  message?: string;
+};
+
+const INITIAL_FORM_DATA = {
+  name: '',
+  active: true,
+  sheetUrl: '',
+  sheetName: '',
+  headerRow: '1',
+  defaultStatusId: null as string | null,
+  defaultAssignedUserId: null as string | null,
+};
+
+export function GoogleSheetIntegration({
+  statuses,
+  users,
+}: Readonly<GoogleSheetIntegrationProps>) {
+  const toast = useAppToast();
+  const { confirm, ConfirmDialog } = useConfirm();
+  const { data: googleStatus } = useFetch<{
+    calendar?: { connected?: boolean; email?: string | null };
+  }>('/api/auth/google/status');
+  /** Aligné sur GET /api/auth/google/status : { calendar: { connected, email } } */
+  const googleStatusLoaded = googleStatus !== undefined;
+  const googleConnected = Boolean(googleStatus?.calendar?.connected);
+
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [syncing, setSyncing] = useState(false);
+  const [configs, setConfigs] = useState<GoogleSheetConfig[]>([]);
+
+  const [showModal, setShowModal] = useState(false);
+  const [editingConfig, setEditingConfig] = useState<string | null>(null);
+  const [step, setStep] = useState<1 | 2>(1);
+  const [formData, setFormData] = useState(INITIAL_FORM_DATA);
+
+  const [mappings, setMappings] = useState<ColumnMapping[]>([]);
+  const [preview, setPreview] = useState<Array<Record<string, string>>>([]);
+  const [headers, setHeaders] = useState<string[]>([]);
+
+  const [gsPreviewStep, setGsPreviewStep] = useState<'url' | 'sheet' | 'header'>('url');
+  const [gsAvailableSheets, setGsAvailableSheets] = useState<string[]>([]);
+  const [gsRawRows, setGsRawRows] = useState<string[][]>([]);
+  const [gsSelectedHeaderRow, setGsSelectedHeaderRow] = useState(0);
+  const [gsLoadingPreview, setGsLoadingPreview] = useState(false);
+  const [gsConfigError, setGsConfigError] = useState<string | null>(null);
+  const [gsConfigErrorConfigLink, setGsConfigErrorConfigLink] = useState<string | null>(null);
+
+  const [showImportResult, setShowImportResult] = useState(false);
+  const [importResults, setImportResults] = useState<ImportResultItem[]>([]);
+  const [importTotals, setImportTotals] = useState({ totalImported: 0, totalUpdated: 0, totalSkipped: 0 });
+  const [importConfigName, setImportConfigName] = useState<string | undefined>();
+  const [showMonitoringModal, setShowMonitoringModal] = useState(false);
+  const [selectedMonitoringConfig, setSelectedMonitoringConfig] = useState<GoogleSheetConfig | null>(null);
+
+  const pollSyncJob = useCallback(
+    async (jobId: string): Promise<GoogleSheetJobResult> => {
+      const timeoutMs = 5 * 60 * 1000;
+      const intervalMs = 1500;
+      const start = Date.now();
+
+      while (Date.now() - start < timeoutMs) {
+        const res = await fetch(`/api/integrations/google-sheet/jobs/${jobId}`);
+        const data = await res.json();
+        if (!res.ok) {
+          throw new Error(data.error || 'Impossible de suivre la synchronisation');
+        }
+
+        const status = data.status as GoogleSheetJobStatus;
+        if (status === 'SUCCEEDED') {
+          return (data.result ?? {}) as GoogleSheetJobResult;
+        }
+        if (status === 'FAILED') {
+          throw new Error(data.error || 'La synchronisation a échoué');
+        }
+
+        await new Promise((resolve) => setTimeout(resolve, intervalMs));
+      }
+
+      throw new Error('La synchronisation est en cours depuis trop longtemps. Réessayez.');
+    },
+    [],
+  );
+
+  const loadConfigs = useCallback(async () => {
+    try {
+      const res = await fetch('/api/settings/google-sheet');
+      if (res.ok) {
+        const data = await res.json();
+        setConfigs(Array.isArray(data) ? data : []);
+      }
+    } catch {
+      // silent
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadConfigs();
+  }, [loadConfigs]);
+
+  const resetModal = () => {
+    setShowModal(false);
+    setEditingConfig(null);
+    setStep(1);
+    setFormData(INITIAL_FORM_DATA);
+    setMappings([]);
+    setPreview([]);
+    setHeaders([]);
+    setGsPreviewStep('url');
+    setGsAvailableSheets([]);
+    setGsRawRows([]);
+    setGsSelectedHeaderRow(0);
+    setGsConfigError(null);
+    setGsConfigErrorConfigLink(null);
+  };
+
+  const handleAutoMap = async (): Promise<boolean> => {
+    try {
+      if (!formData.sheetUrl || !formData.sheetName || !formData.headerRow) {
+        toast.error('Veuillez renseigner le lien du Google Sheet, le nom de l\u2019onglet et la ligne des en-têtes.');
+        return false;
+      }
+      const res = await fetch('/api/settings/google-sheet/auto-map', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          sheetUrl: formData.sheetUrl,
+          sheetName: formData.sheetName,
+          headerRow: formData.headerRow || '1',
+        }),
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        setGsConfigError(data.error || 'Erreur lors du mapping automatique');
+        setGsConfigErrorConfigLink(data.configLink || null);
+        return false;
+      }
+
+      setGsConfigError(null);
+      setGsConfigErrorConfigLink(null);
+      const h = data.headers || [];
+      const autoMapping = data.mapping || {};
+      const p = data.preview || [];
+
+      setHeaders(h);
+      setPreview(p);
+
+      const crmFieldMap: Record<string, string> = {
+        phoneColumn: 'phone',
+        firstNameColumn: 'firstName',
+        lastNameColumn: 'lastName',
+        emailColumn: 'email',
+        cityColumn: 'city',
+        postalCodeColumn: 'postalCode',
+        companyNameColumn: 'companyName',
+        originColumn: 'origin',
+        websiteColumn: 'website',
+        linkedinColumn: 'linkedin',
+        facebookColumn: 'facebook',
+        twitterColumn: 'twitter',
+        instagramColumn: 'instagram',
+      };
+
+      const initial: ColumnMapping[] = h.map((header: string, index: number) => {
+        if (!header) return null;
+        const col = indexToColumn(index);
+        const mapped = Object.entries(autoMapping).find(([, v]) => v === col)?.[0];
+        return {
+          id: `mapping-${Date.now()}-${Math.random()}`,
+          columnName: header,
+          action: mapped ? 'map' : 'ignore',
+          crmField: mapped ? crmFieldMap[mapped] : undefined,
+        } as ColumnMapping;
+      }).filter(Boolean) as ColumnMapping[];
+
+      setMappings(initial);
+      toast.success('Colonnes détectées. Configurez le mapping.');
+      return true;
+    } catch (err: unknown) {
+      toast.error(devToast('Erreur lors du mapping automatique', err));
+      setGsConfigError(null);
+      setGsConfigErrorConfigLink(null);
+      return false;
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSaving(true);
+
+    try {
+      const phoneMapping = mappings.find(
+        (m) => m.action === 'map' && m.crmField === 'phone' && m.columnName.trim() !== '',
+      );
+      if (!phoneMapping) {
+        toast.error('Le mapping du téléphone est obligatoire');
+        setSaving(false);
+        return;
+      }
+
+      const url = editingConfig
+        ? `/api/settings/google-sheet/${editingConfig}`
+        : '/api/settings/google-sheet';
+      const method = editingConfig ? 'PUT' : 'POST';
+
+      const res = await fetch(url, {
+        method,
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ ...formData, columnMappings: mappings }),
+      });
+      const data = await res.json();
+      if (!res.ok) throw new Error(data.error || 'Erreur lors de la sauvegarde');
+
+      const createdId = data.config?.id ?? data.id;
+      const createdName = data.config?.name ?? data.name;
+      const wasCreating = !editingConfig;
+
+      toast.success(
+        editingConfig
+          ? 'Configuration Google Sheets mise à jour !'
+          : 'Configuration Google Sheets créée !',
+      );
+      resetModal();
+      await loadConfigs();
+
+      if (wasCreating && createdId) {
+        setSyncing(true);
+        try {
+          toast.success('Synchronisation lancée en arrière-plan...');
+          const enqueueRes = await fetch('/api/integrations/google-sheet/sync', {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ configId: createdId }),
+          });
+          const enqueueData = await enqueueRes.json();
+          if (!enqueueRes.ok) {
+            throw new Error(enqueueData.error || 'Erreur lors du lancement de la synchronisation');
+          }
+
+          const syncData = await pollSyncJob(enqueueData.jobId);
+          const results = syncData.results ?? [];
+          setImportResults(results);
+          setImportTotals({
+            totalImported: syncData.totalImported ?? 0,
+            totalUpdated: syncData.totalUpdated ?? 0,
+            totalSkipped: syncData.totalSkipped ?? 0,
+          });
+          setImportConfigName(createdName);
+          setShowImportResult(true);
+        } catch (syncErr: unknown) {
+          setImportResults([{
+            configId: createdId,
+            configName: createdName ?? 'Configuration',
+            imported: 0,
+            error: syncErr instanceof Error ? syncErr.message : 'Erreur lors de l\'import',
+          }]);
+          setImportConfigName(createdName);
+          setShowImportResult(true);
+        } finally {
+          setSyncing(false);
+          await loadConfigs();
+        }
+      }
+    } catch (err: unknown) {
+      toast.error(devToast('Impossible de sauvegarder la configuration Google Sheets. Veuillez réessayer.', err));
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const handleSync = async (configId?: string) => {
+    setSyncing(true);
+    try {
+      toast.success('Synchronisation lancée en arrière-plan...');
+      const enqueueRes = await fetch('/api/integrations/google-sheet/sync', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: configId ? JSON.stringify({ configId }) : '{}',
+      });
+      const enqueueData = await enqueueRes.json();
+      if (!enqueueRes.ok) throw new Error(enqueueData.error || 'Erreur lors de la synchronisation');
+
+      const data = await pollSyncJob(enqueueData.jobId);
+      const results = data.results ?? [];
+      setImportResults(results);
+      setImportTotals({
+        totalImported: data.totalImported ?? 0,
+        totalUpdated: data.totalUpdated ?? 0,
+        totalSkipped: data.totalSkipped ?? 0,
+      });
+      setImportConfigName(results.length === 1 ? results[0]?.configName : undefined);
+      setShowImportResult(true);
+    } catch (err: unknown) {
+      toast.error(devToast('Impossible de lancer la synchronisation. Veuillez réessayer.', err));
+    } finally {
+      setSyncing(false);
+    }
+  };
+
+  const openMonitoringModal = (config: GoogleSheetConfig) => {
+    setSelectedMonitoringConfig(config);
+    setShowMonitoringModal(true);
+  };
+
+  const handleDelete = async (id: string) => {
+    const ok = await confirm({
+      title: 'Supprimer la configuration Google Sheet',
+      description: 'Êtes-vous sûr de vouloir supprimer cette configuration ?',
+      confirmText: 'Supprimer',
+      cancelText: 'Annuler',
+      variant: 'destructive',
+    });
+    if (!ok) return;
+    try {
+      const res = await fetch(`/api/settings/google-sheet/${id}`, { method: 'DELETE' });
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.error || 'Erreur lors de la suppression');
+      }
+      toast.success('Configuration supprimée !');
+      await loadConfigs();
+    } catch (err: unknown) {
+      toast.error(devToast('Impossible de supprimer la configuration. Veuillez réessayer.', err));
+    }
+  };
+
+  return (
+    <>
+      <div className="rounded-lg bg-white p-6 shadow-sm">
+        <div className="flex items-center justify-between">
+          <div>
+            <h2 className="text-lg font-bold text-gray-900">Intégration Google Sheets</h2>
+            <p className="mt-1 text-sm text-gray-600">
+              Importez automatiquement des contacts à partir d&apos;un Google Sheet.
+            </p>
+          </div>
+          <div className="flex items-center gap-2">
+            <button
+              type="button"
+              onClick={() => {
+                if (googleStatusLoaded && !googleConnected) {
+                  toast.errorConfigRequired(
+                    'Connectez votre compte Google dans les paramètres avant de synchroniser.',
+                    CONFIG_LINKS.googleSheet,
+                  );
+                  return;
+                }
+                handleSync();
+              }}
+              disabled={syncing}
+              className="cursor-pointer rounded-lg border border-blue-600 bg-white px-4 py-2 text-sm font-medium text-blue-700 transition-colors hover:bg-blue-50 disabled:cursor-not-allowed disabled:opacity-50"
+            >
+              {syncing ? 'Synchronisation...' : 'Synchroniser'}
+            </button>
+            <button
+              type="button"
+              onClick={() => {
+                if (googleStatusLoaded && !googleConnected) {
+                  toast.errorConfigRequired(
+                    'Connectez votre compte Google dans les paramètres avant d\'ajouter une configuration.',
+                    CONFIG_LINKS.googleSheet,
+                  );
+                  return;
+                }
+                setEditingConfig(null);
+                setFormData(INITIAL_FORM_DATA);
+                setMappings([]);
+                setStep(1);
+                setShowModal(true);
+              }}
+              className="cursor-pointer rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700"
+            >
+              + Ajouter
+            </button>
+          </div>
+        </div>
+
+        {loading ? (
+          <div className="mt-6 text-center text-gray-500">Chargement...</div>
+        ) : configs.length === 0 ? (
+          <div className="mt-6 rounded-lg border border-dashed border-gray-300 bg-gray-50 p-8 text-center">
+            <p className="text-sm text-gray-600">Aucune configuration Google Sheets</p>
+            <p className="mt-1 text-xs text-gray-500">
+              Cliquez sur &quot;+ Ajouter&quot; pour créer votre première configuration
+            </p>
+          </div>
+        ) : (
+          <div className="mt-6 space-y-3">
+            {configs.map((config) => (
+              <div
+                key={config.id}
+                className="flex items-center justify-between rounded-lg border border-gray-200 bg-gray-50 p-4"
+              >
+                <div className="flex-1">
+                  <div className="flex items-center gap-2">
+                    <h3 className="font-medium text-gray-900">{config.name}</h3>
+                    {config.active ? (
+                      <span className="rounded-full bg-green-100 px-2 py-0.5 text-xs font-medium text-green-800">
+                        Actif
+                      </span>
+                    ) : (
+                      <span className="rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-800">
+                        Inactif
+                      </span>
+                    )}
+                  </div>
+                  <p className="mt-1 text-xs text-gray-500">
+                    {config.sheetName} - Ligne {config.headerRow}
+                  </p>
+                  <p className="mt-0.5 text-xs text-gray-400">
+                    Lien : https://docs.google.com/spreadsheets/d/{config.spreadsheetId}
+                  </p>
+                </div>
+                <div className="flex flex-wrap items-center gap-2">
+                  <button
+                    type="button"
+                    onClick={() => openMonitoringModal(config)}
+                    className="cursor-pointer rounded-lg border border-gray-300 px-3 py-1.5 text-xs font-medium text-gray-700 transition-colors hover:bg-gray-100"
+                  >
+                    Gérer
+                  </button>
+                  <button
+                    type="button"
+                    onClick={() => handleDelete(config.id)}
+                    className="cursor-pointer rounded-lg border border-rose-200 px-3 py-1.5 text-xs font-medium text-rose-700 transition-colors hover:bg-rose-50"
+                  >
+                    Supprimer
+                  </button>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      <GoogleSheetConfigMonitoringModal
+        open={showMonitoringModal}
+        onClose={() => {
+          setShowMonitoringModal(false);
+          setSelectedMonitoringConfig(null);
+        }}
+        config={selectedMonitoringConfig}
+        statuses={statuses}
+        users={users}
+        onSaved={loadConfigs}
+      />
+
+      {/* Google Sheet Modal */}
+      {showModal && (
+        <div className="ui-fade-in fixed inset-0 z-50 flex min-h-dvh items-center justify-center bg-gray-500/20 p-4 backdrop-blur-sm sm:p-6">
+          <div className="ui-scale-in flex max-h-[90vh] w-full max-w-5xl flex-col rounded-lg bg-white p-6 shadow-xl sm:p-8">
+            <div className="shrink-0 border-b border-slate-200 pb-4">
+              <div className="flex items-center justify-between">
+                <h2 className="text-xl font-bold text-slate-900 sm:text-2xl">
+                  {editingConfig ? 'Modifier' : 'Ajouter'} une configuration Google Sheets
+                </h2>
+                <button type="button" onClick={resetModal} className="cursor-pointer rounded-xl p-2 text-slate-400 transition-colors hover:bg-slate-100">
+                  <svg className="h-6 w-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>
+
+            <form id="google-sheet-form" onSubmit={handleSubmit} className="flex-1 space-y-4 overflow-y-auto pt-4 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden">
+              {gsConfigError && (
+                <ConfigErrorAlert
+                  message={gsConfigError}
+                  configLink={gsConfigErrorConfigLink || undefined}
+                  linkLabel="Configurer dans les paramètres"
+                />
+              )}
+              {step === 1 && (
+                <>
+                  <div>
+                    <label htmlFor="gs-config-name" className="block text-sm font-medium text-gray-700">Nom de la configuration *</label>
+                    <input id="gs-config-name" type="text" required value={formData.name} onChange={(e) => setFormData((p) => ({ ...p, name: e.target.value }))} className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50" placeholder="Ex: Contacts Ventes" />
+                  </div>
+
+                  {gsPreviewStep !== 'url' && (
+                    <div className="flex items-center gap-2 text-xs font-medium text-gray-500">
+                      <span className="rounded-full bg-gray-100 px-2.5 py-0.5 text-gray-500">1. Lien</span>
+                      <span className="text-gray-300">/</span>
+                      {gsAvailableSheets.length > 1 && (
+                        <>
+                          <span className={cn('rounded-full px-2.5 py-0.5', gsPreviewStep === 'sheet' ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-500')}>2. Feuille</span>
+                          <span className="text-gray-300">/</span>
+                        </>
+                      )}
+                      <span className={cn('rounded-full px-2.5 py-0.5', gsPreviewStep === 'header' ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-500')}>
+                        {gsAvailableSheets.length > 1 ? '3' : '2'}. En-tête
+                      </span>
+                    </div>
+                  )}
+
+                  {gsPreviewStep === 'url' && (
+                    <div>
+                      <label htmlFor="gs-sheet-url" className="block text-sm font-medium text-gray-700">Lien du Google Sheet *</label>
+                      <input id="gs-sheet-url" type="url" required value={formData.sheetUrl} onChange={(e) => { setFormData((p) => ({ ...p, sheetUrl: e.target.value, sheetName: '', headerRow: '1' })); setGsAvailableSheets([]); setGsRawRows([]); setGsSelectedHeaderRow(0); setPreview([]); setHeaders([]); }} className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50" placeholder="https://docs.google.com/spreadsheets/d/..." />
+                    </div>
+                  )}
+
+                  {gsPreviewStep === 'sheet' && (
+                    <div className="space-y-6">
+                      <div className="rounded-lg border border-gray-200 p-4">
+                        <div className="flex items-center justify-between">
+                          <p className="text-sm font-medium text-gray-900">{formData.sheetUrl.length > 60 ? formData.sheetUrl.slice(0, 60) + '...' : formData.sheetUrl}</p>
+                          <button type="button" onClick={() => { setGsPreviewStep('url'); setGsAvailableSheets([]); setGsRawRows([]); }} className="cursor-pointer rounded-lg p-1 text-gray-400 hover:text-gray-600">
+                            <svg className="h-4 w-4" 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>
+                      <div>
+                        <h3 className="mb-2 text-base font-semibold text-gray-900">Choisir une feuille</h3>
+                        <p className="mb-4 text-sm text-gray-600">Ce fichier contient {gsAvailableSheets.length} feuilles. Sélectionnez celle qui contient les contacts.</p>
+                        <div className="space-y-2">
+                          {gsAvailableSheets.map((name, idx) => (
+                            <button key={name} type="button" disabled={gsLoadingPreview} onClick={async () => {
+                              setFormData((p) => ({ ...p, sheetName: name }));
+                              setGsLoadingPreview(true);
+                              try {
+                                const res = await fetch('/api/settings/google-sheet/preview', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ sheetUrl: formData.sheetUrl, sheetName: name }) });
+                                const data = await res.json();
+                                if (!res.ok) {
+                                  setGsConfigError(data.error || 'Erreur');
+                                  setGsConfigErrorConfigLink(data.configLink || null);
+                                  return;
+                                }
+                                setGsConfigError(null);
+                                setGsConfigErrorConfigLink(null);
+                                setGsRawRows(data.rawRows || []);
+                                setGsSelectedHeaderRow(0);
+                                setGsPreviewStep('header');
+                              } catch (err: unknown) {
+                                toast.error(devToast('Impossible de charger l\'aperçu des données. Vérifiez le lien du Google Sheet.', err));
+                                setGsConfigError(null);
+                                setGsConfigErrorConfigLink(null);
+                              } finally { setGsLoadingPreview(false); }
+                            }} className={cn('flex w-full items-center gap-3 rounded-lg border-2 px-4 py-3 text-left text-sm font-medium transition-colors disabled:opacity-50', formData.sheetName === name ? 'border-blue-500 bg-blue-50 text-blue-700' : 'border-gray-200 text-gray-700 hover:border-gray-300 hover:bg-gray-50')}>
+                              <span className={cn('flex h-8 w-8 shrink-0 items-center justify-center rounded-full text-xs font-bold', formData.sheetName === name ? 'bg-blue-100 text-blue-700' : 'bg-gray-100 text-gray-500')}>{idx + 1}</span>
+                              {name}
+                            </button>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+                  )}
+
+                  {gsPreviewStep === 'header' && (
+                    <div className="space-y-6">
+                      <div className="rounded-lg border border-gray-200 p-4">
+                        <div className="flex items-center justify-between">
+                          <p className="text-sm font-medium text-gray-900">
+                            {formData.sheetUrl.length > 50 ? formData.sheetUrl.slice(0, 50) + '...' : formData.sheetUrl}
+                            {formData.sheetName && <span className="ml-2 text-xs text-gray-500">— {formData.sheetName}</span>}
+                          </p>
+                          <button type="button" onClick={() => setGsPreviewStep(gsAvailableSheets.length > 1 ? 'sheet' : 'url')} className="cursor-pointer rounded-lg p-1 text-gray-400 hover:text-gray-600">
+                            <svg className="h-4 w-4" 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>
+                      <div>
+                        <h3 className="mb-2 text-base font-semibold text-gray-900">Sélectionner la ligne d&apos;en-tête</h3>
+                        <p className="mb-4 text-sm text-gray-600">Cliquez sur la ligne qui contient les noms de colonnes.</p>
+                        {gsRawRows.length > 0 ? (
+                          <div className="overflow-x-auto rounded-lg border border-gray-200">
+                            <table className="min-w-full divide-y divide-gray-200">
+                              <thead className="bg-gray-50">
+                                <tr>
+                                  <th className="px-3 py-2 text-left text-xs font-medium text-gray-500">#</th>
+                                  {gsRawRows[0]?.map((_, colIdx) => (
+                                    <th key={`col-${colIdx}`} className="px-3 py-2 text-left text-xs font-medium text-gray-500">Col {colIdx + 1}</th>
+                                  ))}
+                                </tr>
+                              </thead>
+                              <tbody className="divide-y divide-gray-100 bg-white">
+                                {gsRawRows.map((row, rowIdx) => (
+                                  <tr key={`row-${rowIdx}`} onClick={() => { setGsSelectedHeaderRow(rowIdx); setFormData((p) => ({ ...p, headerRow: String(rowIdx + 1) })); }} className={cn('cursor-pointer transition-colors', gsSelectedHeaderRow === rowIdx ? 'bg-blue-50 ring-2 ring-blue-500 ring-inset' : rowIdx < gsSelectedHeaderRow ? 'bg-gray-50 text-gray-400' : 'hover:bg-gray-50')}>
+                                    <td className="px-3 py-2 text-xs font-medium text-gray-400">{rowIdx + 1}</td>
+                                    {row.map((cell, colIdx) => (
+                                      <td key={`cell-${rowIdx}-${colIdx}`} className={cn('max-w-[200px] truncate px-3 py-2 text-xs', gsSelectedHeaderRow === rowIdx ? 'font-semibold text-blue-700' : 'text-gray-900')}>
+                                        {cell || <span className="text-gray-300">—</span>}
+                                      </td>
+                                    ))}
+                                  </tr>
+                                ))}
+                              </tbody>
+                            </table>
+                          </div>
+                        ) : (
+                          <p className="text-sm text-gray-500">Aucune donnée disponible.</p>
+                        )}
+                      </div>
+                    </div>
+                  )}
+                </>
+              )}
+
+              {step === 2 && (
+                <>
+                  <div className="grid grid-cols-1 gap-4 md:grid-cols-2">
+                    <div>
+                      <label htmlFor="gs-assigned-user" className="block text-sm font-medium text-gray-700">Utilisateur assigné par défaut</label>
+                      <select id="gs-assigned-user" value={formData.defaultAssignedUserId || ''} onChange={(e) => setFormData((p) => ({ ...p, defaultAssignedUserId: e.target.value || null }))} className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50">
+                        <option value="">Aucun utilisateur par défaut</option>
+                        {users.map((user) => (<option key={user.id} value={user.id}>{user.name} ({user.email})</option>))}
+                      </select>
+                    </div>
+                    <div>
+                      <label htmlFor="gs-default-status" className="block text-sm font-medium text-gray-700">Statut par défaut</label>
+                      <StatusSelect
+                        id="gs-default-status"
+                        statuses={statuses}
+                        value={formData.defaultStatusId || ''}
+                        onChange={(v) => setFormData((p) => ({ ...p, defaultStatusId: v || null }))}
+                        placeholder="Aucun statut par défaut"
+                        className="mt-1"
+                      />
+                    </div>
+                  </div>
+
+                  <div className="flex items-center justify-between">
+                    <h3 className="text-base font-semibold text-gray-900">Correspondance des champs</h3>
+                    <button type="button" onClick={() => setMappings((p) => [...p, { id: `mapping-${Date.now()}-${Math.random()}`, columnName: '', action: 'ignore' }])} className="flex cursor-pointer items-center gap-1 rounded-lg border border-blue-600 bg-white px-3 py-1.5 text-sm font-medium text-blue-600 transition-colors hover:bg-blue-50">
+                      <Plus className="h-4 w-4" /> Ajouter un champ
+                    </button>
+                  </div>
+
+                  <div className="mt-4 space-y-3">
+                    {mappings.map((mapping) => (
+                      <div key={mapping.id} className="flex items-center gap-3 rounded-lg border border-gray-200 bg-gray-50 p-3">
+                        <div className="flex-1">
+                          <input type="text" value={mapping.columnName} onChange={(e) => setMappings((p) => p.map((m) => m.id === mapping.id ? { ...m, columnName: e.target.value } : m))} placeholder="Nom de la colonne Google Sheets" className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 placeholder:text-gray-400 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50" />
+                        </div>
+                        <ArrowRight className="h-5 w-5 shrink-0 text-gray-400" />
+                        <div className="flex-1">
+                          <select value={mapping.action} onChange={(e) => { const a = e.target.value as 'map' | 'note' | 'ignore'; setMappings((p) => p.map((m) => m.id === mapping.id ? { ...m, action: a, crmField: a === 'map' ? (m.crmField || 'firstName') : undefined } : m)); }} className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50">
+                            <option value="map">Mapper vers un champ</option>
+                            <option value="note">Ajouter comme note</option>
+                            <option value="ignore">-- Ne pas importer --</option>
+                          </select>
+                        </div>
+                        {mapping.action === 'map' && (
+                          <>
+                            <ArrowRight className="h-5 w-5 shrink-0 text-gray-400" />
+                            <div className="flex-1">
+                              <select value={mapping.crmField || ''} onChange={(e) => setMappings((p) => p.map((m) => m.id === mapping.id ? { ...m, crmField: e.target.value } : m))} className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50">
+                                <option value="">Sélectionnez un champ</option>
+                                <option value="phone">Téléphone *</option>
+                                <option value="firstName">Prénom</option>
+                                <option value="lastName">Nom</option>
+                                <option value="email">Email</option>
+                                <option value="civility">Civilité</option>
+                                <option value="secondaryPhone">Téléphone secondaire</option>
+                                <option value="address">Adresse</option>
+                                <option value="city">Ville</option>
+                                <option value="postalCode">Code postal</option>
+                                <option value="companyName">Société</option>
+                                <option value="origin">Origine</option>
+                                <option value="website">Site internet</option>
+                                <option value="jobTitle">Intitulé du poste</option>
+                                <option value="createdAt">Date de création</option>
+                                <option value="linkedin">LinkedIn</option>
+                                <option value="facebook">Facebook</option>
+                                <option value="twitter">Twitter</option>
+                                <option value="instagram">Instagram</option>
+                              </select>
+                            </div>
+                          </>
+                        )}
+                        <button type="button" onClick={() => setMappings((p) => p.filter((m) => m.id !== mapping.id))} className="cursor-pointer rounded-lg p-2 text-gray-400 transition-colors hover:bg-gray-200 hover:text-blue-600">
+                          <Trash2 className="h-4 w-4" />
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+
+                  <div className="mt-6 rounded-lg border border-gray-200 bg-gray-50 p-4">
+                    <ul className="space-y-2 text-xs text-gray-600">
+                      <li>• Le champ &quot;Téléphone&quot; est obligatoire pour l&#39;import.</li>
+                      <li>• Les colonnes &quot;-- Ne pas importer --&quot; seront ignorées</li>
+                      <li>• Les colonnes &quot;Ajouter comme note&quot; seront regroupées dans une seule note</li>
+                    </ul>
+                  </div>
+
+                  {preview.length > 0 && headers.length > 0 && (
+                    <div>
+                      <h3 className="mb-3 text-sm font-semibold text-gray-900">Aperçu (5 premières lignes)</h3>
+                      <div className="overflow-x-auto rounded-lg border border-gray-200">
+                        <table className="min-w-full divide-y divide-gray-200">
+                          <thead className="bg-gray-50">
+                            <tr>{headers.map((h) => (<th key={h} className="px-4 py-2 text-left text-xs font-medium text-gray-700">{h}</th>))}</tr>
+                          </thead>
+                          <tbody className="divide-y divide-gray-200 bg-white">
+                            {preview.map((row, idx) => (<tr key={`preview-${idx}`}>{headers.map((h) => (<td key={h} className="px-4 py-2 text-xs whitespace-nowrap text-gray-900">{row[h] || '-'}</td>))}</tr>))}
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
+                  )}
+                </>
+              )}
+            </form>
+
+            <div className="shrink-0 border-t border-slate-200 pt-4">
+              <div className="flex flex-col gap-3 sm:flex-row sm:justify-end">
+                <button type="button" onClick={resetModal} className="w-full cursor-pointer rounded-xl border border-slate-300 bg-white px-4 py-2 text-sm font-semibold text-slate-700 transition-colors hover:bg-slate-50 sm:w-auto">Annuler</button>
+                {step === 1 && gsPreviewStep === 'url' ? (
+                  <button type="button" disabled={gsLoadingPreview || !formData.sheetUrl} onClick={async () => {
+                    setGsLoadingPreview(true);
+                    setGsConfigError(null);
+                    setGsConfigErrorConfigLink(null);
+                    try {
+                      const res = await fetch('/api/settings/google-sheet/preview', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ sheetUrl: formData.sheetUrl }) });
+                      const data = await res.json();
+                      if (!res.ok) {
+                        setGsConfigError(data.error || 'Erreur');
+                        setGsConfigErrorConfigLink(data.configLink || null);
+                        if (!data.configLink) toast.error('Impossible de charger l\'aperçu des données. Vérifiez le lien du Google Sheet.');
+                        return;
+                      }
+                      setGsAvailableSheets(data.sheetNames || []);
+                      setGsRawRows(data.rawRows || []);
+                      if (data.sheetNames?.length > 1) { setGsPreviewStep('sheet'); } else { setFormData((p) => ({ ...p, sheetName: data.sheetNames?.[0] || '' })); setGsPreviewStep('header'); }
+                    } catch (err: unknown) { toast.error(devToast('Impossible de charger l\'aperçu. Vérifiez votre connexion.', err)); setGsConfigError(null); setGsConfigErrorConfigLink(null); } finally { setGsLoadingPreview(false); }
+                  }} className="w-full cursor-pointer rounded-xl bg-blue-600 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto">
+                    {gsLoadingPreview ? 'Chargement...' : 'Charger les feuilles'}
+                  </button>
+                ) : step === 1 ? (
+                  <button type="button" disabled={saving || gsPreviewStep !== 'header' || gsRawRows.length === 0} onClick={async () => { const ok = await handleAutoMap(); if (ok) setStep(2); }} className="w-full cursor-pointer rounded-xl bg-blue-600 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto">
+                    Étape suivante
+                  </button>
+                ) : (
+                  <button type="submit" form="google-sheet-form" disabled={saving} className="w-full cursor-pointer rounded-xl bg-blue-600 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-blue-700 disabled:cursor-not-allowed disabled:opacity-50 sm:w-auto">
+                    {saving ? 'Enregistrement...' : 'Enregistrer'}
+                  </button>
+                )}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <ImportResultDialog
+        open={showImportResult}
+        onClose={() => setShowImportResult(false)}
+        configName={importConfigName}
+        results={importResults}
+        totalImported={importTotals.totalImported}
+        totalUpdated={importTotals.totalUpdated}
+        totalSkipped={importTotals.totalSkipped}
+      />
+      <ConfirmDialog />
+    </>
+  );
+}