@tuturuuu/ui 0.17.0 → 0.18.0

package/src/components/ui/calendar-app/components/smart-schedule-preview-panel.tsx

@@ -1,941 +0,0 @@
-'use client';
-
-import { useQuery, useQueryClient } from '@tanstack/react-query';
-import {
-  AlertTriangle,
-  Bug,
-  Check,
-  ChevronLeft,
-  ChevronRight,
-  Info,
-  Loader2,
-  Pause,
-  Play,
-  RotateCcw,
-  Sparkles,
-  X,
-} from '@tuturuuu/icons';
-import {
-  applyWorkspaceCalendarSchedule,
-  previewWorkspaceCalendarSchedule,
-} from '@tuturuuu/internal-api';
-import type { CalendarEvent } from '@tuturuuu/types/primitives/calendar-event';
-import { Button } from '@tuturuuu/ui/button';
-import { useCalendar } from '@tuturuuu/ui/hooks/use-calendar';
-import { useCalendarSync } from '@tuturuuu/ui/hooks/use-calendar-sync';
-import { Progress } from '@tuturuuu/ui/progress';
-import { toast } from '@tuturuuu/ui/sonner';
-import { Switch } from '@tuturuuu/ui/switch';
-import { cn } from '@tuturuuu/utils/format';
-import { AnimatePresence, motion } from 'framer-motion';
-import { useRouter } from 'next/navigation';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import {
-  invalidatePlanningQueries,
-  patchCalendarEvents,
-} from '../../../../lib/calendar/planning-query-client';
-import type { PreviewEvent } from '../../../../lib/calendar/preview-engine';
-
-interface SmartSchedulePreviewPanelProps {
-  wsId: string;
-  isOpen: boolean;
-  onClose: () => void;
-  mode: 'instant' | 'animated';
-}
-
-interface SlotDebugInfo {
-  start: string;
-  end: string;
-  maxAvailable: number;
-  dayOfWeek: string;
-}
-
-interface PreviewData {
-  events: PreviewEvent[];
-  steps: Array<{
-    step: number;
-    type: string;
-    action: string;
-    description: string;
-    event?: PreviewEvent;
-    timestamp: number;
-    debug?: {
-      slotsAvailable?: number;
-      slotsConsidered?: SlotDebugInfo[];
-      slotChosen?: SlotDebugInfo;
-      reason?: string;
-      remainingMinutes?: number;
-      dayOffset?: number;
-    };
-  }>;
-  summary: {
-    totalEvents: number;
-    habitsScheduled: number;
-    tasksScheduled: number;
-    partiallyScheduledTasks: number;
-    unscheduledTasks: number;
-  };
-  warnings: string[];
-  tasks?: {
-    details: Array<{
-      taskId: string;
-      taskName: string;
-      scheduledMinutes: number;
-      totalMinutesRequired: number;
-      remainingMinutes: number;
-      warning?: string;
-      warningLevel?: 'info' | 'warning' | 'error';
-    }>;
-  };
-  habits?: { total: number };
-  debug?: {
-    habitsWithAutoSchedule: number;
-    tasksWithAutoSchedule: number;
-    existingEventsCount: number;
-    lockedEventsCount?: number;
-    unlockedEventsCount?: number;
-    movableFutureUnlockedHabitEventsCount?: number;
-    movableFutureUnlockedTaskEventsCount?: number;
-    hourSettings?: {
-      working_hours?: { start: string; end: string } | null;
-      personal_hours?: { start: string; end: string } | null;
-      meeting_hours?: { start: string; end: string } | null;
-    };
-    configuredTimezone?: string;
-    resolvedTimezone?: string;
-    habitDetails?: Array<{
-      id: string;
-      name: string;
-      frequency: string;
-      duration_minutes: number;
-      is_splittable?: boolean;
-      min_instances_per_day?: number | null;
-      ideal_instances_per_day?: number | null;
-      max_instances_per_day?: number | null;
-      calendar_hours: string;
-      priority: string;
-      base_priority?: string;
-      effective_priority?: string;
-      auto_schedule: boolean;
-      is_visible_in_calendar: boolean;
-      ideal_time?: string | null;
-      time_preference?: string | null;
-    }>;
-    taskDetails?: Array<{
-      id: string;
-      name: string;
-      total_duration: number;
-      calendar_hours: string;
-      priority: string;
-      base_priority?: string;
-      effective_priority?: string;
-      deadline_urgency_score?: number;
-      auto_schedule: boolean;
-      is_splittable: boolean;
-      start_date?: string | null;
-      end_date?: string | null;
-    }>;
-    lockedEventsBlocking?: Array<{
-      id: string;
-      title: string;
-      start_at: string;
-      end_at: string;
-    }>;
-  };
-}
-
-export function SmartSchedulePreviewPanel({
-  wsId,
-  isOpen,
-  onClose,
-  mode: initialMode,
-}: SmartSchedulePreviewPanelProps) {
-  const {
-    setPreviewEvents,
-    clearPreviewEvents,
-    clearAffectedEventIds,
-    setAffectedEventIds,
-    setHideNonPreviewEvents,
-  } = useCalendar();
-  const { patchVisibleEvents } = useCalendarSync();
-  const queryClient = useQueryClient();
-  const router = useRouter();
-
-  const [isApplying, setIsApplying] = useState(false);
-  const [mode, setMode] = useState<'instant' | 'animated'>(initialMode);
-
-  // Animation state
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [currentStep, setCurrentStep] = useState(0);
-  const [animationSpeed] = useState(600);
-  const animationRef = useRef<NodeJS.Timeout | null>(null);
-
-  // Toggle to hide existing events during preview (default ON for cleaner view)
-  const [hideExistingEvents, setHideExistingEvents] = useState(true);
-
-  const convertToCalendarEvents = useCallback(
-    (events: PreviewEvent[]): CalendarEvent[] => {
-      return events.map((e) => ({
-        id: e.id,
-        title: e.title,
-        start_at: e.start_at,
-        end_at: e.end_at,
-        color: e.color as any,
-        _isPreview: true,
-        _isReused: e.is_reused, // Events at same position as existing
-        _previewStep: e.step,
-        _previewType: e.type,
-        _previewSourceId: e.source_id,
-      }));
-    },
-    []
-  );
-
-  const clientTimezone = useMemo(() => {
-    try {
-      return Intl.DateTimeFormat().resolvedOptions().timeZone;
-    } catch {
-      return 'UTC';
-    }
-  }, []);
-
-  const previewQuery = useQuery({
-    queryKey: ['smart-schedule-preview', wsId, 30, clientTimezone],
-    enabled: isOpen,
-    queryFn: async () => {
-      return previewWorkspaceCalendarSchedule<{
-        preview: PreviewData;
-        tasks?: PreviewData['tasks'];
-        habits?: PreviewData['habits'];
-        debug?: PreviewData['debug'];
-        affectedEventIds?: string[];
-      }>(
-        wsId,
-        {
-          windowDays: 30,
-          clientTimezone,
-        },
-        {
-          fetch: (input, init) => fetch(input, { ...init, cache: 'no-store' }),
-        }
-      );
-    },
-    staleTime: 0,
-    refetchOnMount: 'always',
-    refetchOnWindowFocus: false,
-  });
-
-  const previewData: PreviewData | null = useMemo(() => {
-    if (!previewQuery.data) return null;
-    return {
-      ...previewQuery.data.preview,
-      tasks: previewQuery.data.tasks,
-      habits: previewQuery.data.habits,
-      debug: previewQuery.data.debug,
-    };
-  }, [previewQuery.data]);
-
-  // Reset mode when panel opens
-  useEffect(() => {
-    if (isOpen) {
-      setMode(initialMode);
-    }
-  }, [isOpen, initialMode]);
-
-  // Clear preview when panel closes
-  useEffect(() => {
-    if (!isOpen) {
-      clearPreviewEvents();
-      clearAffectedEventIds();
-      setHideNonPreviewEvents(false);
-      setCurrentStep(0);
-      setIsPlaying(false);
-      if (animationRef.current) {
-        clearTimeout(animationRef.current);
-      }
-      queryClient.removeQueries({ queryKey: ['smart-schedule-preview', wsId] });
-    }
-  }, [
-    isOpen,
-    clearPreviewEvents,
-    clearAffectedEventIds,
-    setHideNonPreviewEvents,
-    queryClient,
-    wsId,
-  ]);
-
-  // Close panel on preview errors
-  useEffect(() => {
-    if (!isOpen) return;
-    if (!previewQuery.isError) return;
-    toast.error(
-      previewQuery.error instanceof Error
-        ? previewQuery.error.message
-        : 'Failed to generate preview'
-    );
-    onClose();
-  }, [isOpen, previewQuery.isError, previewQuery.error, onClose]);
-
-  // Update calendar preview events when mode/step changes
-  useEffect(() => {
-    if (!previewData) {
-      clearAffectedEventIds();
-      setHideNonPreviewEvents(false);
-      return;
-    }
-
-    // Set affected event IDs so events that will be modified are dimmed
-    const affectedIds = previewQuery.data?.affectedEventIds || [];
-    setAffectedEventIds(affectedIds);
-
-    // Hide non-preview events if user toggled the option
-    setHideNonPreviewEvents(hideExistingEvents);
-
-    if (mode === 'instant') {
-      const calendarEvents = convertToCalendarEvents(previewData.events);
-      setPreviewEvents(calendarEvents);
-    } else {
-      const stepsWithEvents = previewData.steps.filter((s) => s.event);
-      const eventsUpToStep = stepsWithEvents
-        .slice(0, currentStep + 1)
-        .map((s) => s.event!)
-        .filter(Boolean);
-      const calendarEvents = convertToCalendarEvents(eventsUpToStep);
-      setPreviewEvents(calendarEvents);
-    }
-  }, [
-    previewData,
-    previewQuery.data?.affectedEventIds,
-    mode,
-    currentStep,
-    hideExistingEvents,
-    setPreviewEvents,
-    setAffectedEventIds,
-    clearAffectedEventIds,
-    setHideNonPreviewEvents,
-    convertToCalendarEvents,
-  ]);
-
-  // Auto-start animation in animated mode once we have results
-  useEffect(() => {
-    if (!isOpen) return;
-    if (initialMode !== 'animated') return;
-    if (!previewData?.events?.length) return;
-    setIsPlaying(true);
-  }, [isOpen, initialMode, previewData?.events?.length]);
-
-  // Animation playback
-  useEffect(() => {
-    if (!isPlaying || mode !== 'animated' || !previewData) return;
-
-    const stepsWithEvents = previewData.steps.filter((s) => s.event);
-    if (currentStep >= stepsWithEvents.length - 1) {
-      setIsPlaying(false);
-      return;
-    }
-
-    animationRef.current = setTimeout(() => {
-      setCurrentStep((prev) => prev + 1);
-    }, animationSpeed);
-
-    return () => {
-      if (animationRef.current) {
-        clearTimeout(animationRef.current);
-      }
-    };
-  }, [isPlaying, currentStep, mode, previewData, animationSpeed]);
-
-  const handleApply = async () => {
-    if (!previewData?.events.length) {
-      toast.error('No events to apply');
-      return;
-    }
-
-    setIsApplying(true);
-    toast.loading('Applying schedule...', { id: 'apply-schedule' });
-
-    try {
-      const result = await applyWorkspaceCalendarSchedule<{
-        summary: {
-          eventsTotal: number;
-          eventsCreated: number;
-          eventsUpdated: number;
-        };
-        events?: Array<{
-          id: string;
-          title: string;
-          start_at: string;
-          end_at: string;
-          color?: string | null;
-          locked?: boolean;
-        }>;
-        deletedEventIds?: string[];
-      }>(
-        wsId,
-        {
-          windowDays: 30,
-          forceReschedule: true,
-          previewEvents: previewData.events,
-          clientTimezone,
-        },
-        {
-          fetch: (input, init) => fetch(input, { ...init, cache: 'no-store' }),
-        }
-      );
-
-      // Clear all preview state FIRST before refreshing
-      clearPreviewEvents();
-      clearAffectedEventIds();
-      setHideNonPreviewEvents(false);
-      setCurrentStep(0);
-      setIsPlaying(false);
-      queryClient.removeQueries({ queryKey: ['smart-schedule-preview', wsId] });
-      const optimisticEvents = (result.events ?? []).map((event) => ({
-        id: event.id,
-        title: event.title,
-        start_at: event.start_at,
-        end_at: event.end_at,
-        color: event.color ?? 'BLUE',
-        locked: event.locked ?? false,
-      }));
-      patchVisibleEvents(optimisticEvents, {
-        removeIds: result.deletedEventIds ?? [],
-      });
-      patchCalendarEvents(queryClient as any, wsId, optimisticEvents, {
-        removeIds: result.deletedEventIds ?? [],
-      });
-      await invalidatePlanningQueries(queryClient as any, wsId, {
-        includeCalendarEvents: false,
-      });
-
-      // Close panel immediately so user sees actual calendar
-      onClose();
-
-      // Also refresh SSR data for sidebar task durations
-      router.refresh();
-
-      toast.success(
-        `Scheduled ${result.summary.eventsTotal} events (${result.summary.eventsCreated} new, ${result.summary.eventsUpdated} updated)`,
-        { id: 'apply-schedule' }
-      );
-    } catch (error) {
-      toast.error(
-        error instanceof Error ? error.message : 'Scheduling failed',
-        { id: 'apply-schedule' }
-      );
-    } finally {
-      setIsApplying(false);
-    }
-  };
-
-  const handleDiscard = () => {
-    clearPreviewEvents();
-    clearAffectedEventIds();
-    setHideNonPreviewEvents(false);
-    onClose();
-  };
-
-  const togglePlayPause = () => {
-    if (isPlaying) {
-      setIsPlaying(false);
-    } else {
-      const stepsWithEvents = previewData?.steps.filter((s) => s.event) || [];
-      if (currentStep >= stepsWithEvents.length - 1) {
-        setCurrentStep(0);
-      }
-      setIsPlaying(true);
-    }
-  };
-
-  const stepForward = () => {
-    const stepsWithEvents = previewData?.steps.filter((s) => s.event) || [];
-    if (currentStep < stepsWithEvents.length - 1) {
-      setCurrentStep((prev) => prev + 1);
-    }
-  };
-
-  const stepBackward = () => {
-    if (currentStep > 0) {
-      setCurrentStep((prev) => prev - 1);
-    }
-  };
-
-  const resetAnimation = () => {
-    setCurrentStep(0);
-    setIsPlaying(false);
-  };
-
-  const downloadDebugLog = () => {
-    if (!previewData) return;
-
-    const eventsLog = previewData.events
-      .map(
-        (e, i) =>
-          `${i + 1}. [${e.type}] "${e.title}" - ${new Date(e.start_at).toLocaleString()} to ${new Date(e.end_at).toLocaleTimeString()}`
-      )
-      .join('\n');
-
-    const stepsLog = previewData.steps
-      .map((s) => {
-        let stepLine = `[Step ${s.step}] ${s.type}: ${s.action} - ${s.description}`;
-        // Add debug context if available
-        if (s.debug) {
-          if (s.debug.slotsAvailable !== undefined) {
-            stepLine += `\n      Slots available: ${s.debug.slotsAvailable}`;
-          }
-          if (s.debug.reason) {
-            stepLine += `\n      Reason: ${s.debug.reason}`;
-          }
-          if (s.debug.slotChosen) {
-            const slot = s.debug.slotChosen;
-            stepLine += `\n      Slot chosen: ${slot.dayOfWeek} ${new Date(slot.start).toLocaleTimeString()}-${new Date(slot.end).toLocaleTimeString()} (${slot.maxAvailable}min avail)`;
-          }
-          if (s.debug.slotsConsidered && s.debug.slotsConsidered.length > 0) {
-            stepLine += `\n      Slots considered: ${s.debug.slotsConsidered
-              .map(
-                (slot) =>
-                  `${slot.dayOfWeek} ${new Date(slot.start).toLocaleTimeString()}-${new Date(slot.end).toLocaleTimeString()} (${slot.maxAvailable}min)`
-              )
-              .join(', ')}`;
-          }
-          if (s.debug.remainingMinutes !== undefined) {
-            stepLine += `\n      Remaining after this: ${s.debug.remainingMinutes}min`;
-          }
-          if (s.debug.dayOffset !== undefined) {
-            stepLine += `\n      Day offset: ${s.debug.dayOffset}`;
-          }
-        }
-        return stepLine;
-      })
-      .join('\n\n');
-
-    const scheduledTasksLog =
-      previewData.tasks?.details
-        ?.map(
-          (t) =>
-            `- "${t.taskName}" (ID: ${t.taskId}): ${t.scheduledMinutes}/${t.totalMinutesRequired} mins scheduled` +
-            (t.remainingMinutes > 0
-              ? ` (${t.remainingMinutes} mins remaining)`
-              : '') +
-            (t.warning
-              ? ` [${t.warningLevel?.toUpperCase()}] ${t.warning}`
-              : '')
-        )
-        .join('\n') || 'None';
-
-    const hourSettings = previewData.debug?.hourSettings;
-    // hourSettings values can be arrays like [{ start: '07:00', end: '23:00' }] or single objects
-    const formatHours = (
-      hours:
-        | Array<{ start: string; end: string }>
-        | { start: string; end: string }
-        | null
-        | undefined
-    ) => {
-      if (!hours) return 'Not set';
-      // Handle single object
-      if (!Array.isArray(hours)) {
-        return `${hours.start} - ${hours.end}`;
-      }
-      // Handle array
-      if (hours.length === 0) return 'Not set';
-      return hours.map((h) => `${h.start} - ${h.end}`).join(', ');
-    };
-    const hourSettingsLog = hourSettings
-      ? `Working Hours: ${formatHours(hourSettings.working_hours)}
-Personal Hours: ${formatHours(hourSettings.personal_hours)}
-Meeting Hours: ${formatHours(hourSettings.meeting_hours)}`
-      : 'Not configured (using defaults: 07:00-23:00)';
-
-    // Format habit details
-    const habitDetailsLog =
-      previewData.debug?.habitDetails
-        ?.map(
-          (h) =>
-            `- "${h.name}" (ID: ${h.id})
-    Frequency: ${h.frequency}
-    Duration: ${h.duration_minutes} mins
-    Splittable: ${h.is_splittable ? 'yes' : 'no'}
-    Min/Ideal/Max instances: ${h.min_instances_per_day || 1}/${h.ideal_instances_per_day || 1}/${h.max_instances_per_day || 1}
-    Calendar: ${h.calendar_hours}
-    Priority: ${h.priority}
-    Effective priority: ${h.effective_priority || h.priority}
-    Auto-schedule: ${h.auto_schedule}
-    Visible: ${h.is_visible_in_calendar}
-    Ideal time: ${h.ideal_time || 'Any'}
-    Time preference: ${h.time_preference || 'Any'}`
-        )
-        .join('\n\n') || 'None';
-
-    // Format task details
-    const taskDetailsLog =
-      previewData.debug?.taskDetails
-        ?.map(
-          (t) =>
-            `- "${t.name}" (ID: ${t.id})
-    Duration: ${t.total_duration}h (${(t.total_duration * 60).toFixed(0)} mins)
-    Calendar: ${t.calendar_hours}
-    Priority: ${t.priority}
-    Effective priority: ${t.effective_priority || t.priority}
-    Deadline urgency score: ${t.deadline_urgency_score?.toFixed(3) || '0.000'}
-    Auto-schedule: ${t.auto_schedule}
-    Splittable: ${t.is_splittable}
-    Start date: ${t.start_date || 'Not set'}
-    End date: ${t.end_date || 'Not set'}`
-        )
-        .join('\n\n') || 'None';
-
-    const logContent = `Smart Schedule Preview Debug Log
-Generated: ${new Date().toISOString()}
-Workspace: ${wsId}
-
-=== SUMMARY ===
-Total Events: ${previewData.summary.totalEvents}
-Habits: ${previewData.summary.habitsScheduled}
-Tasks: ${previewData.summary.tasksScheduled}
-Partial: ${previewData.summary.partiallyScheduledTasks}
-Unscheduled: ${previewData.summary.unscheduledTasks}
-
-=== CONFIGURATION ===
-Configured Timezone: ${previewData.debug?.configuredTimezone ?? 'auto'}
-Resolved Timezone: ${previewData.debug?.resolvedTimezone ?? 'Unknown'}
-${hourSettingsLog}
-
-=== INPUT COUNTS ===
-Auto-schedule habits: ${previewData.debug?.habitsWithAutoSchedule ?? 'N/A'}
-Auto-schedule tasks: ${previewData.debug?.tasksWithAutoSchedule ?? 'N/A'}
-Existing events: ${previewData.debug?.existingEventsCount ?? 'N/A'}
-  - Locked: ${previewData.debug?.lockedEventsCount ?? 'N/A'}
-  - Unlocked: ${previewData.debug?.unlockedEventsCount ?? 'N/A'}
-  - Movable habit events: ${previewData.debug?.movableFutureUnlockedHabitEventsCount ?? 'N/A'}
-  - Movable task events: ${previewData.debug?.movableFutureUnlockedTaskEventsCount ?? 'N/A'}
-
-=== LOCKED EVENTS (Blocking) ===
-${
-  previewData.debug?.lockedEventsBlocking
-    ?.map(
-      (e) =>
-        `- "${e.title}" (${e.id.substring(0, 8)}...): ${new Date(e.start_at).toLocaleString()} to ${new Date(e.end_at).toLocaleTimeString()}`
-    )
-    .join('\n') || 'None (scheduling has full freedom)'
-}
-
-=== HABIT DETAILS (Input) ===
-${habitDetailsLog}
-
-=== TASK DETAILS (Input) ===
-${taskDetailsLog}
-
-=== SCHEDULING RESULTS ===
-${scheduledTasksLog}
-
-=== EVENTS CREATED ===
-${eventsLog || 'None'}
-
-=== STEPS ===
-${stepsLog || 'None'}
-
-=== WARNINGS ===
-${previewData.warnings.join('\n') || 'None'}
-`;
-
-    const blob = new Blob([logContent], { type: 'text/plain' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = `schedule-debug-${Date.now()}.txt`;
-    a.click();
-    URL.revokeObjectURL(url);
-    toast.success('Debug log downloaded');
-  };
-
-  const stepsWithEvents = previewData?.steps.filter((s) => s.event) || [];
-  const totalSteps = stepsWithEvents.length;
-  const currentStepData = stepsWithEvents[currentStep];
-
-  if (!isOpen) return null;
-
-  return (
-    <AnimatePresence>
-      <motion.div
-        initial={{ opacity: 0, y: 20, scale: 0.95 }}
-        animate={{ opacity: 1, y: 0, scale: 1 }}
-        exit={{ opacity: 0, y: 20, scale: 0.95 }}
-        transition={{ duration: 0.2 }}
-        className={cn(
-          'fixed z-50 rounded-xl border bg-background/95 shadow-2xl backdrop-blur-sm',
-          // Responsive positioning
-          'right-4 bottom-4 left-4 sm:right-6 sm:bottom-6 sm:left-auto',
-          'sm:w-95 sm:max-w-[calc(100vw-3rem)]'
-        )}
-      >
-        {/* Header */}
-        <div className="flex items-center justify-between border-b px-4 py-3">
-          <div className="flex items-center gap-2">
-            <Sparkles className="h-4 w-4 text-dynamic-blue" />
-            <span className="font-medium">Smart Schedule</span>
-          </div>
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-7 w-7"
-            onClick={handleDiscard}
-          >
-            <X className="h-4 w-4" />
-          </Button>
-        </div>
-
-        {/* Content */}
-        <div className="p-4">
-          {previewQuery.isFetching ? (
-            <div className="flex flex-col items-center py-8">
-              <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
-              <p className="mt-3 text-muted-foreground text-sm">
-                Analyzing calendar...
-              </p>
-            </div>
-          ) : previewData ? (
-            <div className="space-y-4">
-              {/* Mode Toggle */}
-              <div className="flex gap-1 rounded-lg bg-muted p-1">
-                <button
-                  type="button"
-                  onClick={() => {
-                    setMode('instant');
-                    setIsPlaying(false);
-                  }}
-                  className={cn(
-                    'flex-1 rounded-md px-3 py-1.5 font-medium text-sm transition-colors',
-                    mode === 'instant'
-                      ? 'bg-background text-foreground shadow-sm'
-                      : 'text-muted-foreground hover:text-foreground'
-                  )}
-                >
-                  Instant
-                </button>
-                <button
-                  type="button"
-                  onClick={() => setMode('animated')}
-                  className={cn(
-                    'flex-1 rounded-md px-3 py-1.5 font-medium text-sm transition-colors',
-                    mode === 'animated'
-                      ? 'bg-background text-foreground shadow-sm'
-                      : 'text-muted-foreground hover:text-foreground'
-                  )}
-                >
-                  Animated
-                </button>
-              </div>
-
-              {/* Toggle to hide existing events */}
-              <div className="flex items-center justify-between rounded-lg bg-muted/50 px-3 py-2">
-                <span className="text-muted-foreground text-sm">
-                  Hide existing events
-                </span>
-                <Switch
-                  checked={hideExistingEvents}
-                  onCheckedChange={setHideExistingEvents}
-                />
-              </div>
-
-              {/* Stats */}
-              <div className="grid grid-cols-4 gap-2 text-center">
-                <div className="rounded-lg bg-muted/50 p-2">
-                  <p className="font-bold text-dynamic-blue text-lg">
-                    {previewData.summary.totalEvents}
-                  </p>
-                  <p className="text-[10px] text-muted-foreground">Events</p>
-                </div>
-                <div className="rounded-lg bg-muted/50 p-2">
-                  <p className="font-bold text-dynamic-green text-lg">
-                    {previewData.summary.habitsScheduled}
-                  </p>
-                  <p className="text-[10px] text-muted-foreground">Habits</p>
-                </div>
-                <div className="rounded-lg bg-muted/50 p-2">
-                  <p className="font-bold text-dynamic-purple text-lg">
-                    {previewData.summary.tasksScheduled}
-                  </p>
-                  <p className="text-[10px] text-muted-foreground">Tasks</p>
-                </div>
-                <div className="rounded-lg bg-muted/50 p-2">
-                  <p
-                    className={cn(
-                      'font-bold text-lg',
-                      previewData.summary.partiallyScheduledTasks > 0
-                        ? 'text-dynamic-orange'
-                        : 'text-muted-foreground'
-                    )}
-                  >
-                    {previewData.summary.partiallyScheduledTasks}
-                  </p>
-                  <p className="text-[10px] text-muted-foreground">Partial</p>
-                </div>
-              </div>
-
-              {/* Empty State */}
-              {previewData.summary.totalEvents === 0 && (
-                <div className="rounded-lg border border-dashed p-4 text-center">
-                  <Info className="mx-auto h-8 w-8 text-muted-foreground/50" />
-                  <p className="mt-2 font-medium text-sm">
-                    No events to schedule
-                  </p>
-                  <p className="mt-1 text-muted-foreground text-xs">
-                    {previewData.debug?.habitsWithAutoSchedule === 0 &&
-                    previewData.debug?.tasksWithAutoSchedule === 0
-                      ? 'Enable auto-schedule on tasks or habits'
-                      : 'All items are already scheduled'}
-                  </p>
-                </div>
-              )}
-
-              {/* Animation Controls */}
-              {mode === 'animated' && totalSteps > 0 && (
-                <div className="space-y-3">
-                  <div className="flex items-center justify-between gap-2">
-                    <div className="flex items-center gap-1">
-                      <Button
-                        variant="outline"
-                        size="icon"
-                        className="h-8 w-8"
-                        onClick={resetAnimation}
-                      >
-                        <RotateCcw className="h-3.5 w-3.5" />
-                      </Button>
-                      <Button
-                        variant="outline"
-                        size="icon"
-                        className="h-8 w-8"
-                        onClick={stepBackward}
-                        disabled={currentStep === 0}
-                      >
-                        <ChevronLeft className="h-4 w-4" />
-                      </Button>
-                      <Button
-                        variant="default"
-                        size="icon"
-                        className="h-8 w-8"
-                        onClick={togglePlayPause}
-                      >
-                        {isPlaying ? (
-                          <Pause className="h-3.5 w-3.5" />
-                        ) : (
-                          <Play className="h-3.5 w-3.5" />
-                        )}
-                      </Button>
-                      <Button
-                        variant="outline"
-                        size="icon"
-                        className="h-8 w-8"
-                        onClick={stepForward}
-                        disabled={currentStep >= totalSteps - 1}
-                      >
-                        <ChevronRight className="h-4 w-4" />
-                      </Button>
-                    </div>
-                    <span className="text-muted-foreground text-xs">
-                      {currentStep + 1} / {totalSteps}
-                    </span>
-                  </div>
-
-                  <Progress
-                    value={((currentStep + 1) / Math.max(totalSteps, 1)) * 100}
-                    className="h-1.5"
-                  />
-
-                  {/* Current Step Info */}
-                  {currentStepData && (
-                    <motion.div
-                      key={currentStep}
-                      initial={{ opacity: 0, x: 10 }}
-                      animate={{ opacity: 1, x: 0 }}
-                      className="rounded-lg bg-muted/50 p-3"
-                    >
-                      <p className="line-clamp-2 font-medium text-sm">
-                        {currentStepData.description}
-                      </p>
-                      {currentStepData.event && (
-                        <p className="mt-1 text-muted-foreground text-xs">
-                          {new Date(
-                            currentStepData.event.start_at
-                          ).toLocaleTimeString([], {
-                            hour: '2-digit',
-                            minute: '2-digit',
-                          })}
-                          {' - '}
-                          {new Date(
-                            currentStepData.event.end_at
-                          ).toLocaleTimeString([], {
-                            hour: '2-digit',
-                            minute: '2-digit',
-                          })}
-                        </p>
-                      )}
-                    </motion.div>
-                  )}
-                </div>
-              )}
-
-              {/* Warnings */}
-              {previewData.warnings.length > 0 && (
-                <div className="flex items-start gap-2 rounded-lg bg-dynamic-orange/10 p-3 text-xs">
-                  <AlertTriangle className="h-4 w-4 shrink-0 text-dynamic-orange" />
-                  <div>
-                    <p className="font-medium text-dynamic-orange">
-                      {previewData.warnings.length} warning(s)
-                    </p>
-                    <p className="mt-0.5 line-clamp-2 text-muted-foreground">
-                      {previewData.warnings[0]}
-                    </p>
-                  </div>
-                </div>
-              )}
-            </div>
-          ) : null}
-        </div>
-
-        {/* Footer */}
-        {previewData && (
-          <div className="flex items-center justify-between border-t px-4 py-3">
-            <Button
-              variant="ghost"
-              size="sm"
-              className="h-8 text-xs"
-              onClick={downloadDebugLog}
-            >
-              <Bug className="mr-1 h-3 w-3" />
-              Debug
-            </Button>
-            <div className="flex gap-2">
-              <Button
-                variant="outline"
-                size="sm"
-                className="h-8"
-                onClick={handleDiscard}
-              >
-                Discard
-              </Button>
-              <Button
-                size="sm"
-                className="h-8"
-                onClick={handleApply}
-                disabled={
-                  isApplying ||
-                  previewQuery.isFetching ||
-                  previewData.summary.totalEvents === 0
-                }
-              >
-                {isApplying ? (
-                  <Loader2 className="mr-1.5 h-3.5 w-3.5 animate-spin" />
-                ) : (
-                  <Check className="mr-1.5 h-3.5 w-3.5" />
-                )}
-                Apply
-              </Button>
-            </div>
-          </div>
-        )}
-      </motion.div>
-    </AnimatePresence>
-  );
-}