@tuturuuu/ui 0.0.4 → 0.2.0

package/src/components/ui/calendar-app/components/calendar-connections-unified.tsx

@@ -0,0 +1,1433 @@
+'use client';
+
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  Calendar,
+  ChevronDown,
+  ExternalLink,
+  Eye,
+  EyeOff,
+  Loader2,
+  Lock,
+  Plus,
+  RefreshCw,
+  RotateCcw,
+  Settings,
+  Sparkles,
+  Target,
+  Trash2,
+} from '@tuturuuu/icons';
+import { createClient } from '@tuturuuu/supabase/next/client';
+import Image from 'next/image';
+import { useRouter } from 'next/navigation';
+import { useTranslations } from 'next-intl';
+import { useMemo, useState } from 'react';
+import { useCalendarSync } from '../../../../hooks/use-calendar-sync';
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '../../alert-dialog';
+import { Badge } from '../../badge';
+import { Button } from '../../button';
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '../../collapsible';
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '../../dialog';
+import { Input } from '../../input';
+import { Popover, PopoverContent, PopoverTrigger } from '../../popover';
+import { Separator } from '../../separator';
+import { toast } from '../../sonner';
+import { Switch } from '../../switch';
+import type {
+  AuthResponse,
+  CalendarSyncHealth,
+  ConnectedAccount,
+  ProviderCalendar,
+} from './calendar-types';
+
+interface AccountsResponse {
+  accounts: ConnectedAccount[];
+  grouped: {
+    google: ConnectedAccount[];
+    microsoft: ConnectedAccount[];
+  };
+  total: number;
+}
+
+interface WorkspaceCalendar {
+  id: string;
+  ws_id: string;
+  name: string;
+  description: string | null;
+  color: string | null;
+  calendar_type: 'primary' | 'tasks' | 'habits' | 'custom';
+  is_system: boolean;
+  is_enabled: boolean;
+  position: number;
+}
+
+interface WorkspaceCalendarsResponse {
+  calendars: WorkspaceCalendar[];
+  grouped: {
+    system: WorkspaceCalendar[];
+    custom: WorkspaceCalendar[];
+  };
+  total: number;
+}
+
+interface ManualSyncResponse {
+  ok: boolean;
+  alreadyRunning?: boolean;
+  code?: string;
+  error?: string;
+  retryAfterSeconds?: number | null;
+}
+
+export default function CalendarConnectionsUnified({ wsId }: { wsId: string }) {
+  const t = useTranslations('calendar');
+  const router = useRouter();
+  const queryClient = useQueryClient();
+  const [disconnectingId, setDisconnectingId] = useState<string | null>(null);
+  const [togglingIds, setTogglingIds] = useState<Set<string>>(new Set());
+  const [togglingTuturuuuIds, setTogglingTuturuuuIds] = useState<Set<string>>(
+    new Set()
+  );
+  const [expandedAccounts, setExpandedAccounts] = useState<Set<string>>(
+    new Set()
+  );
+  const [expandedPopoverAccounts, setExpandedPopoverAccounts] = useState<
+    Set<string>
+  >(
+    new Set(['tuturuuu']) // Tuturuuu expanded by default
+  );
+  const [showCreateCalendarDialog, setShowCreateCalendarDialog] =
+    useState(false);
+  const [newCalendarName, setNewCalendarName] = useState('');
+
+  const {
+    calendarConnections,
+    updateCalendarConnection,
+    setCalendarConnections,
+    syncToTuturuuu,
+    isSyncing,
+  } = useCalendarSync();
+
+  const syncMutation = useMutation({
+    mutationFn: async () => {
+      const response = await fetch(`/api/v1/workspaces/${wsId}/calendar/sync`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ direction: 'inbound', source: 'manual' }),
+      });
+
+      const result = (await response.json()) as ManualSyncResponse &
+        Record<string, unknown>;
+      if (!response.ok) {
+        throw new Error(
+          typeof result.error === 'string'
+            ? result.error
+            : 'Failed to sync calendars'
+        );
+      }
+
+      return result;
+    },
+    onSuccess: async (result) => {
+      await queryClient.invalidateQueries({
+        queryKey: ['calendar-sync-status', wsId],
+      });
+      await queryClient.invalidateQueries({
+        queryKey: ['databaseCalendarEvents', wsId],
+        exact: false,
+      });
+
+      if (!result.alreadyRunning) {
+        toast.success(t('calendar_sync_started') || 'Calendar sync started');
+      }
+    },
+    onError: (error: Error) => {
+      toast.error(error.message);
+    },
+  });
+
+  // Fetch connected accounts
+  const { data: accountsData, isLoading: isLoadingAccounts } = useQuery({
+    queryKey: ['calendar-accounts', wsId],
+    queryFn: async () => {
+      const response = await fetch(
+        `/api/v1/calendar/auth/accounts?wsId=${wsId}`,
+        { cache: 'no-store' }
+      );
+      if (!response.ok)
+        return {
+          accounts: [],
+          grouped: { google: [], microsoft: [] },
+          total: 0,
+        };
+      return response.json() as Promise<AccountsResponse>;
+    },
+    staleTime: 30_000,
+  });
+
+  const accounts = accountsData?.accounts || [];
+  const hasConnectedAccounts = accounts.length > 0;
+
+  const { data: syncStatusData } = useQuery({
+    queryKey: ['calendar-sync-status', wsId],
+    queryFn: async () => {
+      const response = await fetch(
+        `/api/v1/workspaces/${wsId}/calendar/sync-status`,
+        { cache: 'no-store' }
+      );
+      if (!response.ok) return null;
+      return response.json() as Promise<{
+        health: CalendarSyncHealth;
+        accountsSummary: { total: number; google: number; microsoft: number };
+        connectionsSummary: { total: number; enabled: number };
+      }>;
+    },
+    staleTime: 15_000,
+  });
+
+  // Fetch current user's email
+  const { data: userEmail } = useQuery({
+    queryKey: ['current-user-email'],
+    queryFn: async () => {
+      const supabase = createClient();
+      const {
+        data: { user },
+      } = await supabase.auth.getUser();
+      return user?.email || null;
+    },
+    staleTime: Infinity, // User email rarely changes
+  });
+
+  // Fetch workspace calendars (Tuturuuu native calendars)
+  const {
+    data: workspaceCalendarsData,
+    isLoading: isLoadingWorkspaceCalendars,
+  } = useQuery({
+    queryKey: ['workspace-calendars', wsId],
+    queryFn: async () => {
+      const response = await fetch(`/api/v1/workspaces/${wsId}/calendars`, {
+        cache: 'no-store',
+      });
+      if (!response.ok)
+        return { calendars: [], grouped: { system: [], custom: [] }, total: 0 };
+      return response.json() as Promise<WorkspaceCalendarsResponse>;
+    },
+    staleTime: 30_000,
+  });
+
+  const isLoadingCalendars = isLoadingAccounts || isLoadingWorkspaceCalendars;
+
+  const workspaceCalendars = workspaceCalendarsData?.calendars || [];
+  const systemCalendars = workspaceCalendarsData?.grouped?.system || [];
+  const customCalendars = workspaceCalendarsData?.grouped?.custom || [];
+
+  // Calendar color mapping helper
+  const getCalendarColor = (color: string): string => {
+    const colorMap: Record<string, string> = {
+      BLUE: '#3b82f6',
+      RED: '#ef4444',
+      GREEN: '#22c55e',
+      YELLOW: '#eab308',
+      ORANGE: '#f97316',
+      PURPLE: '#a855f7',
+      PINK: '#ec4899',
+      CYAN: '#06b6d4',
+      GRAY: '#6b7280',
+    };
+    return colorMap[color.toUpperCase()] || color;
+  };
+
+  // Calculate total enabled calendars count
+  const tuturuuuEnabledCount = workspaceCalendars.filter(
+    (c) => c.is_enabled
+  ).length;
+
+  // Toggle workspace calendar visibility
+  const toggleWorkspaceCalendarMutation = useMutation({
+    mutationFn: async ({
+      id,
+      is_enabled,
+    }: {
+      id: string;
+      is_enabled: boolean;
+    }) => {
+      const response = await fetch(`/api/v1/workspaces/${wsId}/calendars`, {
+        method: 'PATCH',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ id, is_enabled }),
+      });
+      if (!response.ok) throw new Error('Failed to toggle calendar');
+      return response.json();
+    },
+    onMutate: ({ id }) => {
+      setTogglingTuturuuuIds((prev) => new Set(prev).add(id));
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['workspace-calendars', wsId],
+      });
+    },
+    onError: () =>
+      toast.error(t('calendar_toggle_failed') || 'Failed to toggle calendar'),
+    onSettled: (_, __, { id }) => {
+      setTogglingTuturuuuIds((prev) => {
+        const next = new Set(prev);
+        next.delete(id);
+        return next;
+      });
+    },
+  });
+
+  // Create custom calendar
+  const createCalendarMutation = useMutation({
+    mutationFn: async (data: { name: string; color?: string }) => {
+      const response = await fetch(`/api/v1/workspaces/${wsId}/calendars`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(data),
+      });
+      if (!response.ok) throw new Error('Failed to create calendar');
+      return response.json();
+    },
+    onSuccess: () => {
+      toast.success(t('calendar_created') || 'Calendar created');
+      queryClient.invalidateQueries({
+        queryKey: ['workspace-calendars', wsId],
+      });
+    },
+    onError: () =>
+      toast.error(t('calendar_creation_failed') || 'Failed to create calendar'),
+  });
+
+  // Delete custom calendar
+  const deleteCalendarMutation = useMutation({
+    mutationFn: async (id: string) => {
+      const response = await fetch(
+        `/api/v1/workspaces/${wsId}/calendars?id=${id}`,
+        {
+          method: 'DELETE',
+        }
+      );
+      if (!response.ok) throw new Error('Failed to delete calendar');
+      return response.json();
+    },
+    onSuccess: () => {
+      toast.success(t('calendar_deleted') || 'Calendar deleted');
+      queryClient.invalidateQueries({
+        queryKey: ['workspace-calendars', wsId],
+      });
+    },
+    onError: () =>
+      toast.error(t('calendar_deletion_failed') || 'Failed to delete calendar'),
+  });
+
+  // Reset all calendar data
+  const resetCalendarDataMutation = useMutation({
+    mutationFn: async () => {
+      const response = await fetch(
+        `/api/v1/workspaces/${wsId}/calendars/reset`,
+        { method: 'POST' }
+      );
+      if (!response.ok) {
+        const error = await response.json();
+        throw new Error(error.error || 'Failed to reset calendar data');
+      }
+      return response.json();
+    },
+    onSuccess: (data) => {
+      toast.success(
+        t('calendar_data_reset') || 'Calendar data reset successfully'
+      );
+      // Clear the calendar connections immediately
+      setCalendarConnections([]);
+      // Refetch all calendar-related queries to ensure UI updates
+      queryClient.refetchQueries({
+        queryKey: ['workspace-calendars', wsId],
+      });
+      queryClient.refetchQueries({ queryKey: ['calendar-accounts', wsId] });
+      queryClient.refetchQueries({
+        queryKey: ['databaseCalendarEvents', wsId],
+      });
+      queryClient.refetchQueries({
+        queryKey: ['googleCalendarEvents', wsId],
+      });
+      queryClient.refetchQueries({
+        queryKey: ['calendar-connections'],
+      });
+      // Refresh the page to reload server data
+      router.refresh();
+      console.log('Reset results:', data);
+    },
+    onError: (error: Error) => {
+      toast.error(
+        error.message ||
+          t('calendar_reset_failed') ||
+          'Failed to reset calendar data'
+      );
+    },
+  });
+
+  // Google auth mutation
+  const googleAuthMutation = useMutation<AuthResponse, Error, void>({
+    mutationKey: ['calendar', 'google-auth', wsId],
+    mutationFn: async () => {
+      const response = await fetch(`/api/v1/calendar/auth?wsId=${wsId}`);
+      if (!response.ok) throw new Error('Failed to get auth URL');
+      return response.json();
+    },
+    onSuccess: (data) => {
+      if (data.authUrl) window.location.href = data.authUrl;
+      else toast.error(t('auth_url_invalid'));
+    },
+    onError: () => toast.error(t('google_auth_failed')),
+  });
+
+  // Microsoft auth mutation
+  const microsoftAuthMutation = useMutation<AuthResponse, Error, void>({
+    mutationKey: ['calendar', 'microsoft-auth', wsId],
+    mutationFn: async () => {
+      const response = await fetch(
+        `/api/v1/calendar/auth/microsoft?wsId=${wsId}`
+      );
+      if (!response.ok) throw new Error('Failed to get auth URL');
+      return response.json();
+    },
+    onSuccess: (data) => {
+      if (data.authUrl) window.location.href = data.authUrl;
+      else toast.error(t('auth_url_invalid'));
+    },
+    onError: () => toast.error(t('microsoft_auth_failed')),
+  });
+
+  // Disconnect account mutation
+  const disconnectMutation = useMutation({
+    mutationFn: async (accountId: string) => {
+      const response = await fetch(
+        `/api/v1/calendar/auth/accounts?accountId=${accountId}&wsId=${wsId}`,
+        { method: 'DELETE' }
+      );
+      if (!response.ok) throw new Error('Failed to disconnect');
+      return response.json();
+    },
+    onMutate: (accountId) => {
+      setDisconnectingId(accountId);
+    },
+    onSuccess: () => {
+      toast.success(t('account_disconnected'));
+      queryClient.invalidateQueries({ queryKey: ['calendar-accounts', wsId] });
+    },
+    onError: () => toast.error(t('failed_to_disconnect')),
+    onSettled: () => setDisconnectingId(null),
+  });
+
+  // Toggle calendar visibility - handles both existing connections and new calendars
+  const handleToggle = async (
+    calendarId: string,
+    currentState: boolean,
+    calendarData?: {
+      calendar_id: string;
+      calendar_name: string;
+      color: string | null;
+      connectionExists: boolean;
+      accountId?: string;
+    }
+  ) => {
+    const newState = !currentState;
+    setTogglingIds((prev) => new Set(prev).add(calendarId));
+
+    try {
+      // If connection doesn't exist in database and we're enabling, create it
+      if (calendarData && !calendarData.connectionExists && newState) {
+        const response = await fetch('/api/v1/calendar/connections', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({
+            wsId,
+            calendarId: calendarData.calendar_id,
+            calendarName: calendarData.calendar_name,
+            color: calendarData.color,
+            isEnabled: true,
+            authTokenId: calendarData.accountId,
+          }),
+        });
+
+        if (!response.ok) {
+          // Handle 409 Conflict - calendar already exists, update it instead
+          if (response.status === 409) {
+            // Calendar already exists, make a PATCH request to enable it
+            const patchResponse = await fetch('/api/v1/calendar/connections', {
+              method: 'PATCH',
+              headers: { 'Content-Type': 'application/json' },
+              body: JSON.stringify({
+                // Use calendar_id to find the connection since we don't have the connection ID
+                calendarId: calendarData.calendar_id,
+                wsId,
+                isEnabled: true,
+              }),
+            });
+
+            if (patchResponse.ok) {
+              // Update local state immediately
+              updateCalendarConnection(calendarId, true);
+              queryClient.invalidateQueries({
+                queryKey: ['provider-calendar-list', wsId],
+              });
+              queryClient.invalidateQueries({
+                queryKey: ['calendar-connections', wsId],
+              });
+              toast.success(t('calendar_enabled'));
+            } else {
+              toast.error(t('toggle_failed'));
+            }
+          } else {
+            const errorText = await response.text().catch(() => '');
+            console.error('Failed to create connection:', {
+              status: response.status,
+              statusText: response.statusText,
+              rawText: errorText,
+            });
+            toast.error(t('toggle_failed'));
+          }
+        } else {
+          // Update local state immediately
+          updateCalendarConnection(calendarId, true);
+          // Invalidate queries to refresh the list
+          queryClient.invalidateQueries({
+            queryKey: ['provider-calendar-list', wsId],
+          });
+          queryClient.invalidateQueries({
+            queryKey: ['calendar-connections', wsId],
+          });
+          toast.success(t('calendar_enabled'));
+        }
+      } else {
+        // Update existing connection
+        updateCalendarConnection(calendarId, newState);
+
+        const response = await fetch('/api/v1/calendar/connections', {
+          method: 'PATCH',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ id: calendarId, isEnabled: newState }),
+        });
+
+        if (!response.ok) {
+          updateCalendarConnection(calendarId, currentState);
+          toast.error(t('toggle_failed'));
+        }
+      }
+    } catch {
+      if (calendarData?.connectionExists) {
+        updateCalendarConnection(calendarId, currentState);
+      }
+      toast.error(t('toggle_failed'));
+    } finally {
+      setTogglingIds((prev) => {
+        const next = new Set(prev);
+        next.delete(calendarId);
+        return next;
+      });
+    }
+  };
+
+  const toggleAccountExpanded = (accountId: string) => {
+    setExpandedAccounts((prev) => {
+      const next = new Set(prev);
+      if (next.has(accountId)) next.delete(accountId);
+      else next.add(accountId);
+      return next;
+    });
+  };
+
+  const enabledCount =
+    calendarConnections.filter((c) => c.is_enabled).length +
+    tuturuuuEnabledCount;
+  const syncHealth = syncStatusData?.health;
+  const manualSyncDisabled = useMemo(() => {
+    if (syncMutation.isPending || isSyncing) {
+      return true;
+    }
+
+    if (syncHealth?.currentlyRunning) {
+      return true;
+    }
+
+    if ((syncHealth?.retryAfterSeconds ?? 0) > 0) {
+      return true;
+    }
+
+    return false;
+  }, [
+    isSyncing,
+    syncHealth?.currentlyRunning,
+    syncHealth?.retryAfterSeconds,
+    syncMutation.isPending,
+  ]);
+  const syncStatusStyles =
+    syncHealth?.state === 'syncing'
+      ? 'bg-dynamic-blue/10 text-dynamic-blue'
+      : syncHealth?.state === 'healthy'
+        ? 'bg-dynamic-green/10 text-dynamic-green'
+        : syncHealth?.state === 'disconnected'
+          ? 'bg-muted text-muted-foreground'
+          : syncHealth?.state === 'degraded'
+            ? 'bg-dynamic-orange/10 text-dynamic-orange'
+            : 'bg-dynamic-red/10 text-dynamic-red';
+
+  // Fetch Google calendars from API (must be before any conditional returns)
+  const { data: googleCalendarsData } = useQuery({
+    queryKey: ['provider-calendar-list', wsId],
+    enabled: hasConnectedAccounts,
+    queryFn: async () => {
+      const response = await fetch(
+        `/api/v1/calendar/auth/provider-calendars?wsId=${wsId}`,
+        { cache: 'no-store' }
+      );
+      if (!response.ok) return { calendars: [], byAccount: {} };
+      return response.json() as Promise<{
+        calendars: ProviderCalendar[];
+        byAccount: Record<string, ProviderCalendar[]>;
+      }>;
+    },
+    staleTime: 30_000,
+  });
+
+  const calendarsByAccountFromAPI = googleCalendarsData?.byAccount || {};
+
+  // Merge API calendars with existing connections for visibility state
+  const calendarsByAccount = accounts.reduce(
+    (acc, account) => {
+      const apiCalendars = calendarsByAccountFromAPI[account.id] || [];
+
+      // Map API calendars to connection-like objects, merging with existing connections
+      acc[account.id] = apiCalendars.map((apiCal) => {
+        // Find existing connection for this calendar
+        const existingConnection = calendarConnections.find(
+          (conn) => conn.calendar_id === apiCal.id
+        );
+
+        return {
+          id: existingConnection?.id || apiCal.id,
+          ws_id: wsId,
+          calendar_id: apiCal.id,
+          calendar_name: apiCal.name,
+          is_enabled: existingConnection?.is_enabled ?? false, // Default to hidden if no connection exists
+          color: existingConnection?.color || apiCal.backgroundColor,
+          isFromAPI: true,
+          connectionExists: !!existingConnection,
+          accountId: account.id,
+        };
+      });
+
+      return acc;
+    },
+    {} as Record<
+      string,
+      Array<{
+        id: string;
+        ws_id: string;
+        calendar_id: string;
+        calendar_name: string;
+        is_enabled: boolean;
+        color: string | null;
+        isFromAPI: boolean;
+        connectionExists: boolean;
+        accountId: string;
+      }>
+    >
+  );
+
+  // Note: Removed early return - we always show the full UI now so Tuturuuu calendars are visible
+
+  return (
+    <div className="flex items-center gap-2">
+      {/* Quick calendar visibility toggle */}
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button variant="outline" size="sm" className="gap-2">
+            <Calendar className="h-4 w-4" />
+            <span className="hidden sm:inline">{t('calendars')}</span>
+            {enabledCount > 0 && (
+              <Badge variant="secondary" className="ml-1">
+                {enabledCount}
+              </Badge>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-80" align="end">
+          <div className="space-y-4">
+            <div className="flex items-center justify-between">
+              <div>
+                <h4 className="font-medium text-sm">
+                  {t('visible_calendars')}
+                </h4>
+                <p className="text-muted-foreground text-xs">
+                  {enabledCount} {t('calendars_selected') || 'selected'}
+                </p>
+              </div>
+              <Dialog>
+                <DialogTrigger asChild>
+                  <Button variant="ghost" size="icon" className="h-8 w-8">
+                    <Settings className="h-4 w-4" />
+                  </Button>
+                </DialogTrigger>
+                <DialogContent className="max-h-[80vh] overflow-y-auto sm:max-w-lg">
+                  <DialogHeader>
+                    <DialogTitle>{t('manage_calendar_accounts')}</DialogTitle>
+                    <DialogDescription>
+                      {t('manage_calendar_accounts_desc')}
+                    </DialogDescription>
+                  </DialogHeader>
+
+                  <div className="space-y-4 py-4">
+                    {/* Tuturuuu Calendars Section */}
+                    <div className="space-y-3">
+                      <div className="flex items-center justify-between">
+                        <div className="flex items-center gap-2">
+                          <Image
+                            src="/icon-512x512.png"
+                            alt="Tuturuuu"
+                            width={24}
+                            height={24}
+                          />
+                          <span className="font-medium text-sm">
+                            {t('tuturuuu_calendars') || 'Tuturuuu Calendars'}
+                          </span>
+                        </div>
+                        <Button
+                          variant="ghost"
+                          size="sm"
+                          className="h-7 gap-1 text-xs"
+                          onClick={() => setShowCreateCalendarDialog(true)}
+                          disabled={createCalendarMutation.isPending}
+                        >
+                          {createCalendarMutation.isPending ? (
+                            <Loader2 className="h-3 w-3 animate-spin" />
+                          ) : (
+                            <Plus className="h-3 w-3" />
+                          )}
+                          {t('new') || 'New'}
+                        </Button>
+                        <Dialog
+                          open={showCreateCalendarDialog}
+                          onOpenChange={(open) => {
+                            setShowCreateCalendarDialog(open);
+                            if (!open) setNewCalendarName('');
+                          }}
+                        >
+                          <DialogContent className="sm:max-w-md">
+                            <DialogHeader>
+                              <DialogTitle>{t('create_calendar')}</DialogTitle>
+                            </DialogHeader>
+                            <div className="py-4">
+                              <Input
+                                value={newCalendarName}
+                                onChange={(
+                                  e: React.ChangeEvent<HTMLInputElement>
+                                ) => setNewCalendarName(e.target.value)}
+                                placeholder={
+                                  t('enter_calendar_name') ||
+                                  'Enter calendar name'
+                                }
+                                autoFocus
+                                onKeyDown={(
+                                  e: React.KeyboardEvent<HTMLInputElement>
+                                ) => {
+                                  if (
+                                    e.key === 'Enter' &&
+                                    newCalendarName.trim()
+                                  ) {
+                                    createCalendarMutation.mutate({
+                                      name: newCalendarName.trim(),
+                                    });
+                                    setShowCreateCalendarDialog(false);
+                                    setNewCalendarName('');
+                                  }
+                                }}
+                              />
+                            </div>
+                            <DialogFooter>
+                              <Button
+                                onClick={() => {
+                                  if (newCalendarName.trim()) {
+                                    createCalendarMutation.mutate({
+                                      name: newCalendarName.trim(),
+                                    });
+                                    setShowCreateCalendarDialog(false);
+                                    setNewCalendarName('');
+                                  }
+                                }}
+                                disabled={
+                                  !newCalendarName.trim() ||
+                                  createCalendarMutation.isPending
+                                }
+                              >
+                                {createCalendarMutation.isPending && (
+                                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                                )}
+                                {t('create')}
+                              </Button>
+                            </DialogFooter>
+                          </DialogContent>
+                        </Dialog>
+                      </div>
+
+                      {/* System Calendars */}
+                      <div className="space-y-1">
+                        {systemCalendars.map((cal) => {
+                          const Icon =
+                            cal.calendar_type === 'primary'
+                              ? Calendar
+                              : cal.calendar_type === 'tasks'
+                                ? Target
+                                : cal.calendar_type === 'habits'
+                                  ? Sparkles
+                                  : Calendar;
+                          return (
+                            <div
+                              key={cal.id}
+                              className="flex items-center justify-between gap-2 rounded-md px-2 py-1.5 hover:bg-muted/50"
+                            >
+                              <div className="flex min-w-0 flex-1 items-center gap-2">
+                                <div
+                                  className="flex h-5 w-5 shrink-0 items-center justify-center rounded"
+                                  style={{
+                                    backgroundColor: `${getCalendarColor(cal.color || 'BLUE')}20`,
+                                  }}
+                                >
+                                  <Icon
+                                    className="h-3 w-3"
+                                    style={{
+                                      color: getCalendarColor(
+                                        cal.color || 'BLUE'
+                                      ),
+                                    }}
+                                  />
+                                </div>
+                                <span
+                                  className="line-clamp-1 break-all text-sm"
+                                  title={cal.name}
+                                >
+                                  {cal.name}
+                                </span>
+                                <Lock className="h-3 w-3 shrink-0 text-muted-foreground" />
+                              </div>
+                              <Switch
+                                checked={cal.is_enabled}
+                                onCheckedChange={() =>
+                                  toggleWorkspaceCalendarMutation.mutate({
+                                    id: cal.id,
+                                    is_enabled: !cal.is_enabled,
+                                  })
+                                }
+                                disabled={togglingTuturuuuIds.has(cal.id)}
+                              />
+                            </div>
+                          );
+                        })}
+                      </div>
+
+                      {/* Custom Calendars */}
+                      {customCalendars.length > 0 && (
+                        <div className="space-y-1">
+                          <p className="px-2 text-muted-foreground text-xs">
+                            {t('custom_calendars') || 'Custom'}
+                          </p>
+                          {customCalendars.map((cal) => (
+                            <div
+                              key={cal.id}
+                              className="flex items-center justify-between gap-2 rounded-md px-2 py-1.5 hover:bg-muted/50"
+                            >
+                              <div className="flex min-w-0 flex-1 items-center gap-2">
+                                <div
+                                  className="h-3 w-3 shrink-0 rounded-full"
+                                  style={{
+                                    backgroundColor: getCalendarColor(
+                                      cal.color || 'BLUE'
+                                    ),
+                                  }}
+                                />
+                                <span
+                                  className="line-clamp-1 break-all text-sm"
+                                  title={cal.name}
+                                >
+                                  {cal.name}
+                                </span>
+                              </div>
+                              <div className="flex items-center gap-1">
+                                <Button
+                                  variant="ghost"
+                                  size="icon"
+                                  className="h-6 w-6 text-destructive hover:bg-destructive/10"
+                                  onClick={() =>
+                                    deleteCalendarMutation.mutate(cal.id)
+                                  }
+                                  disabled={deleteCalendarMutation.isPending}
+                                >
+                                  <Trash2 className="h-3 w-3" />
+                                </Button>
+                                <Switch
+                                  checked={cal.is_enabled}
+                                  onCheckedChange={() =>
+                                    toggleWorkspaceCalendarMutation.mutate({
+                                      id: cal.id,
+                                      is_enabled: !cal.is_enabled,
+                                    })
+                                  }
+                                  disabled={togglingTuturuuuIds.has(cal.id)}
+                                />
+                              </div>
+                            </div>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+
+                    <Separator />
+
+                    {/* Connected accounts with calendars */}
+                    {accounts.map((account) => (
+                      <Collapsible
+                        key={account.id}
+                        open={expandedAccounts.has(account.id)}
+                        onOpenChange={() => toggleAccountExpanded(account.id)}
+                      >
+                        <div className="rounded-lg border">
+                          <CollapsibleTrigger className="flex w-full items-center justify-between p-3 transition-colors hover:bg-muted/50">
+                            <div className="flex items-center gap-3">
+                              <div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-md bg-muted">
+                                <Image
+                                  src={
+                                    account.provider === 'google'
+                                      ? '/media/logos/google.svg'
+                                      : '/media/logos/microsoft.svg'
+                                  }
+                                  alt={account.provider}
+                                  width={18}
+                                  height={18}
+                                />
+                              </div>
+                              <div className="text-left">
+                                <p className="font-medium text-sm">
+                                  {account.account_name ||
+                                    account.account_email ||
+                                    t('unknown_account')}
+                                </p>
+                                {account.account_email &&
+                                  account.account_name && (
+                                    <p className="text-muted-foreground text-xs">
+                                      {account.account_email}
+                                    </p>
+                                  )}
+                              </div>
+                            </div>
+                            <div className="flex items-center gap-2">
+                              <Badge
+                                variant="outline"
+                                className="text-xs capitalize"
+                              >
+                                {account.provider}
+                              </Badge>
+                              <ChevronDown
+                                className={`h-4 w-4 transition-transform ${expandedAccounts.has(account.id) ? 'rotate-180' : ''}`}
+                              />
+                            </div>
+                          </CollapsibleTrigger>
+
+                          <CollapsibleContent>
+                            <Separator />
+                            <div className="space-y-2 p-3">
+                              {(calendarsByAccount[account.id] || []).length >
+                              0 ? (
+                                (calendarsByAccount[account.id] || []).map(
+                                  (cal) => (
+                                    <div
+                                      key={cal.id}
+                                      className="flex items-center justify-between gap-2 rounded-md px-2 py-1.5 hover:bg-muted/50"
+                                    >
+                                      <div className="flex min-w-0 flex-1 items-center gap-2">
+                                        <div
+                                          className="h-3 w-3 shrink-0 rounded-full"
+                                          style={{
+                                            backgroundColor:
+                                              cal.color || '#4285f4',
+                                          }}
+                                        />
+                                        <span
+                                          className="line-clamp-1 break-all text-sm"
+                                          title={cal.calendar_name}
+                                        >
+                                          {cal.calendar_name}
+                                        </span>
+                                      </div>
+                                      <Switch
+                                        checked={cal.is_enabled}
+                                        onCheckedChange={() =>
+                                          handleToggle(cal.id, cal.is_enabled, {
+                                            calendar_id: cal.calendar_id,
+                                            calendar_name: cal.calendar_name,
+                                            color: cal.color,
+                                            connectionExists:
+                                              cal.connectionExists,
+                                            accountId: cal.accountId,
+                                          })
+                                        }
+                                        disabled={togglingIds.has(cal.id)}
+                                      />
+                                    </div>
+                                  )
+                                )
+                              ) : (
+                                <p className="py-2 text-center text-muted-foreground text-xs">
+                                  {t('no_calendars_found')}
+                                </p>
+                              )}
+
+                              <Separator className="my-2" />
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                className="w-full text-destructive hover:bg-destructive/10 hover:text-destructive"
+                                onClick={() =>
+                                  disconnectMutation.mutate(account.id)
+                                }
+                                disabled={disconnectingId === account.id}
+                              >
+                                {disconnectingId === account.id ? (
+                                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                                ) : (
+                                  <Trash2 className="mr-2 h-4 w-4" />
+                                )}
+                                {t('disconnect')}
+                              </Button>
+                            </div>
+                          </CollapsibleContent>
+                        </div>
+                      </Collapsible>
+                    ))}
+
+                    {/* Add new account buttons */}
+                    <div className="space-y-2 pt-2">
+                      <p className="font-medium text-muted-foreground text-xs uppercase tracking-wider">
+                        {t('add_account')}
+                      </p>
+                      <div className="grid grid-cols-2 gap-2">
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          className="gap-2 text-center"
+                          onClick={() => googleAuthMutation.mutate()}
+                          disabled={googleAuthMutation.isPending}
+                        >
+                          {googleAuthMutation.isPending ? (
+                            <Loader2 className="h-4 w-4 animate-spin" />
+                          ) : (
+                            <Image
+                              src="/media/logos/google.svg"
+                              alt="Google"
+                              width={16}
+                              height={16}
+                            />
+                          )}
+                          {t('google')}
+                        </Button>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          className="gap-2 text-center"
+                          onClick={() => microsoftAuthMutation.mutate()}
+                          disabled={microsoftAuthMutation.isPending}
+                        >
+                          {microsoftAuthMutation.isPending ? (
+                            <Loader2 className="h-4 w-4 animate-spin" />
+                          ) : (
+                            <Image
+                              src="/media/logos/microsoft.svg"
+                              alt="Microsoft"
+                              width={16}
+                              height={16}
+                            />
+                          )}
+                          {t('outlook')}
+                        </Button>
+                      </div>
+                    </div>
+
+                    {/* Danger Zone */}
+                    <Separator />
+                    <div className="space-y-2">
+                      <p className="font-medium text-destructive text-xs uppercase tracking-wider">
+                        {t('danger_zone') || 'Danger Zone'}
+                      </p>
+                      <AlertDialog>
+                        <AlertDialogTrigger asChild>
+                          <Button
+                            variant="destructive"
+                            size="sm"
+                            className="w-full gap-2"
+                            disabled={resetCalendarDataMutation.isPending}
+                          >
+                            {resetCalendarDataMutation.isPending ? (
+                              <Loader2 className="h-4 w-4 animate-spin" />
+                            ) : (
+                              <RotateCcw className="h-4 w-4" />
+                            )}
+                            {t('reset_calendar_data') || 'Reset Calendar Data'}
+                          </Button>
+                        </AlertDialogTrigger>
+                        <AlertDialogContent>
+                          <AlertDialogHeader>
+                            <AlertDialogTitle>
+                              {t('reset_calendar_confirm_title') ||
+                                'Reset all calendar data?'}
+                            </AlertDialogTitle>
+                            <AlertDialogDescription>
+                              {t('reset_calendar_confirm_desc') ||
+                                'This will permanently delete all calendar events, disconnect all linked accounts (Google, Microsoft), and remove custom calendars. System calendars will be preserved but emptied. This action cannot be undone.'}
+                            </AlertDialogDescription>
+                          </AlertDialogHeader>
+                          <AlertDialogFooter>
+                            <AlertDialogCancel>
+                              {t('cancel') || 'Cancel'}
+                            </AlertDialogCancel>
+                            <AlertDialogAction
+                              onClick={() => resetCalendarDataMutation.mutate()}
+                              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                            >
+                              {t('reset_all_data') || 'Reset All Data'}
+                            </AlertDialogAction>
+                          </AlertDialogFooter>
+                        </AlertDialogContent>
+                      </AlertDialog>
+                    </div>
+                  </div>
+                </DialogContent>
+              </Dialog>
+            </div>
+
+            {!hasConnectedAccounts && (
+              <div className="rounded-xl border border-border/60 bg-muted/20 p-3">
+                <div className="space-y-1">
+                  <p className="font-medium text-sm">
+                    {t('connect_calendar_accounts') ||
+                      'Connect calendar accounts'}
+                  </p>
+                  <p className="text-muted-foreground text-xs">
+                    {t('connect_calendar_accounts_desc') ||
+                      'Link Google or Outlook to keep external calendars visible and continuously synchronized.'}
+                  </p>
+                </div>
+                <div className="mt-3 grid grid-cols-2 gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="gap-2"
+                    onClick={() => googleAuthMutation.mutate()}
+                    disabled={googleAuthMutation.isPending}
+                  >
+                    {googleAuthMutation.isPending ? (
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                    ) : (
+                      <Image
+                        src="/media/logos/google.svg"
+                        alt="Google"
+                        width={16}
+                        height={16}
+                      />
+                    )}
+                    {t('google')}
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    className="gap-2"
+                    onClick={() => microsoftAuthMutation.mutate()}
+                    disabled={microsoftAuthMutation.isPending}
+                  >
+                    {microsoftAuthMutation.isPending ? (
+                      <Loader2 className="h-4 w-4 animate-spin" />
+                    ) : (
+                      <Image
+                        src="/media/logos/microsoft.svg"
+                        alt="Microsoft"
+                        width={16}
+                        height={16}
+                      />
+                    )}
+                    {t('outlook')}
+                  </Button>
+                </div>
+              </div>
+            )}
+
+            <Separator />
+
+            {/* Calendar list grouped by source */}
+            <div className="max-h-64 space-y-3 overflow-y-auto">
+              {isLoadingCalendars ? (
+                <div className="flex items-center justify-center py-6">
+                  <Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
+                </div>
+              ) : (
+                <>
+                  {/* Tuturuuu Calendars */}
+                  {workspaceCalendars.length > 0 && (
+                    <Collapsible
+                      open={expandedPopoverAccounts.has('tuturuuu')}
+                      onOpenChange={(open) => {
+                        setExpandedPopoverAccounts((prev) => {
+                          const next = new Set(prev);
+                          if (open) next.add('tuturuuu');
+                          else next.delete('tuturuuu');
+                          return next;
+                        });
+                      }}
+                    >
+                      <CollapsibleTrigger className="flex w-full cursor-pointer items-center gap-2 rounded-md px-1 py-1 hover:bg-muted/50">
+                        <ChevronDown
+                          className={`h-3 w-3 shrink-0 text-muted-foreground transition-transform ${expandedPopoverAccounts.has('tuturuuu') ? '' : '-rotate-90'}`}
+                        />
+                        <Image
+                          src="/icon-512x512.png"
+                          alt="Tuturuuu"
+                          width={14}
+                          height={14}
+                        />
+                        <div className="flex min-w-0 flex-1 flex-col text-left">
+                          <span className="font-medium text-muted-foreground text-xs">
+                            {t('tuturuuu_calendars') || 'Tuturuuu'}
+                          </span>
+                          {userEmail && (
+                            <span className="truncate text-[10px] text-muted-foreground">
+                              {userEmail}
+                            </span>
+                          )}
+                        </div>
+                      </CollapsibleTrigger>
+                      <CollapsibleContent className="space-y-1 pt-1">
+                        {workspaceCalendars.map((cal) => (
+                          <div
+                            key={cal.id}
+                            className="flex items-center justify-between rounded-md px-2 py-1 hover:bg-muted/50"
+                          >
+                            <div className="flex items-center gap-2">
+                              <div
+                                className="h-2.5 w-2.5 rounded-full"
+                                style={{
+                                  backgroundColor: getCalendarColor(
+                                    cal.color || 'BLUE'
+                                  ),
+                                }}
+                              />
+                              <span className="line-clamp-1 max-w-45 break-all text-sm">
+                                {cal.name}
+                              </span>
+                              {cal.is_system && (
+                                <Lock className="h-2.5 w-2.5 text-muted-foreground" />
+                              )}
+                            </div>
+                            <Button
+                              variant="ghost"
+                              size="icon"
+                              className="h-6 w-6"
+                              onClick={() =>
+                                toggleWorkspaceCalendarMutation.mutate({
+                                  id: cal.id,
+                                  is_enabled: !cal.is_enabled,
+                                })
+                              }
+                              disabled={togglingTuturuuuIds.has(cal.id)}
+                            >
+                              {togglingTuturuuuIds.has(cal.id) ? (
+                                <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                              ) : cal.is_enabled ? (
+                                <Eye className="h-3.5 w-3.5 text-primary" />
+                              ) : (
+                                <EyeOff className="h-3.5 w-3.5 text-muted-foreground" />
+                              )}
+                            </Button>
+                          </div>
+                        ))}
+                      </CollapsibleContent>
+                    </Collapsible>
+                  )}
+
+                  {/* External accounts calendars */}
+                  {accounts.map((account) => {
+                    const accountCals = calendarsByAccount[account.id] || [];
+                    if (accountCals.length === 0) return null;
+                    const accountKey = `account-${account.id}`;
+
+                    return (
+                      <Collapsible
+                        key={account.id}
+                        open={expandedPopoverAccounts.has(accountKey)}
+                        onOpenChange={(open) => {
+                          setExpandedPopoverAccounts((prev) => {
+                            const next = new Set(prev);
+                            if (open) next.add(accountKey);
+                            else next.delete(accountKey);
+                            return next;
+                          });
+                        }}
+                      >
+                        <CollapsibleTrigger className="flex w-full cursor-pointer items-center gap-2 rounded-md px-1 py-1 hover:bg-muted/50">
+                          <ChevronDown
+                            className={`h-3 w-3 shrink-0 text-muted-foreground transition-transform ${expandedPopoverAccounts.has(accountKey) ? '' : '-rotate-90'}`}
+                          />
+                          <Image
+                            src={
+                              account.provider === 'google'
+                                ? '/media/logos/google.svg'
+                                : '/media/logos/microsoft.svg'
+                            }
+                            alt={account.provider}
+                            width={12}
+                            height={12}
+                          />
+                          <span className="min-w-0 flex-1 truncate text-left text-muted-foreground text-xs">
+                            {account.account_email || account.account_name}
+                          </span>
+                        </CollapsibleTrigger>
+                        <CollapsibleContent className="space-y-1 pt-1">
+                          {accountCals.map((cal) => (
+                            <div
+                              key={cal.id}
+                              className="flex items-center justify-between rounded-md px-2 py-1 hover:bg-muted/50"
+                            >
+                              <div className="flex items-center gap-2">
+                                <div
+                                  className="h-2.5 w-2.5 rounded-full"
+                                  style={{
+                                    backgroundColor: cal.color || '#4285f4',
+                                  }}
+                                />
+                                <span className="line-clamp-1 max-w-45 break-all text-sm">
+                                  {cal.calendar_name}
+                                </span>
+                              </div>
+                              <Button
+                                variant="ghost"
+                                size="icon"
+                                className="h-6 w-6"
+                                onClick={() =>
+                                  handleToggle(cal.id, cal.is_enabled, {
+                                    calendar_id: cal.calendar_id,
+                                    calendar_name: cal.calendar_name,
+                                    color: cal.color,
+                                    connectionExists: cal.connectionExists,
+                                    accountId: cal.accountId,
+                                  })
+                                }
+                                disabled={togglingIds.has(cal.id)}
+                              >
+                                {togglingIds.has(cal.id) ? (
+                                  <Loader2 className="h-3.5 w-3.5 animate-spin" />
+                                ) : cal.is_enabled ? (
+                                  <Eye className="h-3.5 w-3.5 text-primary" />
+                                ) : (
+                                  <EyeOff className="h-3.5 w-3.5 text-muted-foreground" />
+                                )}
+                              </Button>
+                            </div>
+                          ))}
+                        </CollapsibleContent>
+                      </Collapsible>
+                    );
+                  })}
+
+                  {calendarConnections.length === 0 &&
+                    workspaceCalendars.length === 0 && (
+                      <div className="rounded-lg border border-dashed p-4 text-center">
+                        <p className="font-medium text-sm">
+                          {t('no_calendars_synced')}
+                        </p>
+                        <p className="mt-1 text-muted-foreground text-xs">
+                          {t('choose_calendars_to_show') ||
+                            'Connect an account, then choose which calendars should appear here.'}
+                        </p>
+                      </div>
+                    )}
+                </>
+              )}
+            </div>
+
+            <Separator />
+
+            {/* Sync actions */}
+            <div className="flex items-center justify-between">
+              <div
+                className={`rounded-full px-2 py-0.5 text-xs ${syncStatusStyles}`}
+              >
+                {syncHealth?.state === 'syncing' && (
+                  <Loader2 className="mr-1 inline h-3 w-3 animate-spin" />
+                )}
+                {syncHealth?.state === 'degraded'
+                  ? t('degraded') || 'Degraded'
+                  : syncHealth?.state === 'healthy'
+                    ? t('healthy') || 'Healthy'
+                    : syncHealth?.state === 'disconnected'
+                      ? t('connect_accounts') || 'Connect accounts'
+                      : t('syncing_calendars') || 'Syncing calendars'}
+              </div>
+              <div className="flex gap-1">
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7"
+                  onClick={() => syncMutation.mutate()}
+                  disabled={manualSyncDisabled}
+                  title={t('sync_now') || 'Sync now'}
+                >
+                  <ExternalLink
+                    className={`h-3.5 w-3.5 ${
+                      manualSyncDisabled ? 'animate-pulse' : ''
+                    }`}
+                  />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="icon"
+                  className="h-7 w-7"
+                  onClick={() => syncToTuturuuu()}
+                  disabled={manualSyncDisabled}
+                  title={t('sync_from_google')}
+                >
+                  <RefreshCw
+                    className={`h-3.5 w-3.5 ${manualSyncDisabled ? 'animate-spin' : ''}`}
+                  />
+                </Button>
+              </div>
+            </div>
+            {syncHealth?.lastSuccessAt && (
+              <p className="text-muted-foreground text-xs">
+                {t('last_synced_at') || 'Last synced'}:{' '}
+                {new Date(syncHealth.lastSuccessAt).toLocaleString()}
+              </p>
+            )}
+          </div>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}