@tuturuuu/ui 0.38.0 → 0.39.0

package/src/components/ui/legacy/calendar/legacy-event-modal.tsx

@@ -0,0 +1,1559 @@
+'use client';
+
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useQuery } from '@tanstack/react-query';
+import { calendarEventsSchema } from '@tuturuuu/ai/calendar/events';
+import { useObject } from '@tuturuuu/ai/object/core';
+import {
+  AlertCircle,
+  Brain,
+  Calendar as CalendarIcon,
+  Check,
+  ChevronLeft,
+  ChevronRight,
+  Clock,
+  FileText,
+  Image as ImageIcon,
+  Info,
+  Loader2,
+  Lock,
+  MapPin,
+  Mic,
+  Sparkles,
+  StopCircle,
+  Trash2,
+  Unlock,
+  X,
+} from '@tuturuuu/icons';
+import { getWorkspaceCalendarDefaultSource } from '@tuturuuu/internal-api';
+import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
+import type { SupportedColor } from '@tuturuuu/types/primitives/SupportedColors';
+import { Badge } from '@tuturuuu/ui/badge';
+import { Button } from '@tuturuuu/ui/button';
+import { Dialog, DialogContent } from '@tuturuuu/ui/dialog';
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@tuturuuu/ui/form';
+import { newCalendarCreationRequestId } from '@tuturuuu/ui/hooks/calendar-creation-request';
+import { useCalendar } from '@tuturuuu/ui/hooks/use-calendar';
+import { useForm } from '@tuturuuu/ui/hooks/use-form';
+import { notifySave } from '@tuturuuu/ui/save-notification';
+import { ScrollArea } from '@tuturuuu/ui/scroll-area';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@tuturuuu/ui/select';
+import { Separator } from '@tuturuuu/ui/separator';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@tuturuuu/ui/tabs';
+import {
+  createAllDayEvent,
+  isAllDayEvent,
+} from '@tuturuuu/utils/calendar-utils';
+import { getEventStyles } from '@tuturuuu/utils/color-helper';
+import { cn } from '@tuturuuu/utils/format';
+import { format } from 'date-fns';
+import dayjs from 'dayjs';
+import ts from 'dayjs/plugin/timezone';
+import utc from 'dayjs/plugin/utc';
+import {
+  useCallback,
+  useEffect,
+  useEffectEvent,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { z } from 'zod';
+import { Alert, AlertDescription, AlertTitle } from '../../alert';
+import { AutosizeTextarea } from '../../custom/autosize-textarea';
+import {
+  COLOR_OPTIONS,
+  DateError,
+  EventDateTimePicker,
+  EventDescriptionInput,
+  EventLocationInput,
+  EventTitleInput,
+  EventToggleSwitch,
+  OverlapWarning,
+} from './event-form-components';
+import { EventModalHeader } from './event-modal-header';
+import { eventEndPickerBounds } from './event-picker-bounds';
+import { eventModalDraft, eventModalSavePayload } from './event-save-payload';
+import {
+  eventSourceChanged,
+  selectedEventSource,
+  sourceInputFromOption,
+} from './event-source-selection';
+import { ProviderColorPicker } from './provider-color-picker';
+import {
+  prepareCalendarEventDrafts,
+  saveCalendarEventDrafts,
+} from './save-calendar-event-drafts';
+import { useCalendarSettings } from './settings/settings-context';
+import { useCalendarDraftSave } from './use-calendar-draft-save';
+import { useEventDraftSession } from './use-event-draft-session';
+
+dayjs.extend(ts);
+dayjs.extend(utc);
+
+const AIFormSchema = z.object({
+  prompt: z.string().min(1, 'Please enter a prompt to generate an event'),
+  timezone: z
+    .string()
+    .default(() => Intl.DateTimeFormat().resolvedOptions().timeZone),
+  smart_scheduling: z.boolean().default(true),
+});
+
+export function LegacyEventModal() {
+  const toast = notifySave;
+  const startPickerRef = useRef<HTMLButtonElement>(null);
+  const endPickerRef = useRef<HTMLButtonElement>(null);
+
+  const {
+    activeEvent,
+    isModalOpen,
+    closeModal,
+    addEvent,
+    updateEvent,
+    deleteEvent,
+    getEvents,
+    defaultNewEventTab,
+  } = useCalendar();
+  const { settings } = useCalendarSettings();
+
+  const tz = settings?.timezone?.timezone;
+
+  const [event, setEvent] = useState<Partial<CalendarEvent>>({
+    title: '',
+    description: '',
+    start_at: new Date().toISOString(),
+    end_at: new Date(Date.now() + 60 * 60 * 1000).toISOString(), // Default to 1 hour
+    color: 'BLUE',
+    location: '',
+    locked: false,
+  });
+  const [selectedSourceId, setSelectedSourceId] = useState<string | null>(null);
+
+  const wsId = activeEvent?.ws_id || event.ws_id;
+  const { data: sourceData } = useQuery({
+    queryKey: ['calendar-default-source', wsId],
+    enabled: !!wsId,
+    queryFn: () => getWorkspaceCalendarDefaultSource(wsId as string),
+    staleTime: 30_000,
+  });
+  const sourceOptions = useMemo(
+    () => sourceData?.options ?? [],
+    [sourceData?.options]
+  );
+  const selectedSourceOption = selectedEventSource(
+    sourceOptions,
+    event,
+    selectedSourceId,
+    sourceData?.defaultSource
+  );
+
+  // State for AI event generation
+  const [generatedEvents, setGeneratedEvents] =
+    useState<Partial<CalendarEvent>[]>();
+  const [currentEventIndex, setCurrentEventIndex] = useState(0);
+  const [userTimezone] = useState(
+    Intl.DateTimeFormat().resolvedOptions().timeZone
+  );
+
+  const generatedEvent = generatedEvents?.[currentEventIndex];
+
+  // Determine if we're editing an existing event
+  const isEditing = !!(activeEvent?.id && activeEvent.id !== 'new');
+
+  const [activeTab, setActiveTab] = useState<'manual' | 'ai' | 'preview'>(
+    isEditing ? 'manual' : defaultNewEventTab // Default tab for new events
+  );
+  const [isAllDay, setIsAllDay] = useState(false);
+  const [isSaving, setIsSaving] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [dateError, setDateError] = useState<string | null>(null);
+  const [overlappingEvents, setOverlappingEvents] = useState<CalendarEvent[]>(
+    []
+  );
+  const [showOverlapWarning, setShowOverlapWarning] = useState(false);
+  const [aiSuggestions, setAiSuggestions] = useState<string[]>([]);
+
+  // Store previous time values for toggling all-day
+  const [prevTimes, setPrevTimes] = useState<{
+    timed: { start: string | null; end: string | null };
+    allday: { start: string | null; end: string | null };
+  }>({ timed: { start: null, end: null }, allday: { start: null, end: null } });
+
+  // AI form
+  const aiForm = useForm({
+    resolver: zodResolver(AIFormSchema),
+    defaultValues: {
+      prompt: '',
+      timezone: userTimezone,
+      smart_scheduling: true,
+    },
+  });
+
+  const { object, submit, error, isLoading } = useObject({
+    api: '/api/v1/calendar/events/generate',
+    schema: calendarEventsSchema,
+  });
+
+  const checkForOverlaps = useCallback(
+    (eventToCheck: Partial<CalendarEvent>) => {
+      if (!eventToCheck.start_at || !eventToCheck.end_at) return;
+
+      const allEvents = getEvents();
+      const eventStart = new Date(eventToCheck.start_at);
+      const eventEnd = new Date(eventToCheck.end_at);
+
+      // Find events that overlap with this event
+      const overlaps = allEvents.filter((existingEvent) => {
+        // Skip comparing with the current event being edited
+        if (existingEvent.id === activeEvent?.id) return false;
+
+        const existingStart = new Date(existingEvent.start_at);
+        const existingEnd = new Date(existingEvent.end_at);
+
+        // Check if the events are on the same day
+        const isSameDay =
+          existingStart.getDate() === eventStart.getDate() &&
+          existingStart.getMonth() === eventStart.getMonth() &&
+          existingStart.getFullYear() === eventStart.getFullYear();
+
+        if (!isSameDay) return false;
+
+        // Check for time overlap
+        return !(existingEnd <= eventStart || existingStart >= eventEnd);
+      });
+
+      setOverlappingEvents(overlaps);
+      setShowOverlapWarning(overlaps.length > 0);
+    },
+    [activeEvent, getEvents]
+  );
+
+  const receiveGeneratedEvents = useEffectEvent(() => {
+    const processedEvents = (object?.events || []) as Partial<CalendarEvent>[];
+    setGeneratedEvents(prepareCalendarEventDrafts(processedEvents));
+    setCurrentEventIndex(0);
+    const firstEvent = processedEvents[0];
+    if (
+      firstEvent?.start_at &&
+      firstEvent.end_at &&
+      aiForm.getValues().smart_scheduling
+    ) {
+      checkForOverlaps(firstEvent);
+    }
+    setActiveTab('preview');
+  });
+  useEffect(() => {
+    if (object?.events && !isLoading) receiveGeneratedEvents();
+  }, [object, isLoading]);
+
+  // Initialize once per dialog session; live calendar refreshes must not erase edits.
+  useEventDraftSession({
+    isOpen: isModalOpen,
+    eventId: activeEvent?.id,
+    workspaceId: activeEvent?.ws_id,
+    initialize: () => {
+      if (activeEvent) {
+        const cleanEventData = eventModalDraft(activeEvent);
+
+        setEvent(cleanEventData);
+        setSelectedSourceId(
+          selectedEventSource(
+            sourceOptions,
+            cleanEventData,
+            null,
+            sourceData?.defaultSource
+          )?.id ?? null
+        );
+
+        if (activeEvent.id !== 'new') {
+          setIsAllDay(isAllDayEvent(cleanEventData as CalendarEvent));
+        } else {
+          setIsAllDay(false);
+        }
+
+        // Check for overlapping events
+        checkForOverlaps(cleanEventData);
+
+        setActiveTab(isEditing ? 'manual' : defaultNewEventTab);
+      } else {
+        const now = new Date();
+        const oneHourLater = new Date(now.getTime() + 60 * 60 * 1000);
+
+        const newEvent = {
+          requestId: newCalendarCreationRequestId(),
+          title: '',
+          description: '',
+          start_at: now.toISOString(),
+          end_at: oneHourLater.toISOString(),
+          color: 'BLUE' as SupportedColor,
+          location: '',
+          locked: false,
+          ws_id: '',
+        };
+
+        setEvent(newEvent);
+        setSelectedSourceId(sourceData?.defaultSource?.id ?? null);
+        setIsAllDay(false);
+
+        aiForm.reset();
+        setGeneratedEvents([]);
+      }
+
+      setDateError(null);
+    },
+  });
+
+  const draftSave = useCalendarDraftSave({
+    draft: event,
+    original: activeEvent,
+    buildPayload: () =>
+      eventModalSavePayload(
+        event,
+        activeEvent,
+        sourceInputFromOption(selectedSourceOption),
+        eventSourceChanged(sourceOptions, activeEvent ?? {}, selectedSourceId)
+      ),
+    addEvent,
+    updateEvent,
+    closeModal,
+    setIsSaving,
+    isSaving,
+    source: selectedSourceOption,
+    wsId,
+    onError: () =>
+      toast({
+        title: 'Error',
+        description: 'Failed to save or sync event. Please try again.',
+        variant: 'destructive',
+      }),
+  });
+  const handleManualSave = async () => {
+    if (!event.start_at || !event.end_at) return;
+    if (new Date(event.end_at) <= new Date(event.start_at)) {
+      setDateError('End date must be after start date');
+      return;
+    }
+    setDateError(null);
+    await draftSave.save();
+  };
+
+  // Handle AI event generation
+  const handleGenerateEvent = async (values: z.infer<typeof AIFormSchema>) => {
+    try {
+      // Include timezone in the prompt for accurate time conversion
+      const promptWithTimezone = `${values.prompt}\n\nUser timezone: ${values.timezone}`;
+
+      // Get existing events for smart scheduling
+      const existingEvents = values.smart_scheduling ? getEvents() : [];
+
+      // Generate helpful suggestions based on the prompt
+      const suggestions = [
+        'Consider adding a buffer time before/after these events',
+        'These events might benefit from reminder notifications',
+        'Based on your schedule, early morning might be better for focus',
+        'Consider adding meeting agenda or preparation notes',
+      ];
+
+      // Add category-based suggestions
+      if (settings?.categoryColors?.categories.length > 0) {
+        const categoryNames = settings.categoryColors.categories
+          .map((cat) => cat.name)
+          .join(', ');
+        suggestions.push(
+          `You have categories set up: ${categoryNames}. Events will be colored based on these categories.`
+        );
+      }
+
+      setAiSuggestions(suggestions.slice(0, 3)); // Show up to 3 relevant suggestions
+
+      // Format categories for the AI request
+      const formattedCategories = settings?.categoryColors?.categories.map(
+        (category) => ({
+          name: category.name,
+          color: category.color.toLowerCase(),
+        })
+      );
+
+      submit({
+        prompt: promptWithTimezone,
+        current_time: new Date().toISOString(),
+        smart_scheduling: values.smart_scheduling,
+        existing_events: values.smart_scheduling ? existingEvents : undefined,
+        categories: formattedCategories,
+      });
+    } catch (_) {
+      toast({
+        title: 'Error generating events',
+        description: 'Please try again with a different prompt',
+        variant: 'destructive',
+      });
+    }
+  };
+
+  // Handle AI event save
+  const handleAISave = async () => {
+    if (generatedEvents?.length === 0) return;
+
+    setIsSaving(true);
+    try {
+      const eventsToSave = generatedEvents;
+      const { savedEvents, failedEvents } = await saveCalendarEventDrafts(
+        eventsToSave ?? [],
+        addEvent,
+        sourceInputFromOption(selectedSourceOption)
+      );
+      setGeneratedEvents(failedEvents);
+      setCurrentEventIndex(0);
+
+      // Show success notification
+      if (savedEvents.length > 0) {
+        toast({
+          title: 'Success',
+          description: `${savedEvents.length}/${eventsToSave?.length || 0} event${savedEvents.length > 1 ? 's' : ''} saved`,
+        });
+        if (failedEvents.length === 0) closeModal();
+      }
+
+      // If there are failed events, show an error notification
+      if (failedEvents.length > 0) {
+        toast({
+          title: 'Warning',
+          description: `${failedEvents.length} event${failedEvents.length > 1 ? 's' : ''} failed to save`,
+          variant: 'destructive',
+        });
+      }
+    } catch (_) {
+      toast({
+        title: 'Error',
+        description: 'Failed to save or sync AI-generated events.',
+        variant: 'destructive',
+      });
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  // Handle event deletion
+  const handleDelete = async () => {
+    if (isRecording) {
+      stopRecording();
+    }
+    if (!activeEvent?.id) return;
+
+    setIsDeleting(true);
+    try {
+      // For split events, use the original ID
+      const originalId = activeEvent.id;
+
+      // Make sure originalId is not undefined
+      if (originalId) {
+        await deleteEvent(originalId);
+      }
+      closeModal();
+    } catch (_) {
+      toast({
+        title: 'Error',
+        description: 'Failed to delete event. Please try again.',
+        variant: 'destructive',
+      });
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  // Handle start date change
+  const handleStartDateChange = (date: Date | undefined) => {
+    if (!date) return;
+
+    setEvent((prev) => {
+      const newStartDate = tz === 'auto' ? dayjs(date) : dayjs(date).tz(tz);
+      const endDate =
+        tz === 'auto'
+          ? dayjs(prev.end_at || '')
+          : dayjs(prev.end_at || '').tz(tz);
+      const newEvent = { ...prev, start_at: date.toISOString() };
+
+      if (isAllDay) {
+        // For all-day, keep end_at as is if it's after or equal to start_at + 1 day, otherwise set to start + 1 day
+        newEvent.start_at = newStartDate.startOf('day').toISOString();
+        let newEnd = dayjs(prev.end_at).isValid()
+          ? dayjs(prev.end_at)
+          : newStartDate.startOf('day').add(1, 'day');
+        if (!newEnd.isAfter(newStartDate.startOf('day'))) {
+          newEnd = newStartDate.startOf('day').add(1, 'day');
+        }
+        newEvent.end_at = newEnd.toISOString();
+      } else {
+        // If end time is before or equal to new start time, set end time to 1 hour after start
+        if (!endDate.isAfter(newStartDate)) {
+          const plusOneHour = newStartDate.add(1, 'hour');
+          if (plusOneHour.date() !== newStartDate.date()) {
+            newEvent.end_at = plusOneHour.toISOString();
+          } else {
+            newEvent.end_at = plusOneHour.toISOString();
+          }
+        }
+      }
+
+      // Only show error if end <= start
+      if (
+        dayjs(newEvent.end_at).isSame(dayjs(newEvent.start_at)) ||
+        dayjs(newEvent.end_at).isBefore(dayjs(newEvent.start_at))
+      ) {
+        setDateError('End time must be after start time.');
+      } else {
+        setDateError(null);
+      }
+      return newEvent;
+    });
+  };
+
+  // Handle end date change
+  const handleEndDateChange = (date: Date | undefined) => {
+    if (!date) return;
+
+    setEvent((prev) => {
+      let newEndDate = tz === 'auto' ? dayjs(date) : dayjs(date).tz(tz);
+      const startDate =
+        tz === 'auto'
+          ? dayjs(prev.start_at || '')
+          : dayjs(prev.start_at || '').tz(tz);
+      const newEvent = { ...prev };
+
+      if (isAllDay) {
+        // For all-day, set end_at to the start of the day after the selected end date
+        let newEnd = newEndDate.startOf('day').add(1, 'day');
+        // Ensure end is not before or equal to start
+        if (!newEnd.isAfter(startDate.startOf('day'))) {
+          newEnd = startDate.startOf('day').add(1, 'day');
+        }
+        newEvent.end_at = newEnd.toISOString();
+        // Don't change start_at here
+      } else {
+        // If end is not after start, increment end date by one day and set the entered time
+        if (!newEndDate.isAfter(startDate)) {
+          // Use the time from the user's input, but increment the date by one day
+          newEndDate = newEndDate.add(1, 'day');
+        }
+        // If end is after start, accept as is
+        newEvent.end_at = newEndDate.toISOString();
+      }
+
+      if (!dayjs(newEvent.end_at).isAfter(dayjs(newEvent.start_at))) {
+        setDateError('End time must be after start time.');
+      } else {
+        setDateError(null);
+      }
+
+      return newEvent;
+    });
+  };
+
+  // Handle all-day toggle
+  const handleAllDayChange = (checked: boolean) => {
+    setEvent((prev) => {
+      const startDate =
+        tz === 'auto' ? dayjs(prev.start_at) : dayjs(prev.start_at).tz(tz);
+      // Backup previous times before updating
+      const timedBackup = prevTimes.timed;
+      const alldayBackup = prevTimes.allday;
+      if (checked) {
+        setPrevTimes((old) => ({
+          ...old,
+          timed: { start: prev.start_at || null, end: prev.end_at || null },
+        }));
+        // Restore previous all-day range if it exists
+        if (alldayBackup.start && alldayBackup.end) {
+          return {
+            ...prev,
+            start_at: alldayBackup.start,
+            end_at: alldayBackup.end,
+          };
+        }
+        // Use the new createAllDayEvent helper for proper timezone handling
+        const { start_at, end_at } = createAllDayEvent(
+          startDate.toDate(),
+          tz,
+          1 // 1 day duration
+        );
+        return {
+          ...prev,
+          start_at,
+          end_at,
+        };
+      } else {
+        setPrevTimes((old) => ({
+          ...old,
+          allday: { start: prev.start_at || null, end: prev.end_at || null },
+        }));
+        // Restore previous timed range if it exists
+        if (timedBackup.start && timedBackup.end) {
+          return {
+            ...prev,
+            start_at: timedBackup.start,
+            end_at: timedBackup.end,
+          };
+        }
+        const newStart =
+          tz === 'auto'
+            ? dayjs().startOf('hour')
+            : dayjs().startOf('hour').tz(tz);
+        const newEnd = newStart.add(1, 'hour');
+        return {
+          ...prev,
+          start_at: newStart.toISOString(),
+          end_at: newEnd.toISOString(),
+        };
+      }
+    });
+    setIsAllDay((prev) => !prev);
+  };
+
+  const [isRecording, setIsRecording] = useState(false);
+  const [isProcessingAudio, setIsProcessingAudio] = useState(false);
+  const [isProcessingImage, setIsProcessingImage] = useState(false);
+  const mediaRecorder = useRef<MediaRecorder | null>(null);
+  const mediaStream = useRef<MediaStream | null>(null);
+  const audioChunks = useRef<Blob[]>([]);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const startRecording = async () => {
+    setIsRecording(true);
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      mediaStream.current = stream;
+      mediaRecorder.current = new MediaRecorder(stream, {
+        mimeType: 'audio/webm',
+      });
+
+      mediaRecorder.current.ondataavailable = (event) => {
+        if (event.data.size > 0) {
+          audioChunks.current.push(event.data);
+        }
+      };
+
+      mediaRecorder.current.onstop = async () => {
+        if (audioChunks.current.length === 0) {
+          setIsRecording(false);
+          setIsProcessingAudio(false);
+          return;
+        }
+
+        const audioBlob = new Blob(audioChunks.current, { type: 'audio/webm' });
+        const reader = new FileReader();
+
+        reader.readAsDataURL(audioBlob);
+        reader.onloadend = async () => {
+          const base64Audio = reader.result?.toString().split(',')[1];
+
+          if (!base64Audio) {
+            setIsProcessingAudio(false);
+            return;
+          }
+
+          sendAudioToServer(base64Audio);
+        };
+
+        // Cleanup
+        revokeMediaPermissions();
+        audioChunks.current = [];
+      };
+
+      mediaRecorder.current.start();
+    } catch (_) {
+      setIsRecording(false);
+    }
+  };
+
+  const triggerImageUpload = () => {
+    fileInputRef.current?.click();
+  };
+
+  const stopRecording = () => {
+    setIsRecording(false);
+    setIsProcessingAudio(true);
+    if (mediaRecorder.current && mediaRecorder.current.state !== 'inactive') {
+      mediaRecorder.current.stop();
+    } else {
+      revokeMediaPermissions();
+      setIsProcessingAudio(false);
+    }
+  };
+
+  const revokeMediaPermissions = () => {
+    if (mediaStream.current) {
+      mediaStream.current.getTracks().forEach((track) => {
+        track.stop();
+      });
+      mediaStream.current = null;
+    }
+  };
+
+  const sendAudioToServer = async (base64Audio: string) => {
+    try {
+      const response = await fetch('/api/v1/calendar/audio', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ base64Audio }),
+      });
+
+      const result = await response.json();
+      if (result.text) {
+        aiForm.setValue('prompt', result.text);
+      } else {
+        toast({
+          title: 'Transcription Error',
+          description: result.error || 'Failed to transcribe audio',
+          variant: 'destructive',
+        });
+      }
+    } catch (_) {
+      toast({
+        title: 'API Error',
+        description: 'Failed to process audio recording',
+        variant: 'destructive',
+      });
+    } finally {
+      setIsProcessingAudio(false);
+    }
+  };
+
+  const handleUploadImage = async (
+    event: React.ChangeEvent<HTMLInputElement>
+  ) => {
+    const file = event.target.files?.[0]; // image file from input
+    if (!file) return;
+
+    setIsProcessingImage(true);
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onloadend = async () => {
+      const base64Image = reader.result?.toString().split(',')[1]; // convert to base64
+      if (!base64Image) {
+        setIsProcessingImage(false);
+        return;
+      }
+
+      try {
+        const response = await fetch('/api/v1/calendar/image', {
+          // send to API
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ base64Image }),
+        });
+
+        const result = await response.json();
+        if (result.text) {
+          aiForm.setValue('prompt', result.text);
+        } else {
+          toast({
+            title: 'Image Processing Error',
+            description: result.error || 'Failed to extract text from image',
+            variant: 'destructive',
+          });
+        }
+      } catch (_) {
+        toast({
+          title: 'API Error',
+          description: 'Failed to process uploaded image',
+          variant: 'destructive',
+        });
+      } finally {
+        setIsProcessingImage(false);
+        if (fileInputRef.current) {
+          fileInputRef.current.value = '';
+        }
+      }
+    };
+  };
+
+  // Handle navigation between multiple events in preview
+  const goToNextEvent = () => {
+    if (currentEventIndex < (generatedEvents?.length || 0) - 1) {
+      const nextIndex = currentEventIndex + 1;
+      setCurrentEventIndex(nextIndex);
+      if (aiForm.getValues().smart_scheduling) {
+        const nextEvent = generatedEvents?.[nextIndex];
+        if (nextEvent?.start_at && nextEvent.end_at) {
+          checkForOverlaps(nextEvent as Partial<CalendarEvent>);
+        }
+      }
+    }
+  };
+
+  const goToPreviousEvent = () => {
+    if (currentEventIndex > 0) {
+      const prevIndex = currentEventIndex - 1;
+      setCurrentEventIndex(prevIndex);
+      if (aiForm.getValues().smart_scheduling) {
+        const prevEvent = generatedEvents?.[prevIndex];
+        if (prevEvent?.start_at && prevEvent.end_at) {
+          checkForOverlaps(prevEvent as Partial<CalendarEvent>);
+        }
+      }
+    }
+  };
+
+  // function to open Google Maps with the entered address
+  const openGoogleMaps = (address: string) => {
+    if (address) {
+      const encodedAddress = encodeURIComponent(address);
+      window.open(
+        `https://www.google.com/maps/search/?api=1&query=${encodedAddress}`,
+        '_blank'
+      );
+    }
+  };
+
+  // Handle lock toggle
+  const handleLockToggle = async (checked: boolean) => {
+    if (!activeEvent?.id) return;
+
+    setIsSaving(true);
+    try {
+      const originalId = activeEvent.id;
+
+      const updatedEvent = await updateEvent(originalId, {
+        ...event,
+        locked: checked,
+      });
+
+      if (!updatedEvent) {
+        throw new Error('Failed to update event lock status');
+      }
+
+      setEvent(updatedEvent);
+      toast({
+        title: 'Success',
+        description: `Event ${checked ? 'locked' : 'unlocked'} successfully`,
+      });
+    } catch (_) {
+      toast({
+        title: 'Error',
+        description: 'Failed to update event lock status',
+        variant: 'destructive',
+      });
+      // Revert the toggle if update fails
+      setEvent((prev) => ({ ...prev, locked: !checked }));
+    } finally {
+      setIsSaving(false);
+    }
+  };
+
+  return (
+    <Dialog open={isModalOpen} onOpenChange={(open) => !open && closeModal()}>
+      <DialogContent className="max-h-[90vh] max-w-3xl overflow-hidden p-0">
+        <EventModalHeader event={event} isEditing={isEditing} />
+
+        <Tabs
+          value={activeTab}
+          onValueChange={(value) => setActiveTab(value as 'manual' | 'ai')}
+          className="flex h-[calc(90vh-140px)] flex-col"
+        >
+          <TabsList className="justify-start gap-2 bg-transparent px-6 pt-4 pb-0">
+            <TabsTrigger
+              value="manual"
+              className="rounded-t-md rounded-b-none border-b-0 px-4 py-2 data-[state=active]:border data-[state=active]:border-b-0 data-[state=active]:bg-background data-[state=active]:shadow-sm"
+            >
+              <CalendarIcon className="mr-2 h-4 w-4" />
+              Quick Entry
+            </TabsTrigger>
+            <TabsTrigger
+              value="ai"
+              className="rounded-t-md rounded-b-none border-b-0 px-4 py-2 data-[state=active]:border data-[state=active]:border-b-0 data-[state=active]:bg-background data-[state=active]:shadow-sm"
+              disabled={!!isEditing}
+            >
+              <Sparkles className="mr-2 h-4 w-4" />
+              AI Generate
+            </TabsTrigger>
+          </TabsList>
+
+          <div className="flex-1 overflow-hidden border-t">
+            {/* Manual Event Creation Tab */}
+            <TabsContent
+              value="manual"
+              className="h-full p-0 focus-visible:outline-none focus-visible:ring-0 data-[state=active]:flex data-[state=active]:flex-col"
+              style={{ display: activeTab === 'manual' ? 'flex' : 'none' }}
+            >
+              <div className="flex flex-1 flex-col overflow-hidden">
+                <ScrollArea className="h-[calc(90vh-250px)] flex-1">
+                  <div className="space-y-3 p-4">
+                    {/* Title */}
+                    <EventTitleInput
+                      value={event.title || ''}
+                      onEnter={handleManualSave}
+                      onChange={(value) => setEvent({ ...event, title: value })}
+                    />
+
+                    <div className="space-y-2">
+                      <div className="flex items-center justify-between">
+                        <label
+                          htmlFor="event-source"
+                          className="font-medium text-sm"
+                        >
+                          Calendar source
+                        </label>
+                        {selectedSourceOption && (
+                          <Badge variant="secondary" className="capitalize">
+                            {selectedSourceOption.provider}
+                          </Badge>
+                        )}
+                      </div>
+                      <Select
+                        value={selectedSourceOption?.id}
+                        onValueChange={(value) => {
+                          setSelectedSourceId(value);
+                          setEvent((previous) => ({
+                            ...previous,
+                            providerColor: undefined,
+                          }));
+                        }}
+                        disabled={sourceOptions.length === 0 || isSaving}
+                      >
+                        <SelectTrigger id="event-source" className="w-full">
+                          <SelectValue placeholder="Choose calendar source" />
+                        </SelectTrigger>
+                        <SelectContent>
+                          {sourceOptions.map((option) => (
+                            <SelectItem key={option.id} value={option.id}>
+                              <div className="flex min-w-0 items-center gap-2">
+                                <span
+                                  className="h-2.5 w-2.5 shrink-0 rounded-full"
+                                  style={{
+                                    backgroundColor: option.color ?? undefined,
+                                  }}
+                                />
+                                <span className="truncate">{option.label}</span>
+                                {option.provider !== 'tuturuuu' &&
+                                  option.accountEmail && (
+                                    <span className="text-muted-foreground text-xs">
+                                      {option.accountEmail}
+                                    </span>
+                                  )}
+                              </div>
+                            </SelectItem>
+                          ))}
+                        </SelectContent>
+                      </Select>
+                    </div>
+
+                    {/* Date and Time Selection */}
+                    <div className="space-y-2">
+                      <div className="flex items-center justify-between">
+                        <h3 className="font-medium text-sm">When</h3>
+                        <EventToggleSwitch
+                          id="all-day"
+                          label="All Day"
+                          checked={isAllDay}
+                          onChange={handleAllDayChange}
+                        />
+                      </div>
+
+                      <div className="grid gap-3">
+                        <EventDateTimePicker
+                          label="Start"
+                          value={new Date(event.start_at || new Date())}
+                          onChange={handleStartDateChange}
+                          showTimeSelect={!isAllDay}
+                          scrollIntoViewOnOpen={true}
+                          pickerButtonRef={startPickerRef}
+                        />
+                        <EventDateTimePicker
+                          label="End"
+                          value={(() => {
+                            // For all-day, display end_at - 1 day
+                            if (isAllDay && event.end_at) {
+                              const end = new Date(event.end_at);
+                              end.setDate(end.getDate() - 1);
+                              return end;
+                            }
+                            return new Date(event.end_at || new Date());
+                          })()}
+                          onChange={handleEndDateChange}
+                          showTimeSelect={!isAllDay}
+                          {...eventEndPickerBounds(
+                            event.start_at || new Date().toISOString(),
+                            tz,
+                            isAllDay
+                          )}
+                          scrollIntoViewOnOpen={true}
+                          pickerButtonRef={endPickerRef}
+                        />
+                      </div>
+                    </div>
+
+                    <Separator />
+
+                    {/* Location and Description */}
+                    <div className="space-y-2">
+                      <EventLocationInput
+                        value={event.location || ''}
+                        onChange={(value) =>
+                          setEvent({ ...event, location: value })
+                        }
+                      />
+                      <EventDescriptionInput
+                        value={event.description || ''}
+                        onChange={(value) =>
+                          setEvent({ ...event, description: value })
+                        }
+                      />
+
+                      {/* Color and Options Row */}
+                      <div className="flex items-end justify-between gap-4">
+                        <ProviderColorPicker
+                          wsId={wsId}
+                          source={selectedSourceOption}
+                          value={event.color || 'BLUE'}
+                          metadata={event.scheduling_metadata}
+                          choice={event.providerColor}
+                          onNativeChange={(value) =>
+                            setEvent({
+                              ...event,
+                              color: value,
+                              providerColor: undefined,
+                            })
+                          }
+                          onProviderChange={(providerColor) =>
+                            setEvent({ ...event, providerColor })
+                          }
+                        />
+                        <button
+                          type="button"
+                          onClick={() => {
+                            const newLocked = !event.locked;
+                            if (isEditing) {
+                              handleLockToggle(newLocked);
+                            } else {
+                              setEvent((prev) => ({
+                                ...prev,
+                                locked: newLocked,
+                              }));
+                            }
+                          }}
+                          className={cn(
+                            'mb-1 flex items-center gap-1.5 rounded-md border px-3 py-1.5 font-medium text-xs transition-colors',
+                            event.locked
+                              ? 'border-dynamic-amber/30 bg-dynamic-amber/10 text-dynamic-amber'
+                              : 'border-border bg-background text-muted-foreground hover:bg-muted'
+                          )}
+                          title={
+                            event.locked
+                              ? 'Locked: Auto-scheduling will not move this event'
+                              : 'Unlocked: Auto-scheduling may move this event'
+                          }
+                        >
+                          {event.locked ? (
+                            <Lock className="h-3.5 w-3.5" />
+                          ) : (
+                            <Unlock className="h-3.5 w-3.5" />
+                          )}
+                          {event.locked ? 'Locked' : 'Unlocked'}
+                        </button>
+                      </div>
+                    </div>
+
+                    {/* Warnings and Errors */}
+                    {(showOverlapWarning || dateError) && (
+                      <>
+                        <Separator />
+                        <div className="space-y-3">
+                          {showOverlapWarning && (
+                            <OverlapWarning
+                              overlappingEvents={overlappingEvents}
+                            />
+                          )}
+                          {dateError && <DateError error={dateError} />}
+                        </div>
+                      </>
+                    )}
+                  </div>
+                </ScrollArea>
+
+                {/* Action Buttons */}
+                <div className="mt-auto border-t p-2">
+                  {draftSave.recoveryNotice}
+                  <div className="flex justify-between">
+                    {isEditing ? (
+                      <Button
+                        variant="destructive"
+                        onClick={handleDelete}
+                        disabled={isSaving || isDeleting}
+                        className="flex items-center gap-2"
+                      >
+                        {isDeleting ? (
+                          <>
+                            <Loader2 className="h-4 w-4 animate-spin" />
+                            <span>Deleting...</span>
+                          </>
+                        ) : (
+                          <>
+                            <Trash2 className="h-4 w-4" />
+                            <span>Delete</span>
+                          </>
+                        )}
+                      </Button>
+                    ) : (
+                      <div />
+                    )}
+
+                    <div className="flex gap-2">
+                      <Button
+                        onClick={handleManualSave}
+                        disabled={isSaving || isDeleting}
+                        className="flex items-center gap-2"
+                      >
+                        {isSaving ? (
+                          <>
+                            <Loader2 className="h-4 w-4 animate-spin" />
+                            <span>Saving...</span>
+                          </>
+                        ) : (
+                          <>
+                            <Check className="h-4 w-4" />
+                            <span>
+                              {isEditing ? 'Save Changes' : 'Create Event'}
+                            </span>
+                          </>
+                        )}
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </TabsContent>
+
+            {/* AI Event Generation Tab */}
+            <TabsContent
+              value="ai"
+              className="h-full p-0 focus-visible:outline-none focus-visible:ring-0 data-[state=active]:flex data-[state=active]:flex-col"
+              style={{ display: activeTab === 'ai' ? 'flex' : 'none' }}
+            >
+              <Form {...aiForm}>
+                <form
+                  onSubmit={aiForm.handleSubmit(handleGenerateEvent)}
+                  className="flex h-full flex-1 flex-col"
+                >
+                  <div className="flex flex-1 flex-col overflow-hidden">
+                    <ScrollArea className="h-[calc(90vh-250px)] flex-1">
+                      <div className="space-y-6 p-6">
+                        <FormField
+                          control={aiForm.control}
+                          name="prompt"
+                          render={({ field }) => (
+                            <FormItem>
+                              <FormLabel className="font-medium text-base">
+                                Describe your event
+                              </FormLabel>
+                              <FormControl>
+                                <div className="relative w-full">
+                                  <AutosizeTextarea
+                                    {...field}
+                                    autoFocus
+                                    placeholder="E.g., Schedule a team meeting next Monday at 2pm for 1 hour..."
+                                    className="min-h-50 w-full resize-none rounded-md border border-input bg-background p-4 pr-20 text-base focus:outline-none focus:ring-1 focus:ring-ring"
+                                    disabled={
+                                      isLoading ||
+                                      isRecording ||
+                                      isProcessingAudio ||
+                                      isProcessingImage
+                                    }
+                                  />
+
+                                  {/* Record Button */}
+                                  <div className="absolute right-2 bottom-2 flex items-center gap-1">
+                                    <Button
+                                      size="xs"
+                                      type="button"
+                                      variant={
+                                        isRecording ? 'destructive' : 'default'
+                                      }
+                                      onClick={
+                                        isRecording
+                                          ? stopRecording
+                                          : startRecording
+                                      }
+                                      disabled={
+                                        isProcessingAudio ||
+                                        isProcessingImage ||
+                                        isLoading
+                                      }
+                                      className="flex items-center rounded-md"
+                                    >
+                                      {isRecording ? (
+                                        <StopCircle className="h-4 w-4" />
+                                      ) : isProcessingAudio ? (
+                                        <Loader2 className="h-4 w-4 animate-spin" />
+                                      ) : (
+                                        <Mic className="h-4 w-4" />
+                                      )}
+                                    </Button>
+
+                                    {/* 📸 Image button */}
+                                    <Button
+                                      size="xs"
+                                      type="button"
+                                      variant="default"
+                                      onClick={triggerImageUpload}
+                                      disabled={
+                                        isRecording ||
+                                        isProcessingAudio ||
+                                        isProcessingImage ||
+                                        isLoading
+                                      }
+                                      className="flex items-center rounded-md"
+                                    >
+                                      {isProcessingImage ? (
+                                        <Loader2 className="h-4 w-4 animate-spin" />
+                                      ) : (
+                                        <ImageIcon className="h-4 w-4" />
+                                      )}
+                                    </Button>
+                                    <input
+                                      type="file"
+                                      ref={fileInputRef}
+                                      accept="image/*"
+                                      onChange={handleUploadImage}
+                                      className="hidden"
+                                    />
+                                  </div>
+                                </div>
+                              </FormControl>
+                              <FormDescription className="flex items-center gap-1 text-xs">
+                                <Info className="h-3 w-3" />
+                                Be as specific as possible for best results
+                              </FormDescription>
+                              <FormMessage />
+                            </FormItem>
+                          )}
+                        />
+                        {isLoading && (
+                          <div className="flex items-center justify-center py-8">
+                            <div className="flex flex-col items-center gap-2">
+                              <Loader2 className="h-8 w-8 animate-spin text-primary" />
+                              <p className="text-muted-foreground text-sm">
+                                Creating your event...
+                              </p>
+                            </div>
+                          </div>
+                        )}
+                        {error && (
+                          <Alert variant="destructive">
+                            <AlertCircle className="h-4 w-4" />
+                            <AlertTitle>Error</AlertTitle>
+                            <AlertDescription>
+                              {error.message ||
+                                'Failed to generate event. Please try again.'}
+                            </AlertDescription>
+                          </Alert>
+                        )}
+                      </div>
+                    </ScrollArea>
+
+                    {/* Action Buttons */}
+                    <div className="mt-auto border-t p-6">
+                      <div className="flex justify-between">
+                        <Button
+                          variant="outline"
+                          onClick={closeModal}
+                          disabled={isLoading}
+                          className="flex items-center gap-2"
+                        >
+                          <X className="h-4 w-4" />
+                          <span>Cancel</span>
+                        </Button>
+                        <Button
+                          type="submit"
+                          disabled={isLoading || !aiForm.watch('prompt')}
+                          className="flex items-center gap-2 bg-primary"
+                        >
+                          {isLoading ? (
+                            <>
+                              <Loader2 className="h-4 w-4 animate-spin" />
+                              <span>Creating...</span>
+                            </>
+                          ) : (
+                            <>
+                              <Sparkles className="h-4 w-4" />
+                              <span>Generate Event</span>
+                            </>
+                          )}
+                        </Button>
+                      </div>
+                    </div>
+                  </div>
+                </form>
+              </Form>
+            </TabsContent>
+
+            {/* Preview Tab */}
+            <TabsContent
+              value="preview"
+              className="h-full p-0 focus-visible:outline-none focus-visible:ring-0 data-[state=active]:flex data-[state=active]:flex-col"
+              style={{ display: activeTab === 'preview' ? 'flex' : 'none' }}
+            >
+              <div className="flex flex-1 flex-col overflow-hidden">
+                <ScrollArea className="h-[calc(90vh-250px)] flex-1">
+                  <div className="space-y-6 p-6">
+                    {/* AI Generated Event Preview */}
+                    <div className="rounded-lg border bg-muted/10 p-4">
+                      <div className="mb-3 flex items-center justify-between">
+                        <h3 className="flex items-center gap-2 font-medium text-base">
+                          <Sparkles className="h-4 w-4 text-primary" />
+                          AI Generated Event
+                          {(generatedEvents?.length || 0) > 1 ? 's' : ''}
+                        </h3>
+                        <div className="flex items-center gap-2">
+                          {(generatedEvents?.length || 0) > 1 && (
+                            <div className="flex items-center gap-1 text-muted-foreground text-xs">
+                              <span>{currentEventIndex + 1}</span>
+                              <span>/</span>
+                              <span>{generatedEvents?.length || 0}</span>
+                            </div>
+                          )}
+                          <Badge variant="outline" className="text-xs">
+                            Preview
+                          </Badge>
+                        </div>
+                      </div>
+
+                      {generatedEvent && (
+                        <div className="space-y-4">
+                          <div className="mt-3 space-y-3 rounded-md border p-3">
+                            <div className="space-y-2">
+                              <h4 className="font-medium text-lg">
+                                {generatedEvent.title}
+                              </h4>
+                              <div className="flex flex-wrap gap-2 text-muted-foreground text-sm">
+                                <div className="flex items-center gap-1">
+                                  <CalendarIcon className="h-3.5 w-3.5" />
+                                  <span>
+                                    {format(
+                                      new Date(generatedEvent.start_at || ''),
+                                      'PPP'
+                                    )}
+                                  </span>
+                                </div>
+                                <div className="flex items-center gap-1">
+                                  <Clock className="h-3.5 w-3.5" />
+                                  <span>
+                                    {format(
+                                      new Date(generatedEvent.start_at || ''),
+                                      settings?.appearance?.timeFormat === '24h'
+                                        ? 'HH:mm'
+                                        : 'h:mm a'
+                                    )}{' '}
+                                    -{' '}
+                                    {format(
+                                      new Date(generatedEvent.end_at || ''),
+                                      settings?.appearance?.timeFormat === '24h'
+                                        ? 'HH:mm'
+                                        : 'h:mm a'
+                                    )}
+                                  </span>
+                                </div>
+                                {generatedEvent.location && (
+                                  <div className="flex items-center gap-1">
+                                    <MapPin className="h-3.5 w-3.5" />
+                                    <button
+                                      type="button"
+                                      onClick={() =>
+                                        openGoogleMaps(
+                                          generatedEvent.location || ''
+                                        )
+                                      }
+                                      className="text-muted-foreground text-sm hover:text-primary hover:underline"
+                                      title="Open in Google Maps"
+                                    >
+                                      {generatedEvent.location}
+                                    </button>
+                                  </div>
+                                )}
+                              </div>
+                            </div>
+
+                            {generatedEvent.description && (
+                              <div className="space-y-1">
+                                <h5 className="font-medium text-sm">
+                                  Description
+                                </h5>
+                                <p className="text-muted-foreground text-sm">
+                                  {generatedEvent.description}
+                                </p>
+                              </div>
+                            )}
+
+                            <Separator />
+
+                            {/* Color indicator and category */}
+                            <div className="flex items-center gap-2">
+                              {generatedEvent.color &&
+                                (() => {
+                                  const { bg, border, text } = getEventStyles(
+                                    generatedEvent.color
+                                  );
+                                  return (
+                                    <div
+                                      className={`flex items-center gap-2 rounded-full border px-2 py-1 text-center ${bg} ${border}`}
+                                    >
+                                      <span
+                                        className={`font-medium text-xs ${text}`}
+                                      >
+                                        {COLOR_OPTIONS.find(
+                                          (c) =>
+                                            c.value ===
+                                            (generatedEvent.color
+                                              ? generatedEvent.color.toUpperCase()
+                                              : 'BLUE')
+                                        )?.name || 'Default'}
+                                      </span>
+                                    </div>
+                                  );
+                                })()}
+                            </div>
+
+                            {/* Event protection status */}
+                            <div className="flex items-center gap-2">
+                              <Unlock className="h-3.5 w-3.5 text-muted-foreground" />
+                              <span className="text-muted-foreground text-xs">
+                                Event will be created unlocked
+                              </span>
+                            </div>
+                          </div>
+                        </div>
+                      )}
+
+                      {/* Navigation buttons for multiple events */}
+                      {(generatedEvents?.length || 0) > 1 && (
+                        <div className="mt-4 flex items-center justify-center gap-2">
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={goToPreviousEvent}
+                            disabled={currentEventIndex === 0}
+                            className="h-8 w-8 p-0"
+                          >
+                            <ChevronLeft className="h-4 w-4" />
+                          </Button>
+                          <Button
+                            variant="outline"
+                            size="sm"
+                            onClick={goToNextEvent}
+                            disabled={
+                              currentEventIndex ===
+                              (generatedEvents?.length || 0) - 1
+                            }
+                            className="h-8 w-8 p-0"
+                          >
+                            <ChevronRight className="h-4 w-4" />
+                          </Button>
+                        </div>
+                      )}
+                    </div>
+
+                    {/* AI Insights and Suggestions */}
+                    {aiSuggestions.length > 0 && (
+                      <div className="rounded-lg border bg-muted/10 p-4">
+                        <h3 className="mb-3 flex items-center gap-2 font-medium text-sm">
+                          <Brain className="h-4 w-4 text-primary" />
+                          AI Insights & Suggestions
+                        </h3>
+                        <ul className="space-y-2">
+                          {aiSuggestions.map((suggestion) => (
+                            <li
+                              key={suggestion}
+                              className="flex items-start gap-2 text-sm"
+                            >
+                              <div className="mt-0.5 text-primary">•</div>
+                              <span>{suggestion}</span>
+                            </li>
+                          ))}
+                        </ul>
+                      </div>
+                    )}
+
+                    {/* Warnings and Errors */}
+                    {showOverlapWarning && (
+                      <OverlapWarning overlappingEvents={overlappingEvents} />
+                    )}
+                  </div>
+                </ScrollArea>
+
+                {/* Action Buttons */}
+                <div className="mt-auto border-t p-6">
+                  <div className="flex justify-between">
+                    <div className="flex gap-2">
+                      <Button
+                        variant="outline"
+                        onClick={() => setActiveTab('ai')}
+                        className="flex items-center gap-2"
+                      >
+                        <ChevronLeft className="h-4 w-4" />
+                        <span>Back</span>
+                      </Button>
+                      <Button
+                        variant="outline"
+                        onClick={() => {
+                          // Transfer AI generated event to manual form
+                          if (generatedEvent) {
+                            setEvent({
+                              ...generatedEvent,
+                              id: undefined, // Remove ID to create a new event
+                            });
+                            setActiveTab('manual');
+                          }
+                        }}
+                        className="flex items-center gap-2"
+                      >
+                        <FileText className="h-4 w-4" />
+                        <span>Edit Details</span>
+                      </Button>
+                    </div>
+                    <Button
+                      onClick={handleAISave}
+                      disabled={
+                        isSaving || (generatedEvents?.length || 0) === 0
+                      }
+                      className="flex items-center gap-2"
+                    >
+                      {isSaving ? (
+                        <>
+                          <Loader2 className="h-4 w-4 animate-spin" />
+                          <span>Saving...</span>
+                        </>
+                      ) : (
+                        <>
+                          <Check className="h-4 w-4" />
+                          <span>
+                            Save{' '}
+                            {(generatedEvents?.length || 0) > 1
+                              ? 'All Events'
+                              : 'Event'}
+                          </span>
+                        </>
+                      )}
+                    </Button>
+                  </div>
+                </div>
+              </div>
+            </TabsContent>
+          </div>
+        </Tabs>
+      </DialogContent>
+    </Dialog>
+  );
+}