@tuturuuu/ui 0.0.4 → 0.1.0

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

@@ -0,0 +1,845 @@
+'use client';
+
+import { useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  AlertTriangle,
+  Bug,
+  CheckCircle,
+  ChevronLeft,
+  ChevronRight,
+  Eye,
+  Info,
+  Loader2,
+  Pause,
+  Play,
+  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 {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from '@tuturuuu/ui/dialog';
+import { useCalendar } from '@tuturuuu/ui/hooks/use-calendar';
+import { useCalendarSync } from '@tuturuuu/ui/hooks/use-calendar-sync';
+import { Progress } from '@tuturuuu/ui/progress';
+import { ScrollArea } from '@tuturuuu/ui/scroll-area';
+import { toast } from '@tuturuuu/ui/sonner';
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@tuturuuu/ui/tabs';
+import { cn } from '@tuturuuu/utils/format';
+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 SmartSchedulePreviewDialogProps {
+  wsId: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  initialMode?: 'instant' | 'animated';
+}
+
+interface PreviewData {
+  events: PreviewEvent[];
+  steps: Array<{
+    step: number;
+    type: string;
+    action: string;
+    description: string;
+    event?: PreviewEvent;
+    timestamp: 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;
+  };
+}
+
+export function SmartSchedulePreviewDialog({
+  wsId,
+  open,
+  onOpenChange,
+  initialMode = 'instant',
+}: SmartSchedulePreviewDialogProps) {
+  const { setPreviewEvents, clearPreviewEvents } = useCalendar();
+  const { patchVisibleEvents } = useCalendarSync();
+  const queryClient = useQueryClient();
+
+  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 animationRef = useRef<NodeJS.Timeout | null>(null);
+
+  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,
+        _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-dialog', wsId, 30, clientTimezone],
+    enabled: open,
+    queryFn: async () => {
+      return previewWorkspaceCalendarSchedule<{
+        preview: PreviewData;
+        lockedEvents?: Array<{
+          id: string;
+          title: string;
+          start_at: string;
+          end_at: string;
+          color?: string;
+          locked: true;
+        }>;
+        tasks?: PreviewData['tasks'];
+        habits?: PreviewData['habits'];
+        debug?: PreviewData['debug'];
+      }>(
+        wsId,
+        {
+          windowDays: 30,
+          clientTimezone,
+        },
+        {
+          fetch: (input, init) => fetch(input, { ...init, cache: 'no-store' }),
+        }
+      );
+    },
+    staleTime: 0,
+    refetchOnMount: 'always',
+    refetchOnWindowFocus: false,
+  });
+
+  // Convert locked events to CalendarEvents with a special marker
+  const lockedCalendarEvents = useMemo((): CalendarEvent[] => {
+    if (!previewQuery.data?.lockedEvents) return [];
+    return previewQuery.data.lockedEvents.map((e) => ({
+      id: e.id,
+      title: e.title,
+      start_at: e.start_at,
+      end_at: e.end_at,
+      color: e.color as any,
+      locked: true,
+      _isLocked: true, // Special marker to indicate this is a locked event in preview
+    }));
+  }, [previewQuery.data?.lockedEvents]);
+
+  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]);
+
+  // Set mode when dialog opens with a different initialMode
+  useEffect(() => {
+    if (open) {
+      setMode(initialMode);
+    }
+  }, [open, initialMode]);
+
+  // Clear preview when dialog closes
+  useEffect(() => {
+    if (!open) {
+      clearPreviewEvents();
+      setCurrentStep(0);
+      setIsPlaying(false);
+      if (animationRef.current) {
+        clearTimeout(animationRef.current);
+      }
+      queryClient.removeQueries({
+        queryKey: ['smart-schedule-preview-dialog', wsId],
+      });
+    }
+  }, [open, clearPreviewEvents, queryClient, wsId]);
+
+  // Close dialog on preview errors
+  useEffect(() => {
+    if (!open) return;
+    if (!previewQuery.isError) return;
+    toast.error(
+      previewQuery.error instanceof Error
+        ? previewQuery.error.message
+        : 'Failed to generate preview'
+    );
+    onOpenChange(false);
+  }, [open, previewQuery.isError, previewQuery.error, onOpenChange]);
+
+  // Update calendar preview events when mode/step changes
+  useEffect(() => {
+    if (!previewData) return;
+
+    let newPreviewEvents: CalendarEvent[];
+
+    if (mode === 'instant') {
+      // Show all events instantly
+      const calendarEvents = convertToCalendarEvents(previewData.events);
+      // Include locked events so users can see blocked time slots
+      newPreviewEvents = [...lockedCalendarEvents, ...calendarEvents];
+    } else {
+      // Show events up to current step
+      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);
+      // Include locked events so users can see blocked time slots
+      newPreviewEvents = [...lockedCalendarEvents, ...calendarEvents];
+    }
+
+    setPreviewEvents(newPreviewEvents);
+  }, [
+    previewData,
+    mode,
+    currentStep,
+    setPreviewEvents,
+    convertToCalendarEvents,
+    lockedCalendarEvents,
+  ]);
+
+  // 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);
+    }, 800); // 800ms delay between steps
+
+    return () => {
+      if (animationRef.current) {
+        clearTimeout(animationRef.current);
+      }
+    };
+  }, [isPlaying, currentStep, mode, previewData]);
+
+  const handleApply = async () => {
+    setIsApplying(true);
+    toast.loading('Applying schedule...', { id: 'apply-schedule' });
+
+    try {
+      const result = await applyWorkspaceCalendarSchedule<{
+        summary: {
+          eventsCreated: number;
+          habitsScheduled: number;
+          tasksScheduled: 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,
+          clientTimezone,
+        },
+        {
+          fetch: (input, init) => fetch(input, { ...init, cache: 'no-store' }),
+        }
+      );
+
+      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,
+      });
+      clearPreviewEvents();
+
+      toast.success(
+        `Scheduled ${result.summary.eventsCreated} events (${result.summary.habitsScheduled} habits, ${result.summary.tasksScheduled} tasks)`,
+        { id: 'apply-schedule' }
+      );
+
+      onOpenChange(false);
+    } catch (error) {
+      toast.error(
+        error instanceof Error ? error.message : 'Scheduling failed',
+        { id: 'apply-schedule' }
+      );
+    } finally {
+      setIsApplying(false);
+    }
+  };
+
+  const handleDiscard = () => {
+    clearPreviewEvents();
+    onOpenChange(false);
+  };
+
+  // Animation controls
+  const togglePlayPause = () => {
+    if (isPlaying) {
+      setIsPlaying(false);
+    } else {
+      // Reset if at end
+      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 stepsWithEvents = previewData?.steps.filter((s) => s.event) || [];
+  const totalSteps = stepsWithEvents.length;
+
+  const downloadFullDebugLog = () => {
+    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) => `[Step ${s.step}] ${s.type}: ${s.action} - ${s.description}`)
+      .join('\n');
+
+    const taskDetailsLog =
+      previewData.tasks?.details
+        ?.map(
+          (t) =>
+            `- ${t.taskName}: ${t.scheduledMinutes}/${t.totalMinutesRequired}min (${t.remainingMinutes}min remaining) ${t.warning ? `[${t.warningLevel}] ${t.warning}` : ''}`
+        )
+        .join('\n') || 'No task details';
+
+    const logContent = `Smart Schedule Preview - Full Debug Log
+========================================
+Generated: ${new Date().toISOString()}
+Workspace: ${wsId}
+
+=== SUMMARY ===
+Total Events Generated: ${previewData.summary.totalEvents}
+Habits Scheduled: ${previewData.summary.habitsScheduled}
+Tasks Scheduled: ${previewData.summary.tasksScheduled}
+Partially Scheduled Tasks: ${previewData.summary.partiallyScheduledTasks}
+Unscheduled Tasks: ${previewData.summary.unscheduledTasks}
+
+=== INPUT COUNTS ===
+Habits with auto_schedule: ${previewData.debug?.habitsWithAutoSchedule ?? 'N/A'}
+Tasks with auto_schedule: ${previewData.debug?.tasksWithAutoSchedule ?? 'N/A'}
+Existing calendar events: ${previewData.debug?.existingEventsCount ?? 'N/A'}
+
+=== SCHEDULED EVENTS ===
+${eventsLog || 'No events scheduled'}
+
+=== TASK DETAILS ===
+${taskDetailsLog}
+
+=== SCHEDULING STEPS ===
+${stepsLog || 'No steps recorded'}
+
+=== WARNINGS ===
+${previewData.warnings.length > 0 ? previewData.warnings.join('\n') : 'No warnings'}
+
+=== TROUBLESHOOTING ===
+If 0 events were scheduled:
+1. Ensure tasks/habits have "auto_schedule" enabled
+2. Verify tasks have "total_duration" > 0
+3. Check calendar hour settings are configured for the correct days
+4. Verify there are available time slots without conflicts
+5. Check that tasks don't have start_date in the future beyond the scheduling window
+
+Share this log with engineers for debugging assistance.
+`;
+
+    const blob = new Blob([logContent], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `smart-schedule-log-${new Date().toISOString().slice(0, 19).replace(/:/g, '-')}.txt`;
+    a.click();
+    URL.revokeObjectURL(url);
+    toast.success('Debug log downloaded');
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-2xl">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <Sparkles className="h-5 w-5 text-dynamic-blue" />
+            Smart Schedule Preview
+          </DialogTitle>
+          <DialogDescription>
+            Preview the scheduling results before applying them to your
+            calendar.
+          </DialogDescription>
+        </DialogHeader>
+
+        {previewQuery.isFetching ? (
+          <div className="flex flex-col items-center justify-center py-12">
+            <Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
+            <p className="mt-4 text-muted-foreground text-sm">
+              Generating preview...
+            </p>
+          </div>
+        ) : previewData ? (
+          <Tabs value={mode} onValueChange={(v) => setMode(v as any)}>
+            <TabsList className="grid w-full grid-cols-2">
+              <TabsTrigger value="instant" className="gap-2">
+                <Eye className="h-4 w-4" />
+                Instant Preview
+              </TabsTrigger>
+              <TabsTrigger value="animated" className="gap-2">
+                <Play className="h-4 w-4" />
+                Animated Demo
+              </TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="instant" className="space-y-4">
+              {previewData.summary.totalEvents === 0 ? (
+                <EmptyPreviewState debug={previewData.debug} />
+              ) : (
+                <>
+                  <PreviewSummary summary={previewData.summary} />
+                  <PreviewWarnings
+                    warnings={previewData.warnings}
+                    taskDetails={previewData.tasks?.details}
+                  />
+                </>
+              )}
+            </TabsContent>
+
+            <TabsContent value="animated" className="space-y-4">
+              {/* Animation Controls */}
+              <div className="rounded-lg border bg-muted/50 p-4">
+                <div className="flex items-center justify-between">
+                  <div className="flex items-center gap-2">
+                    <Button
+                      variant="outline"
+                      size="icon"
+                      onClick={stepBackward}
+                      disabled={currentStep === 0}
+                    >
+                      <ChevronLeft className="h-4 w-4" />
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="icon"
+                      onClick={togglePlayPause}
+                    >
+                      {isPlaying ? (
+                        <Pause className="h-4 w-4" />
+                      ) : (
+                        <Play className="h-4 w-4" />
+                      )}
+                    </Button>
+                    <Button
+                      variant="outline"
+                      size="icon"
+                      onClick={stepForward}
+                      disabled={currentStep >= totalSteps - 1}
+                    >
+                      <ChevronRight className="h-4 w-4" />
+                    </Button>
+                  </div>
+                  <span className="text-muted-foreground text-sm">
+                    Step {currentStep + 1} of {totalSteps}
+                  </span>
+                </div>
+
+                <Progress
+                  value={((currentStep + 1) / Math.max(totalSteps, 1)) * 100}
+                  className="mt-3"
+                />
+
+                {/* Current Step Info */}
+                {stepsWithEvents[currentStep] && (
+                  <div className="mt-3 rounded-md bg-background p-3">
+                    <p className="font-medium text-sm">
+                      {stepsWithEvents[currentStep]?.description}
+                    </p>
+                    {stepsWithEvents[currentStep]?.event && (
+                      <p className="mt-1 text-muted-foreground text-xs">
+                        {new Date(
+                          stepsWithEvents[currentStep]!.event!.start_at
+                        ).toLocaleString()}{' '}
+                        -{' '}
+                        {new Date(
+                          stepsWithEvents[currentStep]!.event!.end_at
+                        ).toLocaleTimeString()}
+                      </p>
+                    )}
+                  </div>
+                )}
+              </div>
+
+              <PreviewSummary
+                summary={previewData.summary}
+                currentStep={currentStep}
+                totalSteps={totalSteps}
+              />
+            </TabsContent>
+          </Tabs>
+        ) : null}
+
+        <DialogFooter className="gap-2 sm:gap-0">
+          <div className="flex flex-1 items-center gap-2">
+            <span className="text-muted-foreground text-xs">
+              Preview events are shown on the calendar with a dashed border
+            </span>
+            {previewData && (
+              <Button
+                variant="ghost"
+                size="sm"
+                onClick={downloadFullDebugLog}
+                className="ml-auto text-xs"
+              >
+                <Bug className="mr-1 h-3 w-3" />
+                Debug Log
+              </Button>
+            )}
+          </div>
+          <div className="flex gap-2">
+            <Button variant="outline" onClick={handleDiscard}>
+              <X className="mr-2 h-4 w-4" />
+              Discard
+            </Button>
+            <Button
+              onClick={handleApply}
+              disabled={isApplying || previewQuery.isFetching}
+            >
+              {isApplying ? (
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              ) : (
+                <CheckCircle className="mr-2 h-4 w-4" />
+              )}
+              Apply Schedule
+            </Button>
+          </div>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function EmptyPreviewState({ debug }: { debug?: PreviewData['debug'] }) {
+  const downloadDebugLog = () => {
+    const logContent = `Smart Schedule Preview Debug Log
+Generated: ${new Date().toISOString()}
+
+=== Summary ===
+Habits with auto_schedule enabled: ${debug?.habitsWithAutoSchedule ?? 'N/A'}
+Tasks with auto_schedule enabled: ${debug?.tasksWithAutoSchedule ?? 'N/A'}
+Existing calendar events: ${debug?.existingEventsCount ?? 'N/A'}
+
+=== Analysis ===
+${
+  debug?.habitsWithAutoSchedule === 0 && debug?.tasksWithAutoSchedule === 0
+    ? 'No habits or tasks have auto_schedule enabled. Enable auto_schedule on the items you want to automatically schedule.'
+    : 'Items were found but could not be scheduled. Possible reasons:\n- All tasks are already fully scheduled\n- No available time slots in calendar hours\n- Time conflicts with existing events'
+}
+
+=== Troubleshooting ===
+1. Check that tasks/habits have "auto_schedule" enabled
+2. Verify tasks have "total_duration" set
+3. Check calendar hour settings are configured
+4. Ensure there are available time slots without conflicts
+`;
+
+    const blob = new Blob([logContent], { type: 'text/plain' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `smart-schedule-debug-${new Date().toISOString().slice(0, 10)}.txt`;
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+
+  return (
+    <div className="flex flex-col items-center justify-center rounded-lg border border-dashed p-8">
+      <Info className="h-12 w-12 text-muted-foreground/50" />
+      <h3 className="mt-4 font-medium text-lg">No Events to Schedule</h3>
+      <p className="mt-2 text-center text-muted-foreground text-sm">
+        {debug?.habitsWithAutoSchedule === 0 &&
+        debug?.tasksWithAutoSchedule === 0
+          ? 'No habits or tasks have auto-scheduling enabled. Enable auto_schedule on the items you want to schedule.'
+          : 'All schedulable items are either already scheduled or cannot fit in available time slots.'}
+      </p>
+
+      {debug && (
+        <div className="mt-4 grid grid-cols-3 gap-4 text-center text-xs">
+          <div>
+            <p className="font-medium">{debug.habitsWithAutoSchedule}</p>
+            <p className="text-muted-foreground">Auto-schedule habits</p>
+          </div>
+          <div>
+            <p className="font-medium">{debug.tasksWithAutoSchedule}</p>
+            <p className="text-muted-foreground">Auto-schedule tasks</p>
+          </div>
+          <div>
+            <p className="font-medium">{debug.existingEventsCount}</p>
+            <p className="text-muted-foreground">Existing events</p>
+          </div>
+        </div>
+      )}
+
+      <Button
+        variant="outline"
+        size="sm"
+        className="mt-4"
+        onClick={downloadDebugLog}
+      >
+        <Bug className="mr-2 h-4 w-4" />
+        Download Debug Log
+      </Button>
+    </div>
+  );
+}
+
+function PreviewSummary({
+  summary,
+  currentStep,
+  totalSteps,
+}: {
+  summary: PreviewData['summary'];
+  currentStep?: number;
+  totalSteps?: number;
+}) {
+  const showStep =
+    typeof currentStep === 'number' &&
+    typeof totalSteps === 'number' &&
+    totalSteps > 0;
+
+  return (
+    <div className="space-y-2">
+      {showStep && (
+        <p className="text-muted-foreground text-xs">
+          Step {currentStep + 1} of {totalSteps}
+        </p>
+      )}
+      <div className="grid grid-cols-2 gap-4 rounded-lg border p-4 sm:grid-cols-4">
+        <div className="text-center">
+          <p className="font-bold text-2xl text-dynamic-blue">
+            {summary.totalEvents}
+          </p>
+          <p className="text-muted-foreground text-xs">Total Events</p>
+        </div>
+        <div className="text-center">
+          <p className="font-bold text-2xl text-dynamic-green">
+            {summary.habitsScheduled}
+          </p>
+          <p className="text-muted-foreground text-xs">Habits</p>
+        </div>
+        <div className="text-center">
+          <p className="font-bold text-2xl text-dynamic-purple">
+            {summary.tasksScheduled}
+          </p>
+          <p className="text-muted-foreground text-xs">Tasks</p>
+        </div>
+        <div className="text-center">
+          <p
+            className={cn(
+              'font-bold text-2xl',
+              summary.partiallyScheduledTasks > 0
+                ? 'text-dynamic-orange'
+                : 'text-muted-foreground'
+            )}
+          >
+            {summary.partiallyScheduledTasks}
+          </p>
+          <p className="text-muted-foreground text-xs">Partial</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+type TaskDetail = {
+  taskId: string;
+  taskName: string;
+  scheduledMinutes: number;
+  totalMinutesRequired: number;
+  remainingMinutes: number;
+  warning?: string;
+  warningLevel?: 'info' | 'warning' | 'error';
+};
+
+function PreviewWarnings({
+  warnings,
+  taskDetails,
+}: {
+  warnings: string[];
+  taskDetails?: TaskDetail[];
+}) {
+  if (warnings.length === 0 && (!taskDetails || taskDetails.length === 0)) {
+    return (
+      <div className="flex items-center gap-2 rounded-lg border border-dynamic-green/30 bg-dynamic-green/10 p-4">
+        <CheckCircle className="h-5 w-5 text-dynamic-green" />
+        <span className="text-dynamic-green text-sm">
+          All items can be fully scheduled!
+        </span>
+      </div>
+    );
+  }
+
+  const errorTasks =
+    taskDetails?.filter((t) => t.warningLevel === 'error') || [];
+  const warningTasks =
+    taskDetails?.filter((t) => t.warningLevel === 'warning') || [];
+
+  return (
+    <ScrollArea className="h-[200px]">
+      <div className="space-y-2">
+        {errorTasks.length > 0 && (
+          <div className="rounded-lg border border-dynamic-red/30 bg-dynamic-red/10 p-3">
+            <div className="flex items-center gap-2">
+              <AlertTriangle className="h-4 w-4 text-dynamic-red" />
+              <span className="font-medium text-dynamic-red text-sm">
+                Could not schedule ({errorTasks.length})
+              </span>
+            </div>
+            <ul className="mt-2 space-y-1">
+              {errorTasks.map((task) => (
+                <li key={task.taskId} className="text-muted-foreground text-xs">
+                  {task.taskName}
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+        {warningTasks.length > 0 && (
+          <div className="rounded-lg border border-dynamic-orange/30 bg-dynamic-orange/10 p-3">
+            <div className="flex items-center gap-2">
+              <AlertTriangle className="h-4 w-4 text-dynamic-orange" />
+              <span className="font-medium text-dynamic-orange text-sm">
+                Partially scheduled ({warningTasks.length})
+              </span>
+            </div>
+            <ul className="mt-2 space-y-1">
+              {warningTasks.map((task) => (
+                <li key={task.taskId} className="text-muted-foreground text-xs">
+                  {task.taskName}: {task.remainingMinutes}m remaining (
+                  {Math.round(
+                    (task.scheduledMinutes / task.totalMinutesRequired) * 100
+                  )}
+                  %)
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+        {warnings.length > 0 &&
+          errorTasks.length === 0 &&
+          warningTasks.length === 0 && (
+            <div className="rounded-lg border border-dynamic-orange/30 bg-dynamic-orange/10 p-3">
+              <div className="flex items-center gap-2">
+                <AlertTriangle className="h-4 w-4 text-dynamic-orange" />
+                <span className="font-medium text-dynamic-orange text-sm">
+                  Warnings ({warnings.length})
+                </span>
+              </div>
+              <ul className="mt-2 space-y-1">
+                {warnings.map((warning, index) => (
+                  <li key={index} className="text-muted-foreground text-xs">
+                    {warning}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          )}
+      </div>
+    </ScrollArea>
+  );
+}