"use client";

import { useState, useRef, useEffect } from "react";
import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";
import timeGridPlugin from "@fullcalendar/timegrid";
import interactionPlugin from "@fullcalendar/interaction";
import frLocale from "@fullcalendar/core/locales/fr";
import { Card } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { 
  Loader2, 
  Plus, 
  Calendar as CalendarIcon, 
  Check, 
  X, 
  User, 
  Clock, 
  BarChart2, 
  Settings, 
  ChevronRight,
  ChevronLeft,
  Bell,
  Users,
  MapPin,
  Tag,
  ChevronDown,
  ChevronUp,
  RefreshCw,
  Link as LinkIcon
} from "lucide-react";
import { Calendar, Event } from "@prisma/client";
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter } from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Textarea } from "@/components/ui/textarea";
import { Label } from "@/components/ui/label";
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
import { Badge } from "@/components/ui/badge";
import { ScrollArea } from "@/components/ui/scroll-area";
import { Separator } from "@/components/ui/separator";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import DatePicker, { registerLocale } from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
import { fr } from "date-fns/locale";
import { Checkbox } from "@/components/ui/checkbox";

// Register French locale
registerLocale('fr', fr);

// Predefined professional color palette
const colorPalette = [
  "#4f46e5", // Indigo
  "#0891b2", // Cyan
  "#0e7490", // Teal
  "#16a34a", // Green
  "#65a30d", // Lime
  "#ca8a04", // Amber
  "#d97706", // Orange
  "#dc2626", // Red
  "#e11d48", // Rose
  "#9333ea", // Purple
  "#7c3aed", // Violet
  "#2563eb", // Blue
];

interface CalendarWithMission extends Calendar {
  missionId?: string | null;
  mission?: {
    id: string;
    creatorId: string;
    missionUsers: Array<{
      userId: string;
      role: string;
    }>;
  } | null;
  syncConfig?: {
    id: string;
    provider: string;
    externalCalendarId: string | null;
    externalCalendarUrl: string | null;
    syncEnabled: boolean;
    lastSyncAt: Date | null;
    syncFrequency: number;
    lastSyncError: string | null;
    mailCredential?: {
      id: string;
      email: string;
      display_name: string | null;
    } | null;
  } | null;
}

interface CalendarClientProps {
  initialCalendars: (CalendarWithMission & { events: Event[] })[];
  userId: string;
  userProfile: {
    name: string;
    email: string;
    avatar?: string;
  };
}

interface EventFormData {
  title: string;
  description: string | null;
  start: string;
  end: string;
  allDay: boolean;
  location: string | null;
  calendarId?: string;
}

interface CalendarDialogProps {
  open: boolean;
  onClose: () => void;
  onSave: (calendarData: Partial<Calendar>) => Promise<void>;
  onDelete?: (calendarId: string) => Promise<void>;
  onSyncSetup?: (calendarId: string, mailCredentialId: string, externalCalendarUrl: string, externalCalendarId?: string, provider?: 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, 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) {
      setName(initialData?.name || "");
      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, 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 Microsoft accounts only
          const syncableAccounts = data.accounts.filter((acc: any) => 
            (acc.host && acc.host.includes('outlook.office365.com') && acc.use_oauth)
          );
          setAvailableAccounts(syncableAccounts.map((acc: any) => ({
            id: acc.id,
            email: acc.email,
            display_name: acc.display_name,
            host: acc.host
          })));
        }
      }
    } catch (error) {
      console.error("Error loading accounts:", error);
    }
  };

  const handleDiscoverCalendars = async () => {
    if (!selectedAccountId) return;
    
    setIsDiscovering(true);
    try {
      // Use Microsoft endpoint only
      const endpoint = "/api/calendars/sync/discover-microsoft";
      
      const response = await fetch(endpoint, {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ mailCredentialId: selectedAccountId }),
      });
      
      if (response.ok) {
        const data = await response.json();
        // Normalize calendar format (Microsoft uses 'id' and 'webLink')
        const normalizedCalendars = (data.calendars || []).map((cal: any) => ({
          id: cal.id,
          name: cal.name,
          url: cal.webLink || cal.id, // Use webLink or id as fallback
        }));
        setAvailableCalendars(normalizedCalendars);
      } 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 {
      // All accounts are Microsoft
      const selectedAccount = availableAccounts.find(acc => acc.id === selectedAccountId);
      const provider = 'microsoft';
      
      // For Microsoft, use calendar ID instead of URL
      const externalCalendarId = availableCalendars.find(cal => cal.url === selectedCalendarUrl)?.id || selectedCalendarUrl;
      
      await onSyncSetup(initialData.id, selectedAccountId, selectedCalendarUrl, externalCalendarId, provider);
      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();
    setIsSubmitting(true);

    try {
      // Only update color, preserve name and description from initialData
      await onSave({ 
        id: initialData?.id,
        name: initialData?.name || name, // Keep original name
        color, // Only color can be changed
        description: initialData?.description || description // Keep original description
      });
      resetForm();
    } catch (error) {
      console.error("Erreur lors de la mise à jour du calendrier:", error);
    } finally {
      setIsSubmitting(false);
    }
  };

  const handleDelete = async () => {
    if (!initialData?.id || !onDelete || isMainCalendar) return;
    
    if (!confirm("Êtes-vous sûr de vouloir supprimer ce calendrier ? Tous les événements associés seront également supprimés.")) {
      return;
    }
    
    setIsSubmitting(true);
    try {
      await onDelete(initialData.id);
      resetForm();
    } catch (error) {
      console.error("Erreur lors de la suppression du calendrier:", error);
    } finally {
      setIsSubmitting(false);
    }
  };

  const resetForm = () => {
    setName("");
    setColor("#4f46e5");
    setDescription("");
    setCustomColorMode(false);
    onClose();
  };

  return (
    <Dialog open={open} onOpenChange={(open) => !open && onClose()}>
      <DialogContent className="sm:max-w-md rounded-xl">
        <DialogHeader>
          <DialogTitle className="flex items-center text-xl font-semibold text-gray-900">
            <CalendarIcon className="w-5 h-5 mr-2 text-indigo-600" />
            {initialData?.id ? "Paramètres du calendrier" : "Créer un nouveau calendrier"}
          </DialogTitle>
        </DialogHeader>
        
        <form onSubmit={handleSubmit}>
          <div className="space-y-5 py-4">
            {/* Display calendar name (read-only) */}
            {initialData?.id && (
              <div className="space-y-2">
                <Label className="text-gray-700">Nom</Label>
                <div className="px-3 py-2 bg-gray-50 rounded-lg text-gray-900 border border-gray-200">
                  {initialData?.name || name}
                </div>
              </div>
            )}
            
            {/* Name input only for new calendars */}
            {!initialData?.id && (
              <div className="space-y-2">
                <Label htmlFor="calendar-name" className="text-gray-700">Nom</Label>
                <Input
                  id="calendar-name"
                  value={name}
                  onChange={(e) => setName(e.target.value)}
                  placeholder="Nom du calendrier"
                  required
                  className="rounded-lg border-gray-300 focus:border-indigo-500 focus:ring-indigo-500 bg-white text-gray-900"
                />
              </div>
            )}

            <div className="space-y-3">
              <Label className="text-gray-700">Couleur</Label>
              
              <div className="flex flex-wrap gap-3 mb-3">
                {colorPalette.map((paletteColor) => (
                  <button
                    key={paletteColor}
                    type="button"
                    className={`w-8 h-8 rounded-full flex items-center justify-center transition-all ${
                      color === paletteColor && !customColorMode 
                        ? 'ring-2 ring-offset-2 ring-gray-400' 
                        : 'hover:scale-110'
                    }`}
                    style={{ backgroundColor: paletteColor }}
                    onClick={() => {
                      setColor(paletteColor);
                      setCustomColorMode(false);
                    }}
                  >
                    {color === paletteColor && !customColorMode && (
                      <Check className="w-4 h-4 text-white" />
                    )}
                  </button>
                ))}
                
                <button
                  type="button"
                  className={`w-8 h-8 rounded-full flex items-center justify-center bg-gradient-to-r from-purple-500 via-pink-500 to-red-500 transition-all ${
                    customColorMode 
                      ? 'ring-2 ring-offset-2 ring-gray-400' 
                      : 'hover:scale-110'
                  }`}
                  onClick={() => setCustomColorMode(true)}
                >
                  {customColorMode && <Check className="w-4 h-4 text-white" />}
                </button>
              </div>
              
              {customColorMode && (
                <div className="flex items-center gap-4 mt-2 p-3 bg-gray-50 rounded-lg">
                  <div className="flex flex-1 items-center gap-3">
                    <Input
                      id="calendar-color"
                      type="color"
                      value={color}
                      onChange={(e) => setColor(e.target.value)}
                      className="w-10 h-10 p-1 cursor-pointer rounded border-gray-300"
                    />
                    <Input 
                      type="text"
                      value={color}
                      onChange={(e) => setColor(e.target.value)}
                      placeholder="#RRGGBB"
                      className="w-28 rounded-lg"
                    />
                  </div>
                  <div 
                    className="w-8 h-8 rounded-lg shadow-sm"
                    style={{ backgroundColor: color }}
                  ></div>
                </div>
              )}
            </div>

            {/* Display description (read-only) for existing calendars */}
            {initialData?.id && initialData?.description && (
              <div className="space-y-2">
                <Label className="text-gray-700">Description</Label>
                <div className="px-3 py-2 bg-gray-50 rounded-lg text-gray-700 border border-gray-200 text-sm">
                  {initialData?.description || description}
                </div>
              </div>
            )}
            
            {/* Description input only for new calendars */}
            {!initialData?.id && (
              <div className="space-y-2">
                <Label htmlFor="calendar-description" className="text-gray-700">
                  Description (optionnelle)
                </Label>
                <Textarea
                  id="calendar-description"
                  value={description}
                  onChange={(e) => setDescription(e.target.value)}
                  placeholder="Description du calendrier"
                  rows={3}
                  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 (Microsoft)</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">
            <div className="flex justify-end w-full">
              <div className="flex gap-3">
                <Button
                  type="button"
                  variant="outline"
                  onClick={onClose}
                  disabled={isSubmitting}
                  className="rounded-lg border-gray-300 bg-gray-200 text-gray-700 hover:bg-gray-300"
                >
                  Annuler
                </Button>
                <Button 
                  type="submit" 
                  disabled={isSubmitting || (initialData?.id ? false : !name)}
                  className="rounded-lg bg-indigo-600 hover:bg-indigo-700 text-white"
                >
                  {isSubmitting 
                    ? "Enregistrement..." 
                    : initialData?.id 
                      ? "Mettre à jour la couleur" 
                      : "Créer"
                  }
                </Button>
              </div>
            </div>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}

function StatisticsPanel({ statistics }: {
  statistics: {
    totalEvents: number;
    upcomingEvents: number;
    completedEvents: number;
    meetingHours: number;
  };
}) {
  return (
    <div className="grid grid-cols-2 gap-4 p-4">
      <Card className="p-4">
        <div className="flex items-center gap-3">
          <div className="p-2 bg-primary/10 rounded-full">
            <CalendarIcon className="h-5 w-5 text-primary" />
          </div>
          <div>
            <p className="text-sm font-medium">Total Événements</p>
            <p className="text-2xl font-bold">{statistics.totalEvents}</p>
          </div>
        </div>
      </Card>
      <Card className="p-4">
        <div className="flex items-center gap-3">
          <div className="p-2 bg-primary/10 rounded-full">
            <Clock className="h-5 w-5 text-primary" />
          </div>
          <div>
            <p className="text-sm font-medium">Heures de Réunion</p>
            <p className="text-2xl font-bold">{statistics.meetingHours}h</p>
          </div>
        </div>
      </Card>
      <Card className="p-4">
        <div className="flex items-center gap-3">
          <div className="p-2 bg-primary/10 rounded-full">
            <Bell className="h-5 w-5 text-primary" />
          </div>
          <div>
            <p className="text-sm font-medium">Prochains Événements</p>
            <p className="text-2xl font-bold">{statistics.upcomingEvents}</p>
          </div>
        </div>
      </Card>
      <Card className="p-4">
        <div className="flex items-center gap-3">
          <div className="p-2 bg-primary/10 rounded-full">
            <Check className="h-5 w-5 text-primary" />
          </div>
          <div>
            <p className="text-sm font-medium">Événements Terminés</p>
            <p className="text-2xl font-bold">{statistics.completedEvents}</p>
          </div>
        </div>
      </Card>
    </div>
  );
}

function EventPreview({ event, calendar }: { event: Event; calendar: Calendar }) {
  const [isExpanded, setIsExpanded] = useState(false);

  return (
    <Card className="p-4 space-y-4">
      <div className="flex items-start justify-between">
        <div className="space-y-1">
          <h3 className="font-medium">{event.title}</h3>
          <div className="flex items-center gap-2 text-sm text-gray-500">
            <Clock className="h-4 w-4" />
            <span>
              {new Date(event.start).toLocaleDateString('fr-FR', {
                weekday: 'long',
                day: 'numeric',
                month: 'long',
                hour: '2-digit',
                minute: '2-digit'
              })}
            </span>
          </div>
        </div>
        <div className="flex items-center gap-2">
          <div 
            className="w-3 h-3 rounded-full" 
            style={{ backgroundColor: calendar.color }}
          />
          <Button
            variant="ghost"
            size="icon"
            onClick={() => setIsExpanded(!isExpanded)}
          >
            {isExpanded ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
          </Button>
        </div>
      </div>

      {isExpanded && (
        <div className="space-y-4">
          {cleanDescription(event.description) && (
            <p className="text-sm text-gray-600">{cleanDescription(event.description)}</p>
          )}

          <div className="space-y-2">
            {event.location && (
              <div className="flex items-center gap-2 text-sm">
                <MapPin className="h-4 w-4 text-gray-500" />
                <span>{event.location}</span>
              </div>
            )}
            {event.calendarId && (
              <div className="flex items-center gap-2 text-sm">
                <Tag className="h-4 w-4 text-gray-500" />
                <span>{calendar.name}</span>
              </div>
            )}
          </div>

          <div className="flex items-center gap-2">
            <Button variant="outline" size="sm" className="flex-1">
              Modifier
            </Button>
            <Button variant="outline" size="sm" className="flex-1">
              Supprimer
            </Button>
          </div>
        </div>
      )}
    </Card>
  );
}

export function CalendarClient({ initialCalendars, userId, userProfile }: CalendarClientProps) {
  // Filter out "Privée" and "Default" calendars that are not synced
  const filterCalendars = (cals: typeof initialCalendars) => {
    return cals.filter(cal => {
      // Keep calendars that are synced, groups, missions, or have a different name
      const isSynced = cal.syncConfig?.syncEnabled && cal.syncConfig?.mailCredential;
      const isGroup = cal.name?.startsWith("Groupe:");
      const isMission = cal.name?.startsWith("Mission:");
      const isPrivateOrDefault = cal.name === "Privée" || cal.name === "Default";
      const isPrivateNotSynced = isPrivateOrDefault && !isSynced;
      
      // Exclude "Privée" and "Default" calendars that are not synced
      return !isPrivateNotSynced;
    });
  };

  // Sort calendars: "Mon Calendrier" first, then synced (courrier), then groups, then missions
  const sortCalendars = (cals: typeof initialCalendars) => {
    const filtered = filterCalendars(cals);
    return [...filtered].sort((a, b) => {
      const aIsMonCalendrier = a.name === "Mon Calendrier";
      const bIsMonCalendrier = b.name === "Mon Calendrier";
      const aIsSynced = a.syncConfig?.syncEnabled && a.syncConfig?.mailCredential;
      const bIsSynced = b.syncConfig?.syncEnabled && b.syncConfig?.mailCredential;
      const aIsGroup = a.name?.startsWith("Groupe:");
      const bIsGroup = b.name?.startsWith("Groupe:");
      const aIsMission = a.name?.startsWith("Mission:");
      const bIsMission = b.name?.startsWith("Mission:");
      
      // "Mon Calendrier" always first
      if (aIsMonCalendrier && !bIsMonCalendrier) return -1;
      if (!aIsMonCalendrier && bIsMonCalendrier) return 1;
      
      // Synced calendars second
      if (aIsSynced && !bIsSynced) return -1;
      if (!aIsSynced && bIsSynced) return 1;
      
      // If both synced or both not synced, check groups
      if (aIsGroup && !bIsGroup && !bIsSynced) return -1;
      if (!aIsGroup && bIsGroup && !aIsSynced) return 1;
      
      // If both groups or both not groups, check missions
      if (aIsMission && !bIsMission && !bIsGroup && !bIsSynced) return -1;
      if (!aIsMission && bIsMission && !aIsGroup && !aIsSynced) return 1;
      
      // Same type, sort by name
      return (a.name || '').localeCompare(b.name || '');
    });
  };

  const [calendars, setCalendars] = useState(sortCalendars(initialCalendars).map(cal => ({
    ...cal,
    events: cal.events || []
  })));
  const [selectedCalendarId, setSelectedCalendarId] = useState<string>(
    initialCalendars[0]?.id || ""
  );
  const [view, setView] = useState<"dayGridMonth" | "timeGridWeek" | "timeGridDay">("dayGridMonth");
  const [isEventModalOpen, setIsEventModalOpen] = useState(false);
  const [isCalendarModalOpen, setIsCalendarModalOpen] = useState(false);
  const [selectedEvent, setSelectedEvent] = useState<Event | null>(null);
  const [selectedCalendar, setSelectedCalendar] = useState<Calendar | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [eventForm, setEventForm] = useState<EventFormData>({
    title: "",
    description: null,
    start: "",
    end: "",
    allDay: false,
    location: null,
    calendarId: selectedCalendarId
  });

  const [selectedEventPreview, setSelectedEventPreview] = useState<Event | null>(null);
  const [upcomingEvents, setUpcomingEvents] = useState<Event[]>([]);
  const [statistics, setStatistics] = useState({
    totalEvents: 0,
    upcomingEvents: 0,
    completedEvents: 0,
    meetingHours: 0
  });

  const [visibleCalendarIds, setVisibleCalendarIds] = useState<string[]>([]);
  const [selectedDate, setSelectedDate] = useState<Date | null>(null);
  const clickTimerRef = useRef<NodeJS.Timeout | null>(null);
  const lastClickDateRef = useRef<Date | null>(null);

  // Update useEffect to initialize visible calendars and fetch events
  useEffect(() => {
    if (calendars.length > 0) {
      setVisibleCalendarIds(calendars.map(cal => cal.id));
      updateStatistics();
      updateUpcomingEvents();
    }
  }, [calendars]);

  // Cleanup timer on unmount
  useEffect(() => {
    return () => {
      if (clickTimerRef.current) {
        clearTimeout(clickTimerRef.current);
      }
    };
  }, []);

  const updateStatistics = () => {
    const now = new Date();
    const stats = {
      totalEvents: 0,
      upcomingEvents: 0,
      completedEvents: 0,
      meetingHours: 0
    };

    calendars.forEach(cal => {
      cal.events.forEach(event => {
        stats.totalEvents++;
        const eventStart = new Date(event.start);
        const eventEnd = new Date(event.end);

        if (eventStart > now) {
          stats.upcomingEvents++;
        } else if (eventEnd < now) {
          stats.completedEvents++;
        }

        const duration = (eventEnd.getTime() - eventStart.getTime()) / (1000 * 60 * 60);
        stats.meetingHours += duration;
      });
    });

    setStatistics(stats);
  };

  const updateUpcomingEvents = () => {
    const now = new Date();
    const upcoming = calendars
      .flatMap(cal => cal.events)
      .filter(event => new Date(event.start) > now)
      .sort((a, b) => new Date(a.start).getTime() - new Date(b.start).getTime())
      .slice(0, 5);
    setUpcomingEvents(upcoming);
  };

  const fetchCalendars = async (forceRefresh: boolean = false) => {
    try {
      setLoading(true);
      const url = forceRefresh ? "/api/calendars?refresh=true" : "/api/calendars";
      const response = await fetch(url);
      if (!response.ok) throw new Error("Failed to fetch calendars");
      const data = await response.json();
      console.log("Raw calendars data:", data);

      // Process calendars and events
      const processedCalendars = data.map((cal: Calendar & { events: Event[] }) => ({
        ...cal,
        events: Array.isArray(cal.events) ? cal.events.map(event => ({
          ...event,
          start: new Date(event.start),
          end: new Date(event.end)
        })) : []
      }));

      console.log("Setting calendars with processed events:", processedCalendars);
      setCalendars(sortCalendars(processedCalendars as typeof initialCalendars).map(cal => ({
        ...cal,
        events: cal.events || []
      })));

      // Update statistics and upcoming events
      updateStatistics();
      updateUpcomingEvents();

      // Force calendar refresh
      if (calendarRef.current) {
        const calendarApi = calendarRef.current.getApi();
        calendarApi.refetchEvents();
      }
    } catch (error) {
      console.error("Error fetching calendars:", error);
      setError(error instanceof Error ? error.message : "Failed to fetch calendars");
    } finally {
      setLoading(false);
    }
  };

  const calendarRef = useRef<any>(null);

  const handleCalendarSelect = (calendarId: string) => {
    console.log("Calendar selected:", calendarId);
    setSelectedCalendarId(calendarId);
    setEventForm(prev => ({
      ...prev,
      calendarId: calendarId
    }));
  };

  const handleCalendarSave = async (calendarData: Partial<Calendar>) => {
    try {
      setLoading(true);
      const response = await fetch("/api/calendars", {
        method: calendarData.id ? "PUT" : "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify({
          ...calendarData,
          userId,
        }),
      });

      if (!response.ok) {
        throw new Error("Failed to save calendar");
      }

      await fetchCalendars();
      setIsCalendarModalOpen(false);
    } catch (error) {
      console.error("Error saving calendar:", error);
      setError(error instanceof Error ? error.message : "Failed to save calendar");
    } finally {
      setLoading(false);
    }
  };

  const handleCalendarDelete = async (calendarId: string) => {
    try {
      setLoading(true);
      const response = await fetch(`/api/calendars/${calendarId}`, {
        method: "DELETE",
      });

      if (!response.ok) {
        throw new Error("Failed to delete calendar");
      }

      await fetchCalendars();
      setIsCalendarModalOpen(false);
      
      // If the deleted calendar was selected, select another one
      if (selectedCalendarId === calendarId) {
        const remainingCalendars = calendars.filter(cal => cal.id !== calendarId);
        setSelectedCalendarId(remainingCalendars[0]?.id || "");
      }
    } catch (error) {
      console.error("Error deleting calendar:", error);
      setError(error instanceof Error ? error.message : "Failed to delete calendar");
    } finally {
      setLoading(false);
    }
  };

  const handleDateClick = (clickInfo: any) => {
    const clickedDate = new Date(clickInfo.date);
    clickedDate.setHours(0, 0, 0, 0);
    
    // Check if this is a double click (same date clicked within 300ms)
    const now = new Date();
    const isDoubleClick = lastClickDateRef.current && 
      lastClickDateRef.current.getTime() === clickedDate.getTime() &&
      now.getTime() - (lastClickDateRef.current as any).clickTime < 300;
    
    // Clear any pending single click timer
    if (clickTimerRef.current) {
      clearTimeout(clickTimerRef.current);
      clickTimerRef.current = null;
    }
    
    if (isDoubleClick) {
      // Double click: Open event form
      const startDate = new Date(clickInfo.date);
      startDate.setHours(new Date().getHours(), 0, 0, 0);
      const endDate = new Date(startDate);
      endDate.setHours(startDate.getHours() + 1);
      
      // Get available calendars and use the first one if needed
      const availableCalendarsList = getAvailableCalendars();
      const calendarToUse = selectedCalendarId && availableCalendarsList.some(cal => cal.id === selectedCalendarId)
        ? selectedCalendarId
        : (availableCalendarsList[0]?.id || calendars[0]?.id);
      
      if (calendarToUse && calendarToUse !== selectedCalendarId) {
        setSelectedCalendarId(calendarToUse);
      }
      
      setEventForm({
        title: "",
        description: null,
        start: startDate.toISOString(),
        end: endDate.toISOString(),
        allDay: false,
        location: null,
        calendarId: calendarToUse
      });
      
      setIsEventModalOpen(true);
      lastClickDateRef.current = null;
    } else {
      // Single click: Show events column (with a small delay to allow double click detection)
      lastClickDateRef.current = clickedDate;
      (lastClickDateRef.current as any).clickTime = now.getTime();
      
      clickTimerRef.current = setTimeout(() => {
        setSelectedDate(clickedDate);
        clickTimerRef.current = null;
      }, 300);
    }
  };

  const handleDateSelect = (selectInfo: any) => {
    // Double click or drag selection: Open event form
    const startDate = new Date(selectInfo.start);
    const endDate = new Date(selectInfo.end);
    
    console.log("Date select handler - Current state:", {
      calendars: calendars.map(c => ({ id: c.id, name: c.name })),
      selectedCalendarId,
      availableCalendars: calendars.length
    });
    
    // Also set selected date to show events for the selected day
    const selectDate = new Date(startDate);
    selectDate.setHours(0, 0, 0, 0);
    setSelectedDate(selectDate);
    
    // Get available calendars and use the first one if needed
    const availableCalendarsList = getAvailableCalendars();
    const calendarToUse = selectedCalendarId && availableCalendarsList.some(cal => cal.id === selectedCalendarId)
      ? selectedCalendarId
      : (availableCalendarsList[0]?.id || calendars[0]?.id);
    
    if (calendarToUse && calendarToUse !== selectedCalendarId) {
      setSelectedCalendarId(calendarToUse);
    }
    
    setEventForm({
      title: "",
      description: null,
      start: startDate.toISOString(),
      end: endDate.toISOString(),
      allDay: selectInfo.allDay || false,
      location: null,
      calendarId: calendarToUse
    });
    
    setIsEventModalOpen(true);
  };

  const handleEventClick = (clickInfo: any) => {
    const event = clickInfo.event;
    const startDate = new Date(event.start);
    const endDate = new Date(event.end || event.start);

    const eventCalendarId = event.extendedProps.calendarId;
    const availableCalendars = getAvailableCalendars();
    
    // Check if the event's calendar is still available for editing
    const canEditEventCalendar = availableCalendars.some(cal => cal.id === eventCalendarId);
    
    // If not available, use the first available calendar instead
    const calendarIdToUse = canEditEventCalendar ? eventCalendarId : (availableCalendars[0]?.id || eventCalendarId);

    setSelectedEvent(event.extendedProps.originalEvent);
    setEventForm({
      title: event.title,
      description: cleanDescription(event.extendedProps.description),
      start: startDate.toISOString().slice(0, 16),
      end: endDate.toISOString().slice(0, 16),
      allDay: event.isAllDay,
      location: event.extendedProps.location,
      calendarId: calendarIdToUse,
    });
    setIsEventModalOpen(true);
  };

  const handleEventSubmit = async () => {
    try {
      // Validate required fields including calendar
      if (!eventForm.title || !eventForm.start || !eventForm.end || !eventForm.calendarId) {
        console.log("Form validation failed:", {
          title: eventForm.title,
          start: eventForm.start,
          end: eventForm.end,
          calendarId: eventForm.calendarId
        });
        setError("Veuillez remplir tous les champs obligatoires et sélectionner un calendrier");
        return;
      }

      setLoading(true);
      const eventData = {
        ...eventForm,
        start: new Date(eventForm.start).toISOString(),
        end: new Date(eventForm.end).toISOString(),
        userId,
        ...(selectedEvent ? { id: selectedEvent.id } : {}),  // Include ID for updates
        allDay: eventForm.allDay  // Use allDay instead of isAllDay
      };

      console.log("Submitting event with data:", eventData);
      
      const response = await fetch("/api/events", {
        method: selectedEvent ? "PUT" : "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(eventData),
      });

      const responseData = await response.json();
      console.log("Response from server:", responseData);
      
      if (!response.ok) {
        console.error("Error response:", responseData);
        throw new Error(responseData.error || "Failed to save event");
      }

      // Reset form and close modal first
      setIsEventModalOpen(false);
      setEventForm({
        title: "",
        description: null,
        start: "",
        end: "",
        allDay: false,
        location: null,
        calendarId: selectedCalendarId
      });
      setSelectedEvent(null);
      setError(null);

      // Invalidate cache and fetch fresh data to ensure all calendars are up to date
      // Force refresh by adding ?refresh=true to bypass cache
      await fetchCalendars(true);
    } catch (error) {
      console.error("Error saving event:", error);
      setError(error instanceof Error ? error.message : "Failed to save event");
    } finally {
      setLoading(false);
    }
  };

  const handleEventDelete = async () => {
    if (!selectedEvent?.id) return;

    if (!confirm("Êtes-vous sûr de vouloir supprimer cet événement ?")) {
      return;
    }

    try {
      setLoading(true);
      const response = await fetch(`/api/events/${selectedEvent.id}`, {
        method: "DELETE",
      });

      if (!response.ok) {
        const error = await response.json();
        throw new Error(error.message || "Failed to delete event");
      }

      // Remove the event from local state
      const updatedCalendars = calendars.map(cal => ({
        ...cal,
        events: cal.events.filter(e => e.id !== selectedEvent.id)
      }));
      setCalendars(sortCalendars(updatedCalendars as typeof initialCalendars).map(cal => ({
        ...cal,
        events: cal.events || []
      })));

      // Close modal and reset form
      setIsEventModalOpen(false);
      setSelectedEvent(null);
      setEventForm({
        title: "",
        description: null,
        start: "",
        end: "",
        allDay: false,
        location: null,
        calendarId: selectedCalendarId
      });

      // Force calendar refresh
      if (calendarRef.current) {
        const calendarApi = calendarRef.current.getApi();
        calendarApi.refetchEvents();
      }
    } catch (error) {
      console.error("Error deleting event:", error);
      setError(error instanceof Error ? error.message : "Failed to delete event");
    } finally {
      setLoading(false);
    }
  };

  const handleViewChange = (newView: "dayGridMonth" | "timeGridWeek" | "timeGridDay") => {
    setView(newView);
    if (calendarRef.current) {
      const calendarApi = calendarRef.current.getApi();
      calendarApi.changeView(newView);
    }
  };

  // Helper function to clean description by removing Microsoft ID prefix
  const cleanDescription = (description: string | null | undefined): string | null => {
    if (!description) return null;
    // Remove [MS_ID:xxx] prefix if present
    const cleaned = description.replace(/^\[MS_ID:[^\]]+\]\n?/, '');
    return cleaned.trim() || null;
  };

  const getCalendarDisplayName = (calendar: CalendarWithMission) => {
    // If calendar is synced to an external account, use the same display name as in courrier
    if (calendar.syncConfig?.syncEnabled && calendar.syncConfig?.mailCredential) {
      // Use display_name if available, otherwise use email (same logic as courrier page)
      return calendar.syncConfig.mailCredential.display_name || 
             calendar.syncConfig.mailCredential.email;
    }

    // For non-synced calendars, use the calendar name
    // Don't show "Privée" for non-synced calendars - they should be filtered out
    return calendar.name;
  };

  // Check if user can create/edit events in a mission calendar
  const canEditMissionCalendar = (calendar: CalendarWithMission): boolean => {
    // If not a mission calendar, allow
    if (!calendar.missionId || !calendar.mission) {
      return true;
    }

    const mission = calendar.mission;
    
    // Check if user is the creator
    if (mission.creatorId === userId) {
      return true;
    }

    // Check if user has one of the guardian roles
    const guardianRoles = ['gardien-temps', 'gardien-parole', 'gardien-memoire'];
    const userMissionRole = mission.missionUsers?.find(
      mu => mu.userId === userId && guardianRoles.includes(mu.role)
    );

    return !!userMissionRole;
  };

  // Get available calendars for event creation/editing
  const getAvailableCalendars = (): CalendarWithMission[] => {
    return calendars.filter(cal => {
      const calWithMission = cal as CalendarWithMission;
      
      // Always allow "Mon Calendrier"
      if (cal.name === "Mon Calendrier") {
        return true;
      }

      // Always allow Microsoft synced calendars
      if (calWithMission.syncConfig?.syncEnabled && calWithMission.syncConfig?.mailCredential) {
        return true;
      }

      // Always allow group calendars
      if (cal.name?.startsWith("Groupe:")) {
        return true;
      }

      // For mission calendars, check permissions
      if (cal.name?.startsWith("Mission:")) {
        return canEditMissionCalendar(calWithMission);
      }

      // Allow other calendars by default
      return true;
    });
  };

  // Update CalendarSelector to handle visibility - displayed as a left column
  const CalendarSelector = () => (
    <div className="flex flex-col gap-2 mb-4">
      {calendars.map((calendar) => (
        <div key={calendar.id} className="relative group">
          <Button
            variant={visibleCalendarIds.includes(calendar.id) ? "secondary" : "ghost"}
            className="flex items-center gap-2 pr-8 w-full justify-start"
            onClick={() => {
              if (visibleCalendarIds.includes(calendar.id)) {
                setVisibleCalendarIds(visibleCalendarIds.filter(id => id !== calendar.id));
              } else {
                setVisibleCalendarIds([...visibleCalendarIds, calendar.id]);
              }
            }}
          >
            <div 
              className="w-3 h-3 rounded-full flex-shrink-0" 
              style={{ backgroundColor: calendar.color }}
            />
            <span className="flex items-center gap-1 min-w-0 flex-1">
              <span className="truncate">
                {getCalendarDisplayName(calendar as CalendarWithMission)}
              </span>
              {calendar.syncConfig?.syncEnabled && (
                <Badge variant="outline" className="text-[10px] px-1 py-0.5 border-blue-400 text-blue-600 flex-shrink-0">
                  Sync
                </Badge>
              )}
            </span>
            <div className="ml-auto">
              {visibleCalendarIds.includes(calendar.id) ? (
                <Check className="h-4 w-4" />
              ) : null}
            </div>
          </Button>
          {calendar.name !== "Calendrier principal" && 
           calendar.name !== "Default" && 
           !calendar.name.startsWith("Mission:") && 
           !calendar.name.startsWith("Groupe:") && (
            <Button
              variant="ghost"
              size="icon"
              className="absolute right-0 top-1/2 -translate-y-1/2 opacity-0 group-hover:opacity-100 transition-opacity"
              onClick={(e) => {
                e.stopPropagation();
                setSelectedCalendar(calendar);
                setIsCalendarModalOpen(true);
              }}
            >
              <Settings className="h-4 w-4" />
            </Button>
          )}
        </div>
      ))}
    </div>
  );

  // Add these helper functions for date handling
  const getDateFromString = (dateString: string) => {
    return dateString ? new Date(dateString) : new Date();
  };

  const handleStartDateChange = (date: Date | null) => {
    if (!date) return;
    
    const endDate = getDateFromString(eventForm.end);
    if (date > endDate) {
      // If start date is after end date, set end date to start date + 1 hour
      const newEndDate = new Date(date);
      newEndDate.setHours(date.getHours() + 1);
      setEventForm({
        ...eventForm,
        start: date.toISOString(),
        end: newEndDate.toISOString(),
      });
    } else {
      setEventForm({
        ...eventForm,
        start: date.toISOString(),
      });
    }
  };

  const handleEndDateChange = (date: Date | null) => {
    if (!date) return;
    
    const startDate = getDateFromString(eventForm.start);
    if (date < startDate) {
      // If end date is before start date, set start date to end date - 1 hour
      const newStartDate = new Date(date);
      newStartDate.setHours(date.getHours() - 1);
      setEventForm({
        ...eventForm,
        start: newStartDate.toISOString(),
        end: date.toISOString(),
      });
    } else {
      setEventForm({
        ...eventForm,
        end: date.toISOString(),
      });
    }
  };

  // Update the date handlers to maintain consistent time format
  const formatTimeForInput = (date: Date) => {
    return date.toLocaleTimeString('fr-FR', { 
      hour: '2-digit', 
      minute: '2-digit',
      hour12: false 
    });
  };

  // Get events for the selected date
  const getDayEvents = () => {
    if (!selectedDate) return [];
    
    const dayStart = new Date(selectedDate);
    dayStart.setHours(0, 0, 0, 0);
    const dayEnd = new Date(selectedDate);
    dayEnd.setHours(23, 59, 59, 999);
    
    const visibleCalendars = calendars.filter(cal => visibleCalendarIds.includes(cal.id));
    const dayEvents = visibleCalendars.flatMap(cal => {
      return (cal.events || []).filter(event => {
        const eventStart = new Date(event.start);
        const eventEnd = new Date(event.end);
        
        // Check if event overlaps with the selected day
        return (eventStart <= dayEnd && eventEnd >= dayStart);
      }).map(event => ({
        ...event,
        calendar: cal
      }));
    });
    
    // Sort by start time
    return dayEvents.sort((a, b) => {
      const aStart = new Date(a.start).getTime();
      const bStart = new Date(b.start).getTime();
      return aStart - bStart;
    });
  };

  const dayEvents = getDayEvents();

  return (
    <div className="flex gap-4 h-full w-full">
      {/* Left column for calendars */}
      <div className="w-64 flex-shrink-0">
        <Card className="p-4">
          <div className="flex items-center justify-between mb-4">
            <h3 className="text-lg font-semibold text-gray-900">Calendriers</h3>
          </div>
          <CalendarSelector />
        </Card>
      </div>

      {/* Middle column for calendar view */}
      <div className="flex-1 flex flex-col">
        <Card className="p-4 flex-1 flex flex-col">
          <div className="flex items-center justify-between mb-4">
            <div className="flex items-center gap-4">
              {/* Display selected calendar name */}
              {(() => {
                const selectedCal = calendars.find(
                  cal => visibleCalendarIds.includes(cal.id) && visibleCalendarIds.length === 1
                ) as CalendarWithMission | undefined;
                const displayName = selectedCal
                  ? getCalendarDisplayName(selectedCal)
                  : "Tous les calendriers";
                return (
                  <div className="flex items-center gap-2">
                    <h2 className="text-lg font-semibold text-gray-900">
                      {displayName}
                    </h2>
                    {selectedCal?.syncConfig?.syncEnabled && (
                      <Badge variant="outline" className="text-[10px] px-1.5 py-0.5 border-blue-400 text-blue-600">
                        Synchronisé
                      </Badge>
                    )}
                  </div>
                );
              })()}
              {(() => {
                // Check if user can create events in the selected calendar(s)
                const canCreateEvent = () => {
                  // If multiple calendars are visible, allow creation
                  if (visibleCalendarIds.length !== 1) {
                    return true;
                  }
                  
                  const selectedCal = calendars.find(cal => cal.id === visibleCalendarIds[0]);
                  if (!selectedCal) return true;
                  
                  // If calendar is not linked to a mission, allow
                  if (!selectedCal.missionId || !selectedCal.mission) {
                    return true;
                  }
                  
                  const mission = selectedCal.mission;
                  
                  // Check if user is the creator
                  if (mission.creatorId === userId) {
                    return true;
                  }
                  
                  // Check if user is gardien-temps
                  const isGardienTemps = mission.missionUsers.some(
                    (mu) => mu.userId === userId && mu.role === 'gardien-temps'
                  );
                  
                  return isGardienTemps;
                };
                
                if (!canCreateEvent()) {
                  return null;
                }
                
                return (
                  <Button
                    onClick={() => {
                      setSelectedEvent(null);
                          setEventForm({
                            title: "",
                            description: null,
                            start: new Date().toISOString(),
                            end: new Date(new Date().setHours(new Date().getHours() + 1)).toISOString(),
                            allDay: false,
                            location: null,
                            calendarId: selectedCalendarId
                          });
                          setIsEventModalOpen(true);
                        }}
                        className="bg-blue-600 hover:bg-blue-700 text-white"
                      >
                        <Plus className="mr-2 h-4 w-4" />
                        <span className="font-medium">Nouvel événement</span>
                  </Button>
                );
              })()}
            </div>

            <Tabs value={view} className="w-auto">
              <TabsList className="bg-gray-100">
                <TabsTrigger
                  value="dayGridMonth"
                  onClick={() => handleViewChange("dayGridMonth")}
                  className="data-[state=active]:bg-gray-300 data-[state=active]:text-gray-900 text-gray-700 hover:text-gray-900"
                >
                  Mois
                </TabsTrigger>
                <TabsTrigger
                  value="timeGridWeek"
                  onClick={() => handleViewChange("timeGridWeek")}
                  className="data-[state=active]:bg-gray-300 data-[state=active]:text-gray-900 text-gray-700 hover:text-gray-900"
                >
                  Semaine
                </TabsTrigger>
                <TabsTrigger
                  value="timeGridDay"
                  onClick={() => handleViewChange("timeGridDay")}
                  className="data-[state=active]:bg-gray-300 data-[state=active]:text-gray-900 text-gray-700 hover:text-gray-900"
                >
                  Jour
                </TabsTrigger>
              </TabsList>
            </Tabs>
          </div>

        <div className="flex-1 overflow-auto">
        <style jsx global>{`
          /* Fixed height and scrolling for day cells only */
          .fc .fc-daygrid-day-frame {
            min-height: 100px !important;
            max-height: 100px !important;
            overflow-y: auto !important;
          }

          /* Keep events container relative positioning */
          .fc .fc-daygrid-day-events {
            margin-bottom: 0 !important;
          }

          /* Custom scrollbar styles */
          .fc .fc-daygrid-day-frame::-webkit-scrollbar {
            width: 4px;
          }
          
          .fc .fc-daygrid-day-frame::-webkit-scrollbar-track {
            background: transparent;
          }
          
          .fc .fc-daygrid-day-frame::-webkit-scrollbar-thumb {
            background: #888;
            border-radius: 4px;
          }
          
          .fc .fc-daygrid-day-frame::-webkit-scrollbar-thumb:hover {
            background: #555;
          }

          /* Hide scrollbar when not needed */
          .fc .fc-daygrid-day-frame::-webkit-scrollbar {
            display: none;
          }

          .fc .fc-daygrid-day-frame:hover::-webkit-scrollbar {
            display: block;
          }
        `}</style>

        {loading ? (
          <div className="h-96 flex items-center justify-center">
            <Loader2 className="h-8 w-8 animate-spin text-primary" />
            <span className="ml-2">Chargement des événements...</span>
            </div>
          ) : (
            <FullCalendar
              ref={calendarRef}
              plugins={[dayGridPlugin, timeGridPlugin, interactionPlugin]}
              initialView={view}
              headerToolbar={{
                left: "prev,next today",
                center: "title",
                right: "",
              }}
              dateClick={handleDateClick}
            events={(() => {
              const visibleCalendars = calendars.filter(cal => visibleCalendarIds.includes(cal.id));
              const allEvents = visibleCalendars.flatMap(cal => {
                const events = cal.events || [];
                console.log(`[CALENDAR] Calendar ${cal.name} (${cal.id}): ${events.length} events, visible: ${visibleCalendarIds.includes(cal.id)}`);
                if (events.length > 0) {
                  console.log(`[CALENDAR] Events for ${cal.name}:`, events.slice(0, 3).map(e => ({
                    id: e.id,
                    title: e.title,
                    start: e.start,
                    isAllDay: e.isAllDay
                  })));
                }
                return events.map(event => ({
                  id: event.id,
                  title: event.title,
                  start: new Date(event.start),
                  end: new Date(event.end),
                  allDay: event.isAllDay,
                  description: cleanDescription(event.description),
                  location: event.location,
                  calendarId: event.calendarId,
                  backgroundColor: `${cal.color}dd`,
                  borderColor: cal.color,
                  textColor: '#ffffff',
                  extendedProps: {
                    calendarName: getCalendarDisplayName(cal as CalendarWithMission),
                    location: event.location,
                    description: cleanDescription(event.description),
                    calendarId: event.calendarId,
                    originalEvent: event,
                    color: cal.color
                  }
                }));
              });
              console.log(`[CALENDAR] Total events for FullCalendar: ${allEvents.length}`);
              return allEvents;
            })()}
            eventContent={(arg) => {
              return (
                <TooltipProvider>
                  <Tooltip>
                    <TooltipTrigger asChild>
                      <div 
                        className="px-2 py-1 overflow-hidden w-full transition-all rounded-sm hover:brightness-110"
                        style={{
                          backgroundColor: `${arg.event.backgroundColor}`,
                          boxShadow: `inset 0 0 0 1px ${arg.event.borderColor}, 0 2px 4px ${arg.event.borderColor}40`
                        }}
                      >
                        <div className="flex items-center gap-1.5 text-xs text-white">
                          {!arg.event.allDay && (
                            <span className="font-medium whitespace-nowrap shrink-0">
                              {typeof arg.event.start === 'object' && arg.event.start instanceof Date 
                                ? arg.event.start.toLocaleTimeString('fr-FR', {
                                    hour: '2-digit',
                                    minute: '2-digit'
                                  })
                                : ''}
                            </span>
                          )}
                          <span className="font-medium truncate max-w-[calc(100%-4.5rem)]">
                            {arg.event.title}
                          </span>
                        </div>
                      </div>
                    </TooltipTrigger>
                    <TooltipContent>
                      <div className="text-sm">
                        <p className="font-medium">{arg.event.title}</p>
                        {!arg.event.allDay && (
                          <p className="text-xs text-gray-400 mt-1">
                            {typeof arg.event.start === 'object' && arg.event.start instanceof Date 
                              ? arg.event.start.toLocaleTimeString('fr-FR', {
                                  hour: '2-digit',
                                  minute: '2-digit'
                                })
                              : ''}
                          </p>
                        )}
                      </div>
                    </TooltipContent>
                  </Tooltip>
                </TooltipProvider>
              );
            }}
            eventClassNames="rounded-md overflow-hidden"
            dayCellContent={(arg) => {
              return (
                <div className="text-xs font-medium">
                  {arg.dayNumberText}
                </div>
              );
            }}
            locale={frLocale}
              selectable={false}
              dayMaxEventRows={false}
              dayMaxEvents={false}
              weekends={true}
              eventClick={handleEventClick}
            height="auto"
              aspectRatio={1.8}
            slotMinTime="06:00:00"
            slotMaxTime="22:00:00"
            allDaySlot={true}
            allDayText=""
            views={{
              timeGridWeek: {
                allDayText: "",
                dayHeaderFormat: { weekday: 'long', day: 'numeric', month: 'numeric' }
              },
              timeGridDay: {
                allDayText: "",
                dayHeaderFormat: { weekday: 'long', day: 'numeric', month: 'numeric' }
              }
            }}
            slotLabelFormat={{
              hour: '2-digit',
              minute: '2-digit',
              hour12: false
            }}
            />
          )}
        </div>
        </Card>
      </div>

      {/* Right column for day events */}
      {selectedDate && (
        <div className="w-80 flex-shrink-0">
          <Card className="p-4 h-full flex flex-col">
            <div className="flex items-center justify-between mb-4">
              <h3 className="text-lg font-semibold text-gray-900">
                {selectedDate.toLocaleDateString('fr-FR', {
                  weekday: 'long',
                  day: 'numeric',
                  month: 'long',
                  year: 'numeric'
                })}
              </h3>
              <Button
                variant="ghost"
                size="icon"
                onClick={() => setSelectedDate(null)}
                className="h-8 w-8"
              >
                <X className="h-4 w-4" />
              </Button>
            </div>
            <ScrollArea className="flex-1">
              {dayEvents.length === 0 ? (
                <div className="text-center text-gray-500 py-8">
                  <CalendarIcon className="h-12 w-12 mx-auto mb-2 opacity-50" />
                  <p>Aucun événement ce jour</p>
                </div>
              ) : (
                <div className="space-y-3">
                  {dayEvents.map((event) => {
                    const calendar = event.calendar as CalendarWithMission;
                    const startDate = new Date(event.start);
                    const endDate = new Date(event.end);
                    const isAllDay = event.isAllDay;
                    
                    return (
                      <Card
                        key={event.id}
                        className="p-3 cursor-pointer hover:shadow-md transition-shadow"
                        onClick={() => handleEventClick({ event: { 
                          title: event.title,
                          start: startDate,
                          end: endDate,
                          isAllDay: isAllDay,
                          extendedProps: {
                            description: event.description,
                            location: event.location,
                            calendarId: event.calendarId,
                            originalEvent: event,
                            color: calendar.color
                          }
                        }})}
                      >
                        <div className="flex items-start gap-3">
                          <div 
                            className="w-1 h-full rounded-full flex-shrink-0 mt-1"
                            style={{ backgroundColor: calendar.color }}
                          />
                          <div className="flex-1 min-w-0">
                            <div className="flex items-center gap-2 mb-1">
                              <h4 className="font-medium text-gray-900 truncate">
                                {event.title}
                              </h4>
                              <div 
                                className="w-2 h-2 rounded-full flex-shrink-0"
                                style={{ backgroundColor: calendar.color }}
                              />
                            </div>
                            <div className="flex items-center gap-2 text-sm text-gray-600">
                              <Clock className="h-3 w-3" />
                              <span>
                                {isAllDay 
                                  ? "Toute la journée"
                                  : `${startDate.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })} - ${endDate.toLocaleTimeString('fr-FR', { hour: '2-digit', minute: '2-digit' })}`
                                }
                              </span>
                            </div>
                            {event.location && (
                              <div className="flex items-center gap-2 text-sm text-gray-600 mt-1">
                                <MapPin className="h-3 w-3" />
                                <span className="truncate">{event.location}</span>
                              </div>
                            )}
                            <div className="mt-1">
                              <Badge 
                                variant="outline" 
                                className="text-xs"
                                style={{ 
                                  borderColor: calendar.color,
                                  color: calendar.color 
                                }}
                              >
                                {getCalendarDisplayName(calendar)}
                              </Badge>
                            </div>
                          </div>
                        </div>
                      </Card>
                    );
                  })}
                </div>
              )}
            </ScrollArea>
          </Card>
        </div>
      )}

      {/* Calendar dialog */}
        <CalendarDialog
      open={isCalendarModalOpen}
      onClose={() => setIsCalendarModalOpen(false)}
      onSave={handleCalendarSave}
      onDelete={handleCalendarDelete}
      onSyncSetup={async (calendarId, mailCredentialId, externalCalendarUrl, externalCalendarId, provider) => {
        try {
          const response = await fetch("/api/calendars/sync", {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
              calendarId,
              mailCredentialId,
              externalCalendarUrl,
              externalCalendarId,
              provider: provider || "microsoft",
            }),
          });
          
          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 */}
    <Dialog open={isEventModalOpen} onOpenChange={(open) => {
      if (!open) {
        setIsEventModalOpen(false);
        setEventForm({
          title: "",
          description: null,
          start: "",
          end: "",
          allDay: false,
          location: null,
          calendarId: selectedCalendarId || calendars[0]?.id
        });
        setSelectedEvent(null);
        setError(null);
      }
    }}>
      <DialogContent className="sm:max-w-lg">
        <DialogHeader>
          <DialogTitle className="text-gray-800">
            {selectedEvent ? "Modifier l'événement" : "Nouvel événement"}
          </DialogTitle>
        </DialogHeader>

        {error && (
          <div className="bg-red-50 border border-red-200 text-red-600 px-4 py-2 rounded-md text-sm">
            {error}
          </div>
        )}

        <div className="space-y-4 py-4">
          <div className="grid gap-4 py-4">
            <div className="grid gap-2">
              <Label htmlFor="title" className="text-base font-semibold text-gray-800">Titre</Label>
              <Input
                id="title"
                placeholder="Titre de l'événement"
                value={eventForm.title}
                onChange={(e) => setEventForm({ ...eventForm, title: e.target.value })}
                className="bg-white text-gray-900"
              />
            </div>

            <div className="space-y-2">
              <Label className="text-base font-semibold text-gray-800">Calendrier</Label>
              <Select
                value={eventForm.calendarId || ""}
                onValueChange={(value) => {
                  setEventForm(prev => ({
                    ...prev,
                    calendarId: value
                  }));
                }}
              >
                <SelectTrigger className="w-full bg-white text-gray-900">
                  <SelectValue placeholder="Sélectionner un calendrier" />
                </SelectTrigger>
                <SelectContent>
                  {getAvailableCalendars().map((cal) => {
                    const calWithMission = cal as CalendarWithMission;
                    const label = getCalendarDisplayName(calWithMission);
                    return (
                      <SelectItem key={cal.id} value={cal.id}>
                        <div className="flex items-center gap-2 w-full">
                          <div 
                            className="w-3 h-3 rounded-full flex-shrink-0" 
                            style={{ backgroundColor: cal.color }}
                          />
                          <span className="flex-1">{label}</span>
                          {calWithMission.syncConfig?.syncEnabled && (
                            <Badge variant="outline" className="ml-1 text-[10px] px-1 py-0.5 border-blue-400 text-blue-600">
                              Sync
                            </Badge>
                          )}
                        </div>
                      </SelectItem>
                    );
                  })}
                </SelectContent>
              </Select>
            </div>

            <div className="grid grid-cols-2 gap-4">
              <div className="space-y-2">
                <Label className="text-gray-800">Début</Label>
                <div className="flex gap-2">
                  <div className="flex-1">
                    <DatePicker
                      selected={getDateFromString(eventForm.start)}
                      onChange={handleStartDateChange}
                      dateFormat="dd/MM/yyyy"
                      locale="fr"
                      className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary bg-white text-gray-900"
                      placeholderText="Date"
                      customInput={<Input className="bg-white text-gray-900" />}
                    />
                  </div>
                  <DatePicker
                    selected={getDateFromString(eventForm.start)}
                    onChange={handleStartDateChange}
                    showTimeSelect
                    showTimeSelectOnly
                    timeIntervals={15}
                    timeCaption="Heure"
                    dateFormat="HH:mm"
                    className="w-32 bg-white text-gray-900"
                    customInput={<Input className="bg-white text-gray-900" />}
                  />
                </div>
              </div>

              <div className="space-y-2">
                <Label className="text-gray-800">Fin</Label>
                <div className="flex gap-2">
                  <div className="flex-1">
                    <DatePicker
                      selected={getDateFromString(eventForm.end)}
                      onChange={handleEndDateChange}
                      dateFormat="dd/MM/yyyy"
                      locale="fr"
                      className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-primary bg-white text-gray-900"
                      placeholderText="Date"
                      customInput={<Input className="bg-white text-gray-900" />}
                      minDate={getDateFromString(eventForm.start)}
                    />
                  </div>
                  <DatePicker
                    selected={getDateFromString(eventForm.end)}
                    onChange={handleEndDateChange}
                    showTimeSelect
                    showTimeSelectOnly
                    timeIntervals={15}
                    timeCaption="Heure"
                    dateFormat="HH:mm"
                    className="w-32 bg-white text-gray-900"
                    customInput={<Input className="bg-white text-gray-900" />}
                  />
                </div>
              </div>
            </div>
          </div>

          <div className="flex items-center space-x-2">
            <Checkbox
              id="allDay"
              checked={eventForm.allDay}
              onCheckedChange={(checked) =>
                setEventForm({ ...eventForm, allDay: checked as boolean })
              }
            />
            <Label htmlFor="allDay" className="text-gray-800">Toute la journée</Label>
          </div>

          <div className="space-y-2">
            <Label className="text-gray-800">Lieu</Label>
            <Input
              value={eventForm.location || ""}
              onChange={(e) =>
                setEventForm({ ...eventForm, location: e.target.value })
              }
              placeholder="Ajouter un lieu"
              className="bg-white text-gray-900"
            />
          </div>

          <div className="space-y-2">
            <Label className="text-gray-800">Description</Label>
            <Textarea
              value={eventForm.description || ""}
              onChange={(e) =>
                setEventForm({ ...eventForm, description: e.target.value })
              }
              placeholder="Ajouter une description"
              className="bg-white text-gray-900"
            />
          </div>
        </div>

        <DialogFooter>
          {selectedEvent && (
            <Button
              variant="destructive"
              onClick={handleEventDelete}
              disabled={loading}
            >
              {loading ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Suppression...
                </>
              ) : (
                "Supprimer"
              )}
            </Button>
          )}
          <div className="flex space-x-2">
            <Button
              variant="outline"
              onClick={() => setIsEventModalOpen(false)}
              disabled={loading}
              className="bg-white hover:bg-gray-50 text-gray-900 border-gray-200"
            >
              Annuler
            </Button>
            <Button 
              onClick={handleEventSubmit} 
              disabled={loading}
              className="bg-blue-600 hover:bg-blue-700 text-white"
            >
              {loading ? (
                <>
                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                  Enregistrement...
                </>
              ) : selectedEvent ? (
                "Mettre à jour"
              ) : (
                "Créer"
              )}
            </Button>
          </div>
        </DialogFooter>
      </DialogContent>
    </Dialog>
    </div>
  );
}