Agenda Sync refactor

components/calendar/calendar-client.tsx

@@ -26,7 +26,9 @@ import {
   MapPin,
   Tag,
   ChevronDown,
-  ChevronUp
+  ChevronUp,
+  RefreshCw,
+  Link as LinkIcon
 } from "lucide-react";
 import { Calendar, Event } from "@prisma/client";
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
@@ -114,18 +116,40 @@ interface CalendarDialogProps {
   onClose: () => void;
   onSave: (calendarData: Partial<Calendar>) => Promise<void>;
   onDelete?: (calendarId: string) => Promise<void>;
+  onSyncSetup?: (calendarId: string, mailCredentialId: string, externalCalendarUrl: string) => Promise<void>;
   initialData?: Partial<Calendar>;
+  syncConfig?: {
+    id: string;
+    provider: string;
+    syncEnabled: boolean;
+    lastSyncAt: Date | null;
+    mailCredential?: {
+      id: string;
+      email: string;
+      display_name: string | null;
+    } | null;
+  } | null;
 }
 
-function CalendarDialog({ open, onClose, onSave, onDelete, initialData }: CalendarDialogProps) {
+function CalendarDialog({ open, onClose, onSave, onDelete, onSyncSetup, initialData, syncConfig }: CalendarDialogProps) {
   const [name, setName] = useState(initialData?.name || "");
   const [color, setColor] = useState(initialData?.color || "#4f46e5");
   const [description, setDescription] = useState(initialData?.description || "");
   const [isSubmitting, setIsSubmitting] = useState(false);
   const [customColorMode, setCustomColorMode] = useState(false);
   
+  // Sync state
+  const [showSyncSection, setShowSyncSection] = useState(false);
+  const [availableAccounts, setAvailableAccounts] = useState<Array<{ id: string; email: string; display_name: string | null }>>([]);
+  const [selectedAccountId, setSelectedAccountId] = useState<string>("");
+  const [availableCalendars, setAvailableCalendars] = useState<Array<{ id: string; name: string; url: string }>>([]);
+  const [selectedCalendarUrl, setSelectedCalendarUrl] = useState<string>("");
+  const [isDiscovering, setIsDiscovering] = useState(false);
+  const [isSettingUpSync, setIsSettingUpSync] = useState(false);
+  
   const isMainCalendar = initialData?.name === "Calendrier principal";
   const isMissionOrGroupCalendar = initialData?.name?.startsWith("Mission:") || initialData?.name?.startsWith("Groupe:");
+  const isPrivateCalendar = !isMissionOrGroupCalendar && (initialData?.name === "Privée" || initialData?.name === "Default" || !initialData?.name);
   
   useEffect(() => {
     if (open) {
@@ -133,8 +157,81 @@ function CalendarDialog({ open, onClose, onSave, onDelete, initialData }: Calend
       setColor(initialData?.color || "#4f46e5");
       setDescription(initialData?.description || "");
       setCustomColorMode(!colorPalette.includes(initialData?.color || "#4f46e5"));
+      setShowSyncSection(false);
+      setSelectedAccountId("");
+      setAvailableCalendars([]);
+      setSelectedCalendarUrl("");
+      
+      // Load available accounts for sync
+      if (isPrivateCalendar && !syncConfig) {
+        loadAvailableAccounts();
+      }
     }
-  }, [open, initialData]);
+  }, [open, initialData, syncConfig, isPrivateCalendar]);
+
+  const loadAvailableAccounts = async () => {
+    try {
+      const response = await fetch("/api/courrier/account-list");
+      if (response.ok) {
+        const data = await response.json();
+        if (data.success && data.accounts) {
+          // Filter Infomaniak accounts only
+          const infomaniakAccounts = data.accounts.filter((acc: any) => 
+            acc.host && acc.host.includes('infomaniak')
+          );
+          setAvailableAccounts(infomaniakAccounts.map((acc: any) => ({
+            id: acc.id,
+            email: acc.email,
+            display_name: acc.display_name
+          })));
+        }
+      }
+    } catch (error) {
+      console.error("Error loading accounts:", error);
+    }
+  };
+
+  const handleDiscoverCalendars = async () => {
+    if (!selectedAccountId) return;
+    
+    setIsDiscovering(true);
+    try {
+      const response = await fetch("/api/calendars/sync/discover", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ mailCredentialId: selectedAccountId }),
+      });
+      
+      if (response.ok) {
+        const data = await response.json();
+        setAvailableCalendars(data.calendars || []);
+      } else {
+        const error = await response.json();
+        alert(error.error || "Erreur lors de la découverte des calendriers");
+      }
+    } catch (error) {
+      console.error("Error discovering calendars:", error);
+      alert("Erreur lors de la découverte des calendriers");
+    } finally {
+      setIsDiscovering(false);
+    }
+  };
+
+  const handleSetupSync = async () => {
+    if (!initialData?.id || !selectedAccountId || !selectedCalendarUrl || !onSyncSetup) return;
+    
+    setIsSettingUpSync(true);
+    try {
+      await onSyncSetup(initialData.id, selectedAccountId, selectedCalendarUrl);
+      setShowSyncSection(false);
+      alert("Synchronisation configurée avec succès !");
+    } catch (error) {
+      console.error("Error setting up sync:", error);
+      alert("Erreur lors de la configuration de la synchronisation");
+    } finally {
+      setIsSettingUpSync(false);
+    }
+  };
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
@@ -284,6 +381,137 @@ function CalendarDialog({ open, onClose, onSave, onDelete, initialData }: Calend
                 className="rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 bg-white text-gray-900"
               />
             </div>
+
+            {/* Sync Section for Private Calendars */}
+            {isPrivateCalendar && initialData?.id && (
+              <div className="space-y-3 pt-4 border-t border-gray-200">
+                {syncConfig?.syncEnabled ? (
+                  <div className="p-3 bg-blue-50 rounded-lg">
+                    <div className="flex items-center justify-between">
+                      <div>
+                        <p className="text-sm font-medium text-blue-900">Synchronisation active</p>
+                        <p className="text-xs text-blue-700 mt-1">
+                          {syncConfig.mailCredential?.display_name || syncConfig.mailCredential?.email || "Compte"}
+                        </p>
+                        {syncConfig.lastSyncAt && (
+                          <p className="text-xs text-blue-600 mt-1">
+                            Dernière sync: {new Date(syncConfig.lastSyncAt).toLocaleString('fr-FR')}
+                          </p>
+                        )}
+                      </div>
+                      <Badge variant="outline" className="border-blue-400 text-blue-600">
+                        <RefreshCw className="w-3 h-3 mr-1" />
+                        Sync
+                      </Badge>
+                    </div>
+                  </div>
+                ) : (
+                  <>
+                    <div className="flex items-center justify-between">
+                      <Label className="text-gray-700">Synchronisation avec courrier</Label>
+                      <Button
+                        type="button"
+                        variant="outline"
+                        size="sm"
+                        onClick={() => setShowSyncSection(!showSyncSection)}
+                        className="text-xs"
+                      >
+                        <LinkIcon className="w-3 h-3 mr-1" />
+                        {showSyncSection ? "Masquer" : "Configurer"}
+                      </Button>
+                    </div>
+                    
+                    {showSyncSection && (
+                      <div className="space-y-3 p-3 bg-gray-50 rounded-lg">
+                        <div className="space-y-2">
+                          <Label className="text-sm text-gray-700">Compte email (Infomaniak)</Label>
+                          <select
+                            value={selectedAccountId}
+                            onChange={(e) => {
+                              setSelectedAccountId(e.target.value);
+                              setAvailableCalendars([]);
+                              setSelectedCalendarUrl("");
+                            }}
+                            className="w-full rounded-lg border-gray-300 bg-white text-gray-900 text-sm p-2"
+                          >
+                            <option value="">Sélectionner un compte</option>
+                            {availableAccounts.map((account) => (
+                              <option key={account.id} value={account.id}>
+                                {account.display_name || account.email}
+                              </option>
+                            ))}
+                          </select>
+                        </div>
+
+                        {selectedAccountId && (
+                          <>
+                            <Button
+                              type="button"
+                              variant="outline"
+                              size="sm"
+                              onClick={handleDiscoverCalendars}
+                              disabled={isDiscovering}
+                              className="w-full"
+                            >
+                              {isDiscovering ? (
+                                <>
+                                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                                  Découverte en cours...
+                                </>
+                              ) : (
+                                <>
+                                  <RefreshCw className="w-4 h-4 mr-2" />
+                                  Découvrir les calendriers
+                                </>
+                              )}
+                            </Button>
+
+                            {availableCalendars.length > 0 && (
+                              <div className="space-y-2">
+                                <Label className="text-sm text-gray-700">Calendrier à synchroniser</Label>
+                                <select
+                                  value={selectedCalendarUrl}
+                                  onChange={(e) => setSelectedCalendarUrl(e.target.value)}
+                                  className="w-full rounded-lg border-gray-300 bg-white text-gray-900 text-sm p-2"
+                                >
+                                  <option value="">Sélectionner un calendrier</option>
+                                  {availableCalendars.map((cal) => (
+                                    <option key={cal.id} value={cal.url}>
+                                      {cal.name}
+                                    </option>
+                                  ))}
+                                </select>
+                              </div>
+                            )}
+
+                            {selectedCalendarUrl && (
+                              <Button
+                                type="button"
+                                onClick={handleSetupSync}
+                                disabled={isSettingUpSync}
+                                className="w-full bg-blue-600 hover:bg-blue-700 text-white"
+                              >
+                                {isSettingUpSync ? (
+                                  <>
+                                    <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                                    Configuration...
+                                  </>
+                                ) : (
+                                  <>
+                                    <LinkIcon className="w-4 h-4 mr-2" />
+                                    Activer la synchronisation
+                                  </>
+                                )}
+                              </Button>
+                            )}
+                          </>
+                        )}
+                      </div>
+                    )}
+                  </>
+                )}
+              </div>
+            )}
           </div>
 
           <DialogFooter className="mt-6 border-t border-gray-100 pt-4">
@@ -1274,7 +1502,32 @@ export function CalendarClient({ initialCalendars, userId, userProfile }: Calend
       onClose={() => setIsCalendarModalOpen(false)}
       onSave={handleCalendarSave}
       onDelete={handleCalendarDelete}
+      onSyncSetup={async (calendarId, mailCredentialId, externalCalendarUrl) => {
+        try {
+          const response = await fetch("/api/calendars/sync", {
+            method: "POST",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({
+              calendarId,
+              mailCredentialId,
+              externalCalendarUrl,
+              provider: "infomaniak",
+            }),
+          });
+          
+          if (!response.ok) {
+            const error = await response.json();
+            throw new Error(error.error || "Erreur lors de la configuration");
+          }
+          
+          await fetchCalendars();
+        } catch (error) {
+          console.error("Error setting up sync:", error);
+          throw error;
+        }
+      }}
       initialData={selectedCalendar || undefined}
+      syncConfig={selectedCalendar ? (calendars.find(c => c.id === selectedCalendar.id) as CalendarWithMission)?.syncConfig || null : null}
     />
 
     {/* Event dialog */}