"use client";

import React, {
    useState,
    useEffect,
    useRef,
    useCallback,
    useMemo,
    DragEvent,
} from "react";
import { useSession, signOut } from "next-auth/react";
import CalendarEventModal from "./CalendarEventModal";
import TaskRecurrenceModal from "./RecurrenceModal";
import { GridTaskBlock } from "./GridTaskBlock";
import IconPicker, { allIcons } from "./IconPicker";
import MdiIcon from "@mdi/react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faApple, faGoogle, faMicrosoft, faNotion } from "@fortawesome/free-brands-svg-icons";
import {
    faServer, faFolder, faBriefcase, faBullseye, faRocket, faStar,
    faLightbulb, faFire, faPalette, faMusic, faMobileScreen, faLaptop,
    faGlobe, faHouse, faBuilding, faChartBar, faChartLine, faWrench,
    faBolt, faGamepad, faPen, faBook, faGraduationCap, faFlask,
    faMicroscope, faDumbbell, faUtensils, faPlane, faLeaf, faHeart,
    faCartShopping, faCoins, faGift, faCamera, faFilm, faBroom,
    faPaw, faEarthAmericas, faLock, faCheck, faCode, faCube,
    faUsers, faCar, faMountain, faUmbrella, faClock, faTag,
    IconDefinition,
} from "@fortawesome/free-solid-svg-icons";

import FocusModeOverlay from "./FocusModeOverlay";
import {
    LayoutGrid,
    Calendar,
    ChevronDown,
    ChevronLeft,
    ChevronRight,
    ChevronsLeft,
    ChevronsRight,
    Search,
    Settings,
    User,
    Clock,
    Menu,
    Target,
    Sun,
    Moon,
    Repeat,
    GripVertical,
    Play,
    Zap,
    Plus,
    RefreshCcw,
    Layout,
    Palette,
    Sparkles,
    Info,
    Trash2,
    Undo2,
    Redo2,
    AlertCircle,
    MoreVertical,
    Check,
    Eye,
    EyeOff,
    PanelLeftClose,
    PanelLeftOpen,
    Type,
    FolderOpen,
    FolderPlus,
    ListPlus,
    Circle,
    X,
    Cable,
    Link,
    Globe,
    Tag,
    Kanban,
    CalendarDays,
    ListTodo,
    Filter,
    Pencil,
    FileText,
} from "lucide-react";

// Types
import UserMenu from "./UserMenu";
import SearchModal from "./SearchModal";
import SimpleDatePicker from "./SimpleDatePicker";
import RecurringTasksManager from "./RecurringTasksManager";
export interface RecurringTaskException { id: string; taskId: string; originalDate: string; newDate?: string | null; isCancelled: boolean; createdAt: Date; updatedAt: Date; }
import { ImportListModal } from "./ImportListModal";
import OnboardingWizard from "./OnboardingWizard";
import { getRandomLocalQuote } from "@/lib/quotes";

// Cookie helpers for per-device settings
const DEVICE_SETTINGS_KEYS = ["viewDays", "cellDuration", "startHour", "endHour"];

function getCookie(name: string): string | null {
    if (typeof document === "undefined") return null;
    const match = document.cookie.match(new RegExp(`(?:^|; )${name}=([^;]*)`));
    return match ? decodeURIComponent(match[1]) : null;
}

function setCookie(name: string, value: string, days: number = 365) {
    if (typeof document === "undefined") return;
    const expires = new Date(Date.now() + days * 864e5).toUTCString();
    document.cookie = `${name}=${encodeURIComponent(value)}; expires=${expires}; path=/; SameSite=Lax`;
}

export type ViewStyle = "simple" | "calendar" | "list" | "grid" | "kanban";

export interface KanbanStage {
    id: string;
    name: string;
    color: string;
}

export interface Task {
    id: string;
    title: string;
    completed: boolean;
    dayOfWeek?: number | null;
    scheduledDate?: string | null;
    markdownContent?: string | null;
    createdAt?: Date;
    updatedAt: Date;
    order: number;
    completedAt?: Date | null;
    externalId?: string | null;
    externalProvider?: string | null;
    lastSyncedAt?: Date | null;
    syncStatus?: string | null;
    subTasks?: Task[];
    parentId?: string | null;
    isRolling?: boolean;
    isRecurring?: boolean;
    somedayListId?: string | null;
    somedaySlotIndex?: number | null;
    repeatPattern?: string | null;
    repeatEndDate?: string | null;
    repeatStartDate?: string | null;
    originalRecurringId?: string | null;
    baseRecurringTask?: Task | null;
    recurringExceptions?: RecurringTaskException[];
    startTime?: string | null;
    duration?: number | null;
    parentTaskId?: string | null;
    userId: string;
    recurrenceInterval?: number | null;
    recurrenceUnit?: string | null;
    recurrenceTime?: string | null;
    recurrenceEndDate?: Date | null;
    recurrenceDays?: number[] | null;
    externalListId?: string | null;
    projectId?: string | null;
    project?: { id: string; name: string; icon?: string | null; color?: string | null } | null;
    kanbanStage?: string | null;
}

interface CalendarEvent {
    id: string;
    title: string;
    startTime: string;
    endTime: string;
    source: "google" | "apple" | "outlook" | "synology" | "notion";
    calendarId?: string;
    calendarTitle?: string;
    calendarColor?: string;
    editable?: boolean;
    recurringEventId?: string;
    isRecurring?: boolean;
    description?: string;
    location?: string;
    url?: string;
}

interface SomedayList {
    id: string;
    title: string;
    tasks: Task[];
    tab?: string | null;
    externalProvider?: string | null;
    externalId?: string | null;
    externalListId?: string | null;
}

// Time grid configuration options
type CellDuration = 15 | 20 | 30 | 60;
type WeatherDisplayKey = "icon" | "temp" | "feelsLike" | "wind" | "gusts" | "precipProb" | "precip" | "humidity" | "uv";
const WEATHER_DISPLAY_DEFAULTS: WeatherDisplayKey[] = ["icon", "temp"];
const DEFAULT_SOMEDAY_SLOT_COUNT = 5;

const getSomedaySlotCount = (tasks: Task[]) => {
    const maxIdx = tasks.reduce((max, t) => {
        if (t.somedaySlotIndex !== null && t.somedaySlotIndex !== undefined) {
            return Math.max(max, t.somedaySlotIndex);
        }
        return max;
    }, -1);
    // Add 1 extra slot if more than 4 tasks exist, or at least 5 slots total.
    // "add 5 rows and then when 4 are taken add another row"
    // Let's ensure there's always at least one empty slot at the bottom.
    return Math.max(DEFAULT_SOMEDAY_SLOT_COUNT, maxIdx + 2);
};

// Font options
const AVAILABLE_FONTS = [
    { name: "Default (Inter)", value: "Inter" },
    { name: "Roboto", value: "Roboto" },
    { name: "Open Sans", value: "Open Sans" },
    { name: "Lato", value: "Lato" },
    { name: "Montserrat", value: "Montserrat" },
    { name: "Oswald", value: "Oswald" },
    { name: "Raleway", value: "Raleway" },
    { name: "Playfair Display", value: "Playfair Display" },
    { name: "Merriweather", value: "Merriweather" },
    { name: "Nunito", value: "Nunito" },
    { name: "Dancing Script", value: "Dancing Script" },
    { name: "Pacifico", value: "Pacifico" },
    { name: "Custom Google Font...", value: "__custom__" },
];

// Check if a font value is a custom (non-preset) font
const isCustomFont = (value: string): boolean =>
    !!value && value !== "__custom__" && !AVAILABLE_FONTS.slice(0, -1).some((f) => f.value === value);

const FONT_WEIGHTS = [
    { name: "Light", value: "300" },
    { name: "Normal", value: "400" },
    { name: "Medium", value: "500" },
    { name: "Bold", value: "700" },
];

// Helper to load Google Fonts
const useGoogleFonts = (fonts: string[]) => {
    useEffect(() => {
        if (typeof window === "undefined") return;
        const fontsToLoad = fonts.filter((f) => f && f !== "Inter");
        if (fontsToLoad.length === 0) return;

        const linkId = "google-fonts-link";
        let link = document.getElementById(linkId) as HTMLLinkElement;

        const fontQuery = fontsToLoad.map((f) => f.replace(" ", "+")).join("|");
        const href = `https://fonts.googleapis.com/css2?family=${fontsToLoad.map((f) => `${f.replace(" ", "+")}:wght@300;400;500;700`).join("&family=")}&display=swap`;

        if (!link) {
            link = document.createElement("link");
            link.id = linkId;
            link.rel = "stylesheet";
            document.head.appendChild(link);
        }
        link.href = href;
    }, [fonts]);
};

// Translations
const translations: Record<string, any> = {
    en: {
        settings: "Settings",
        general: "General",
        calendar: "Connections",
        localisation: "Localisation",
        account: "Account",
        runningList: "Running List (Auto-roll tasks to today)",
        protectEventTimes: "Protect Event Times",
        showTimeGrid: "Show Time Grid",
        timeSlotDuration: "Time Slot Duration",
        viewStyle: "View Style",
        simpleView: "Simple",
        calendarView: "Calendar",
        listView: "List",
        weekView: "Week",
        kanbanView: "Kanban",
        filterByProject: "All Projects",
        filterByList: "All Lists",
        filterByWeek: "All Weeks",
        kanbanStages: "Kanban Stages",
        kanbanStagesDesc: "Define the stages for your Kanban board. Drag tasks between columns to change their stage.",
        addStage: "Add stage",
        stageName: "Stage name",
        noStage: "No stage",
        headerDisplay: "Header Display",
        headerDisplayKW: "Calendar Week (KW)",
        headerDisplayMonth: "Month Name - March",
        headerDisplayMonthYear: "Month & Year - March | 2026",
        headerDisplayDate: "Full Date - 13.03.2026",
        headerDisplayCustom: "Custom - Friday - 13. March",
        headerDisplayNone: "None",
        headerCustomFormatLabel: "Format string (e.g. DD.MM.YYYY)",
        language: "Language",
        dateFormat: "Date Format",
        timeFormat: "Time Format",
        saveChanges: "Save Changes",
        connectedCalendars: "Connected Calendars",
        connectMore: "Connect More",
        connectGoogle: "Connect Google Calendar",
        connectApple: "Connect Apple Calendar",
        appleRemindersNote: "Apple Reminders are not supported. Since iOS 13 / macOS Catalina, Apple no longer provides a CalDAV or public API for Reminders. Only calendar events can be synced.",
        connectSynology: "Connect Synology",
        connectNotion: "Connect Notion",
        noCalendars: "No calendars connected yet.",
        dataPrivacy: "Data & Privacy",
        downloadData: "Download My Data",
        deleteAccount: "Delete Account",
        name: "Name",
        email: "Email",
        timezone: "Timezone",
        changePassword: "Change Password",
        newPassword: "New Password",
        confirmPassword: "Confirm Password",
        someday: "SOMEDAY",
        lists: "Lists",
        newList: "New list",
        allTabs: "All",
        newTab: "New tab",
        newTabName: "New tab name:",
        assignTab: "Assign to tab",
        noTab: "No tab",
        renameTab: "Double-click to rename",
        dissolveTab: "Remove tab (keep lists)",
        loading: "Loading your tasks...",
        sycing: "Syncing...",
        synced: "Synced",
        localization: "Localization",
        allDayEvents: "ALL-DAY EVENTS",
        syncCalendar: "Sync Calendar",
        toggleDarkMode: "Toggle Dark Mode",
        signOut: "Sign Out",
        startHour: "Start of Day",
        endHour: "End of Day",
        weekAbbr: "W",
        goalOfWeek: "Goal of the Week",
        goalScope: "Goal Scope",
        goalScopeWeek: "Per Week",
        goalScopeDay: "Per Day",
        goalFallback: "Goal Fallback Type",
        defaultGoal: "Custom Default Goal",
        showTaskCheckboxes: "Show Checkboxes on Tasks",
        showProjectIcons: "Show Icons for Projects",
        showSomeday: "Show Someday Section",
        showAllDay: "Show All-Day Section",
        allDayPosition: "All-Day Events Position",
        allDayAbove: "Above",
        allDayBelow: "Below",
        newPasswordDesc: "Leave blank to keep current password.",
        dateAlignment: "Date Alignment",
        dateVerticalAlign: "Date Vertical Alignment",
        alignTop: "Top",
        alignMiddle: "Middle",
        alignBottom: "Bottom",
        dateLayout: "Date Layout",
        alignmentLeft: "Left",
        alignmentCenter: "Center",
        alignmentRight: "Right",
        alignmentTight: "Tight",
        backupRestore: "Backup & Restore",
        backupRestoreDesc: "Export all your tasks, anyday lists, and projects as a JSON file. You can edit the file and import it back.",
        exportAllData: "Export All Data (JSON)",
        importData: "Import Data",
        importMode: "Import Mode",
        importModeMerge: "Merge",
        importModeMergeDesc: "Add imported data alongside existing tasks",
        importModeReplace: "Replace",
        importModeReplaceDesc: "Delete all existing data and replace with imported data",
        importReplaceWarning: "Warning: This will permanently delete all your current tasks, lists, and projects!",
        importSelectFile: "Select JSON file...",
        importButton: "Import",
        importing: "Importing...",
        exporting: "Exporting...",
        projects: "Projects",
        projectsDesc: "Organize tasks with color-coded projects",
        addProject: "Add Project",
        projectName: "Name",
        projectColor: "Color",
        noProjects: "No projects yet",
        assignProject: "Assign project",
        removeProject: "Remove project",
        weekdayFormat: "Weekday Format",
        weekdayFormatFull: "Full Name (Monday)",
        weekdayFormatShort: "Short (Mon)",
        weekdayFormatNarrow: "Narrow (M)",
        weekdayFormatCustom: "Custom",
        customWeekdayNamesMon: "Mo; Tu; We; Th; Fr; Sa; Su",
        customWeekdayNamesSun: "Su; Mo; Tu; We; Th; Fr; Sa",
        weekdayCase: "Weekday Case",
        weekdayCaseNormal: "Normal (monday)",
        weekdayCaseCapitalize: "Capitalize (Monday)",
        weekdayCaseUppercase: "Uppercase (MONDAY)",
        styling: "Styling",
        motivation: "Motivation",
        about: "About",
        setupAssistant: "Run Setup Assistant",
        weekStartLabel: "Start week on",
        startViewLabel: "Start view on",
        monday: "Monday",
        sunday: "Sunday",
        today: "Today",
        yesterday: "Yesterday",
        accountId: "Account ID",
        accountIdDesc: "Your unique account identifier",
        accountNumberLabel: "Account Number",
        accountNumberDesc: "Your account number for identification when changing email",
        connectOutlook: "Connect Outlook",
        syncTasks: "Sync Tasks",
        syncTasksDesc: "Sync tasks with Google Tasks or Microsoft To-Do.",
        unsyncConfirmMsg: "Stop syncing \"{title}\"? Its tasks will be moved to trash.",
        unsyncConfirm: "Stop syncing",
        unsyncCancel: "Cancel",
        syncAll: "Sync all",
        unsyncAll: "Unsync all",
        fetchingLists: "(fetching lists...)",
        listHeader: "List",
        syncHeader: "Sync",
        noTaskListsFound: "No task lists found.",
        connectProviderAbove: "Connect a provider above to sync task lists.",
        noCalendarsFound: "No calendars found or permission denied.",
        noCalendarsApple: "No calendars loaded. Please disconnect and reconnect Apple Calendar.",
        noCalendarsSynology: "No calendars loaded. Please disconnect and reconnect Synology.",
        selectionAfterConnect: "Selection available after connect.",
        sharedCalendar: "Shared calendar",
        primaryCalendar: "(Primary)",
        fontCustomization: "Font Customization",
        dateLayoutRight: "Date Right of Weekday",
        dateLayoutLeft: "Date Left of Weekday",
        dateLayoutAbove: "Date Above Weekday",
        dateLayoutBelow: "Date Below Weekday",
        dateLayoutHidden: "Date Hidden",
        dateLayoutMobile: "Date Layout (Mobile)",
        dayWeekdayGap: "Day / Weekday Gap",
        weekdayFont: "Weekday Font",
        dateFont: "Date Font",
        taskFont: "Task Font",
        eventFont: "Event Font",
        goalFont: "Goal / Quote Font",
        cwFont: "Calendar Week Font",
        yearFont: "Year Font",
        fontPlaceholder: "e.g. Poppins, Bebas Neue...",
        fontSizePlaceholder: "Font size (e.g. 1.25rem)",
        weightLight: "Light",
        weightNormal: "Normal",
        weightMedium: "Medium",
        weightSemi: "Semi",
        weightBold: "Bold",
        weightBlack: "Black",
        hourLabelFormat: "Hour Label Format",
        hourLabelShort: "Short (8, 9, 10)",
        hourLabelFull: "Full (8:00, 9:00, 10:00)",
        showSubhourLabels: "Show Sub-hour Labels (:15, :30, :45)",
        showScheduleCalendar: "Show Schedule / Calendar",
        showDoThisNow: 'Show "Do This Now" instead of Motto',
        focusTimer: "Focus Timer (min)",
        focusBreak: "Focus Break (min)",
        goalScopeTitle: "Goal Time Period",
        goalFallbackTitle: "Goal Fallback",
        motivationalQuote: "Motivational Quote / Holiday Hint",
        nextTodo: "Next To-Do",
        defaultText: "Default Text",
        apiDataSources: "API Data Sources (URLs)",
        addSource: "Add Source",
        urlFormatHelp: "URL returning JSON quotes",
        quoteLanguages: "Quote Languages",
        quoteLanguagesDesc: "Choose which languages your quotes appear in. At least one must be selected.",
        quoteFallbackDesc: "If no external source responds, curated local quotes in your language are used as fallback.",
        defaultGoalPlaceholder: "Enter your goal here...",
        saturdayColor: "Saturday",
        sundayColor: "Sunday",
        todayHighlight: "Today Highlight",
        pastDayColor: "Past Day Color",
        deleteProjectConfirm: "Delete project",
        importConfirmReplace: "This will delete ALL existing tasks, lists, and projects. Continue?",
        importSuccess: "Import complete",
        importInvalidJson: "Invalid JSON file",
    },
    de: {
        settings: "Einstellungen",
        general: "Allgemein",
        calendar: "Verbindungen",
        localisation: "Lokalisierung",
        account: "Konto",
        runningList: "Laufende Liste (Aufgaben automatisch auf heute verschieben)",
        protectEventTimes: "Ereigniszeiten schützen",
        showTimeGrid: "Zeitplan anzeigen",
        timeSlotDuration: "Zeitfensterdauer",
        viewStyle: "Ansichtsstil",
        simpleView: "Einfach",
        calendarView: "Kalender",
        kanbanView: "Kanban",
        weekView: "Woche",
        filterByProject: "Alle Projekte",
        filterByList: "Alle Listen",
        filterByWeek: "Alle Wochen",
        kanbanStages: "Kanban-Phasen",
        kanbanStagesDesc: "Definiere die Phasen für dein Kanban-Board. Ziehe Aufgaben zwischen Spalten, um ihre Phase zu ändern.",
        addStage: "Phase hinzufügen",
        stageName: "Phasenname",
        noStage: "Keine Phase",
        headerDisplay: "Kopfzeile",
        headerDisplayKW: "Kalenderwoche (KW)",
        headerDisplayMonth: "Monatsname - März",
        headerDisplayMonthYear: "Monat & Jahr - März | 2026",
        headerDisplayDate: "Vollständiges Datum - 13.03.2026",
        headerDisplayCustom: "Benutzerdefiniert - Freitag - 13. März",
        headerDisplayNone: "Nichts",
        headerCustomFormatLabel: "Format (z.B. DD.MM.YYYY)",
        listView: "Liste",
        notes: "Notizen",
        notesSidebar: "Notizen-Seitenleiste",
        language: "Sprache",
        dateFormat: "Datumsformat",
        timeFormat: "Zeitformat",
        saveChanges: "Änderungen speichern",
        connectedCalendars: "Verbundene Kalender",
        connectMore: "Mehr verbinden",
        connectGoogle: "Google Kalender verbinden",
        connectApple: "Apple Kalender verbinden",
        appleRemindersNote: "Apple Erinnerungen werden nicht unterstützt. Seit iOS 13 / macOS Catalina bietet Apple keine CalDAV- oder öffentliche API mehr für Erinnerungen an. Nur Kalender-Ereignisse können synchronisiert werden.",
        connectNotion: "Notion verbinden",
        noCalendars: "Keine Kalender verbunden.",
        dataPrivacy: "Daten & Datenschutz",
        downloadData: "Meine Daten herunterladen",
        deleteAccount: "Konto löschen",
        name: "Name",
        email: "E-Mail",
        timezone: "Zeitzone",
        changePassword: "Passwort ändern",
        newPassword: "Neues Passwort",
        confirmPassword: "Passwort bestätigen",
        someday: "IRGENDWANN",
        lists: "Listen",
        newList: "Neue Liste",
        allTabs: "Alle",
        newTab: "Neuer Tab",
        newTabName: "Neuer Tab-Name:",
        assignTab: "Tab zuweisen",
        noTab: "Kein Tab",
        renameTab: "Doppelklick zum Umbenennen",
        dissolveTab: "Tab entfernen (Listen behalten)",
        loading: "Lade Aufgaben...",
        syncing: "Synchronisiere...",
        synced: "Synchronisiert",
        localization: "Lokalisierung",
        allDayEvents: "GANZTÄGIGE EREIGNISSE",
        syncCalendar: "Kalender synchronisieren",
        toggleDarkMode: "Dunkelmodus umschalten",
        signOut: "Abmelden",
        startHour: "Tagesbeginn",
        endHour: "Tagesende",
        weekAbbr: "KW",
        goalOfWeek: "Ziel der Woche",
        goalScope: "Ziel-Zeitraum",
        goalScopeWeek: "Pro Woche",
        goalScopeDay: "Pro Tag",
        goalFallback: "Ziel-Fallback-Typ",
        defaultGoal: "Benutzerdefiniertes Standardziel",
        showTaskCheckboxes: "Checkboxen bei Aufgaben anzeigen",
        showProjectIcons: "Icons für Projekte anzeigen",
        showSomeday: "Irgendwann-Bereich anzeigen",
        showAllDay: "Ganztägige Ereignisse anzeigen",
        allDayPosition: "Position ganztägiger Ereignisse",
        allDayAbove: "Oben",
        allDayBelow: "Unten",
        newPasswordDesc: "Leer lassen, um das aktuelle Passwort zu behalten.",
        dateAlignment: "Datums-Ausrichtung",
        dateVerticalAlign: "Datums-Vertikalausrichtung",
        alignTop: "Oben",
        alignMiddle: "Mitte",
        alignBottom: "Unten",
        dateLayout: "Datumslayout",
        alignmentLeft: "Links",
        alignmentCenter: "Mitte",
        alignmentRight: "Rechts",
        alignmentTight: "Eng",
        backupRestore: "Sicherung & Wiederherstellung",
        backupRestoreDesc: "Exportieren Sie alle Aufgaben, Irgendwann-Listen und Projekte als JSON-Datei. Sie können die Datei bearbeiten und wieder importieren.",
        exportAllData: "Alle Daten exportieren (JSON)",
        importData: "Daten importieren",
        importMode: "Import-Modus",
        importModeMerge: "Zusammenführen",
        importModeMergeDesc: "Importierte Daten neben bestehenden Aufgaben hinzufügen",
        importModeReplace: "Ersetzen",
        importModeReplaceDesc: "Alle bestehenden Daten löschen und durch importierte ersetzen",
        importReplaceWarning: "Warnung: Dies löscht dauerhaft alle Ihre aktuellen Aufgaben, Listen und Projekte!",
        importSelectFile: "JSON-Datei auswählen...",
        importButton: "Importieren",
        importing: "Importiere...",
        exporting: "Exportiere...",
        projects: "Projekte",
        projectsDesc: "Aufgaben mit farbcodierten Projekten organisieren",
        addProject: "Projekt hinzufügen",
        projectName: "Name",
        projectColor: "Farbe",
        noProjects: "Noch keine Projekte",
        assignProject: "Projekt zuweisen",
        removeProject: "Projekt entfernen",
        weekdayFormat: "Wochentag-Format",
        weekdayFormatFull: "Vollständiger Name (Montag)",
        weekdayFormatShort: "Kurz (Mo)",
        weekdayFormatNarrow: "Schmal (M)",
        weekdayFormatCustom: "Benutzerdefiniert",
        customWeekdayNamesMon: "Mo; Di; Mi; Do; Fr; Sa; So",
        customWeekdayNamesSun: "So; Mo; Di; Mi; Do; Fr; Sa",
        weekdayCase: "Groß-/Kleinschreibung",
        weekdayCaseNormal: "Klein (montag)",
        weekdayCaseCapitalize: "Großbuchstabe (Montag)",
        weekdayCaseUppercase: "Großbuchstaben (MONTAG)",
        styling: "Design",
        motivation: "Motivation",
        about: "Über",
        setupAssistant: "Einrichtungsassistent starten",
        weekStartLabel: "Woche beginnt am",
        startViewLabel: "Ansicht beginnt mit",
        monday: "Montag",
        sunday: "Sonntag",
        today: "Heute",
        yesterday: "Gestern",
        accountId: "Konto-ID",
        accountIdDesc: "Ihre eindeutige Konto-Kennung",
        accountNumberLabel: "Kontonummer",
        accountNumberDesc: "Ihre Kontonummer zur Identifikation",
        connectOutlook: "Outlook verbinden",
        syncTasks: "Aufgaben synchronisieren",
        syncTasksDesc: "Aufgaben mit Google Tasks oder Microsoft To-Do synchronisieren.",
        unsyncConfirmMsg: "Synchronisierung von \"{title}\" beenden? Die Aufgaben werden in den Papierkorb verschoben.",
        unsyncConfirm: "Sync beenden",
        unsyncCancel: "Abbrechen",
        syncAll: "Alle synchronisieren",
        unsyncAll: "Alle trennen",
        fetchingLists: "(Listen werden geladen...)",
        listHeader: "Liste",
        syncHeader: "Sync",
        noTaskListsFound: "Keine Aufgabenlisten gefunden.",
        connectProviderAbove: "Verbinden Sie einen Anbieter oben, um Aufgabenlisten zu synchronisieren.",
        noCalendarsFound: "Keine Kalender gefunden oder Zugriff verweigert.",
        noCalendarsApple: "Keine Kalender geladen. Bitte trennen und erneut verbinden.",
        noCalendarsSynology: "Keine Kalender geladen. Bitte trennen und erneut verbinden.",
        selectionAfterConnect: "Auswahl nach Verbindung verfügbar.",
        sharedCalendar: "Geteilter Kalender",
        primaryCalendar: "(Primär)",
        fontCustomization: "Schriftart-Anpassung",
        dateLayoutRight: "Datum rechts vom Wochentag",
        dateLayoutLeft: "Datum links vom Wochentag",
        dateLayoutAbove: "Datum über Wochentag",
        dateLayoutBelow: "Datum unter Wochentag",
        dateLayoutHidden: "Datum ausgeblendet",
        dateLayoutMobile: "Datum-Layout (Mobil)",
        dayWeekdayGap: "Tag / Wochentag Abstand",
        weekdayFont: "Wochentag-Schrift",
        dateFont: "Datum-Schrift",
        taskFont: "Aufgaben-Schrift",
        eventFont: "Termin-Schrift",
        goalFont: "Ziel / Zitat-Schrift",
        cwFont: "Kalenderwoche-Schrift",
        yearFont: "Jahr-Schrift",
        fontPlaceholder: "z.B. Poppins, Bebas Neue...",
        fontSizePlaceholder: "Schriftgröße (z.B. 1.25rem)",
        weightLight: "Leicht",
        weightNormal: "Normal",
        weightMedium: "Mittel",
        weightSemi: "Halb-fett",
        weightBold: "Fett",
        weightBlack: "Schwarz",
        hourLabelFormat: "Stundenformat",
        hourLabelShort: "Kurz (8, 9, 10)",
        hourLabelFull: "Voll (8:00, 9:00, 10:00)",
        showSubhourLabels: "Viertelstunden anzeigen (:15, :30, :45)",
        showScheduleCalendar: "Zeitplan / Kalender anzeigen",
        showDoThisNow: '"Jetzt erledigen" statt Motto anzeigen',
        focusTimer: "Fokus-Timer (Min)",
        focusBreak: "Fokus-Pause (Min)",
        goalScopeTitle: "Ziel-Zeitraum",
        goalFallbackTitle: "Ziel-Fallback",
        motivationalQuote: "Motivationszitat / Feiertags-Hinweis",
        nextTodo: "Nächstes To-Do",
        defaultText: "Standardtext",
        apiDataSources: "API-Datenquellen (URLs)",
        addSource: "Quelle hinzufügen",
        urlFormatHelp: "URL die JSON-Zitate liefert",
        quoteLanguages: "Zitatsprachen",
        quoteLanguagesDesc: "Wählen Sie die Sprachen für Ihre Zitate. Mindestens eine muss ausgewählt sein.",
        quoteFallbackDesc: "Wenn keine externe Quelle antwortet, werden lokale kuratierte Zitate in Ihrer Sprache verwendet.",
        defaultGoalPlaceholder: "Ihr Ziel hier eingeben...",
        saturdayColor: "Samstag",
        sundayColor: "Sonntag",
        todayHighlight: "Heute-Hervorhebung",
        pastDayColor: "Vergangene Tage",
        deleteProjectConfirm: "Projekt löschen",
        importConfirmReplace: "Dies löscht ALLE bestehenden Aufgaben, Listen und Projekte. Fortfahren?",
        importSuccess: "Import abgeschlossen",
        importInvalidJson: "Ungültige JSON-Datei",
    },
    fr: {
        settings: "Paramètres",
        general: "Général",
        calendar: "Connexions",
        localisation: "Localisation",
        account: "Compte",
        runningList: "Liste continue (reporter les tâches à aujourd'hui)",
        protectEventTimes: "Protéger les horaires des événements",
        showTimeGrid: "Afficher la grille horaire",
        timeSlotDuration: "Durée des créneaux horaires",
        viewStyle: "Style d'affichage",
        simpleView: "Simple",
        calendarView: "Calendrier",
        listView: "Liste",
        weekView: "Semaine",
        kanbanView: "Kanban",
        filterByProject: "Tous les projets",
        filterByList: "Toutes les listes",
        filterByWeek: "Toutes les semaines",
        kanbanStages: "Étapes Kanban",
        kanbanStagesDesc: "Définissez les étapes de votre tableau Kanban. Glissez les tâches entre les colonnes pour changer leur étape.",
        addStage: "Ajouter une étape",
        stageName: "Nom de l'étape",
        noStage: "Aucune étape",
        headerDisplay: "Affichage en-tête",
        headerDisplayKW: "Semaine calendaire (KW)",
        headerDisplayMonth: "Nom du mois - Mars",
        headerDisplayMonthYear: "Mois & Année - Mars | 2026",
        headerDisplayDate: "Date complète - 13.03.2026",
        headerDisplayCustom: "Personnalisé - Vendredi - 13 Mars",
        headerDisplayNone: "Aucun",
        headerCustomFormatLabel: "Format (ex: DD.MM.YYYY)",
        language: "Langue",
        dateFormat: "Format de date",
        timeFormat: "Format d'heure",
        saveChanges: "Enregistrer",
        connectedCalendars: "Calendriers connectés",
        connectMore: "En connecter d'autres",
        connectGoogle: "Connecter Google Agenda",
        connectApple: "Connecter le calendrier Apple",
        appleRemindersNote: "Les rappels Apple ne sont pas pris en charge. Depuis iOS 13 / macOS Catalina, Apple ne fournit plus de CalDAV ni d'API publique pour les rappels. Seuls les événements de calendrier peuvent être synchronisés.",
        connectSynology: "Connecter Synology",
        connectNotion: "Connecter Notion",
        noCalendars: "Aucun calendrier connecté.",
        dataPrivacy: "Données et confidentialité",
        downloadData: "Télécharger mes données",
        deleteAccount: "Supprimer le compte",
        name: "Nom",
        email: "E-mail",
        timezone: "Fuseau horaire",
        changePassword: "Changer le mot de passe",
        newPassword: "Nouveau mot de passe",
        confirmPassword: "Confirmer le mot de passe",
        someday: "UN JOUR",
        lists: "Listes",
        newList: "Nouvelle liste",
        allTabs: "Tous",
        newTab: "Nouvel onglet",
        newTabName: "Nom du nouvel onglet :",
        assignTab: "Assigner à un onglet",
        noTab: "Aucun onglet",
        renameTab: "Double-cliquez pour renommer",
        dissolveTab: "Supprimer l'onglet (garder les listes)",
        loading: "Chargement de vos tâches…",
        sycing: "Synchronisation…",
        synced: "Synchronisé",
        localization: "Localisation",
        allDayEvents: "ÉVÉNEMENTS JOURNÉE ENTIÈRE",
        syncCalendar: "Synchroniser le calendrier",
        toggleDarkMode: "Basculer le mode sombre",
        signOut: "Se déconnecter",
        startHour: "Début de journée",
        endHour: "Fin de journée",
        weekAbbr: "S",
        goalOfWeek: "Objectif de la semaine",
        goalScope: "Portée de l'objectif",
        goalScopeWeek: "Par semaine",
        goalScopeDay: "Par jour",
        goalFallback: "Type d'objectif par défaut",
        defaultGoal: "Objectif par défaut personnalisé",
        showTaskCheckboxes: "Afficher les cases à cocher",
        showProjectIcons: "Afficher les icônes de projets",
        showSomeday: "Afficher la section Un jour",
        showAllDay: "Afficher la section Journée entière",
        allDayPosition: "Position des événements journée entière",
        allDayAbove: "Au-dessus",
        allDayBelow: "En dessous",
        newPasswordDesc: "Laisser vide pour conserver le mot de passe actuel.",
        dateAlignment: "Alignement de la date",
        dateVerticalAlign: "Alignement vertical de la date",
        alignTop: "Haut",
        alignMiddle: "Milieu",
        alignBottom: "Bas",
        dateLayout: "Disposition de la date",
        alignmentLeft: "Gauche",
        alignmentCenter: "Centre",
        alignmentRight: "Droite",
        alignmentTight: "Compact",
        backupRestore: "Sauvegarde et restauration",
        backupRestoreDesc: "Exportez toutes vos tâches, listes et projets au format JSON. Vous pouvez modifier le fichier et le réimporter.",
        exportAllData: "Exporter toutes les données (JSON)",
        importData: "Importer des données",
        importMode: "Mode d'importation",
        importModeMerge: "Fusionner",
        importModeMergeDesc: "Ajouter les données importées aux tâches existantes",
        importModeReplace: "Remplacer",
        importModeReplaceDesc: "Supprimer toutes les données existantes et les remplacer par les données importées",
        importReplaceWarning: "Attention : toutes vos tâches, listes et projets actuels seront définitivement supprimés !",
        importSelectFile: "Sélectionner un fichier JSON…",
        importButton: "Importer",
        importing: "Importation…",
        exporting: "Exportation…",
        projects: "Projets",
        projectsDesc: "Organisez vos tâches avec des projets colorés",
        addProject: "Ajouter un projet",
        projectName: "Nom",
        projectColor: "Couleur",
        noProjects: "Aucun projet",
        assignProject: "Attribuer un projet",
        removeProject: "Retirer le projet",
        weekdayFormat: "Format des jours",
        weekdayFormatFull: "Nom complet (lundi)",
        weekdayFormatShort: "Abrégé (lun.)",
        weekdayFormatNarrow: "Étroit (L)",
        weekdayFormatCustom: "Personnalisé",
        customWeekdayNamesMon: "Lu; Ma; Me; Je; Ve; Sa; Di",
        customWeekdayNamesSun: "Di; Lu; Ma; Me; Je; Ve; Sa",
        weekdayCase: "Casse des jours",
        weekdayCaseNormal: "Normal (lundi)",
        weekdayCaseCapitalize: "Majuscule (Lundi)",
        weekdayCaseUppercase: "Majuscules (LUNDI)",
        styling: "Style",
        motivation: "Motivation",
        about: "À propos",
        setupAssistant: "Lancer l'assistant de configuration",
        weekStartLabel: "La semaine commence le",
        startViewLabel: "Vue commence par",
        monday: "Lundi",
        sunday: "Dimanche",
        today: "Aujourd'hui",
        yesterday: "Hier",
        accountId: "ID du compte",
        accountIdDesc: "Votre identifiant de compte unique",
        accountNumberLabel: "Numéro de compte",
        accountNumberDesc: "Votre numéro de compte pour identification",
        connectOutlook: "Connecter Outlook",
        syncTasks: "Synchroniser les tâches",
        syncTasksDesc: "Synchronisez les tâches avec Google Tasks ou Microsoft To-Do.",
        unsyncConfirmMsg: "Arrêter la synchronisation de \"{title}\" ? Ses tâches seront mises à la corbeille.",
        unsyncConfirm: "Arrêter la sync",
        unsyncCancel: "Annuler",
        syncAll: "Tout synchroniser",
        unsyncAll: "Tout désynchroniser",
        fetchingLists: "(chargement des listes...)",
        listHeader: "Liste",
        syncHeader: "Sync",
        noTaskListsFound: "Aucune liste de tâches trouvée.",
        connectProviderAbove: "Connectez un fournisseur ci-dessus pour synchroniser les listes.",
        noCalendarsFound: "Aucun calendrier trouvé ou accès refusé.",
        noCalendarsApple: "Aucun calendrier chargé. Veuillez déconnecter et reconnecter.",
        noCalendarsSynology: "Aucun calendrier chargé. Veuillez déconnecter et reconnecter.",
        selectionAfterConnect: "Sélection disponible après connexion.",
        sharedCalendar: "Calendrier partagé",
        primaryCalendar: "(Principal)",
        fontCustomization: "Personnalisation des polices",
        dateLayoutRight: "Date à droite du jour",
        dateLayoutLeft: "Date à gauche du jour",
        dateLayoutAbove: "Date au-dessus du jour",
        dateLayoutBelow: "Date en dessous du jour",
        dateLayoutHidden: "Date masquée",
        dateLayoutMobile: "Disposition date (mobile)",
        dayWeekdayGap: "Espacement jour / semaine",
        weekdayFont: "Police du jour",
        dateFont: "Police de la date",
        taskFont: "Police des tâches",
        eventFont: "Police des événements",
        goalFont: "Police objectif / citation",
        cwFont: "Police semaine calendaire",
        yearFont: "Police de l'année",
        fontPlaceholder: "ex. Poppins, Bebas Neue...",
        fontSizePlaceholder: "Taille (ex. 1.25rem)",
        weightLight: "Léger",
        weightNormal: "Normal",
        weightMedium: "Moyen",
        weightSemi: "Semi-gras",
        weightBold: "Gras",
        weightBlack: "Noir",
        hourLabelFormat: "Format des heures",
        hourLabelShort: "Court (8, 9, 10)",
        hourLabelFull: "Complet (8:00, 9:00, 10:00)",
        showSubhourLabels: "Afficher les quarts d'heure (:15, :30, :45)",
        showScheduleCalendar: "Afficher le calendrier",
        showDoThisNow: '"Faire maintenant" au lieu de la devise',
        focusTimer: "Minuteur Focus (min)",
        focusBreak: "Pause Focus (min)",
        goalScopeTitle: "Période de l'objectif",
        goalFallbackTitle: "Fallback objectif",
        motivationalQuote: "Citation motivante / info jour férié",
        nextTodo: "Prochaine tâche",
        defaultText: "Texte par défaut",
        apiDataSources: "Sources de données API (URLs)",
        addSource: "Ajouter une source",
        urlFormatHelp: "URL retournant des citations JSON",
        quoteLanguages: "Langues des citations",
        quoteLanguagesDesc: "Choisissez les langues de vos citations. Au moins une doit être sélectionnée.",
        quoteFallbackDesc: "Si aucune source externe ne répond, des citations locales dans votre langue sont utilisées.",
        defaultGoalPlaceholder: "Entrez votre objectif ici...",
        saturdayColor: "Samedi",
        sundayColor: "Dimanche",
        todayHighlight: "Surbrillance aujourd'hui",
        pastDayColor: "Jours passés",
        deleteProjectConfirm: "Supprimer le projet",
        importConfirmReplace: "Cela supprimera TOUTES les tâches, listes et projets existants. Continuer ?",
        importSuccess: "Import terminé",
        importInvalidJson: "Fichier JSON invalide",
    },
    es: {
        settings: "Ajustes",
        general: "General",
        calendar: "Conexiones",
        localisation: "Localización",
        account: "Cuenta",
        runningList: "Lista continua (pasar tareas a hoy)",
        protectEventTimes: "Proteger horarios de eventos",
        showTimeGrid: "Mostrar cuadrícula horaria",
        timeSlotDuration: "Duración de los intervalos",
        viewStyle: "Estilo de vista",
        simpleView: "Simple",
        calendarView: "Calendario",
        listView: "Lista",
        weekView: "Semana",
        kanbanView: "Kanban",
        filterByProject: "Todos los proyectos",
        filterByList: "Todas las listas",
        filterByWeek: "Todas las semanas",
        kanbanStages: "Etapas Kanban",
        kanbanStagesDesc: "Define las etapas de tu tablero Kanban. Arrastra tareas entre columnas para cambiar su etapa.",
        addStage: "Añadir etapa",
        stageName: "Nombre de etapa",
        noStage: "Sin etapa",
        headerDisplay: "Visualización de encabezado",
        headerDisplayKW: "Semana calendario (KW)",
        headerDisplayMonth: "Nombre del mes - Marzo",
        headerDisplayMonthYear: "Mes y Año - Marzo | 2026",
        headerDisplayDate: "Fecha completa - 13.03.2026",
        headerDisplayCustom: "Personalizado - Viernes - 13 Marzo",
        headerDisplayNone: "Ninguno",
        headerCustomFormatLabel: "Formato (ej. DD.MM.YYYY)",
        language: "Idioma",
        dateFormat: "Formato de fecha",
        timeFormat: "Formato de hora",
        saveChanges: "Guardar cambios",
        connectedCalendars: "Calendarios conectados",
        connectMore: "Conectar más",
        connectGoogle: "Conectar Google Calendar",
        connectApple: "Conectar calendario de Apple",
        appleRemindersNote: "Los recordatorios de Apple no son compatibles. Desde iOS 13 / macOS Catalina, Apple ya no ofrece CalDAV ni una API pública para recordatorios. Solo se pueden sincronizar eventos del calendario.",
        connectSynology: "Conectar Synology",
        connectNotion: "Conectar Notion",
        noCalendars: "No hay calendarios conectados.",
        dataPrivacy: "Datos y privacidad",
        downloadData: "Descargar mis datos",
        deleteAccount: "Eliminar cuenta",
        name: "Nombre",
        email: "Correo electrónico",
        timezone: "Zona horaria",
        changePassword: "Cambiar contraseña",
        newPassword: "Nueva contraseña",
        confirmPassword: "Confirmar contraseña",
        someday: "ALGÚN DÍA",
        lists: "Listas",
        newList: "Nueva lista",
        allTabs: "Todas",
        newTab: "Nueva pestaña",
        newTabName: "Nombre de nueva pestaña:",
        assignTab: "Asignar a pestaña",
        noTab: "Sin pestaña",
        renameTab: "Doble clic para renombrar",
        dissolveTab: "Eliminar pestaña (mantener listas)",
        loading: "Cargando tus tareas…",
        sycing: "Sincronizando…",
        synced: "Sincronizado",
        localization: "Localización",
        allDayEvents: "EVENTOS DE TODO EL DÍA",
        syncCalendar: "Sincronizar calendario",
        toggleDarkMode: "Alternar modo oscuro",
        signOut: "Cerrar sesión",
        startHour: "Inicio del día",
        endHour: "Fin del día",
        weekAbbr: "S",
        goalOfWeek: "Objetivo de la semana",
        goalScope: "Alcance del objetivo",
        goalScopeWeek: "Por semana",
        goalScopeDay: "Por día",
        goalFallback: "Tipo de objetivo por defecto",
        defaultGoal: "Objetivo predeterminado personalizado",
        showTaskCheckboxes: "Mostrar casillas en las tareas",
        showProjectIcons: "Mostrar iconos de proyectos",
        showSomeday: "Mostrar sección Algún día",
        showAllDay: "Mostrar sección Todo el día",
        allDayPosition: "Posición de eventos de todo el día",
        allDayAbove: "Arriba",
        allDayBelow: "Abajo",
        newPasswordDesc: "Dejar en blanco para conservar la contraseña actual.",
        dateAlignment: "Alineación de la fecha",
        dateVerticalAlign: "Alineación vertical de la fecha",
        alignTop: "Arriba",
        alignMiddle: "Centro",
        alignBottom: "Abajo",
        dateLayout: "Disposición de la fecha",
        alignmentLeft: "Izquierda",
        alignmentCenter: "Centro",
        alignmentRight: "Derecha",
        alignmentTight: "Compacto",
        backupRestore: "Copia de seguridad y restauración",
        backupRestoreDesc: "Exporta todas tus tareas, listas y proyectos como archivo JSON. Puedes editar el archivo y volver a importarlo.",
        exportAllData: "Exportar todos los datos (JSON)",
        importData: "Importar datos",
        importMode: "Modo de importación",
        importModeMerge: "Combinar",
        importModeMergeDesc: "Añadir los datos importados junto a las tareas existentes",
        importModeReplace: "Reemplazar",
        importModeReplaceDesc: "Eliminar todos los datos existentes y reemplazarlos con los datos importados",
        importReplaceWarning: "Advertencia: ¡Se eliminarán permanentemente todas tus tareas, listas y proyectos actuales!",
        importSelectFile: "Seleccionar archivo JSON…",
        importButton: "Importar",
        importing: "Importando…",
        exporting: "Exportando…",
        projects: "Proyectos",
        projectsDesc: "Organiza las tareas con proyectos de colores",
        addProject: "Añadir proyecto",
        projectName: "Nombre",
        projectColor: "Color",
        noProjects: "Aún no hay proyectos",
        assignProject: "Asignar proyecto",
        removeProject: "Quitar proyecto",
        weekdayFormat: "Formato de los días",
        weekdayFormatFull: "Nombre completo (lunes)",
        weekdayFormatShort: "Abreviado (lun.)",
        weekdayFormatNarrow: "Estrecho (L)",
        weekdayFormatCustom: "Personalizado",
        customWeekdayNamesMon: "Lu; Ma; Mi; Ju; Vi; Sá; Do",
        customWeekdayNamesSun: "Do; Lu; Ma; Mi; Ju; Vi; Sá",
        weekdayCase: "Mayúsculas de los días",
        weekdayCaseNormal: "Normal (lunes)",
        weekdayCaseCapitalize: "Mayúscula inicial (Lunes)",
        weekdayCaseUppercase: "Mayúsculas (LUNES)",
        styling: "Estilo",
        motivation: "Motivación",
        about: "Acerca de",
        setupAssistant: "Iniciar asistente de configuración",
        weekStartLabel: "La semana empieza el",
        startViewLabel: "Vista empieza con",
        monday: "Lunes",
        sunday: "Domingo",
        today: "Hoy",
        yesterday: "Ayer",
        accountId: "ID de cuenta",
        accountIdDesc: "Tu identificador único de cuenta",
        accountNumberLabel: "Número de cuenta",
        accountNumberDesc: "Tu número de cuenta para identificación",
        connectOutlook: "Conectar Outlook",
        syncTasks: "Sincronizar tareas",
        syncTasksDesc: "Sincroniza tareas con Google Tasks o Microsoft To-Do.",
        unsyncConfirmMsg: "¿Dejar de sincronizar \"{title}\"? Sus tareas se moverán a la papelera.",
        unsyncConfirm: "Dejar de sincronizar",
        unsyncCancel: "Cancelar",
        syncAll: "Sincronizar todo",
        unsyncAll: "Desincronizar todo",
        fetchingLists: "(cargando listas...)",
        listHeader: "Lista",
        syncHeader: "Sync",
        noTaskListsFound: "No se encontraron listas de tareas.",
        connectProviderAbove: "Conecta un proveedor arriba para sincronizar listas.",
        noCalendarsFound: "No se encontraron calendarios o acceso denegado.",
        noCalendarsApple: "No hay calendarios cargados. Desconecta y reconecta.",
        noCalendarsSynology: "No hay calendarios cargados. Desconecta y reconecta.",
        selectionAfterConnect: "Selección disponible tras conectar.",
        sharedCalendar: "Calendario compartido",
        primaryCalendar: "(Principal)",
        fontCustomization: "Personalización de fuentes",
        dateLayoutRight: "Fecha a la derecha del día",
        dateLayoutLeft: "Fecha a la izquierda del día",
        dateLayoutAbove: "Fecha encima del día",
        dateLayoutBelow: "Fecha debajo del día",
        dateLayoutHidden: "Fecha oculta",
        dateLayoutMobile: "Disposición fecha (móvil)",
        dayWeekdayGap: "Espacio día / semana",
        weekdayFont: "Fuente del día",
        dateFont: "Fuente de la fecha",
        taskFont: "Fuente de tareas",
        eventFont: "Fuente de eventos",
        goalFont: "Fuente objetivo / cita",
        cwFont: "Fuente semana calendario",
        yearFont: "Fuente del año",
        fontPlaceholder: "ej. Poppins, Bebas Neue...",
        fontSizePlaceholder: "Tamaño (ej. 1.25rem)",
        weightLight: "Ligero",
        weightNormal: "Normal",
        weightMedium: "Medio",
        weightSemi: "Semi-negrita",
        weightBold: "Negrita",
        weightBlack: "Negro",
        hourLabelFormat: "Formato de horas",
        hourLabelShort: "Corto (8, 9, 10)",
        hourLabelFull: "Completo (8:00, 9:00, 10:00)",
        showSubhourLabels: "Mostrar cuartos de hora (:15, :30, :45)",
        showScheduleCalendar: "Mostrar calendario",
        showDoThisNow: '"Hacer ahora" en vez de lema',
        focusTimer: "Temporizador Focus (min)",
        focusBreak: "Pausa Focus (min)",
        goalScopeTitle: "Periodo del objetivo",
        goalFallbackTitle: "Fallback del objetivo",
        motivationalQuote: "Cita motivacional / festivo",
        nextTodo: "Siguiente tarea",
        defaultText: "Texto predeterminado",
        apiDataSources: "Fuentes de datos API (URLs)",
        addSource: "Añadir fuente",
        urlFormatHelp: "URL que devuelve citas JSON",
        quoteLanguages: "Idiomas de citas",
        quoteLanguagesDesc: "Elige los idiomas de tus citas. Al menos uno debe estar seleccionado.",
        quoteFallbackDesc: "Si ninguna fuente externa responde, se usan citas locales en tu idioma.",
        defaultGoalPlaceholder: "Ingresa tu objetivo aquí...",
        saturdayColor: "Sábado",
        sundayColor: "Domingo",
        todayHighlight: "Resaltado de hoy",
        pastDayColor: "Días pasados",
        deleteProjectConfirm: "Eliminar proyecto",
        importConfirmReplace: "Esto eliminará TODAS las tareas, listas y proyectos existentes. ¿Continuar?",
        importSuccess: "Importación completada",
        importInvalidJson: "Archivo JSON inválido",
    },
    it: {
        settings: "Impostazioni",
        general: "Generali",
        calendar: "Connessioni",
        localisation: "Localizzazione",
        account: "Account",
        runningList: "Lista continua (sposta le attività a oggi)",
        protectEventTimes: "Proteggi gli orari degli eventi",
        showTimeGrid: "Mostra griglia oraria",
        timeSlotDuration: "Durata degli intervalli",
        viewStyle: "Stile di visualizzazione",
        simpleView: "Semplice",
        calendarView: "Calendario",
        listView: "Lista",
        weekView: "Settimana",
        kanbanView: "Kanban",
        filterByProject: "Tutti i progetti",
        filterByList: "Tutte le liste",
        filterByWeek: "Tutte le settimane",
        kanbanStages: "Fasi Kanban",
        kanbanStagesDesc: "Definisci le fasi della tua board Kanban. Trascina le attività tra le colonne per cambiare la loro fase.",
        addStage: "Aggiungi fase",
        stageName: "Nome fase",
        noStage: "Nessuna fase",
        headerDisplay: "Visualizzazione intestazione",
        headerDisplayKW: "Settimana calendario (KW)",
        headerDisplayMonth: "Nome del mese - Marzo",
        headerDisplayMonthYear: "Mese e Anno - Marzo | 2026",
        headerDisplayDate: "Data completa - 13.03.2026",
        headerDisplayCustom: "Personalizzato - Venerdì - 13 Marzo",
        headerDisplayNone: "Nessuno",
        headerCustomFormatLabel: "Formato (es. DD.MM.YYYY)",
        language: "Lingua",
        dateFormat: "Formato data",
        timeFormat: "Formato ora",
        saveChanges: "Salva modifiche",
        connectedCalendars: "Calendari collegati",
        connectMore: "Collega altri",
        connectGoogle: "Collega Google Calendar",
        connectApple: "Collega il calendario Apple",
        appleRemindersNote: "I promemoria Apple non sono supportati. Da iOS 13 / macOS Catalina, Apple non fornisce più CalDAV o un'API pubblica per i promemoria. Solo gli eventi del calendario possono essere sincronizzati.",
        connectSynology: "Collega Synology",
        connectNotion: "Collega Notion",
        noCalendars: "Nessun calendario collegato.",
        dataPrivacy: "Dati e privacy",
        downloadData: "Scarica i miei dati",
        deleteAccount: "Elimina account",
        name: "Nome",
        email: "E-mail",
        timezone: "Fuso orario",
        changePassword: "Cambia password",
        newPassword: "Nuova password",
        confirmPassword: "Conferma password",
        someday: "UN GIORNO",
        lists: "Liste",
        newList: "Nuova lista",
        allTabs: "Tutte",
        newTab: "Nuova scheda",
        newTabName: "Nome nuova scheda:",
        assignTab: "Assegna a scheda",
        noTab: "Nessuna scheda",
        renameTab: "Doppio clic per rinominare",
        dissolveTab: "Rimuovi scheda (mantieni liste)",
        loading: "Caricamento delle attività…",
        sycing: "Sincronizzazione…",
        synced: "Sincronizzato",
        localization: "Localizzazione",
        allDayEvents: "EVENTI GIORNATA INTERA",
        syncCalendar: "Sincronizza calendario",
        toggleDarkMode: "Attiva/disattiva modalità scura",
        signOut: "Esci",
        startHour: "Inizio giornata",
        endHour: "Fine giornata",
        weekAbbr: "S",
        goalOfWeek: "Obiettivo della settimana",
        goalScope: "Ambito dell'obiettivo",
        goalScopeWeek: "Per settimana",
        goalScopeDay: "Per giorno",
        goalFallback: "Tipo di obiettivo predefinito",
        defaultGoal: "Obiettivo predefinito personalizzato",
        showTaskCheckboxes: "Mostra caselle di spunta sulle attività",
        showProjectIcons: "Mostra icone per i progetti",
        showSomeday: "Mostra sezione Un giorno",
        showAllDay: "Mostra sezione Giornata intera",
        allDayPosition: "Posizione eventi giornata intera",
        allDayAbove: "Sopra",
        allDayBelow: "Sotto",
        newPasswordDesc: "Lascia vuoto per mantenere la password attuale.",
        dateAlignment: "Allineamento della data",
        dateVerticalAlign: "Allineamento verticale della data",
        alignTop: "In alto",
        alignMiddle: "Al centro",
        alignBottom: "In basso",
        dateLayout: "Disposizione della data",
        alignmentLeft: "Sinistra",
        alignmentCenter: "Centro",
        alignmentRight: "Destra",
        alignmentTight: "Compatto",
        backupRestore: "Backup e ripristino",
        backupRestoreDesc: "Esporta tutte le attività, le liste e i progetti come file JSON. Puoi modificare il file e reimportarlo.",
        exportAllData: "Esporta tutti i dati (JSON)",
        importData: "Importa dati",
        importMode: "Modalità di importazione",
        importModeMerge: "Unisci",
        importModeMergeDesc: "Aggiungere i dati importati alle attività esistenti",
        importModeReplace: "Sostituisci",
        importModeReplaceDesc: "Elimina tutti i dati esistenti e sostituiscili con i dati importati",
        importReplaceWarning: "Attenzione: tutte le attività, le liste e i progetti attuali verranno eliminati definitivamente!",
        importSelectFile: "Seleziona file JSON…",
        importButton: "Importa",
        importing: "Importazione…",
        exporting: "Esportazione…",
        projects: "Progetti",
        projectsDesc: "Organizza le attività con progetti colorati",
        addProject: "Aggiungi progetto",
        projectName: "Nome",
        projectColor: "Colore",
        noProjects: "Nessun progetto",
        assignProject: "Assegna progetto",
        removeProject: "Rimuovi progetto",
        weekdayFormat: "Formato dei giorni",
        weekdayFormatFull: "Nome completo (lunedì)",
        weekdayFormatShort: "Abbreviato (lun)",
        weekdayFormatNarrow: "Stretto (L)",
        weekdayFormatCustom: "Personalizzato",
        customWeekdayNamesMon: "Lu; Ma; Me; Gi; Ve; Sa; Do",
        customWeekdayNamesSun: "Do; Lu; Ma; Me; Gi; Ve; Sa",
        weekdayCase: "Maiuscole dei giorni",
        weekdayCaseNormal: "Normale (lunedì)",
        weekdayCaseCapitalize: "Iniziale maiuscola (Lunedì)",
        weekdayCaseUppercase: "Maiuscolo (LUNEDÌ)",
        styling: "Stile",
        motivation: "Motivazione",
        about: "Info",
        setupAssistant: "Assistente di configurazione",
        weekStartLabel: "La settimana inizia il",
        startViewLabel: "Vista inizia con",
        monday: "Lunedì",
        sunday: "Domenica",
        today: "Oggi",
        yesterday: "Ieri",
        accountId: "ID account",
        accountIdDesc: "Il tuo identificatore account unico",
        accountNumberLabel: "Numero account",
        accountNumberDesc: "Il tuo numero account per identificazione",
        connectOutlook: "Connetti Outlook",
        syncTasks: "Sincronizza attività",
        syncTasksDesc: "Sincronizza le attività con Google Tasks o Microsoft To-Do.",
        unsyncConfirmMsg: "Interrompere la sincronizzazione di \"{title}\"? Le attività verranno spostate nel cestino.",
        unsyncConfirm: "Interrompi sync",
        unsyncCancel: "Annulla",
        syncAll: "Sincronizza tutto",
        unsyncAll: "Desincronizza tutto",
        fetchingLists: "(caricamento liste...)",
        listHeader: "Lista",
        syncHeader: "Sync",
        noTaskListsFound: "Nessuna lista di attività trovata.",
        connectProviderAbove: "Connetti un provider sopra per sincronizzare le liste.",
        noCalendarsFound: "Nessun calendario trovato o accesso negato.",
        noCalendarsApple: "Nessun calendario caricato. Disconnetti e riconnetti.",
        noCalendarsSynology: "Nessun calendario caricato. Disconnetti e riconnetti.",
        selectionAfterConnect: "Selezione disponibile dopo la connessione.",
        sharedCalendar: "Calendario condiviso",
        primaryCalendar: "(Principale)",
        fontCustomization: "Personalizzazione caratteri",
        dateLayoutRight: "Data a destra del giorno",
        dateLayoutLeft: "Data a sinistra del giorno",
        dateLayoutAbove: "Data sopra il giorno",
        dateLayoutBelow: "Data sotto il giorno",
        dateLayoutHidden: "Data nascosta",
        dateLayoutMobile: "Layout data (mobile)",
        dayWeekdayGap: "Spazio giorno / settimana",
        weekdayFont: "Carattere giorno",
        dateFont: "Carattere data",
        taskFont: "Carattere attività",
        eventFont: "Carattere eventi",
        goalFont: "Carattere obiettivo / citazione",
        cwFont: "Carattere settimana calendario",
        yearFont: "Carattere anno",
        fontPlaceholder: "es. Poppins, Bebas Neue...",
        fontSizePlaceholder: "Dimensione (es. 1.25rem)",
        weightLight: "Leggero",
        weightNormal: "Normale",
        weightMedium: "Medio",
        weightSemi: "Semi-grassetto",
        weightBold: "Grassetto",
        weightBlack: "Nero",
        hourLabelFormat: "Formato delle ore",
        hourLabelShort: "Breve (8, 9, 10)",
        hourLabelFull: "Completo (8:00, 9:00, 10:00)",
        showSubhourLabels: "Mostra quarti d'ora (:15, :30, :45)",
        showScheduleCalendar: "Mostra calendario",
        showDoThisNow: '"Fai ora" invece del motto',
        focusTimer: "Timer Focus (min)",
        focusBreak: "Pausa Focus (min)",
        goalScopeTitle: "Periodo dell'obiettivo",
        goalFallbackTitle: "Fallback obiettivo",
        motivationalQuote: "Citazione motivazionale / festività",
        nextTodo: "Prossima attività",
        defaultText: "Testo predefinito",
        apiDataSources: "Fonti dati API (URL)",
        addSource: "Aggiungi fonte",
        urlFormatHelp: "URL che restituisce citazioni JSON",
        quoteLanguages: "Lingue delle citazioni",
        quoteLanguagesDesc: "Scegli le lingue delle citazioni. Almeno una deve essere selezionata.",
        quoteFallbackDesc: "Se nessuna fonte esterna risponde, vengono usate citazioni locali nella tua lingua.",
        defaultGoalPlaceholder: "Inserisci il tuo obiettivo qui...",
        saturdayColor: "Sabato",
        sundayColor: "Domenica",
        todayHighlight: "Evidenziazione oggi",
        pastDayColor: "Giorni passati",
        deleteProjectConfirm: "Elimina progetto",
        importConfirmReplace: "Questo eliminerà TUTTE le attività, liste e progetti esistenti. Continuare?",
        importSuccess: "Importazione completata",
        importInvalidJson: "File JSON non valido",
    },
};

// Date utilities
function getStartOfWeek(date: Date, startDay: number = 0): Date {
    const d = new Date(date);
    const day = d.getDay();
    const diff = d.getDate() - day + (day < startDay ? -7 : 0) + startDay; // if today is sun(0) and start is mon(1), day < start (0 < 1) -> -7 + 1 = -6. 0 - 6 = -6. Correct.
    // Wait, let's re-verify:
    // Start Mon(1). Today Sun(0). day=0. diff = date - 0 + (-7) + 1 = date - 6. Correct (last Monday).
    // Start Mon(1). Today Mon(1). day=1. diff = date - 1 + (0) + 1 = date. Correct.
    // Start Sun(0). Today Mon(1). day=1. diff = date - 1 + (0) + 0 = date - 1. Correct (last Sunday).
    // Start Sun(0). Today Sun(0). day=0. diff = date - 0 + (0) + 0 = date. Correct.
    // What if Start Mon(1), Today Tue(2). day=2. diff = date - 2 + 0 + 1 = date - 1. Correct.

    // Better logic:
    // const day = d.getDay();
    // const diff = (day < startDay ? 7 : 0) + day - startDay;
    // d.setDate(d.getDate() - diff);
    //
    // Let's stick to a robust one:
    const currentDay = d.getDay();
    const distance = (currentDay - startDay + 7) % 7;
    d.setDate(d.getDate() - distance);
    return d;
}

function formatDateHeader(date: Date, locale: string = "en-US"): string {
    return date.toLocaleDateString(locale, { day: "numeric", month: "short" }); // e.g. 12. Feb.
}

function getDayName(date: Date, locale: string = "en-US", format?: string, customNames?: string, weekStartDay: number = 0, dayCase: string = "capitalize"): string {
    let name: string;
    if (format === "custom" && customNames) {
        // Split by comma or semicolon to allow spaces in names
        const names = customNames.split(/[,;]+/).map(s => s.trim()).filter(Boolean);
        if (names.length === 7) {
            // Adjust index based on weekStartDay (0=Sun, 1=Mon)
            const index = (date.getDay() - weekStartDay + 7) % 7;
            name = names[index];
        } else {
            name = date.toLocaleDateString(locale, { weekday: "long" });
        }
    } else {
        const weekdayOption = format === "narrow" ? "narrow" : (format === "short" ? "short" : "long");
        try {
            name = date.toLocaleDateString(locale, { weekday: weekdayOption });
        } catch (e) {
            name = date.toLocaleDateString("en-US", { weekday: weekdayOption });
        }
    }
    if (dayCase === "uppercase") return name.toUpperCase();
    if (dayCase === "normal") return name.toLowerCase();
    // capitalize: first letter uppercase, rest lowercase
    return name.charAt(0).toUpperCase() + name.slice(1).toLowerCase();
}

function isSameDay(d1: Date, d2: Date): boolean {
    return d1.toDateString() === d2.toDateString();
}

function formatDateToISO(date: Date): string {
    const year = date.getFullYear();
    const month = String(date.getMonth() + 1).padStart(2, "0");
    const day = String(date.getDate()).padStart(2, "0");
    return `${year}-${month}-${day}`;
}

/**
 * Parses a date string from a calendar event.
 * If strictly a date (YYYY-MM-DD), it's parsed as local mid-night.
 * If an ISO string with time, it's parsed regularly.
 */
function parseCalendarDate(dateStr: string): Date {
    if (!dateStr) return new Date();
    // If it's date-only (YYYY-MM-DD), parse as local midnight
    if (!dateStr.includes("T")) {
        const parts = dateStr.split("-").map(Number);
        if (parts.length === 3) {
            return new Date(parts[0], parts[1] - 1, parts[2], 0, 0, 0);
        }
    }
    // If it's an ISO string but we want local midnight (e.g. from cache or older backend)
    // we still parse it. The fix in the backend should reduce this.
    return new Date(dateStr);
}

function formatHour(hour: number, minutes: number = 0, format: "short" | "full" = "short", timeFormat: string = "24h"): string {
    if (timeFormat === "12h") {
        const h = hour % 12 || 12;
        const ampm = hour >= 12 ? "PM" : "AM";
        const m = minutes > 0 ? `:${minutes.toString().padStart(2, "0")}` : "";
        return format === "full" || minutes > 0 ? `${h}:${minutes.toString().padStart(2, "0")} ${ampm}` : `${h}${m} ${ampm}`;
    }
    // 24h format
    if (format === "short" && minutes === 0) {
        return `${hour}`;
    }
    return `${hour.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}`;
}

function getTimeSlots(
    cellDuration: CellDuration,
    startHour: number,
    endHour: number,
): string[] {
    const slots: string[] = [];
    const slotsPerHour = 60 / cellDuration;
    for (let hour = startHour; hour < endHour; hour++) {
        for (let slot = 0; slot < slotsPerHour; slot++) {
            const minutes = slot * cellDuration;
            slots.push(
                `${hour.toString().padStart(2, "0")}:${minutes.toString().padStart(2, "0")}`,
            );
        }
    }
    return slots;
}

function getHourFromSlot(slot: string): number {
    return parseInt(slot.split(":")[0], 10);
}

function getWeekNumber(date: Date): number {
    // ISO 8601 week number: weeks start on Monday
    const d = new Date(
        Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()),
    );
    const dayNum = d.getUTCDay() || 7;
    d.setUTCDate(d.getUTCDate() + 4 - dayNum);
    const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
    return Math.ceil(((d.getTime() - yearStart.getTime()) / 86400000 + 1) / 7);
}

// Get the Monday of the ISO week that the first visible day belongs to.
// This ensures CW changes when the first visible day crosses into a new ISO week.
function getCWReferenceDate(days: Date[]): Date {
    if (days.length === 0) return new Date();
    const first = days[0];
    const dow = first.getDay(); // 0=Sun, 1=Mon, ..., 6=Sat
    // Calculate distance back to Monday (ISO week start)
    // Sunday (0) → go back 6 days to previous Monday
    // Monday (1) → 0, Tuesday (2) → 1, etc.
    const distToMonday = dow === 0 ? 6 : dow - 1;
    return new Date(first.getTime() - distToMonday * 86400000);
}

// Format a custom header string using tokens
function formatCustomHeader(format: string, days: Date[], language: string, t: any): string {
    if (!format) return "";
    
    // Choose the reference date: if today is within the visible days, use today.
    // Otherwise, use the standard CW reference date (start of week).
    const today = new Date();
    const isTodayInWeek = days.some(d =>
        d.getDate() === today.getDate() &&
        d.getMonth() === today.getMonth() &&
        d.getFullYear() === today.getFullYear()
    );
    const refDate = isTodayInWeek ? today : getCWReferenceDate(days);
    
    // Define token mappings
    const tokens: Record<string, string> = {
        "YYYY": refDate.getFullYear().toString(),
        "WW": getWeekNumber(refDate).toString().padStart(2, '0'),
        "MMMM": refDate.toLocaleDateString(language, { month: 'long' }),
        "MMM": refDate.toLocaleDateString(language, { month: 'short' }),
        "MM": (refDate.getMonth() + 1).toString().padStart(2, '0'),
        "M": (refDate.getMonth() + 1).toString(),
        "DDDD": refDate.toLocaleDateString(language, { weekday: 'long' }),
        "DDD": refDate.toLocaleDateString(language, { weekday: 'short' }),
        "DD": refDate.getDate().toString().padStart(2, '0'),
        "D": refDate.getDate().toString(),
        "[TODAY]": today.toLocaleDateString(language, { day: '2-digit', month: '2-digit', year: 'numeric' })
    };

    // Single-pass replacement using regex to avoid nested replacements (e.g. M in MMMM)
    // Standalone 'W' removed to allow literal 'W' (like in 'KW')
    const regex = /\[TODAY\]|YYYY|WW|MMMM|MMM|MM|M|DDDD|DDD|DD|D/g;
    
    return format.replace(regex, (match) => tokens[match] || match);
}

// Check if an event is an all-day event
// Defined outside component to avoid stale closure issues in useCallbacks
const isAllDayEvent = (event: CalendarEvent): boolean => {
    if (!event.startTime) return false;

    // Date-only format (YYYY-MM-DD)
    if (!event.startTime.includes("T")) return true;

    const start = parseCalendarDate(event.startTime);
    const end = parseCalendarDate(event.endTime);
    const durationHours = (end.getTime() - start.getTime()) / (1000 * 60 * 60);

    // Check if strictly midnight to midnight in local time
    const isLocalMidnight = start.getHours() === 0 && start.getMinutes() === 0;

    // Check if UTC midnight (common for API-converted date strings)
    const isUTCMidnight =
        start.getUTCHours() === 0 && start.getUTCMinutes() === 0;

    // If it's effectively 24h+ and starts at midnight (local or UTC), treat as all-day
    return durationHours >= 24 && (isLocalMidnight || isUTCMidnight);
};

// Helper to invert colors for dark mode
function invertColor(hex: string): string {
    if (!hex) return hex;
    let color = hex.startsWith("#") ? hex.slice(1) : hex;
    if (color.length === 3) {
        color = color
            .split("")
            .map((c) => c + c)
            .join("");
    }
    if (color.length !== 6) return hex;

    try {
        const r = (255 - parseInt(color.slice(0, 2), 16))
            .toString(16)
            .padStart(2, "0");
        const g = (255 - parseInt(color.slice(2, 4), 16))
            .toString(16)
            .padStart(2, "0");
        const b = (255 - parseInt(color.slice(4, 6), 16))
            .toString(16)
            .padStart(2, "0");
        return `#${r}${g}${b}`;
    } catch (e) {
        return hex;
    }
}

// Helper to lighten color for dark mode
function adjustColorForDarkMode(hex: string, isDarkMode: boolean): string {
    if (!isDarkMode || !hex || !hex.startsWith("#")) return hex;

    // Simple hex to RGB
    let r = parseInt(hex.slice(1, 3), 16);
    let g = parseInt(hex.slice(3, 5), 16);
    let b = parseInt(hex.slice(5, 7), 16);

    // Calculate brightness (0-255)
    const brightness = (r * 299 + g * 587 + b * 114) / 1000;

    // If it's too dark for dark mode, lighten it
    if (brightness < 120) {
        r = Math.min(255, r + 100);
        g = Math.min(255, g + 100);
        b = Math.min(255, b + 100);
        return `#${r.toString(16).padStart(2, "0")}${g.toString(16).padStart(2, "0")}${b.toString(16).padStart(2, "0")}`;
    }

    return hex;
}

// Main Component
export default function WeeklyView() {
    const { data: session } = useSession();
    const [tasks, setTasks] = useState<Task[]>([]);
    const [connections, setConnections] = useState<any[]>([]); // Lifted state
    const [rawCalendarEvents, setRawCalendarEvents] = useState<CalendarEvent[]>(
        [],
    );

    // Weather data: { "2026-03-17T08:00": { temp: 5, code: 2, wind: 12, ... }, ... }
    type WeatherHour = { temp: number; code: number; feelsLike?: number; wind?: number; gusts?: number; precipProb?: number; precip?: number; humidity?: number; uv?: number };
    const [weatherData, setWeatherData] = useState<Record<string, WeatherHour>>({});

    // Extend events with editable flag from connections
    const calendarEvents = useMemo(() => {
        return rawCalendarEvents.map((event) => {
            let isEditable = false;
            if (event.calendarId) {
                for (const conn of connections) {
                    if (conn.calendars && Array.isArray(conn.calendars)) {
                        const cal = conn.calendars.find(
                            (c: any) => c.id === event.calendarId,
                        );
                        if (cal && cal.editable) {
                            isEditable = true;
                            break;
                        }
                    }
                }
            }
            return { ...event, editable: isEditable };
        });
    }, [rawCalendarEvents, connections]);
    const [currentWeekStart, setCurrentWeekStart] = useState(() => {
        const d = new Date();
        d.setHours(0, 0, 0, 0);
        return d;
    });
    const [viewDays, setViewDays] = useState(7);
    const savedViewDaysRef = useRef(7); // Track user's saved preference for restoring on resize
    const [isLoading, setIsLoading] = useState(true);

    // Responsive: auto-adjust viewDays based on screen width
    useEffect(() => {
        const getResponsiveViewDays = (width: number): number => {
            if (width <= 480) return 1;
            if (width <= 768) return 3;
            if (width <= 1024) return Math.min(savedViewDaysRef.current, 5);
            return savedViewDaysRef.current;
        };

        const handleResize = () => {
            const responsiveDays = getResponsiveViewDays(window.innerWidth);
            setViewDays(responsiveDays);
        };

        // Set initial value
        handleResize();

        window.addEventListener('resize', handleResize);
        return () => window.removeEventListener('resize', handleResize);
    }, []); // savedViewDaysRef is a ref, so no dependency needed
    const [isSyncing, setIsSyncing] = useState(false);
    const [isFetchingCalendar, setIsFetchingCalendar] = useState(false);
    const [syncError, setSyncError] = useState<string | null>(null);
    const syncCountRef = useRef(0);
    const startSync = useCallback(() => { syncCountRef.current++; setIsSyncing(true); }, []);
    const endSync = useCallback(() => { syncCountRef.current = Math.max(0, syncCountRef.current - 1); if (syncCountRef.current === 0) setIsSyncing(false); }, []);
    const [darkMode, setDarkMode] = useState(false);
    const [timeFormat, setTimeFormat] = useState("24h");
    const [dateFormat, setDateFormat] = useState("yyyy-MM-dd");
    const [hourLabelFormat, setHourLabelFormat] = useState<"short" | "full">("short");
    const [showSubHourSlots, setShowSubHourSlots] = useState(true);
    const [allDayPosition, setAllDayPosition] = useState<"above" | "below">("below");

    const [somedayExpanded, setSomedayExpanded] = useState(true);
    const [isAllDayExpanded, setIsAllDayExpanded] = useState(true);
    const [somedayHeight, setSomedayHeight] = useState<number | null>(() => {
        if (typeof document !== 'undefined') {
            const c = document.cookie.match(/somedayHeight=(\d+)/);
            return c ? parseInt(c[1]) : null;
        }
        return null;
    });
    const [allDayHeight, setAllDayHeight] = useState<number | null>(() => {
        if (typeof document !== 'undefined') {
            const c = document.cookie.match(/allDayHeight=(\d+)/);
            return c ? parseInt(c[1]) : null;
        }
        return null;
    });
    const resizingRef = useRef<{ target: 'someday' | 'allday'; startY: number; startHeight: number; handleOnTop: boolean } | null>(null);

    const startResize = useCallback((e: React.MouseEvent | React.TouchEvent, target: 'someday' | 'allday', handleOnTop = false) => {
        e.preventDefault();
        e.stopPropagation();
        const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY;
        const section = target === 'someday' ? somedaySectionRef.current : (document.querySelector('.all-day-events-section') as HTMLElement);
        if (!section) return;
        resizingRef.current = { target, startY: clientY, startHeight: section.getBoundingClientRect().height, handleOnTop };

        const onMove = (ev: MouseEvent | TouchEvent) => {
            if (!resizingRef.current) return;
            const y = 'touches' in ev ? ev.touches[0].clientY : ev.clientY;
            const rawDelta = y - resizingRef.current.startY;
            // Top handle: dragging up = increase height (invert delta); bottom handle: normal
            const delta = resizingRef.current.handleOnTop ? -rawDelta : rawDelta;
            const newHeight = Math.max(40, Math.min(600, resizingRef.current.startHeight + delta));
            if (resizingRef.current.target === 'someday') setSomedayHeight(newHeight);
            else setAllDayHeight(newHeight);
        };
        const onEnd = () => {
            if (resizingRef.current) {
                const section2 = resizingRef.current.target === 'someday' ? somedaySectionRef.current : (document.querySelector('.all-day-events-section') as HTMLElement);
                if (section2) {
                    const h = Math.round(section2.getBoundingClientRect().height);
                    document.cookie = `${resizingRef.current.target === 'someday' ? 'somedayHeight' : 'allDayHeight'}=${h};path=/;max-age=31536000`;
                }
            }
            resizingRef.current = null;
            window.removeEventListener('mousemove', onMove);
            window.removeEventListener('mouseup', onEnd);
            window.removeEventListener('touchmove', onMove);
            window.removeEventListener('touchend', onEnd);
        };
        window.addEventListener('mousemove', onMove);
        window.addEventListener('mouseup', onEnd);
        window.addEventListener('touchmove', onMove);
        window.addEventListener('touchend', onEnd);
    }, []);

    const [somedayLists, setSomedayLists] = useState<SomedayList[]>([]);
    const [projects, setProjects] = useState<{ id: string; name: string; icon?: string | null; color?: string | null }[]>([]);
    const [editingTaskId, setEditingTaskId] = useState<string | null>(null);
    const [draggingListId, setDraggingListId] = useState<string | null>(null);
    const [listToDelete, setListToDelete] = useState<string | null>(null);
    const [activeSomedayTab, setActiveSomedayTab] = useState<string | null>(null);
    const [editingTabName, setEditingTabName] = useState<string | null>(null);
    const [renamingTabValue, setRenamingTabValue] = useState("");
    const [newTabForListId, setNewTabForListId] = useState<string | null>(null);
    const [newTabNameValue, setNewTabNameValue] = useState("");
    const [creatingNewTab, setCreatingNewTab] = useState(false);
    const [creatingNewTabName, setCreatingNewTabName] = useState("");
    const [dragOverTab, setDragOverTab] = useState<string | null>(null);
    const [customTabs, setCustomTabs] = useState<string[]>([]);

    useEffect(() => {
        if (typeof window !== "undefined") {
            const saved = localStorage.getItem("weekly_active_someday_tab");
            if (saved) setActiveSomedayTab(saved === "__all__" ? null : saved);
            try {
                const savedTabs = localStorage.getItem("weekly_custom_tabs");
                if (savedTabs) setCustomTabs(JSON.parse(savedTabs));
            } catch { /* ignore */ }
        }
    }, []);

    const saveCustomTabs = (tabs: string[]) => {
        setCustomTabs(tabs);
        localStorage.setItem("weekly_custom_tabs", JSON.stringify(tabs));
    };

    const somedayTabs = useMemo(() => {
        const tabs = new Set<string>();
        somedayLists.forEach(l => { if (l.tab) tabs.add(l.tab); });
        customTabs.forEach(t => tabs.add(t));
        return Array.from(tabs).sort();
    }, [somedayLists, customTabs]);

    const setSomedayTab = (tab: string | null) => {
        setActiveSomedayTab(tab);
        localStorage.setItem("weekly_active_someday_tab", tab ?? "__all__");
    };

    const assignListToTab = async (listId: string, tab: string | null) => {
        setSomedayLists(prev => prev.map(l => l.id === listId ? { ...l, tab } : l));
        try {
            await fetch("/api/someday-lists", {
                method: "PATCH",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ id: listId, tab }),
            });
        } catch (e) {
            console.error("Failed to update list tab:", e);
        }
    };

    const renameTab = async (oldName: string, newName: string) => {
        if (!newName.trim() || newName === oldName) return;
        const trimmed = newName.trim();
        const listsToUpdate = somedayLists.filter(l => l.tab === oldName);
        setSomedayLists(prev => prev.map(l => l.tab === oldName ? { ...l, tab: trimmed } : l));
        if (customTabs.includes(oldName)) {
            saveCustomTabs(customTabs.map(t => t === oldName ? trimmed : t));
        }
        if (activeSomedayTab === oldName) setSomedayTab(trimmed);
        for (const list of listsToUpdate) {
            try {
                await fetch("/api/someday-lists", {
                    method: "PATCH",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ id: list.id, tab: trimmed }),
                });
            } catch (e) {
                console.error("Failed to rename tab for list:", e);
            }
        }
    };

    const dissolveTab = async (tabName: string) => {
        const listsToUpdate = somedayLists.filter(l => l.tab === tabName);
        setSomedayLists(prev => prev.map(l => l.tab === tabName ? { ...l, tab: null } : l));
        if (customTabs.includes(tabName)) {
            saveCustomTabs(customTabs.filter(t => t !== tabName));
        }
        if (activeSomedayTab === tabName) setSomedayTab(null);
        for (const list of listsToUpdate) {
            try {
                await fetch("/api/someday-lists", {
                    method: "PATCH",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ id: list.id, tab: null }),
                });
            } catch (e) {
                console.error("Failed to dissolve tab for list:", e);
            }
        }
    };

    const filteredSomedayLists = useMemo(() => {
        if (activeSomedayTab === null) return somedayLists;
        return somedayLists.filter(l => (l.tab || null) === activeSomedayTab);
    }, [somedayLists, activeSomedayTab]);
    const [dropTargetListIndex, setDropTargetListIndex] = useState<number | null>(null);
    const [activeAddSlot, setActiveAddSlot] = useState<{ listId: string; slotIdx: number } | null>(null);
    const isDragFromHandle = useRef(false);

    // Undo/Redo state
    const undoStackRef = useRef<{ tasks: Task[]; somedayLists: SomedayList[] }[]>([]);
    const redoStackRef = useRef<{ tasks: Task[]; somedayLists: SomedayList[] }[]>([]);
    const [undoCount, setUndoCount] = useState(0);
    const [redoCount, setRedoCount] = useState(0);
    const skipSnapshotRef = useRef(false);

    // Mobile detection
    const [isMobile, setIsMobile] = useState(false);

    const [showMobileFabSheet, setShowMobileFabSheet] = useState(false);
    const [showMobileFabMenu, setShowMobileFabMenu] = useState(false);
    const [showHeaderMore, setShowHeaderMore] = useState(false);
    const [fabTaskTitle, setFabTaskTitle] = useState("");

    const fabTextareaRef = useRef<HTMLTextAreaElement>(null);

    // Moved state definitions to the top
    const [showSettings, setShowSettings] = useState(false);
    const [showOnboarding, setShowOnboarding] = useState(false);
    const [activeTab, setActiveTab] = useState<
        "calendar" | "general" | "account" | "styling" | "motivation" | "about"
    >("general");
    const [exportStartDate, setExportStartDate] = useState("");
    const [exportEndDate, setExportEndDate] = useState("");
    const [passwords, setPasswords] = useState({ new: "", confirm: "" });
    const [accountMsg, setAccountMsg] = useState<string>("");
    const [importingTasksState, setImportingTasksState] =
        useState<boolean>(false);
    const [importStatusMsg, setImportStatusMsg] = useState<{
        type: "success" | "error";
        text: string;
    } | null>(null);
    const [unsyncConfirm, setUnsyncConfirm] = useState<{
        provider: "google" | "apple" | "outlook" | "synology";
        list: { id: string; title: string };
    } | null>(null);
    const [isImportModalOpen, setIsImportModalOpen] = useState(false);
    const [importProvider, setImportProvider] = useState<
        "google" | "apple" | "outlook" | "synology" | null
    >(null);
    const [importLists, setImportLists] = useState<
        { id: string; title: string }[]
    >([]);
    const [isFetchingLists, setIsFetchingLists] = useState(false);
    const [availableTaskLists, setAvailableTaskLists] = useState<{
        [key in "google" | "apple" | "outlook" | "synology"]?: { id: string; title: string }[];
    }>({});
    const [isFetchingProviderLists, setIsFetchingProviderLists] = useState<
        Record<string, boolean>
    >({});
    const [isVisible, setIsVisible] = useState(false);
    const [profile, setProfile] = useState<any>({
        name: session?.user?.name || "",
        email: session?.user?.email || "",
        timezone: "UTC",
        language: "de",
        dateFormat: "yyyy-MM-dd",
        timeFormat: "24h",
        startHour: 8,
        endHour: 18,
        autoRolling: false,
        protectEventTimes: false,
        showTimeGrid: true,
        cellDuration: 30,
        viewStyle: "simple",
        fontSize: "M",
        showNextTask: false,
        showSomeday: true,
        showAllDayEvents: true,
        showSchedule: true,
        hourLabelFormat: "short",
        showSubHourSlots: true,
        dayHeaderGap: "0.75em",
        dateVerticalAlign: "middle",
        allDayPosition: "above",
        focusTimerDuration: 25,
        focusBreakDuration: 5,
        headlineFont: "Oswald",
        headlineFontSize: "1.5rem",
        headlineFontWeight: "900",
        weekdayColor: "#0ea5e9",
        dateFontFamily: "Inter",
        dateFontSize: "0.65rem",
        dateFontWeight: "400",
        timeTaskFontFamily: "Inter",
        timeTaskFontSize: "0.75rem",
        timeTaskFontWeight: "500",
        bodyFont: "Inter",
        taskFontFamily: "Inter",
        taskFontSize: "0.9rem",
        taskFontWeight: "400",
        eventFontFamily: "Inter",
        eventFontSize: "0.85rem",
        eventFontWeight: "400",
        goalFallbackType: "quote",
        goalFontFamily: "Lato",
        goalFontSize: "1rem",
        goalFontWeight: "500",
        goalScope: "week",
        dateLayout: "right",
        mobileDateLayout: "below",
        dateAlignment: "center",
        weekendColorSat: "#ffc107",
        weekendColorSun: "#dc2626",
        pastDayColor: "#a6a6a7",
        cwFontFamily: "Oswald",
        cwFontSize: "1.5rem",
        cwFontWeight: "700",
        yearFontFamily: "Oswald",
        yearFontSize: "1.5rem",
        yearFontWeight: "700",
        quoteSourceUrl: "",
        quoteSourceUrls: [],
        quoteLanguages: ["en", "de"],
        weatherEnabled: false,
        weatherLat: null,
        weatherLon: null,
        weatherLocation: "",
    });
    const [motivationalQuote, setMotivationalQuote] = useState("");
    const [showSummary, setShowSummary] = useState(false);

    const [isAddingSomedayList, setIsAddingSomedayList] = useState(false);
    const [newSomedayListName, setNewSomedayListName] = useState("");
    const [selectedSomedayProvider, setSelectedSomedayProvider] = useState<
        string | null
    >(null);
    const [language, setLanguage] = useState("de");
    const [syncStatus, setSyncStatus] = useState<"idle" | "syncing" | "synced">(
        "idle",
    );
    const [cellDuration, setCellDuration] = useState<CellDuration>(30);
    const [draggedTask, setDraggedTask] = useState<Task | null>(null);
    const [showTimeGrid, setShowTimeGrid] = useState(true);
    const [slideDirection, setSlideDirection] = useState<"next" | "prev" | null>(
        null,
    );
    const [activeSlot, setActiveSlot] = useState<{
        day: number;
        slot: string;
    } | null>(null);
    const [newSlotTask, setNewSlotTask] = useState("");
    const [selectedTaskForNotes, setSelectedTaskForNotes] = useState<Task | null>(
        null,
    );
    const [currentTime, setCurrentTime] = useState(new Date());
    const [dropPreview, setDropPreview] = useState<{
        day?: number;
        slot?: string;
        listId?: string;
        slotIdx?: number;
    } | null>(null);
    const [viewStyle, setViewStyle] = useState<ViewStyle>("simple");

    // Per-view settings: overrides that apply only to a specific view
    type PerViewOverrides = {
        hourLabelFormat?: "short" | "full";
        showSubHourSlots?: boolean;
        weatherEnabled?: boolean;
        weatherDisplay?: WeatherDisplayKey[];
        showTaskCheckboxes?: boolean;
        showProjectIcons?: boolean;
        showSomeday?: boolean;
        showAllDayEvents?: boolean;
        allDayPosition?: "above" | "below";
        showCompletedTasks?: boolean;
        cellDuration?: number;
        startHour?: number;
        endHour?: number;
    };
    const PER_VIEW_KEYS = ["hourLabelFormat", "showSubHourSlots", "weatherEnabled", "weatherDisplay", "showTaskCheckboxes", "showProjectIcons", "showSomeday", "showAllDayEvents", "allDayPosition", "showCompletedTasks", "cellDuration", "startHour", "endHour"] as const;
    const [viewSettings, setViewSettings] = useState<Record<string, PerViewOverrides>>({});
    const viewSettingsRef = useRef<Record<string, PerViewOverrides>>({});
    viewSettingsRef.current = viewSettings;

    const getEffective = <K extends keyof PerViewOverrides>(key: K, globalVal: PerViewOverrides[K]): PerViewOverrides[K] => {
        const vs = viewSettingsRef.current[viewStyle];
        if (vs && vs[key] !== undefined) return vs[key] as PerViewOverrides[K];
        return globalVal;
    };
    const isPerView = (key: keyof PerViewOverrides): boolean => {
        const vs = viewSettingsRef.current[viewStyle];
        return !!(vs && vs[key] !== undefined);
    };
    const saveViewSetting = async <K extends keyof PerViewOverrides>(key: K, value: PerViewOverrides[K], perView: boolean) => {
        const updated = { ...viewSettingsRef.current };
        if (perView) {
            updated[viewStyle] = { ...(updated[viewStyle] || {}), [key]: value };
        } else {
            // Remove per-view overrides for this key from ALL views and set globally
            for (const v of Object.keys(updated)) {
                if (updated[v] && updated[v][key] !== undefined) {
                    const { [key]: _, ...rest } = updated[v] as any;
                    updated[v] = rest;
                }
            }
        }
        viewSettingsRef.current = updated;
        setViewSettings(updated);
        // Save to DB
        try {
            await fetch("/api/user/profile", {
                method: "PATCH",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ viewSettings: updated }),
            });
        } catch (e) { console.error("Failed to save view settings:", e); }
    };
    const togglePerView = async (key: keyof PerViewOverrides, globalVal: any) => {
        if (isPerView(key)) {
            // Remove per-view override (revert to global)
            const updated = { ...viewSettingsRef.current };
            if (updated[viewStyle]) {
                const { [key]: _, ...rest } = updated[viewStyle] as any;
                updated[viewStyle] = rest;
            }
            viewSettingsRef.current = updated;
            setViewSettings(updated);
            try {
                await fetch("/api/user/profile", {
                    method: "PATCH",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ viewSettings: updated }),
                });
            } catch (e) { console.error("Failed to save view settings:", e); }
        } else {
            // Set per-view override to current global value
            saveViewSetting(key, globalVal, true);
        }
    };

    // State declarations needed before effective per-view values
    const [showSomeday, setShowSomeday] = useState(true);
    const [showAllDay, setShowAllDay] = useState(true);

    // Effective per-view values (override if set for current view, else global)
    const effectiveHourLabelFormat = getEffective("hourLabelFormat", hourLabelFormat);
    const effectiveShowSubHourSlots = getEffective("showSubHourSlots", showSubHourSlots);
    const effectiveWeatherEnabled = getEffective("weatherEnabled", profile.weatherEnabled);
    const effectiveWeatherDisplay = (getEffective("weatherDisplay", WEATHER_DISPLAY_DEFAULTS) || WEATHER_DISPLAY_DEFAULTS) as WeatherDisplayKey[];
    const effectiveShowTaskCheckboxes = getEffective("showTaskCheckboxes", profile.showTaskCheckboxes);
    const effectiveShowProjectIcons = getEffective("showProjectIcons", profile.showProjectIcons);
    const effectiveShowSomeday = getEffective("showSomeday", showSomeday);
    const effectiveShowAllDay = getEffective("showAllDayEvents", showAllDay);
    const effectiveAllDayPosition = getEffective("allDayPosition", allDayPosition) || "above";
    const effectiveShowCompletedTasks = getEffective("showCompletedTasks", profile.showCompletedTasks !== false);
    const effectiveCellDuration = getEffective("cellDuration", cellDuration) as CellDuration;
    const effectiveStartHour = getEffective("startHour", profile.startHour ?? 8) ?? 8;
    const effectiveEndHour = getEffective("endHour", profile.endHour ?? 18) ?? 18;

    const defaultKanbanStages: KanbanStage[] = [
        { id: "backlog", name: "Backlog", color: "#94a3b8" },
        { id: "todo", name: "To Do", color: "#3b82f6" },
        { id: "in-progress", name: "In Progress", color: "#f59e0b" },
        { id: "review", name: "Review", color: "#8b5cf6" },
        { id: "done", name: "Done", color: "#22c55e" },
    ];
    const [kanbanStages, setKanbanStages] = useState<KanbanStage[]>(defaultKanbanStages);
    const saveKanbanStages = async (stages: KanbanStage[]) => {
        setKanbanStages(stages);
        try {
            await fetch("/api/user/profile", {
                method: "PATCH",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ kanbanStages: JSON.stringify(stages) }),
            });
        } catch (e) { console.error("Failed to save kanban stages:", e); }
    };
    // Kanban filters
    const [kanbanFilterProject, setKanbanFilterProject] = useState<string>("");
    const [kanbanFilterList, setKanbanFilterList] = useState<string>("");
    const [kanbanFilterWeek, setKanbanFilterWeek] = useState<string>("");
    const [kanbanSearch, setKanbanSearch] = useState("");
    const [kanbanDeleteStageId, setKanbanDeleteStageId] = useState<string | null>(null);
    const [kanbanAddingStageId, setKanbanAddingStageId] = useState<string | null>(null);
    const [kanbanNewTaskTitle, setKanbanNewTaskTitle] = useState("");
    const [kanbanDetailTask, setKanbanDetailTask] = useState<Task | null>(null);
    const [kanbanExpandedCards, setKanbanExpandedCards] = useState<Set<string>>(new Set());

    const [protectEventTimes, setProtectEventTimes] = useState(false);
    const [unlockedEvents, setUnlockedEvents] = useState<Set<string>>(new Set());

    const [startHour, setStartHour] = useState(8);
    const [endHour, setEndHour] = useState(18);
    const [weekStartDay, setWeekStartDay] = useState(1); // 1 = Monday, 0 = Sunday
    const [goal, setGoal] = useState("your goal of this week");
    const [isEditingGoal, setIsEditingGoal] = useState(false);
    const [showNextTask, setShowNextTask] = useState(false);
    const [calendarEditMode, setCalendarEditMode] = useState(false);
    const [selectedTaskForRecurrence, setSelectedTaskForRecurrence] =
        useState<Task | null>(null);
    const [showFocusMode, setShowFocusMode] = useState(false);
    const [showSchedule, setShowSchedule] = useState(true);
    const [focusBreakDuration, setFocusBreakDuration] = useState(5);
    const [weekdayFormat, setWeekdayFormat] = useState<"long" | "short" | "narrow" | "custom">("long");
    const [weekdayCase, setWeekdayCase] = useState<"normal" | "capitalize" | "uppercase">("capitalize");
    const [customWeekdayNames, setCustomWeekdayNames] = useState("");

    // New UI State
    const [isSearchOpen, setIsSearchOpen] = useState(false);
    const [isRecurringTasksOpen, setIsRecurringTasksOpen] = useState(false);
    const [showDatePicker, setShowDatePicker] = useState(false);
    const datePickerBtnRef = useRef<HTMLDivElement>(null);
    const [showQuickSettings, setShowQuickSettings] = useState(false);
    const [showProjectsSidebar, setShowProjectsSidebar] = useState(false);

    const [focusTimerDuration, setFocusTimerDuration] = useState(25);
    const [fontSize, setFontSize] = useState<"S" | "M" | "L">("M");
    const [headlineFont, setHeadlineFont] = useState("Inter");
    const [headlineFontSize, setHeadlineFontSize] = useState("1.25rem");
    const [headlineFontWeight, setHeadlineFontWeight] = useState("900");
    const [dateFontFamily, setDateFontFamily] = useState("Inter");
    const [dateFontSize, setDateFontSize] = useState("0.65rem");
    const [dateFontWeight, setDateFontWeight] = useState("400");
    const [timeTaskFontFamily, setTimeTaskFontFamily] = useState("Inter");
    const [timeTaskFontSize, setTimeTaskFontSize] = useState("0.75rem");
    const [timeTaskFontWeight, setTimeTaskFontWeight] = useState("500");
    const [bodyFont, setBodyFont] = useState("Inter");
    const [taskFontFamily, setTaskFontFamily] = useState("Inter");
    const [taskFontSize, setTaskFontSize] = useState("0.9rem");
    const [taskFontWeight, setTaskFontWeight] = useState("400");
    const [eventFontFamily, setEventFontFamily] = useState("Inter");
    const [eventFontSize, setEventFontSize] = useState("0.85rem");
    const [eventFontWeight, setEventFontWeight] = useState("400");
    const [fontWeight, setFontWeight] = useState("400");
    const [weekendColorSat, setWeekendColorSat] = useState("#666666");
    const [weekendColorSun, setWeekendColorSun] = useState("#dc2626");

    // Load fonts
    // Dynamic font loading is handled by the main useGoogleFonts hook call below

    // Collect custom font names from profile settings
    const customFonts = useMemo(() => {
        const fontProps = [
            profile.headlineFont, profile.dateFontFamily, profile.taskFontFamily,
            profile.timeTaskFontFamily, profile.eventFontFamily, profile.goalFontFamily,
            profile.cwFontFamily, profile.yearFontFamily, profile.bodyFont,
        ];
        return fontProps.filter((f): f is string => !!f && isCustomFont(f));
    }, [profile.headlineFont, profile.dateFontFamily, profile.taskFontFamily,
        profile.timeTaskFontFamily, profile.eventFontFamily, profile.goalFontFamily,
        profile.cwFontFamily, profile.yearFontFamily, profile.bodyFont]);

    // Load ALL available fonts + any custom fonts at the top level
    useGoogleFonts([
        ...AVAILABLE_FONTS.filter((f) => f.value !== "__custom__").map((f) => f.value),
        ...customFonts,
    ]);

    // Dynamic font loading is handled by useGoogleFonts hook call above

    // Calendar Event Modal State
    const [calendarEventModal, setCalendarEventModal] = useState<{
        isOpen: boolean;
        event?: CalendarEvent;
        initialDate?: Date;
        initialStartTime?: string;
    }>({ isOpen: false });

    // Dark Mode Persistence & Class Toggle
    const [mounted, setMounted] = useState(false);

    const [recurringDeleteModal, setRecurringDeleteModal] = useState<{
        isOpen: boolean;
        taskId: string | null;
    }>({ isOpen: false, taskId: null });

    useEffect(() => {
        setMounted(true);
        const savedDarkMode = localStorage.getItem("weekly-dark-mode");
        if (savedDarkMode) {
            setDarkMode(JSON.parse(savedDarkMode));
        }
        const savedWeekStart = localStorage.getItem("weekly-week-start");
        if (savedWeekStart) {
            setWeekStartDay(Number(savedWeekStart));
        }
    }, []);

    // Mobile detection — track viewport width
    useEffect(() => {
        const check = () => setIsMobile(window.innerWidth <= 768);
        check();
        window.addEventListener("resize", check);
        return () => window.removeEventListener("resize", check);
    }, []);

    const profileLoadedRef = useRef(false);
    const autoSaveTimerRef = useRef<NodeJS.Timeout | null>(null);

    const fetchProfile = async () => {
        try {
            const res = await fetch("/api/user/profile");
            if (res.ok) {
                const data = await res.json();
                if (data && data.user) {
                    const profileData = data.user;
                    setProfile(profileData);
                    
                    // Sync individual states to profile data
                    if (profileData.viewStyle) setViewStyle(profileData.viewStyle);
                    if (profileData.viewDays) setViewDays(profileData.viewDays);
                    if (profileData.showTimeGrid !== undefined) setShowTimeGrid(profileData.showTimeGrid);
                    if (profileData.showSomeday !== undefined) setShowSomeday(profileData.showSomeday);
                    if (profileData.showAllDayEvents !== undefined) setShowAllDay(profileData.showAllDayEvents);
                    if (profileData.showSchedule !== undefined) setShowSchedule(profileData.showSchedule);
                    if (profileData.cellDuration) setCellDuration(profileData.cellDuration);
                    if (profileData.language) setLanguage(profileData.language);
                    if (profileData.dateFormat) setDateFormat(profileData.dateFormat);
                    if (profileData.timeFormat) setTimeFormat(profileData.timeFormat);
                    if (profileData.startHour !== undefined) setStartHour(profileData.startHour);
                    if (profileData.endHour !== undefined) setEndHour(profileData.endHour);
                    if (profileData.fontSize) setFontSize(profileData.fontSize);
                    if (profileData.showNextTask !== undefined) setShowNextTask(profileData.showNextTask);
                    if (profileData.protectEventTimes !== undefined) setProtectEventTimes(profileData.protectEventTimes);
                    if (profileData.headlineFont) setHeadlineFont(profileData.headlineFont);
                    if (profileData.headlineFontSize) setHeadlineFontSize(profileData.headlineFontSize);
                    if (profileData.headlineFontWeight) setHeadlineFontWeight(profileData.headlineFontWeight);
                    if (profileData.dateFontFamily) setDateFontFamily(profileData.dateFontFamily);
                    if (profileData.dateFontSize) setDateFontSize(profileData.dateFontSize);
                    if (profileData.dateFontWeight) setDateFontWeight(profileData.dateFontWeight);
                    if (profileData.timeTaskFontFamily) setTimeTaskFontFamily(profileData.timeTaskFontFamily);
                    if (profileData.timeTaskFontSize) setTimeTaskFontSize(profileData.timeTaskFontSize);
                    if (profileData.timeTaskFontWeight) setTimeTaskFontWeight(profileData.timeTaskFontWeight);
                    if (profileData.bodyFont) setBodyFont(profileData.bodyFont);
                    if (profileData.taskFontFamily) setTaskFontFamily(profileData.taskFontFamily);
                    if (profileData.taskFontSize) setTaskFontSize(profileData.taskFontSize);
                    if (profileData.taskFontWeight) setTaskFontWeight(profileData.taskFontWeight);
                    if (profileData.fontWeight) setFontWeight(profileData.fontWeight);
                    if (profileData.weekendColorSat) setWeekendColorSat(profileData.weekendColorSat);
                    if (profileData.weekendColorSun) setWeekendColorSun(profileData.weekendColorSun);
                    if (profileData.hourLabelFormat) setHourLabelFormat(profileData.hourLabelFormat);
                    if (profileData.showSubHourSlots !== undefined) setShowSubHourSlots(profileData.showSubHourSlots);
                    if (profileData.allDayPosition) setAllDayPosition(profileData.allDayPosition);
                    if (profileData.viewSettings) setViewSettings(profileData.viewSettings);

                    // Show onboarding wizard for new users
                    if (profileData.hasCompletedOnboarding === false) {
                        setShowOnboarding(true);
                    }
                }
            }
        } catch (err) {
            console.error("Failed to fetch profile:", err);
        } finally {
            profileLoadedRef.current = true;
            setIsLoading(false);
        }
    };

    useEffect(() => {
        fetchProfile();
    }, []);

    useEffect(() => {
        if (!profileLoadedRef.current) return;
        if (autoSaveTimerRef.current) clearTimeout(autoSaveTimerRef.current);
        autoSaveTimerRef.current = setTimeout(async () => {
            try {
                await fetch("/api/user/profile", {
                    method: "PATCH",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify(profile),
                });
                console.log("[SETTINGS] Auto-saved profile");
            } catch (err) {
                console.error("[SETTINGS] Auto-save failed:", err);
            }
        }, 800);
        return () => {
            if (autoSaveTimerRef.current) clearTimeout(autoSaveTimerRef.current);
        };
    }, [profile]);

    // Auto-focus FAB bottom sheet textarea
    useEffect(() => {
        if (showMobileFabSheet && fabTextareaRef.current) {
            setTimeout(() => fabTextareaRef.current?.focus(), 100);
        }
    }, [showMobileFabSheet]);

    useEffect(() => {
        if (!mounted) return;
        localStorage.setItem("weekly-dark-mode", JSON.stringify(darkMode));
        if (darkMode) {
            document.documentElement.classList.add("dark");
        } else {
            document.documentElement.classList.remove("dark");
        }
    }, [darkMode, mounted]);

    useEffect(() => {
        if (!mounted) return;
        localStorage.setItem("weekly-week-start", String(weekStartDay));
        // REMOVED: Re-align current week start when start day changes
        // This was forcing the view to snap to Monday, breaking the "Yesterday as first column" setting.
        // setCurrentWeekStart(prev => getStartOfWeek(prev, weekStartDay));
    }, [weekStartDay, mounted]);

    // Translation helper
    const t = translations[language] || translations["en"];

    // Refs for scroll synchronization
    const timeColumnRef = useRef<HTMLDivElement>(null);
    const dayColumnsRef = useRef<HTMLDivElement[]>([]);
    const isScrollSyncing = useRef(false);
    const isInitialScrollDone = useRef(false);
    const intendedScrollTop = useRef<number | null>(null);
    const [measuredHeaderHeight, setMeasuredHeaderHeight] = useState(65);
    const dayHeaderRef = useRef<HTMLElement>(null);
    const somedayGridRef = useRef<HTMLDivElement>(null);

    useEffect(() => {
        const updateHeight = () => {
            if (dayHeaderRef.current) {
                const height = dayHeaderRef.current.offsetHeight;
                // Allow some tolerance to avoid infinite loops across various browsers
                if (height > 0 && Math.abs(height - measuredHeaderHeight) > 1) {
                    setMeasuredHeaderHeight(height);
                }
            }
        };

        // Initial measurement
        updateHeight();

        // Measurement after a short delay for layout stabilization
        const timer = setTimeout(updateHeight, 800);

        // Also track window resize
        window.addEventListener('resize', updateHeight);

        // ResizeObserver for more robust tracking of layout shifts
        let resizeObserver: ResizeObserver | null = null;
        if (typeof window !== 'undefined' && 'ResizeObserver' in window && dayHeaderRef.current) {
            resizeObserver = new ResizeObserver(updateHeight);
            resizeObserver.observe(dayHeaderRef.current);
        }

        return () => {
            clearTimeout(timer);
            window.removeEventListener('resize', updateHeight);
            if (resizeObserver) resizeObserver.disconnect();
        };
    }, [dayHeaderRef.current, cellDuration, viewDays, isMobile, profile.mobileDateLayout, profile.dateLayout, profile.dateAlignment, profile.dayHeaderGap, profile.headlineFontSize, profile.headlineFontWeight, profile.dateFontSize, profile.dateVerticalAlign, profile.headerDisplay, profile.weekdayFormat, viewStyle]);
    const somedaySectionRef = useRef<HTMLElement | null>(null);

    // Unified scroll sync handlers
    const handleTimeColumnScroll = (e: React.UIEvent<HTMLDivElement>) => {
        const scrollTop = e.currentTarget.scrollTop;
        if (isScrollSyncing.current) return;
        isScrollSyncing.current = true;
        
        if (gridRef.current) {
            gridRef.current.scrollTop = scrollTop;
        }
        setTimeout(() => {
            isScrollSyncing.current = false;
        }, 50);
    };

    const handleGridScroll = (e: React.UIEvent<HTMLElement>) => {
        const scrollTop = e.currentTarget.scrollTop;
        if (isScrollSyncing.current) return;
        isScrollSyncing.current = true;
        
        if (timeColumnRef.current) {
            timeColumnRef.current.scrollTop = scrollTop;
        }
        setTimeout(() => {
            isScrollSyncing.current = false;
        }, 50);
    };

    const jumpToHour = (hour: number) => {
        const slotsPerHour = 60 / cellDuration;
        const slotHeight = getSlotHeight(cellDuration);
        const scrollOffset = hour * slotsPerHour * slotHeight;
        
        console.log(`[SCROLL] Jumping to hour ${hour} (offset ${scrollOffset}px)`);
        
        // Clear old stabilization
        isInitialScrollDone.current = true; 
        isScrollSyncing.current = true;
        intendedScrollTop.current = scrollOffset;

        const perform = () => {
            if (timeGridWrapperRef.current) timeGridWrapperRef.current.scrollTop = scrollOffset;
            if (gridRef.current) gridRef.current.scrollTop = scrollOffset;
            if (timeColumnRef.current) timeColumnRef.current.scrollTop = scrollOffset;
        };

        // Repeated enforcement
        perform();
        requestAnimationFrame(perform);
        setTimeout(perform, 50);
        setTimeout(perform, 100);
        setTimeout(perform, 250);
        
        setTimeout(() => {
            isScrollSyncing.current = false;
        }, 500);
    };

    // Slot and Header height based on cell duration
    // WMO weather code → emoji icon
    const getWeatherIcon = (code: number): string => {
        if (code === 0) return "☀️";
        if (code <= 3) return "⛅";
        if (code >= 45 && code <= 48) return "🌫️";
        if (code >= 51 && code <= 55) return "🌦️";
        if (code >= 56 && code <= 57) return "🌧️";
        if (code >= 61 && code <= 65) return "🌧️";
        if (code >= 66 && code <= 67) return "🌨️";
        if (code >= 71 && code <= 77) return "❄️";
        if (code >= 80 && code <= 82) return "🌧️";
        if (code >= 85 && code <= 86) return "❄️";
        if (code >= 95) return "⛈️";
        return "☁️";
    };

    const getSlotHeight = (duration: number) => {
        switch (duration) {
            case 15: return 25;
            case 20: return 30;
            case 30: return 35;
            case 60: return 50;
            default: return 50;
        }
    };

    const getHeaderHeight = (duration: number) => {
        if (measuredHeaderHeight > 0) return measuredHeaderHeight;
        switch (duration) {
            case 15: return 65;
            case 30: return 55;
            case 60: return 50;
            case 120: return 50;
            default: return 50;
        }
    };

    // Working hours range (configurable)
    const workingHoursStart = startHour;
    const workingHoursEnd = endHour;

    // Fetch calendar events
    const fetchCalendarEvents = useCallback(async (forceRefresh = false) => {
        startSync();
        setIsFetchingCalendar(true);
        try {
            const response = await fetch("/api/calendar/sync", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    timeMin: new Date(
                        currentWeekStart.getTime() - 7 * 24 * 60 * 60 * 1000,
                    ).toISOString(),
                    timeMax: new Date(
                        currentWeekStart.getTime() + 14 * 24 * 60 * 60 * 1000,
                    ).toISOString(),
                    forceRefresh,
                }),
            });

            if (response.ok) {
                const text = await response.text();
                try {
                    const data = JSON.parse(text);
                    if (data.events) {
                        setRawCalendarEvents(data.events);
                    }
                    // If stale connections were refreshing in background, re-fetch after they finish
                    if (data.staleConnectionCount > 0 && !forceRefresh) {
                        setTimeout(() => {
                            fetch("/api/calendar/sync", {
                                method: "POST",
                                headers: { "Content-Type": "application/json" },
                                body: JSON.stringify({
                                    timeMin: new Date(currentWeekStart.getTime() - 7 * 24 * 60 * 60 * 1000).toISOString(),
                                    timeMax: new Date(currentWeekStart.getTime() + 14 * 24 * 60 * 60 * 1000).toISOString(),
                                }),
                            }).then(r => r.json()).then(d => {
                                if (d.events) setRawCalendarEvents(d.events);
                            }).catch(() => {});
                        }, 5000); // 5s delay for background refresh to finish
                    }
                } catch (e) {
                    console.error(
                        "Failed to parse calendar sync response:",
                        text.substring(0, 100),
                    );
                }
            }
        } catch (error) {
            console.error("Error fetching calendar events:", error);
        } finally {
            setIsFetchingCalendar(false);
            endSync();
        }
    }, [currentWeekStart, startSync, endSync]);

    // Weather fetch
    const fetchWeather = useCallback(async () => {
        if (!effectiveWeatherEnabled) return;
        if (!profile.weatherLat || !profile.weatherLon) return;
        try {
            const start = new Date(currentWeekStart.getTime() - 1 * 24 * 60 * 60 * 1000).toISOString().slice(0, 10);
            const end = new Date(currentWeekStart.getTime() + 8 * 24 * 60 * 60 * 1000).toISOString().slice(0, 10);
            const res = await fetch(`/api/weather?start=${start}&end=${end}`);
            if (res.ok) {
                const data = await res.json();
                if (data.hourly) setWeatherData(data.hourly);
            }
        } catch (e) {
            console.error("Weather fetch failed:", e);
        }
    }, [currentWeekStart, effectiveWeatherEnabled, profile.weatherLat, profile.weatherLon]);

    useEffect(() => {
        if (effectiveWeatherEnabled) fetchWeather();
    }, [fetchWeather, effectiveWeatherEnabled]);

    // Calendar Event Handlers
    const handleEventSave = async (eventData: any) => {
        const controller = new AbortController();
        const timeoutId = setTimeout(() => controller.abort(), 15000); // 15s timeout

        try {
            const method = eventData.id ? "PATCH" : "POST";
            const body = {
                ...eventData,
                eventId: eventData.id, // For PATCH
            };

            const res = await fetch("/api/calendar/events", {
                method,
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify(body),
                signal: controller.signal,
            });

            if (!res.ok) {
                const err = await res.json();
                throw new Error(err.error || "Failed to save event");
            }

            // Optimistically add/update from API response, then force refresh cache
            const data = await res.json();
            if (data.event) {
                // Transform API shape (start.dateTime/end.dateTime) to frontend shape (startTime/endTime)
                const ev = data.event;
                // Find calendar info from connections to fill in missing color/title
                const calInfo = connections.flatMap((c: any) =>
                    (c.calendars || []).map((cal: any) => ({ ...cal, provider: c.provider }))
                ).find((c: any) => c.id === (ev.calendarId || eventData.calendarId));
                const frontendEvent: CalendarEvent = {
                    id: ev.id,
                    title: ev.title,
                    startTime: ev.start?.dateTime || ev.start?.date || ev.startTime || '',
                    endTime: ev.end?.dateTime || ev.end?.date || ev.endTime || '',
                    source: ev.source || calInfo?.provider || 'google',
                    calendarId: ev.calendarId || eventData.calendarId,
                    calendarTitle: ev.calendarTitle || calInfo?.summary || calInfo?.title || '',
                    calendarColor: ev.backgroundColor || ev.calendarColor || calInfo?.backgroundColor || calInfo?.color || '#3b82f6',
                };
                setRawCalendarEvents(prev => {
                    if (eventData.id) {
                        return prev.map(e => e.id === eventData.id ? frontendEvent : e);
                    }
                    return [...prev, frontendEvent];
                });
            }
            // Re-read from cache to get the canonical version
            // The backend already cached the event via upsertCachedEvent
            await fetchCalendarEvents(false);
        } catch (error: any) {
            console.error("Error saving event:", error);
            if (error.name === "AbortError") {
                throw new Error("Request timed out. Please try again.");
            }
            throw error;
        } finally {
            clearTimeout(timeoutId);
        }
    };

    const handleEventDelete = async (eventId: string, calendarId: string, deleteMode?: string) => {
        try {
            const params = new URLSearchParams({ calendarId, eventId });
            if (deleteMode) params.set('deleteMode', deleteMode);

            const res = await fetch(
                `/api/calendar/events?${params.toString()}`,
                {
                    method: "DELETE",
                },
            );

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

            // Optimistically remove affected events
            if (deleteMode === 'this') {
                setRawCalendarEvents(prev => prev.filter(e => e.id !== eventId));
            } else if (deleteMode === 'future') {
                // Remove this and future instances of the same recurring series
                const targetEvent = calendarEvents.find(e => e.id === eventId);
                if (targetEvent) {
                    const targetTime = new Date(targetEvent.startTime).getTime();
                    const seriesId = targetEvent.recurringEventId || eventId;
                    setRawCalendarEvents(prev => prev.filter(e => {
                        if (e.recurringEventId !== seriesId && e.id !== seriesId) return true;
                        return new Date(e.startTime).getTime() < targetTime;
                    }));
                } else {
                    setRawCalendarEvents(prev => prev.filter(e => e.id !== eventId));
                }
            } else {
                // 'all' — remove all instances of the series
                const targetEvent = calendarEvents.find(e => e.id === eventId);
                const seriesId = targetEvent?.recurringEventId || eventId;
                setRawCalendarEvents(prev => prev.filter(e =>
                    e.id !== eventId && e.recurringEventId !== seriesId && e.id !== seriesId
                ));
            }
            setTimeout(() => fetchCalendarEvents(false), 2000);
        } catch (error) {
            console.error("Error deleting event:", error);
            throw error;
        }
    };

    const handleRecurrenceSave = async (taskId: string, recurrence: any) => {
        try {
            const res = await fetch("/api/tasks", {
                // Uses PATCH endpoint which handles ID in body
                method: "PATCH",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    id: taskId,
                    ...recurrence,
                }),
            });

            if (!res.ok) {
                throw new Error("Failed to update recurrence");
            }

            const data = await res.json();

            // Update local state and REFRESH all tasks to show virtual instances
            setTasks((prev) => prev.map((t) => (t.id === taskId ? data.task : t)));
            await fetchTasks();
        } catch (error) {
            console.error(error);
            alert("Failed to save recurrence settings");
        }
    };

    const fetchMotivationalQuote = useCallback(async () => {
        if (profile.goalFallbackType !== "quote") return;

        const urls = profile.quoteSourceUrls && profile.quoteSourceUrls.length > 0
            ? profile.quoteSourceUrls
            : profile.quoteSourceUrl ? [profile.quoteSourceUrl] : [];

        // Strategy: try sources until one works
        for (const url of urls) {
            try {
                const res = await fetch(url);
                if (!res.ok) continue;
                const contentType = res.headers.get("content-type") || "";
                if (!contentType.includes("application/json")) continue;
                const data = await res.json();

                let quoteText = "";
                if (Array.isArray(data) && data.length > 0) {
                    const item = data[0];
                    quoteText = item.quote || item.text || item.content || (typeof item === 'string' ? item : "");
                    if (item.author) quoteText += ` - ${item.author}`;
                } else if (data && typeof data === 'object') {
                    quoteText = data.quote || data.text || data.content || "";
                    if (data.author) quoteText += ` - ${data.author}`;
                } else if (typeof data === 'string') {
                    quoteText = data;
                }

                if (quoteText) {
                    setMotivationalQuote(quoteText);
                    return; // Success!
                }
            } catch (error) {
                console.error(`Error fetching quote from ${url}:`, error);
            }
        }

        // Final fallback: use local curated quotes in user-selected languages
        const quoteLangs = profile.quoteLanguages && profile.quoteLanguages.length > 0
            ? profile.quoteLanguages
            : [profile.language || "en"];
        const randomLang = quoteLangs[Math.floor(Math.random() * quoteLangs.length)];
        const localQuote = getRandomLocalQuote(randomLang);
        if (localQuote) {
            setMotivationalQuote(`${localQuote.text} — ${localQuote.author}`);
        } else {
            setMotivationalQuote(randomLang === "de" ? "Bleib fokussiert und produktiv." : "Stay focused and productive.");
        }
    }, [profile.goalFallbackType, profile.quoteSourceUrl, profile.quoteSourceUrls, profile.language, profile.quoteLanguages]);

    // Fetch tasks on mount
    useEffect(() => {
        if (session) {
            fetchTasks();
            fetchConnections();
            fetchCalendarEvents();
            fetchMotivationalQuote();
        }
    }, [session]); // Removed fetchMotivationalQuote from deps to avoid re-runs

    // Auto-open settings to calendar tab after OAuth redirect
    useEffect(() => {
        const params = new URLSearchParams(window.location.search);
        if (params.get('openSettings') === 'calendars') {
            setShowSettings(true);
            setActiveTab('calendar');
            // Clean up URL
            const url = new URL(window.location.href);
            url.searchParams.delete('openSettings');
            url.searchParams.delete('calendar');
            window.history.replaceState({}, '', url.pathname);
            // Refresh connections to pick up the new one
            fetchConnections();
        }
    }, []);

    // Periodic pull-sync from Google Tasks (every 2 minutes)
    useEffect(() => {
        if (!session) return;
        const interval = setInterval(
            async () => {
                try {
                    const res = await fetch("/api/tasks/sync");
                    if (res.ok) {
                        const data = await res.json();
                        if (data.updated > 0 || data.deleted > 0 || data.created > 0) {
                            console.log(
                                `[SYNC] Pulled ${data.updated} updates, ${data.deleted} deletions, ${data.created || 0} new tasks`,
                            );
                            fetchTasks(); // Reload to reflect changes
                        }
                    }
                } catch (e) {
                    console.error("[SYNC] Task sync error:", e);
                    setSyncError("Task sync failed");
                    setTimeout(() => setSyncError(null), 10000);
                }
            },
            5 * 60 * 1000,
        );
        return () => clearInterval(interval);
    }, [session]);

    // SSE real-time sync: listen for server-pushed task/list changes
    useEffect(() => {
        if (!session) return;
        let eventSource: EventSource | null = null;
        let reconnectTimeout: NodeJS.Timeout | null = null;

        const connect = () => {
            eventSource = new EventSource("/api/events/stream");

            eventSource.addEventListener("connected", () => {
                console.log("[SSE] Connected for real-time sync");
            });

            eventSource.addEventListener("tasks-changed", () => {
                console.log("[SSE] Tasks changed remotely, refetching...");
                fetchTasks();
            });

            eventSource.addEventListener("list-changed", () => {
                console.log("[SSE] Lists changed remotely, refetching...");
                fetchTasks();
            });

            eventSource.onerror = () => {
                console.log("[SSE] Connection lost, reconnecting in 5s...");
                eventSource?.close();
                reconnectTimeout = setTimeout(connect, 5000);
            };
        };

        connect();

        return () => {
            eventSource?.close();
            if (reconnectTimeout) clearTimeout(reconnectTimeout);
        };
    }, [session]);

    // Periodic background calendar cache refresh (every 2 minutes)
    useEffect(() => {
        if (!session) return;
        const interval = setInterval(
            async () => {
                try {
                    const now = new Date();
                    const res = await fetch("/api/calendar/background-sync", {
                        method: "POST",
                        headers: { "Content-Type": "application/json" },
                        body: JSON.stringify({
                            timeMin: new Date(
                                now.getTime() - 7 * 24 * 60 * 60 * 1000,
                            ).toISOString(),
                            timeMax: new Date(
                                now.getTime() + 14 * 24 * 60 * 60 * 1000,
                            ).toISOString(),
                            forceRefresh: true,
                        }),
                    });
                    if (res.ok) {
                        const data = await res.json();
                        if (data.queued > 0 || data.refreshed > 0) {
                            // Cache was refreshed; re-fetch events after delay
                            setTimeout(() => fetchCalendarEvents(), 8000);
                        }
                    }
                } catch (e) {
                    console.error("[SYNC] Calendar sync error:", e);
                    setSyncError("Calendar sync failed");
                    setTimeout(() => setSyncError(null), 10000);
                }
            },
            2 * 60 * 1000,
        );
        return () => clearInterval(interval);
    }, [session, fetchCalendarEvents]);

    async function fetchConnections() {
        try {
            setIsLoading(true);
            const response = await fetch("/api/calendar/connections");
            if (response.ok) {
                const data = await response.json();
                setConnections(data.connections || []);
            }
        } catch (error) {
            console.error("Error fetching connections:", error);
        } finally {
            setIsLoading(false);
        }
    }

    const handleRemoveConnection = async (connectionId: string) => {
        console.log("Disconnecting connection:", connectionId);
        const res = await fetch(`/api/calendar/connections?id=${connectionId}`, {
            method: "DELETE",
        });

        if (res.ok) {
            // Update state immediately
            setConnections((prev) => prev.filter((c) => c.id !== connectionId));
            // Refresh connections to be sure
            fetchConnections();
            // Optionally refresh events too as they might be gone
            fetchCalendarEvents();
        } else {
            const err = await res.json();
            console.error("Failed to disconnect calendar", err);
            throw new Error(err.error || "Unknown error");
        }
    };

    // Refetch calendar events when week changes
    useEffect(() => {
        if (session) {
            fetchCalendarEvents();
        }
    }, [currentWeekStart, session, fetchCalendarEvents]);

    // Scroll to preferred start hour (initial load + when user changes startHour)
    useEffect(() => {
        if (!isLoading) {
            const performScroll = () => {
                const slotsPerHour = 60 / cellDuration;
                const slotHeight = getSlotHeight(cellDuration);
                const scrollOffset = workingHoursStart * slotsPerHour * slotHeight;

                // Scroll the time-grid-wrapper (the scrollable viewport)
                if (timeGridWrapperRef.current) timeGridWrapperRef.current.scrollTop = scrollOffset;
                // Also scroll inner refs as fallback
                if (gridRef.current) gridRef.current.scrollTop = scrollOffset;
                if (timeColumnRef.current) timeColumnRef.current.scrollTop = scrollOffset;

                intendedScrollTop.current = scrollOffset;

                // On initial load, re-enforce for 2s to fight browser auto-scroll restoration
                if (!isInitialScrollDone.current) {
                    const interval = setInterval(() => {
                        if (timeGridWrapperRef.current) timeGridWrapperRef.current.scrollTop = scrollOffset;
                        if (gridRef.current) gridRef.current.scrollTop = scrollOffset;
                        if (timeColumnRef.current) timeColumnRef.current.scrollTop = scrollOffset;
                    }, 50);

                    setTimeout(() => {
                        clearInterval(interval);
                        isInitialScrollDone.current = true;
                    }, 2000);
                }
            };

            // Delay slightly to ensure layout is stable
            const timer = setTimeout(performScroll, isInitialScrollDone.current ? 50 : 500);
            return () => clearTimeout(timer);
        }
    }, [isLoading, workingHoursStart, cellDuration]);

    // Update current time every 30 seconds for the "Now" line and clock
    useEffect(() => {
        const interval = setInterval(() => {
            setCurrentTime(new Date());
        }, 30000);
        return () => clearInterval(interval);
    }, []);

    // Compute the goal date key: for "week" scope, normalize to Monday of that week; for "day", use the exact date
    const getGoalDateKey = useCallback(
        (date: Date): string => {
            const scope = profile.goalScope || "week";
            if (scope === "day") {
                const d = new Date(date);
                d.setHours(0, 0, 0, 0);
                return d.toISOString();
            }
            // Normalize to Monday of the week containing this date
            const d = new Date(date);
            d.setHours(0, 0, 0, 0);
            const day = d.getDay(); // 0=Sun, 1=Mon, ...
            const diff = day === 0 ? -6 : 1 - day; // Monday offset
            d.setDate(d.getDate() + diff);
            return d.toISOString();
        },
        [profile.goalScope],
    );

    const goalDateKey = useMemo(
        () => getGoalDateKey(currentWeekStart),
        [currentWeekStart, getGoalDateKey],
    );

    // Fetch goal for current week/day
    useEffect(() => {
        const fetchGoal = async () => {
            try {
                const res = await fetch(`/api/goal?weekStart=${goalDateKey}`);
                if (res.ok) {
                    const data = await res.json();
                    setGoal(data.goal);
                }
            } catch (err) {
                console.error("Failed to fetch goal:", err);
            }
        };
        fetchGoal();
    }, [goalDateKey]);

    const saveGoal = async (newGoal: string) => {
        setGoal(newGoal);
        try {
            const res = await fetch("/api/goal", {
                method: "PUT",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    weekStart: goalDateKey,
                    text: newGoal,
                }),
            });
            if (!res.ok) {
                console.error("Goal save failed:", res.status);
            }
        } catch (error) {
            console.error("Error saving goal:", error);
        }
    };



    // Horizontal scroll: convert vertical wheel to horizontal in someday area
    // Callback ref ensures handler is attached as soon as element mounts
    const somedayWheelCleanup = useRef<(() => void) | null>(null);
    const somedaySectionRefCb = useCallback((node: HTMLElement | null) => {
        // Cleanup previous
        if (somedayWheelCleanup.current) {
            somedayWheelCleanup.current();
            somedayWheelCleanup.current = null;
        }
        somedaySectionRef.current = node;
        if (!node) return;

        const handler = (e: WheelEvent) => {
            const grid = somedayGridRef.current;
            if (!grid) return;

            // Let native horizontal scroll (trackpad) pass through
            if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) return;
            if (e.deltaY === 0) return;

            // Only convert if grid has horizontal overflow
            if (grid.scrollWidth <= grid.clientWidth + 1) return;

            // Check boundaries - allow page scroll when at edges
            const atLeft = grid.scrollLeft <= 0;
            const atRight = grid.scrollLeft + grid.clientWidth >= grid.scrollWidth - 1;
            if (e.deltaY < 0 && atLeft) return;
            if (e.deltaY > 0 && atRight) return;

            e.preventDefault();
            grid.scrollLeft += e.deltaY;
        };

        node.addEventListener("wheel", handler, { passive: false });
        somedayWheelCleanup.current = () => node.removeEventListener("wheel", handler);
    }, []);
    const saveSetting = async (key: string, value: any) => {
        // Per-device settings: save to cookie ONLY (not DB) so each device keeps its own value
        if (DEVICE_SETTINGS_KEYS.includes(key)) {
            setCookie(`setting_${key}`, String(value));
            return; // Don't write to DB — that would overwrite other devices
        }
        try {
            await fetch("/api/user/profile", {
                method: "PATCH",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ [key]: value }),
            });
        } catch (err) {
            console.error(`Failed to save setting ${key}:`, err);
        }
    };

    const handleSettingsChanged = (newSettings: any) => {
        setShowTimeGrid(newSettings.showTimeGrid);
        setCellDuration(newSettings.cellDuration);
        setViewStyle(newSettings.viewStyle);
        setLanguage(newSettings.language);
        setDateFormat(newSettings.dateFormat);
        setTimeFormat(newSettings.timeFormat);
        setStartHour(newSettings.startHour);
        setEndHour(newSettings.endHour);
        setFontSize(newSettings.fontSize);
        setShowNextTask(newSettings.showNextTask);
        setShowSomeday(newSettings.showSomeday);
        setShowAllDay(newSettings.showAllDayEvents);
        setShowSchedule(newSettings.showSchedule);
        if (newSettings.weekdayFormat) setWeekdayFormat(newSettings.weekdayFormat);
        if (newSettings.weekdayCase) setWeekdayCase(newSettings.weekdayCase);
        if (newSettings.customWeekdayNames !== undefined) setCustomWeekdayNames(newSettings.customWeekdayNames);
        setHeadlineFont(newSettings.headlineFont);
        setHeadlineFontSize(newSettings.headlineFontSize);
        setHeadlineFontWeight(newSettings.headlineFontWeight);
        setDateFontFamily(newSettings.dateFontFamily);
        setDateFontSize(newSettings.dateFontSize);
        setDateFontWeight(newSettings.dateFontWeight);
        setTimeTaskFontFamily(newSettings.timeTaskFontFamily);
        setTimeTaskFontSize(newSettings.timeTaskFontSize);
        setTimeTaskFontWeight(newSettings.timeTaskFontWeight);
        setBodyFont(newSettings.bodyFont);
        setTaskFontFamily(newSettings.taskFontFamily);
        setTaskFontSize(newSettings.taskFontSize);
        setTaskFontWeight(newSettings.taskFontWeight);
        if (newSettings.eventFontFamily)
            setEventFontFamily(newSettings.eventFontFamily);
        if (newSettings.eventFontSize) setEventFontSize(newSettings.eventFontSize);
        if (newSettings.eventFontWeight)
            setEventFontWeight(newSettings.eventFontWeight);
        if (newSettings.fontWeight) setFontWeight(newSettings.fontWeight);
        if (newSettings.weekendColorSat)
            setWeekendColorSat(newSettings.weekendColorSat);
        if (newSettings.weekendColorSun)
            setWeekendColorSun(newSettings.weekendColorSun);

        setProfile((prev: any) => ({
            ...prev,
            ...newSettings,
            weekdayColor: newSettings.weekdayColor || prev.weekdayColor,
            dateColor: newSettings.dateColor || prev.dateColor,
            taskColor: newSettings.taskColor || prev.taskColor,
            todayHighlightColor:
                newSettings.todayHighlightColor || prev.todayHighlightColor,
            eventFontFamily: newSettings.eventFontFamily || prev.eventFontFamily,
            eventFontSize: newSettings.eventFontSize || prev.eventFontSize,
            eventFontWeight: newSettings.eventFontWeight || prev.eventFontWeight,
        }));

        // Custom start/end hours might affect task placement if we filter strictly
        fetchTasks();
    };

    const fetchUserInfo = async () => {
        try {
            const res = await fetch("/api/user/profile");
            if (res.ok) {
                const data = await res.json();
                if (data.user) {
                    setProtectEventTimes(data.user.protectEventTimes || false);
                    setTimeFormat(data.user.timeFormat || "12h");
                    setDateFormat(data.user.dateFormat || "MM/dd/yyyy");
                    setLanguage(data.user.language || "en");
                    if (data.user.startHour !== undefined)
                        setStartHour(data.user.startHour);
                    if (data.user.endHour !== undefined)
                        setEndHour(data.user.endHour);
                    if (data.user.viewStyle !== undefined) {
                        setViewStyle(data.user.viewStyle as ViewStyle);
                        setShowTimeGrid(data.user.showTimeGrid ?? true);
                    }
                    if (data.user.kanbanStages) {
                        try {
                            const parsed = JSON.parse(data.user.kanbanStages);
                            if (Array.isArray(parsed) && parsed.length > 0) setKanbanStages(parsed);
                        } catch { /* use defaults */ }
                    }
                    if (data.user.viewDays !== undefined) {
                        savedViewDaysRef.current = data.user.viewDays;
                        const width = window.innerWidth;
                        if (width <= 480) setViewDays(1);
                        else if (width <= 768) setViewDays(3);
                        else if (width <= 1024) setViewDays(Math.min(data.user.viewDays, 5));
                        else setViewDays(data.user.viewDays);
                    }
                    if (data.user.cellDuration !== undefined)
                        setCellDuration(data.user.cellDuration as CellDuration);

                    // Cookie overrides for per-device settings (always apply, even if DB has no value)
                    const cookieViewDays = getCookie("setting_viewDays");
                    if (cookieViewDays) {
                        const v = Number(cookieViewDays);
                        savedViewDaysRef.current = v;
                        const width = window.innerWidth;
                        if (width <= 480) setViewDays(1);
                        else if (width <= 768) setViewDays(3);
                        else if (width <= 1024) setViewDays(Math.min(v, 5));
                        else setViewDays(v);
                    }
                    if (data.user.weekdayFormat) {
                        setProfile((prev: any) => ({ ...prev, weekdayFormat: data.user.weekdayFormat }));
                    }
                    if (data.user.customWeekdayNames) {
                        setProfile((prev: any) => ({ ...prev, customWeekdayNames: data.user.customWeekdayNames }));
                    }
                    const cookieCellDuration = getCookie("setting_cellDuration");
                    if (cookieCellDuration) setCellDuration(Number(cookieCellDuration) as CellDuration);
                    const cookieStartHour = getCookie("setting_startHour");
                    if (cookieStartHour) setStartHour(Number(cookieStartHour));
                    const cookieEndHour = getCookie("setting_endHour");
                    if (cookieEndHour) setEndHour(Number(cookieEndHour));
                    setShowNextTask(data.user.showNextTask || false);
                    setCalendarEditMode(data.user.calendarEditMode || false);
                    if (data.user.fontSize)
                        setFontSize(data.user.fontSize as "S" | "M" | "L");

                    if (data.user.showSomeday !== undefined)
                        setShowSomeday(data.user.showSomeday);
                    if (data.user.showAllDayEvents !== undefined)
                        setShowAllDay(data.user.showAllDayEvents);
                    if (data.user.showSchedule !== undefined)
                        setShowSchedule(data.user.showSchedule);
                    if (data.user.weekdayFormat)
                        setWeekdayFormat(data.user.weekdayFormat as any);
                    if (data.user.weekdayCase)
                        setWeekdayCase(data.user.weekdayCase as any);
                    if (data.user.customWeekdayNames)
                        setCustomWeekdayNames(data.user.customWeekdayNames);
                    if (data.user.hourLabelFormat)
                        setHourLabelFormat(data.user.hourLabelFormat as "short" | "full");
                    if (data.user.showSubHourSlots !== undefined)
                        setShowSubHourSlots(data.user.showSubHourSlots);
                    if (data.user.allDayPosition)
                        setAllDayPosition(data.user.allDayPosition as "above" | "below");
                    if (data.user.viewSettings) setViewSettings(data.user.viewSettings);
                    if (data.user.headlineFont) setHeadlineFont(data.user.headlineFont);
                    if (data.user.headlineFontSize)
                        setHeadlineFontSize(data.user.headlineFontSize);
                    if (data.user.headlineFontWeight)
                        setHeadlineFontWeight(data.user.headlineFontWeight);
                    if (data.user.dateFontFamily)
                        setDateFontFamily(data.user.dateFontFamily);
                    if (data.user.dateFontSize) setDateFontSize(data.user.dateFontSize);
                    if (data.user.dateFontWeight)
                        setDateFontWeight(data.user.dateFontWeight);
                    if (data.user.timeTaskFontFamily)
                        setTimeTaskFontFamily(data.user.timeTaskFontFamily);
                    if (data.user.timeTaskFontSize)
                        setTimeTaskFontSize(data.user.timeTaskFontSize);
                    if (data.user.timeTaskFontWeight)
                        setTimeTaskFontWeight(data.user.timeTaskFontWeight);
                    if (data.user.bodyFont) setBodyFont(data.user.bodyFont);
                    if (data.user.taskFontFamily)
                        setTaskFontFamily(data.user.taskFontFamily);
                    if (data.user.taskFontSize) setTaskFontSize(data.user.taskFontSize);
                    if (data.user.taskFontWeight)
                        setTaskFontWeight(data.user.taskFontWeight);
                    if (data.user.eventFontFamily)
                        setEventFontFamily(data.user.eventFontFamily);
                    if (data.user.eventFontSize)
                        setEventFontSize(data.user.eventFontSize);
                    if (data.user.eventFontWeight)
                        setEventFontWeight(data.user.eventFontWeight);
                    if (data.user.fontWeight) setFontWeight(data.user.fontWeight);
                    if (data.user.weekendColorSat)
                        setWeekendColorSat(data.user.weekendColorSat);
                    if (data.user.weekendColorSun)
                        setWeekendColorSun(data.user.weekendColorSun);

                    setProfile((prev: any) => ({
                        ...prev,
                        ...data.user,
                        name: data.user.name || prev.name,
                        email: data.user.email || prev.email,
                        weekdayColor: data.user.weekdayColor || "#888888",
                        dateColor: data.user.dateColor || "#888888",
                        taskColor: data.user.taskColor || "#333333",
                        todayHighlightColor: data.user.todayHighlightColor || "#f0fafa",
                    }));

                    // Apply start day offset (e.g. -1 for yesterday) — only for multi-day views
                    // On single-day view (phones), always start on today
                    const effectiveViewDays = (() => {
                        const width = window.innerWidth;
                        if (width <= 480) return 1;
                        if (width <= 768) return 3;
                        if (width <= 1024) return Math.min(data.user.viewDays || 7, 5);
                        return data.user.viewDays || 7;
                    })();
                    if (data.user.startDayOffset && data.user.startDayOffset !== 0 && effectiveViewDays > 1) {
                        const d = new Date();
                        d.setHours(0, 0, 0, 0);
                        d.setDate(d.getDate() + data.user.startDayOffset);
                        setCurrentWeekStart(d);
                    }

                    if (data.user.focusTimerDuration)
                        setFocusTimerDuration(data.user.focusTimerDuration);
                    if (data.user.focusBreakDuration)
                        setFocusBreakDuration(data.user.focusBreakDuration);
                    if (data.user.showTimeGrid !== undefined)
                        setShowTimeGrid(data.user.showTimeGrid);
                    if (data.user.cellDuration)
                        setCellDuration(data.user.cellDuration as CellDuration);
                    if (data.user.viewStyle)
                        setViewStyle(data.user.viewStyle as ViewStyle);
                }
            }
        } catch (e) {
            console.error(e);
        }
    };

    useEffect(() => {
        fetchUserInfo();
    }, []);

    async function fetchSomedayLists() {
        try {
            const response = await fetch("/api/someday-lists");
            if (response.ok) {
                const data = await response.json();
                // Map tasks is handled in fetchTasks or we can merge here if needed.
                // But fetchTasks fetches ALL tasks.
                // Optimally we fetch lists, then tasks, then merge.
                // For now, let's just set the lists structure.
                setSomedayLists(
                    data.lists.map((l: any) => ({
                        id: l.id,
                        title: l.title,
                        tab: l.tab || null,
                        tasks: l.tasks || [],
                        externalId: l.externalId || null,
                        externalProvider: l.externalProvider || null,
                    })),
                );
                return data.lists;
            }
        } catch (error) {
            console.error("Error fetching someday lists:", error);
            return [];
        }
    }

    async function fetchProjects() {
        try {
            const res = await fetch("/api/projects");
            if (res.ok) {
                const data = await res.json();
                const updatedProjects = data.projects || [];
                setProjects(updatedProjects);

                // Update project references on tasks so color changes take effect immediately
                const projectMap = new Map<string, { id: string; name: string; icon?: string | null; color?: string | null }>(
                    updatedProjects.map((p: any) => [p.id, p])
                );
                setTasks(prev => prev.map(t => {
                    if (t.projectId && projectMap.has(t.projectId)) {
                        return { ...t, project: projectMap.get(t.projectId) || null };
                    }
                    return t;
                }));
                setSomedayLists(prev => prev.map(list => ({
                    ...list,
                    tasks: list.tasks.map(t => {
                        if (t.projectId && projectMap.has(t.projectId)) {
                            return { ...t, project: projectMap.get(t.projectId) || null };
                        }
                        return t;
                    }),
                })));
            }
        } catch (error) {
            console.error("Error fetching projects:", error);
        }
    }

    async function fetchTasks() {
        startSync();
        try {
            const [tasksResponse, listsResponse] = await Promise.all([
                fetch("/api/tasks"),
                fetch("/api/someday-lists"), // Fetch lists in parallel
            ]);
            // Also fetch projects in background
            fetchProjects();

            let fetchedLists: SomedayList[] = [];
            if (listsResponse.ok) {
                const listData = await listsResponse.json();
                fetchedLists = listData.lists.map((l: any) => ({
                    id: l.id,
                    title: l.title,
                    tab: l.tab || null,
                    tasks: [],
                    externalId: l.externalId || null,
                    externalProvider: l.externalProvider || null,
                }));
            }

            // If no lists exist, maybe create default 'Someday'?
            // TeuxDeux usually starts with one.
            // If DB is empty, maybe create one?
            // For now, if empty, we might show empty.
            if (fetchedLists.length === 0) {
                // Optionally create default list if none exist?
                // Let's stick to what's in DB.
            }

            if (tasksResponse.ok) {
                const data = await tasksResponse.json();
                const fetchedTasks = data.tasks.map((t: any) => ({
                    ...t,
                    createdAt: new Date(t.createdAt),
                    updatedAt: new Date(t.updatedAt),
                    recurrenceDays: t.recurrenceDays ? (typeof t.recurrenceDays === 'string' ? JSON.parse(t.recurrenceDays) : t.recurrenceDays) : null,
                }));

                // Calendar tasks: anything NOT in a someday list (includes tasks with scheduledDate OR dayOfWeek)
                const dayTasks = fetchedTasks.filter((t: Task) => !t.somedayListId);
                const somedayTasks = fetchedTasks.filter((t: Task) => t.somedayListId);

                setTasks(dayTasks);

                // Populate lists with tasks
                const listIds = new Set(fetchedLists.map((l: SomedayList) => l.id));
                const orphanedSomedayTasks = somedayTasks.filter(
                    (t: Task) => !listIds.has(t.somedayListId || ""),
                );

                const populatedLists = fetchedLists.map((list) => ({
                    ...list,
                    tasks: somedayTasks.filter((t: Task) => t.somedayListId === list.id && !t.parentTaskId),
                }));

                // Rescue orphaned someday tasks: if their list was deleted, move them to calendar
                if (orphanedSomedayTasks.length > 0) {
                    console.warn(
                        `[RESCUE] Found ${orphanedSomedayTasks.length} orphaned someday tasks, recovering to calendar`,
                    );
                    const rescuedTasks = orphanedSomedayTasks.map((t: Task) => ({
                        ...t,
                        somedayListId: null,
                        scheduledDate: t.scheduledDate || new Date().toISOString(),
                    }));
                    setTasks((prev) => [...prev, ...rescuedTasks]);
                    // Persist the rescue to DB
                    for (const t of orphanedSomedayTasks) {
                        fetch("/api/tasks", {
                            method: "PATCH",
                            headers: { "Content-Type": "application/json" },
                            body: JSON.stringify({
                                id: t.id,
                                somedayListId: null,
                                scheduledDate: new Date().toISOString(),
                            }),
                        }).catch((e) =>
                            console.error("Failed to rescue orphaned task:", e),
                        );
                    }
                }

                setSomedayLists(populatedLists);
            }
        } catch (error) {
            console.error("Error fetching data:", error);
        } finally {
            setIsLoading(false);
            endSync();
        }
    }

    // Get visible days based on current view setting
    const getVisibleDays = useCallback(() => {
        const days: Date[] = [];
        for (let i = 0; i < viewDays; i++) {
            days.push(new Date(currentWeekStart.getTime() + i * 24 * 60 * 60 * 1000));
        }
        return days;
    }, [currentWeekStart, viewDays]);

    // Get tasks for a specific date
    const getTasksForDate = useCallback(
        (date: Date): Task[] => {
            const dateStr = formatDateToISO(date); // Use local date formatting
            return tasks
                .filter((task) => {
                    if (!task.scheduledDate) return false;
                    // Exclude sub-tasks from top-level list (they render inside their parent)
                    if (task.parentTaskId) return false;
                    // Hide completed tasks if setting is off
                    if (!effectiveShowCompletedTasks && task.completed) return false;
                    // Use string comparison to avoid timezone shifts
                    const taskDateStr =
                        typeof task.scheduledDate === "string"
                            ? task.scheduledDate.substring(0, 10)
                            : formatDateToISO(new Date(task.scheduledDate));
                    return taskDateStr === dateStr;
                })
                .sort((a, b) => {
                    // Sort by time if available
                    if (a.startTime && b.startTime) {
                        return a.startTime.localeCompare(b.startTime);
                    }
                    if (a.startTime) return -1;
                    if (b.startTime) return 1;
                    return a.order - b.order;
                });
        },
        [tasks, effectiveShowCompletedTasks],
    );

    // Get tasks for a specific time slot
    const getTasksForSlot = useCallback(
        (date: Date, slot: string): Task[] => {
            const dateStr = formatDateToISO(date);
            return tasks.filter((task) => {
                if (!task.scheduledDate) return false;
                // Exclude sub-tasks from top-level list
                if (task.parentTaskId) return false;
                // Hide completed tasks if setting is off
                if (!effectiveShowCompletedTasks && task.completed) return false;
                // Use string comparison to avoid timezone shifts
                const taskDateStr =
                    typeof task.scheduledDate === "string"
                        ? task.scheduledDate.substring(0, 10)
                        : formatDateToISO(new Date(task.scheduledDate));
                if (taskDateStr !== dateStr || !task.startTime) return false;

                // Extract hour:minute from task start time and compare with slot
                const [taskHour, taskMinute] = task.startTime.split(":").map(Number);
                const taskStart = taskHour * 60 + taskMinute;

                const [slotHour, slotMinute] = slot.split(":").map(Number);
                const slotStart = slotHour * 60 + slotMinute;
                const slotEnd = slotStart + effectiveCellDuration;

                return taskStart >= slotStart && taskStart < slotEnd;
            });
        },
        [tasks, effectiveCellDuration, effectiveShowCompletedTasks],
    );

    // Get calendar events for a specific date
    const getEventsForDate = useCallback(
        (date: Date): CalendarEvent[] => {
            return calendarEvents.filter((event) => {
                // Skip all-day events (handled separately)
                if (isAllDayEvent(event)) return false;

                const eventDate = new Date(event.startTime);
                return isSameDay(eventDate, date);
            });
        },
        [calendarEvents],
    );

    // Get calendar events for a specific time slot
    const getEventsForSlot = useCallback(
        (date: Date, slot: string): CalendarEvent[] => {
            return calendarEvents.filter((event) => {
                // Skip all-day events (handled separately)
                const isAllDay = isAllDayEvent(event);
                if (isAllDay) return false;

                if (event.title.includes("Valentinstag")) {
                    // Debug removed
                }

                const eventDate = new Date(event.startTime);
                if (!isSameDay(eventDate, date)) return false;

                // Extract hour:minute from event start time and compare with slot
                const eventHour = eventDate.getHours();
                const eventMinute = eventDate.getMinutes();

                // Match if event starts within this slot
                const [slotHour, slotMinute] = slot.split(":").map(Number);
                const slotStart = slotHour * 60 + slotMinute;
                const slotEnd = slotStart + effectiveCellDuration;
                const eventStart = eventHour * 60 + eventMinute;

                return eventStart >= slotStart && eventStart < slotEnd;
            });
        },
        [calendarEvents, effectiveCellDuration],
    );

    // Calculate event duration in pixels for proper height display
    const getEventDuration = (event: CalendarEvent): number => {
        if (isAllDayEvent(event)) return 0; // All-day events handled separately

        const start = new Date(event.startTime);
        const end = new Date(event.endTime);
        const durationMinutes = (end.getTime() - start.getTime()) / (1000 * 60);

        // Guard against NaN or negative durations (missing/invalid end time)
        if (!isFinite(durationMinutes) || durationMinutes <= 0) {
            return getSlotHeight(effectiveCellDuration); // Default to one slot height
        }

        // Calculate height based on duration and slot height
        const pixelsPerMinute = getSlotHeight(effectiveCellDuration) / effectiveCellDuration;
        return Math.max(
            durationMinutes * pixelsPerMinute,
            getSlotHeight(effectiveCellDuration),
        );
    };

    // Get all-day events for a specific date
    const getAllDayEventsForDate = useCallback(
        (date: Date): CalendarEvent[] => {
            return calendarEvents.filter((event) => {
                if (!isAllDayEvent(event)) return false;

                // Parse date safely using our local-time helper
                const start = parseCalendarDate(event.startTime);
                const end = event.endTime
                    ? parseCalendarDate(event.endTime)
                    : new Date(start);

                // Normalize dates to start of day for comparison
                const targetDate = new Date(date);
                targetDate.setHours(0, 0, 0, 0);

                start.setHours(0, 0, 0, 0);
                end.setHours(0, 0, 0, 0);

                // Handle single day case where start == end
                if (start.getTime() === end.getTime()) {
                    return start.getTime() === targetDate.getTime();
                }

                // Standard range comparison (inclusive start, exclusive end)
                return (
                    targetDate.getTime() >= start.getTime() &&
                    targetDate.getTime() < end.getTime()
                );
            });
        },
        [calendarEvents],
    );

    // Get all all-day events for the visible week
    const getAllDayEventsForWeek = useCallback((): Map<
        string,
        CalendarEvent[]
    > => {
        const eventsByDay = new Map<string, CalendarEvent[]>();
        const visibleDays = getVisibleDays();

        visibleDays.forEach((date) => {
            const dateKey = formatDateToISO(date);
            eventsByDay.set(dateKey, getAllDayEventsForDate(date));
        });

        return eventsByDay;
    }, [calendarEvents, currentWeekStart, viewDays]);

    const rollOverdueTasks = useCallback(
        async (currentTasks: Task[]) => {
            const autoRolling = profile.autoRolling ?? false;
            if (!autoRolling) return;

            const now = new Date();
            const todayStr = formatDateToISO(now);
            const today = new Date(todayStr);

            const overdue = currentTasks.filter(
                (t) =>
                    !t.completed &&
                    t.isRolling &&
                    t.scheduledDate &&
                    formatDateToISO(new Date(t.scheduledDate)) < todayStr,
            );

            if (overdue.length === 0) return;

            console.log(
                `[ROLLING] Found ${overdue.length} overdue tasks to roll to today. autoRolling=${autoRolling}`,
            );

            const updatedTasks = [...currentTasks];
            let hasChanges = false;

            const dailyEvents = getEventsForDate(today);

            for (const task of overdue) {
                const targetSlot = task.startTime || "09:00"; // Default to 9am if no time

                // Collision detection
                const isBlocked = (date: Date, slot: string, tasksToCheck: Task[]) => {
                    // Check other tasks in the updated list
                    const taskConflict = tasksToCheck.find(
                        (t) =>
                            t.id !== task.id &&
                            t.scheduledDate &&
                            formatDateToISO(new Date(t.scheduledDate)) ===
                            formatDateToISO(date) &&
                            t.startTime === slot,
                    );
                    if (taskConflict) return true;

                    // Check calendar events
                    const [h, m] = slot.split(":").map(Number);
                    const slotStart = new Date(date);
                    slotStart.setHours(h, m, 0, 0);
                    const slotEnd = new Date(slotStart);
                    slotEnd.setMinutes(slotEnd.getMinutes() + effectiveCellDuration);

                    return dailyEvents.some((event) => {
                        const eventStart = new Date(event.startTime);
                        const eventEnd = new Date(event.endTime);
                        return slotStart < eventEnd && slotEnd > eventStart;
                    });
                };

                const findFreeSlot = (
                    date: Date,
                    preferred: string,
                    tasksToCheck: Task[],
                ) => {
                    let current = preferred;
                    let [h, m] = current.split(":").map(Number);

                    while (isBlocked(date, current, tasksToCheck)) {
                        m += effectiveCellDuration;
                        if (m >= 60) {
                            h += 1;
                            m = 0;
                        }
                        if (h >= effectiveEndHour) break;
                        current = `${h.toString().padStart(2, "0")}:${m.toString().padStart(2, "0")}`;
                    }
                    return current;
                };

                const nextSlot = findFreeSlot(today, targetSlot, updatedTasks);

                // Update in DB
                try {
                    const res = await fetch("/api/tasks", {
                        method: "PATCH",
                        headers: { "Content-Type": "application/json" },
                        body: JSON.stringify({
                            id: task.id,
                            scheduledDate: todayStr,
                            startTime: nextSlot,
                        }),
                    });

                    if (res.ok) {
                        const data = await res.json();
                        const taskIndex = updatedTasks.findIndex((t) => t.id === task.id);
                        if (taskIndex !== -1) {
                            updatedTasks[taskIndex] = {
                                ...data.task,
                                createdAt: new Date(data.task.createdAt),
                                updatedAt: new Date(data.task.updatedAt),
                            };
                            hasChanges = true;
                        }
                    }
                } catch (err) {
                    console.error(`Failed to roll task ${task.id}:`, err);
                }
            }

            if (hasChanges) {
                setTasks(updatedTasks.filter((t) => !t.somedayListId));
            }
        },
        [profile.autoRolling, effectiveCellDuration, effectiveEndHour, getEventsForDate],
    );

    // Run rolling after profile is loaded and tasks are available
    const rollingRanRef = useRef(false);
    useEffect(() => {
        if (rollingRanRef.current) return;
        if (!profile.autoRolling) return;
        if (tasks.length === 0) return;
        rollingRanRef.current = true;
        rollOverdueTasks(tasks);
    }, [profile.autoRolling, tasks, rollOverdueTasks]);

    // Check if a slot is protected by calendar events (only if slot starts within event time range)
    const isSlotProtected = useCallback(
        (date: Date, slot: string): boolean => {
            if (!protectEventTimes) return false;

            const [slotHour, slotMinute] = slot.split(":").map(Number);
            const slotStart = slotHour * 60 + slotMinute;

            return calendarEvents.some((event) => {
                if (isAllDayEvent(event)) return false;
                // Skip events that have been unlocked by the user
                if (unlockedEvents.has(event.id)) return false;

                const eventDate = new Date(event.startTime);
                if (!isSameDay(eventDate, date)) return false;

                const eventStart = eventDate.getHours() * 60 + eventDate.getMinutes();
                const eventEndDate = new Date(event.endTime);
                const eventEndMinutes =
                    eventEndDate.getHours() * 60 + eventEndDate.getMinutes();

                // Only protect if the slot start time falls within the event's actual duration
                // This ensures protection matches exactly what the event covers
                return slotStart >= eventStart && slotStart < eventEndMinutes;
            });
        },
        [protectEventTimes, calendarEvents, unlockedEvents],
    );

    // Check if a slot is occupied by any task (to prevent stacking)
    const isSlotOccupiedByTask = useCallback(
        (date: Date, slot: string, excludeTaskId?: string): boolean => {
            const dateStr = formatDateToISO(date);
            const [slotHour, slotMinute] = slot.split(":").map(Number);
            const slotStart = slotHour * 60 + slotMinute;
            const slotEnd = slotStart + effectiveCellDuration;

            return tasks.some(task => {
                if (!task.scheduledDate || !task.startTime) return false;
                if (excludeTaskId && task.id === excludeTaskId) return false;
                // Exclude sub-tasks
                if (task.parentTaskId) return false;

                const taskDateStr =
                    typeof task.scheduledDate === "string"
                        ? task.scheduledDate.substring(0, 10)
                        : formatDateToISO(new Date(task.scheduledDate));
                if (taskDateStr !== dateStr) return false;

                const [taskHour, taskMinute] = task.startTime.split(":").map(Number);
                const taskStart = taskHour * 60 + taskMinute;
                const taskDuration = task.duration || 15;
                const taskEnd = taskStart + taskDuration;

                // Skip completed tasks (they don't render in the grid)
                if (task.completed) return false;

                // Overlap condition: task starts before slot ends AND task ends after slot starts
                return taskStart < slotEnd && taskEnd > slotStart;
            });
        },
        [tasks, effectiveCellDuration],
    );

    // Navigation handlers with CSS class-based slide animation (works in all browsers)
    const gridRef = useRef<HTMLElement>(null);
    const timeGridWrapperRef = useRef<HTMLDivElement>(null);
    const allSlideClasses = ["slide-animate-next", "slide-animate-prev", "slide-animate-week-next", "slide-animate-week-prev"];
    const navigate = (
        newDate: Date,
        direction: "left" | "right",
        type: "day" | "week",
    ) => {
        const grid = gridRef.current;
        if (grid) {
            // Remove any existing animation class
            grid.classList.remove(...allSlideClasses);
            // Trigger reflow to restart animation if same direction
            void grid.offsetWidth;
            // Pick class: week uses longer animation
            const prefix = type === "week" ? "slide-animate-week-" : "slide-animate-";
            grid.classList.add(prefix + (direction === "left" ? "next" : "prev"));
            // Clean up after animation
            const cleanup = () => {
                grid.classList.remove(...allSlideClasses);
                grid.removeEventListener("animationend", cleanup);
            };
            grid.addEventListener("animationend", cleanup, { once: true });
        }
        setCurrentWeekStart(newDate);
        setSlideDirection(direction === "left" ? "next" : "prev");
    };

    const goToPrevWeek = () =>
        navigate(
            new Date(currentWeekStart.getTime() - 7 * 24 * 60 * 60 * 1000),
            "right",
            "week",
        );
    const goToNextWeek = () =>
        navigate(
            new Date(currentWeekStart.getTime() + 7 * 24 * 60 * 60 * 1000),
            "left",
            "week",
        );
    const goToPrevDay = () =>
        navigate(
            new Date(currentWeekStart.getTime() - 24 * 60 * 60 * 1000),
            "right",
            "day",
        );
    const goToNextDay = () =>
        navigate(
            new Date(currentWeekStart.getTime() + 24 * 60 * 60 * 1000),
            "left",
            "day",
        );
    const goToToday = () => {
        const d = new Date();
        d.setHours(0, 0, 0, 0);
        // Only apply startDayOffset for multi-day views; on single-day view, go directly to today
        if (viewDays > 1) {
            d.setDate(d.getDate() + (profile?.startDayOffset || 0));
        }
        setCurrentWeekStart(d);
    };

    // Touch swipe navigation for mobile
    useEffect(() => {
        let touchStartX = 0;
        let touchStartY = 0;
        let touchEndX = 0;
        let touchEndY = 0;

        let touchStartedInSomeday = false;

        const handleTouchStart = (e: TouchEvent) => {
            touchStartX = e.changedTouches[0].screenX;
            touchStartY = e.changedTouches[0].screenY;
            // Check if touch started inside the someday area (which has its own horizontal scroll)
            touchStartedInSomeday = !!(e.target as HTMLElement)?.closest?.('.weekly-someday');
        };

        const handleTouchEnd = (e: TouchEvent) => {
            if (touchStartedInSomeday) return; // Don't hijack someday horizontal scrolling
            touchEndX = e.changedTouches[0].screenX;
            touchEndY = e.changedTouches[0].screenY;
            const diffX = touchEndX - touchStartX;
            const diffY = touchEndY - touchStartY;
            // Only trigger if horizontal swipe is dominant and > 80px
            if (Math.abs(diffX) > 80 && Math.abs(diffX) > Math.abs(diffY) * 1.5) {
                if (diffX > 0) {
                    // Swipe right → go to previous day
                    goToPrevDay();
                } else {
                    // Swipe left → go to next day
                    goToNextDay();
                }
            }
        };

        const container = document.querySelector('.weekly-container') as HTMLElement | null;
        if (container) {
            container.addEventListener('touchstart', handleTouchStart as EventListener, { passive: true });
            container.addEventListener('touchend', handleTouchEnd as EventListener, { passive: true });
        }
        return () => {
            if (container) {
                container.removeEventListener('touchstart', handleTouchStart as EventListener);
                container.removeEventListener('touchend', handleTouchEnd as EventListener);
            }
        };
    }, [currentWeekStart]); // Re-attach when week changes so closures are fresh

    const executeImport = async (provider: "google" | "apple" | "outlook" | "synology") => {
        setImportProvider(provider);
        setIsImportModalOpen(true);
        setIsFetchingLists(true);
        setImportLists([]);
        setImportStatusMsg(null);

        try {
            const res = await fetch(`/api/tasks/lists?provider=${provider}`);
            if (res.ok) {
                const data = await res.json();
                setImportLists(data.lists || []);
            } else {
                const errData = await res.json();
                console.error("Failed to fetch lists", errData);
                setIsImportModalOpen(false);
                setImportStatusMsg({
                    type: "error",
                    text: errData.error || "Failed to fetch task lists.",
                });
            }
        } catch (e) {
            console.error("Error fetching lists:", e);
            setIsImportModalOpen(false);
            setImportStatusMsg({ type: "error", text: "Error fetching task lists." });
        } finally {
            setIsFetchingLists(false);
        }
    };

    const fetchAvailableTaskLists = useCallback(
        async (provider: "google" | "apple" | "outlook" | "synology") => {
            setIsFetchingProviderLists((prev) => ({
                ...prev,
                [provider]: true,
            }));
            try {
                const res = await fetch(`/api/tasks/lists?provider=${provider}`);
                if (res.ok) {
                    const data = await res.json();
                    setAvailableTaskLists((prev) => ({
                        ...prev,
                        [provider]: data.lists || [],
                    }));
                }
            } catch (error) {
                console.error(`Failed to fetch lists for ${provider}`, error);
            } finally {
                setIsFetchingProviderLists((prev) => ({
                    ...prev,
                    [provider]: false,
                }));
            }
        },
        [],
    );


    const handleToggleTaskList = async (
        provider: "google" | "apple" | "outlook" | "synology",
        list: { id: string; title: string },
    ) => {
        const existing = somedayLists.find(
            (l) => l.externalId === list.id && l.externalProvider === provider,
        );

        if (existing) {
            // Show inline confirmation instead of browser confirm()
            setUnsyncConfirm({ provider, list });
            return;
        } else {
            // Sync/Import
            await doImport(provider, [list]);
        }
    };

    const confirmUnsync = async () => {
        if (!unsyncConfirm) return;
        const { provider, list } = unsyncConfirm;
        const existing = somedayLists.find(
            (l) => l.externalId === list.id && l.externalProvider === provider,
        );
        if (!existing) { setUnsyncConfirm(null); return; }
        try {
            const res = await fetch(`/api/someday-lists?id=${existing.id}`, {
                method: "DELETE",
            });
            if (res.ok) {
                setSomedayLists((prev) => prev.filter((l) => l.id !== existing.id));
                setImportStatusMsg({
                    type: "success",
                    text: `Stopped syncing "${list.title}".`,
                });
            }
        } catch (error) {
            console.error("Failed to delete list", error);
            setImportStatusMsg({
                type: "error",
                text: "Failed to stop syncing list.",
            });
        }
        setUnsyncConfirm(null);
    };

    const handleSyncAll = async (
        provider: "google" | "outlook" | "synology",
        lists: { id: string; title: string }[],
        syncOn: boolean,
    ) => {
        if (syncOn) {
            const unsynced = lists.filter(
                (list) => !somedayLists.some(
                    (sl) => sl.externalId === list.id && sl.externalProvider === provider,
                ),
            );
            if (unsynced.length > 0) await doImport(provider, unsynced);
        } else {
            // Unsync all synced lists
            const synced = lists.filter(
                (list) => somedayLists.some(
                    (sl) => sl.externalId === list.id && sl.externalProvider === provider,
                ),
            );
            for (const list of synced) {
                const existing = somedayLists.find(
                    (l) => l.externalId === list.id && l.externalProvider === provider,
                );
                if (!existing) continue;
                try {
                    const res = await fetch(`/api/someday-lists?id=${existing.id}`, {
                        method: "DELETE",
                    });
                    if (res.ok) {
                        setSomedayLists((prev) => prev.filter((l) => l.id !== existing.id));
                    }
                } catch (error) {
                    console.error("Failed to unsync list", error);
                }
            }
            setImportStatusMsg({
                type: "success",
                text: `Stopped syncing ${synced.length} list(s).`,
            });
        }
    };

    // Core import logic — accepts provider directly so it works both from modal and sidebar
    const doImport = async (
        provider: "google" | "apple" | "outlook" | "synology",
        selectedLists: { id: string; title: string }[],
    ) => {
        setImportingTasksState(true);
        setImportStatusMsg(null);

        try {
            const response = await fetch("/api/tasks/import", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ provider, sourceLists: selectedLists }),
            });

            const data = await response.json();

            if (response.ok) {
                setImportStatusMsg({
                    type: "success",
                    text: `Synced ${data.count} new tasks across ${data.listsCreated || 1} list(s).`,
                });
                // Trigger immediate pull-sync to get latest state
                try {
                    await fetch("/api/tasks/sync");
                } catch (e) {
                    // Non-critical, auto-sync will catch up
                }
                await fetchTasks();
            } else {
                setImportStatusMsg({
                    type: "error",
                    text: data.error || "Sync failed.",
                });
            }
        } catch (error) {
            console.error("Import error:", error);
            setImportStatusMsg({
                type: "error",
                text: "An error occurred during sync.",
            });
        } finally {
            setImportingTasksState(false);
        }
    };

    // Called from the Google Tasks modal
    const handleConfirmImport = async (
        selectedLists: { id: string; title: string }[],
    ) => {
        if (!importProvider) return;
        setIsImportModalOpen(false);
        await doImport(importProvider, selectedLists);
        setImportProvider(null);
    };

    // Undo/Redo helpers
    const saveSnapshot = useCallback(() => {
        if (skipSnapshotRef.current) return;
        undoStackRef.current = [
            ...undoStackRef.current.slice(-29), // keep last 30 snapshots
            {
                tasks: JSON.parse(JSON.stringify(tasks)),
                somedayLists: JSON.parse(JSON.stringify(somedayLists)),
            },
        ];
        redoStackRef.current = [];
        setUndoCount(undoStackRef.current.length);
        setRedoCount(0);
    }, [tasks, somedayLists]);

    const handleUndo = useCallback(() => {
        if (undoStackRef.current.length === 0) return;
        const snapshot = undoStackRef.current.pop()!;
        redoStackRef.current.push({
            tasks: JSON.parse(JSON.stringify(tasks)),
            somedayLists: JSON.parse(JSON.stringify(somedayLists)),
        });
        skipSnapshotRef.current = true;
        setTasks(snapshot.tasks);
        setSomedayLists(snapshot.somedayLists);
        skipSnapshotRef.current = false;
        setUndoCount(undoStackRef.current.length);
        setRedoCount(redoStackRef.current.length);
    }, [tasks, somedayLists]);

    const handleRedo = useCallback(() => {
        if (redoStackRef.current.length === 0) return;
        const snapshot = redoStackRef.current.pop()!;
        undoStackRef.current.push({
            tasks: JSON.parse(JSON.stringify(tasks)),
            somedayLists: JSON.parse(JSON.stringify(somedayLists)),
        });
        skipSnapshotRef.current = true;
        setTasks(snapshot.tasks);
        setSomedayLists(snapshot.somedayLists);
        skipSnapshotRef.current = false;
        setUndoCount(undoStackRef.current.length);
        setRedoCount(redoStackRef.current.length);
    }, [tasks, somedayLists]);

    // Keyboard shortcuts for undo/redo
    useEffect(() => {
        const handleKeyDown = (e: KeyboardEvent) => {
            if ((e.ctrlKey || e.metaKey) && e.key === "z" && !e.shiftKey) {
                e.preventDefault();
                handleUndo();
            }
            if ((e.ctrlKey || e.metaKey) && (e.key === "y" || (e.key === "z" && e.shiftKey))) {
                e.preventDefault();
                handleRedo();
            }
        };
        window.addEventListener("keydown", handleKeyDown);
        return () => window.removeEventListener("keydown", handleKeyDown);
    }, [handleUndo, handleRedo]);

    // Task CRUD operations
    const addTask = async (date: Date, title: string, startTime?: string) => {
        if (!title.trim()) return;
        saveSnapshot();

        const scheduledDate = formatDateToISO(date); // Use local date formatting

        if (!session?.user) {
            // Local-only demo mode when not authenticated
            const tempId = `temp-${Date.now()}`;
            setTasks((prevTasks) => [
                ...prevTasks,
                {
                    id: tempId,
                    title: title.trim(),
                    dayOfWeek: date.getDay(),
                    scheduledDate,
                    order: prevTasks.filter((t) => t.scheduledDate === scheduledDate)
                        .length,
                    completed: false,
                    userId: "temp",
                    startTime,
                    createdAt: new Date(),
                    updatedAt: new Date(),
                },
            ]);
            return;
        }

        try {
            const response = await fetch("/api/tasks", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    title: title.trim(),
                    dayOfWeek: date.getDay(),
                    scheduledDate,
                    order: 0,
                    startTime,
                }),
            });

            if (response.ok) {
                const data = await response.json();
                setTasks((prevTasks) => [
                    ...prevTasks,
                    {
                        ...data.task,
                        createdAt: new Date(data.task.createdAt),
                        updatedAt: new Date(data.task.updatedAt),
                    },
                ]);
            } else {
                console.error("Failed to add task:", await response.text());
            }
        } catch (error) {
            console.error("Error adding task:", error);
        }
    };

    // Create a task in kanban view — auto-creates a someday list if needed
    const addKanbanTask = async (title: string, stageId: string | null) => {
        if (!title.trim() || !session?.user) return;
        saveSnapshot();

        try {
            // Determine the target someday list name
            const activeProject = kanbanFilterProject
                ? projects.find(p => p.id === kanbanFilterProject)
                : null;
            const listName = activeProject ? activeProject.name : "Kanban";

            // Find existing someday list with that name
            let targetList = somedayLists.find(sl => sl.title === listName);

            // Create the list if it doesn't exist
            if (!targetList) {
                const listRes = await fetch("/api/someday-lists", {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ title: listName }),
                });
                if (listRes.ok) {
                    const listData = await listRes.json();
                    targetList = { ...listData.list, tasks: [] };
                    setSomedayLists(prev => [...prev, targetList!]);
                } else {
                    console.error("Failed to create someday list:", await listRes.text());
                    return;
                }
            }

            // Create the task
            const response = await fetch("/api/tasks", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    title: title.trim(),
                    somedayListId: targetList!.id,
                    kanbanStage: stageId,
                    projectId: activeProject?.id || undefined,
                    order: 0,
                }),
            });

            if (response.ok) {
                const data = await response.json();
                const newTask = {
                    ...data.task,
                    createdAt: new Date(data.task.createdAt),
                    updatedAt: new Date(data.task.updatedAt),
                };
                setSomedayLists(prev =>
                    prev.map(sl =>
                        sl.id === targetList!.id
                            ? { ...sl, tasks: [...sl.tasks, newTask] }
                            : sl
                    )
                );
            } else {
                console.error("Failed to add kanban task:", await response.text());
            }
        } catch (error) {
            console.error("Error adding kanban task:", error);
        }

        setKanbanAddingStageId(null);
        setKanbanNewTaskTitle("");
    };

    // Helper to find a task in both calendar tasks and someday lists
    const findTaskAnywhere = (taskId: string): Task | undefined => {
        const calTask = tasks.find((t) => t.id === taskId);
        if (calTask) return calTask;
        for (const list of somedayLists) {
            const found = list.tasks.find((t) => t.id === taskId);
            if (found) return found;
        }
        return undefined;
    };

    const toggleTask = async (taskId: string) => {
        saveSnapshot();
        const task = findTaskAnywhere(taskId);
        if (!task) return;

        const updatedCompleted = !task.completed;
        const isSomeday = !!task.somedayListId;

        if (isSomeday) {
            setSomedayLists((prev) =>
                prev.map((l) => ({
                    ...l,
                    tasks: l.tasks.map((t) =>
                        t.id === taskId
                            ? { ...t, completed: updatedCompleted, updatedAt: new Date() }
                            : t,
                    ),
                })),
            );
        } else {
            setTasks(
                tasks.map((t) =>
                    t.id === taskId
                        ? { ...t, completed: updatedCompleted, updatedAt: new Date() }
                        : t,
                ),
            );
        }

        try {
            await fetch("/api/tasks", {
                method: "PATCH",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ id: taskId, completed: updatedCompleted }),
            });

            if (task.externalId && task.externalProvider) {
                fetch("/api/tasks/sync", {
                    method: "PATCH",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ taskId: taskId, completed: updatedCompleted }),
                }).catch((e) => console.error("Sync error:", e));
            }
        } catch (error) {
            console.error("Error toggling task:", error);
        }
    };

    const updateTask = async (taskId: string, newTitle: string) => {
        saveSnapshot();
        if (!newTitle.trim()) {
            await deleteTask(taskId);
            return;
        }

        const task = findTaskAnywhere(taskId);
        const isSomeday = !!task?.somedayListId;

        if (isSomeday) {
            setSomedayLists((prev) =>
                prev.map((l) => ({
                    ...l,
                    tasks: l.tasks.map((t) =>
                        t.id === taskId
                            ? { ...t, title: newTitle.trim(), updatedAt: new Date() }
                            : t,
                    ),
                })),
            );
        } else {
            setTasks(
                tasks.map((t) =>
                    t.id === taskId
                        ? { ...t, title: newTitle.trim(), updatedAt: new Date() }
                        : t,
                ),
            );
        }
        setEditingTaskId(null);

        try {
            await fetch("/api/tasks", {
                method: "PATCH",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ id: taskId, title: newTitle.trim() }),
            });

            if (task?.externalId && task?.externalProvider) {
                fetch("/api/tasks/sync", {
                    method: "PATCH",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ taskId, title: newTitle.trim() }),
                }).catch((e) => console.error("Sync error:", e));
            }
        } catch (error) {
            console.error("Error updating task:", error);
        }
    };

    const updateTaskFields = async (taskId: string, fields: Partial<Task>) => {
        setTasks((prev) =>
            prev.map((t) =>
                t.id === taskId ? { ...t, ...fields, updatedAt: new Date() } : t,
            ),
        );

        // Also update someday lists if the task is there
        setSomedayLists((lists) =>
            lists.map((list) => ({
                ...list,
                tasks: list.tasks.map((t) =>
                    t.id === taskId ? { ...t, ...fields, updatedAt: new Date() } : t,
                ),
            })),
        );

        try {
            const res = await fetch("/api/tasks", {
                method: "PATCH",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ id: taskId, ...fields }),
            });
            if (!res.ok) {
                const errData = await res.json().catch(() => ({}));
                console.error("Failed to update task fields:", res.status, errData);
            }
        } catch (error) {
            console.error("Error updating task fields:", error);
        }
    };

    // Sub-task CRUD operations
    const addSubTask = async (parentId: string, title: string) => {
        if (!title.trim() || !session?.user) return;

        // Find parent task to inherit scheduling
        const parentTask = findTaskAnywhere(parentId);

        try {
            const response = await fetch("/api/tasks", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    title: title.trim(),
                    parentTaskId: parentId,
                    scheduledDate: parentTask?.scheduledDate || null,
                    dayOfWeek: parentTask?.dayOfWeek ?? null,
                    order: (parentTask?.subTasks?.length || 0),
                }),
            });

            if (response.ok) {
                const data = await response.json();
                const newSubTask = {
                    ...data.task,
                    createdAt: new Date(data.task.createdAt),
                    updatedAt: new Date(data.task.updatedAt),
                };

                // Update local state: add sub-task to parent
                setTasks((prev) =>
                    prev.map((t) =>
                        t.id === parentId
                            ? { ...t, subTasks: [...(t.subTasks || []), newSubTask] }
                            : t,
                    ),
                );
                setSomedayLists((prev) =>
                    prev.map((l) => ({
                        ...l,
                        tasks: l.tasks.map((t) =>
                            t.id === parentId
                                ? { ...t, subTasks: [...(t.subTasks || []), newSubTask] }
                                : t,
                        ),
                    })),
                );
            }
        } catch (error) {
            console.error("Error adding sub-task:", error);
        }
    };

    const toggleSubTask = async (subTaskId: string) => {
        // Find the sub-task in any parent
        let foundSubTask: Task | undefined;
        for (const task of tasks) {
            foundSubTask = task.subTasks?.find((st) => st.id === subTaskId);
            if (foundSubTask) break;
        }
        if (!foundSubTask) {
            for (const list of somedayLists) {
                for (const task of list.tasks) {
                    foundSubTask = task.subTasks?.find((st) => st.id === subTaskId);
                    if (foundSubTask) break;
                }
                if (foundSubTask) break;
            }
        }
        if (!foundSubTask) return;

        const newCompleted = !foundSubTask.completed;

        // Optimistic update
        const updateSubTasks = (taskList: Task[]) =>
            taskList.map((t) => ({
                ...t,
                subTasks: t.subTasks?.map((st) =>
                    st.id === subTaskId ? { ...st, completed: newCompleted } : st,
                ),
            }));

        setTasks((prev) => updateSubTasks(prev));
        setSomedayLists((prev) =>
            prev.map((l) => ({ ...l, tasks: updateSubTasks(l.tasks) })),
        );

        try {
            await fetch("/api/tasks", {
                method: "PATCH",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ id: subTaskId, completed: newCompleted }),
            });
        } catch (error) {
            console.error("Error toggling sub-task:", error);
        }
    };

    const deleteSubTask = async (subTaskId: string) => {
        // Optimistic update: remove from parent's subTasks
        const removeSubTask = (taskList: Task[]) =>
            taskList.map((t) => ({
                ...t,
                subTasks: t.subTasks?.filter((st) => st.id !== subTaskId),
            }));

        setTasks((prev) => removeSubTask(prev));
        setSomedayLists((prev) =>
            prev.map((l) => ({ ...l, tasks: removeSubTask(l.tasks) })),
        );

        try {
            await fetch(`/api/tasks?id=${subTaskId}`, { method: "DELETE" });
        } catch (error) {
            console.error("Error deleting sub-task:", error);
        }
    };

    const updateSubTask = async (subTaskId: string, newTitle: string) => {
        if (!newTitle.trim()) {
            await deleteSubTask(subTaskId);
            return;
        }

        const updateSubTasks = (taskList: Task[]) =>
            taskList.map((t) => ({
                ...t,
                subTasks: t.subTasks?.map((st) =>
                    st.id === subTaskId ? { ...st, title: newTitle.trim() } : st,
                ),
            }));

        setTasks((prev) => updateSubTasks(prev));
        setSomedayLists((prev) =>
            prev.map((l) => ({ ...l, tasks: updateSubTasks(l.tasks) })),
        );

        try {
            await fetch("/api/tasks", {
                method: "PATCH",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ id: subTaskId, title: newTitle.trim() }),
            });
        } catch (error) {
            console.error("Error updating sub-task:", error);
        }
    };

    const updateTaskDuration = async (
        taskId: string,
        durationMinutes: number,
    ) => {
        const task = tasks.find((t) => t.id === taskId);
        if (!task || !task.startTime) return;

        try {
            // Parse start time (HH:mm)
            const [startHour, startMinute] = task.startTime.split(":").map(Number);

            // Calculate end time
            const totalStartMinutes = startHour * 60 + startMinute;
            const totalEndMinutes = totalStartMinutes + durationMinutes;

            const endHour = Math.floor(totalEndMinutes / 60) % 24; // Wrap around 24h
            const endMinute = totalEndMinutes % 60;

            const endTimeStr = `${endHour.toString().padStart(2, "0")}:${endMinute.toString().padStart(2, "0")}`;

            // Optimistic update
            setTasks(
                tasks.map((t) =>
                    t.id === taskId
                        ? { ...t, endTime: endTimeStr, updatedAt: new Date() }
                        : t,
                ),
            );

            await fetch("/api/tasks", {
                method: "PATCH",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ id: taskId, endTime: endTimeStr }),
            });
        } catch (error) {
            console.error("Error updating task duration:", error);
        }
    };

    const updateTaskNotes = async (taskId: string, notes: string) => {
        const task = findTaskAnywhere(taskId);
        const isSomeday = !!task?.somedayListId;

        if (isSomeday) {
            setSomedayLists((prev) =>
                prev.map((l) => ({
                    ...l,
                    tasks: l.tasks.map((t) =>
                        t.id === taskId
                            ? { ...t, markdownContent: notes, updatedAt: new Date() }
                            : t,
                    ),
                })),
            );
        } else {
            setTasks(
                tasks.map((t) =>
                    t.id === taskId
                        ? { ...t, markdownContent: notes, updatedAt: new Date() }
                        : t,
                ),
            );
        }

        try {
            await fetch("/api/tasks", {
                method: "PATCH",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ id: taskId, markdownContent: notes }),
            });

            if (task?.externalId && task?.externalProvider) {
                fetch("/api/tasks/sync", {
                    method: "PATCH",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ taskId, notes }),
                }).catch((e) => console.error("Sync error:", e));
            }
        } catch (error) {
            console.error("Error updating task notes:", error);
        }
    };

    const toggleTaskRolling = async (taskId: string) => {
        saveSnapshot();
        const task = findTaskAnywhere(taskId);
        if (!task) return;

        const newRollingState = !task.isRolling;
        const isSomeday = !!task.somedayListId;

        if (isSomeday) {
            setSomedayLists((prev) =>
                prev.map((l) => ({
                    ...l,
                    tasks: l.tasks.map((t) =>
                        t.id === taskId
                            ? { ...t, isRolling: newRollingState, updatedAt: new Date() }
                            : t,
                    ),
                })),
            );
        } else {
            setTasks(
                tasks.map((t) =>
                    t.id === taskId
                        ? { ...t, isRolling: newRollingState, updatedAt: new Date() }
                        : t,
                ),
            );
        }

        try {
            await fetch("/api/tasks", {
                method: "PATCH",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ id: taskId, isRolling: newRollingState }),
            });
        } catch (error) {
            console.error("Error updating task rolling state:", error);
            if (isSomeday) {
                setSomedayLists((prev) =>
                    prev.map((l) => ({
                        ...l,
                        tasks: l.tasks.map((t) =>
                            t.id === taskId ? { ...t, isRolling: !newRollingState } : t,
                        ),
                    })),
                );
            } else {
                setTasks(
                    tasks.map((t) =>
                        t.id === taskId ? { ...t, isRolling: !newRollingState } : t,
                    ),
                );
            }
        }
    };

    const moveTaskToSlot = async (
        taskId: string,
        dayOfWeek: number,
        startTime: string,
        scheduledDate?: Date,
    ) => {
        const newScheduledDate = scheduledDate
            ? formatDateToISO(scheduledDate)
            : undefined;
        const task = tasks.find((t) => t.id === taskId);
        setTasks(
            tasks.map((t) =>
                t.id === taskId
                    ? {
                        ...t,
                        dayOfWeek,
                        startTime,
                        scheduledDate: newScheduledDate || t.scheduledDate,
                        somedayListId: null,
                        somedaySlotIndex: null,
                        updatedAt: new Date(),
                    }
                    : t,
            ),
        );

        try {
            await fetch("/api/tasks", {
                method: "PATCH",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    id: taskId,
                    dayOfWeek,
                    startTime,
                    scheduledDate: newScheduledDate,
                    somedayListId: null,
                    somedaySlotIndex: null,
                }),
            });

            // Sync due date change to external provider
            if (task?.externalId && task?.externalProvider && newScheduledDate) {
                fetch("/api/tasks/sync", {
                    method: "PATCH",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ taskId, scheduledDate: newScheduledDate }),
                }).catch((e) => console.error("Sync error:", e));
            }
        } catch (error) {
            console.error("Error moving task:", error);
        }
    };

    const assignProject = async (taskId: string, projectId: string | null) => {
        const proj = projectId ? projects.find((p) => p.id === projectId) || null : null;
        // Optimistic update
        const updateTask = (t: Task) =>
            t.id === taskId ? { ...t, projectId: projectId, project: proj } : t;
        setTasks((prev) => prev.map(updateTask));
        setSomedayLists((prev) =>
            prev.map((l) => ({ ...l, tasks: l.tasks.map(updateTask) }))
        );
        try {
            await fetch("/api/tasks", {
                method: "PATCH",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ id: taskId, projectId }),
            });
        } catch (e) {
            console.error("Failed to assign project:", e);
        }
    };

    const deleteTask = async (taskId: string) => {
        saveSnapshot();
        const taskToDelete = findTaskAnywhere(taskId);
        const isSomeday = !!taskToDelete?.somedayListId;
        const isVirtual = taskId.startsWith("virtual-");

        let originalId = taskId;
        if (isVirtual) {
            const match = taskId.match(/^virtual-(.+)-(\d{4}-\d{2}-\d{2})$/);
            if (match) {
                originalId = match[1];
            }
        }

        // Check if it's a series (virtual or real recurring)
        const isSeries = isVirtual || (taskToDelete && taskToDelete.isRecurring);

        if (isSeries) {
            setRecurringDeleteModal({ isOpen: true, taskId });
            return;
        }

        // NORMAL DELETE (Single instance)
        if (isSomeday) {
            setSomedayLists((prev) =>
                prev.map((l) => ({
                    ...l,
                    tasks: l.tasks.filter((t) => t.id !== taskId),
                })),
            );
        } else {
            setTasks((prev) => prev.filter((t) => t.id !== taskId));
        }
        setEditingTaskId(null);

        try {
            if (taskToDelete?.externalId && taskToDelete?.externalProvider) {
                fetch("/api/tasks/sync", {
                    method: "PATCH",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ taskId, action: "delete" }),
                }).catch((e) => console.error("Sync delete error:", e));
            }

            await fetch(`/api/tasks?id=${taskId}`, { method: "DELETE" });
        } catch (error) {
            console.error("Error deleting task:", error);
        }
    };

    const handleConfirmDeleteSeries = async (taskId: string) => {
        let originalId = taskId;
        if (taskId.startsWith("virtual-")) {
            const match = taskId.match(/^virtual-(.+)-(\d{4}-\d{2}-\d{2})$/);
            if (match) originalId = match[1];
        }

        const taskToDelete = findTaskAnywhere(originalId);

        setTasks((prev) =>
            prev.filter((t) => {
                if (taskToDelete && t.title === taskToDelete.title &&
                    t.recurrenceInterval === taskToDelete.recurrenceInterval &&
                    t.recurrenceUnit === taskToDelete.recurrenceUnit) {
                    return false;
                }
                if (t.id === originalId) return false;
                if (t.id.startsWith(`virtual-${originalId}-`)) return false;
                if (t.id === taskId) return false;
                return true;
            }),
        );
        setEditingTaskId(null);
        setRecurringDeleteModal({ isOpen: false, taskId: null });

        try {
            const origTask = findTaskAnywhere(originalId);
            if (origTask?.externalId && origTask?.externalProvider) {
                fetch("/api/tasks/sync", {
                    method: "PATCH",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ taskId: originalId, action: "delete" }),
                }).catch((e) => console.error("Sync delete error:", e));
            }
            await fetch(`/api/tasks?id=${originalId}`, { method: "DELETE" });
        } catch (error) {
            console.error("Error deleting series:", error);
        }
    };

    const handleConfirmDeleteOccurrence = async (taskId: string) => {
        setTasks((prev) => prev.filter((t) => t.id !== taskId));
        setEditingTaskId(null);
        setRecurringDeleteModal({ isOpen: false, taskId: null });

        try {
            const taskToDelete = findTaskAnywhere(taskId);
            if (taskToDelete?.externalId && taskToDelete?.externalProvider) {
                fetch("/api/tasks/sync", {
                    method: "PATCH",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ taskId, action: "delete" }),
                }).catch((e) => console.error("Sync delete error:", e));
            }
            await fetch(`/api/tasks?id=${taskId}`, { method: "DELETE" });
        } catch (error) {
            console.error("Error deleting instance:", error);
        }
    };

    // Toggle rolling status
    const toggleRolling = async (taskId: string) => {
        const task = tasks.find((t) => t.id === taskId);
        if (!task) return;

        const updatedIsRolling = !task.isRolling;

        setTasks(
            tasks.map((t) =>
                t.id === taskId
                    ? { ...t, isRolling: updatedIsRolling, updatedAt: new Date() }
                    : t,
            ),
        );

        try {
            await fetch("/api/tasks", {
                method: "PATCH",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({ id: taskId, isRolling: updatedIsRolling }),
            });
        } catch (error) {
            console.error("Error toggling rolling status:", error);
        }
    };

    // Roll task to tomorrow or next week
    const rollTask = async (
        taskId: string,
        rollType: "tomorrow" | "nextWeek",
    ) => {
        const task = tasks.find((t) => t.id === taskId);
        if (!task || task.completed) return;

        // Get current task date
        const currentDate = task.scheduledDate
            ? new Date(task.scheduledDate)
            : new Date();

        // Calculate new date
        const newDate = new Date(currentDate);
        if (rollType === "tomorrow") {
            newDate.setDate(newDate.getDate() + 1);
        } else {
            newDate.setDate(newDate.getDate() + 7);
        }

        const newScheduledDate = formatDateToISO(newDate);

        // Preserve startTime — if the preferred slot is taken, find next free one
        let resolvedStartTime = task.startTime || undefined;
        if (resolvedStartTime) {
            const targetSlotTasks = tasks.filter((t) => {
                if (t.id === taskId || !t.scheduledDate) return false;
                const tDate = formatDateToISO(new Date(t.scheduledDate));
                return tDate === newScheduledDate && t.startTime === resolvedStartTime;
            });
            if (targetSlotTasks.length > 0) {
                // Slot is taken — find next free slot
                const allSlots = getTimeSlots(
                    effectiveCellDuration,
                    0,
                    24,
                );
                const startIndex = allSlots.indexOf(resolvedStartTime);
                if (startIndex !== -1) {
                    for (let i = startIndex + 1; i < allSlots.length; i++) {
                        const candidate = allSlots[i];
                        const candidateTasks = tasks.filter((t) => {
                            if (t.id === taskId || !t.scheduledDate) return false;
                            const tDate = formatDateToISO(new Date(t.scheduledDate));
                            return tDate === newScheduledDate && t.startTime === candidate;
                        });
                        if (candidateTasks.length === 0) {
                            resolvedStartTime = candidate;
                            break;
                        }
                    }
                }
            }
        }

        setTasks(
            tasks.map((t) =>
                t.id === taskId
                    ? {
                        ...t,
                        scheduledDate: newScheduledDate,
                        dayOfWeek: newDate.getDay(),
                        startTime: resolvedStartTime || t.startTime,
                        updatedAt: new Date(),
                    }
                    : t,
            ),
        );

        try {
            await fetch("/api/tasks", {
                method: "PATCH",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    id: taskId,
                    scheduledDate: newScheduledDate,
                    dayOfWeek: newDate.getDay(),
                    startTime: resolvedStartTime,
                }),
            });

            // Sync due date change to external provider
            if (task.externalId && task.externalProvider) {
                fetch("/api/tasks/sync", {
                    method: "PATCH",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ taskId, scheduledDate: newScheduledDate }),
                }).catch((e) => console.error("Sync error:", e));
            }
        } catch (error) {
            console.error("Error rolling task:", error);
        }
    };

    // Drag and drop handlers
    const handleDragStart = (e: DragEvent, task: Task) => {
        setDraggedTask(task);
        if (e.dataTransfer) {
            e.dataTransfer.effectAllowed = "move";
            e.dataTransfer.setData("text/plain", task.id);
        }
        // Add drag-source class for styling
        if (e.currentTarget instanceof HTMLElement) {
            e.currentTarget.classList.add("drag-source");
        }
    };

    const handleDragOver = (
        e: DragEvent | React.DragEvent,
        dayOfWeek?: number,
        slot?: string,
    ) => {
        // Reject someday list drags on day slots
        if (draggingListId) {
            e.preventDefault();
            if (e.dataTransfer) {
                e.dataTransfer.dropEffect = "none";
            }
            return;
        }
        e.preventDefault();
        if (e.dataTransfer) {
            e.dataTransfer.dropEffect = "move";
        }
        // Update drop preview if we have day and slot info
        if (dayOfWeek !== undefined && slot) {
            setDropPreview({ day: dayOfWeek, slot });
        }
    };

    const handleDrop = async (e: DragEvent, dayOfWeek: number, slot?: string) => {
        e.preventDefault();
        if (draggedTask) {
            const visibleDays = getVisibleDays();
            const targetDateObj =
                visibleDays.find((d) => d.getDay() === dayOfWeek) || new Date();

            let targetSlot = slot;

            // If no slot provided (dropped on header/background), try to keep original time
            if (!targetSlot && draggedTask.startTime) {
                targetSlot = draggedTask.startTime;
            }

            // Collision detection / Find next free slot
            if (targetSlot) {
                if (isSlotOccupiedByTask(targetDateObj, targetSlot, draggedTask.id)) {
                    const allSlots = getTimeSlots(
                        effectiveCellDuration,
                        0,
                        24,
                    );
                    const startIndex = allSlots.indexOf(targetSlot);
                    if (startIndex !== -1) {
                        for (let i = startIndex + 1; i < allSlots.length; i++) {
                            const nextSlot = allSlots[i];
                            if (!isSlotOccupiedByTask(targetDateObj, nextSlot, draggedTask.id) && !isSlotProtected(targetDateObj, nextSlot)) {
                                targetSlot = nextSlot;
                                break;
                            }
                        }
                    }
                }
            }

            // If the task is a subtask, promote it to a standalone task
            if (draggedTask.parentTaskId) {
                const newScheduledDate = formatDateToISO(targetDateObj);
                // Remove subtask from parent in UI
                setTasks((prev) =>
                    prev.map((t) =>
                        t.id === draggedTask.parentTaskId
                            ? { ...t, subTasks: (t.subTasks || []).filter((s) => s.id !== draggedTask.id) }
                            : t
                    )
                );
                // Add as standalone task in UI
                setTasks((prev) => [
                    ...prev,
                    {
                        ...draggedTask,
                        parentTaskId: null,
                        scheduledDate: newScheduledDate,
                        dayOfWeek,
                        startTime: targetSlot || "",
                    } as Task,
                ]);
                // Persist
                try {
                    await fetch("/api/tasks", {
                        method: "PATCH",
                        headers: { "Content-Type": "application/json" },
                        body: JSON.stringify({
                            id: draggedTask.id,
                            parentTaskId: null,
                            scheduledDate: newScheduledDate,
                            dayOfWeek,
                            startTime: targetSlot || "",
                        }),
                    });
                } catch (error) {
                    console.error("Error promoting subtask:", error);
                }
                setDraggedTask(null);
                setDropPreview(null);
                return;
            }

            // If the task was from a someday list, move it to the calendar
            if (draggedTask.somedayListId) {
                const newScheduledDate = formatDateToISO(targetDateObj);
                // Inherit provider from someday list if task doesn't have one
                const sourceList = somedayLists.find(l => l.id === draggedTask.somedayListId);
                const taskProvider = draggedTask.externalProvider || sourceList?.externalProvider || null;
                // Remove from someday list UI
                setSomedayLists((prev) =>
                    prev.map((l) => ({
                        ...l,
                        tasks: l.tasks.filter((t) => t.id !== draggedTask.id),
                    })),
                );
                // Add to calendar tasks
                setTasks((prev) => [
                    ...prev,
                    {
                        ...draggedTask,
                        somedayListId: null,
                        somedaySlotIndex: null,
                        scheduledDate: newScheduledDate,
                        dayOfWeek,
                        startTime: targetSlot || "",
                        externalProvider: taskProvider,
                    },
                ]);
                // Persist
                try {
                    await fetch("/api/tasks", {
                        method: "PATCH",
                        headers: { "Content-Type": "application/json" },
                        body: JSON.stringify({
                            id: draggedTask.id,
                            somedayListId: null,
                            somedaySlotIndex: null,
                            scheduledDate: newScheduledDate,
                            dayOfWeek,
                            startTime: targetSlot || "",
                            ...(taskProvider && { externalProvider: taskProvider }),
                        }),
                    });

                    // Sync due date to external provider when moving from someday to calendar
                    if (draggedTask.externalId && draggedTask.externalProvider) {
                        fetch("/api/tasks/sync", {
                            method: "PATCH",
                            headers: { "Content-Type": "application/json" },
                            body: JSON.stringify({
                                taskId: draggedTask.id,
                                scheduledDate: newScheduledDate,
                            }),
                        }).catch((e) => console.error("Sync error:", e));
                    }
                } catch (error) {
                    console.error("Error moving task from someday to calendar:", error);
                }
            } else {
                moveTaskToSlot(
                    draggedTask.id,
                    dayOfWeek,
                    targetSlot || "",
                    targetDateObj,
                );
            }
            setDraggedTask(null);
        }
        setDropPreview(null);
    };

    const handleDragEnd = () => {
        setDraggedTask(null);
        setDropPreview(null);
        // Remove drag-source class from all elements
        document
            .querySelectorAll(".drag-source")
            .forEach((el) => el.classList.remove("drag-source"));
    };

    const handleDragLeave = () => {
        setDropPreview(null);
    };


    const handleSomedayDragOver = (e: React.DragEvent, listId: string, slotIdx: number) => {
        e.preventDefault();
        setDropPreview({ listId, slotIdx });
    };

    const handleSomedayDrop = async (e: React.DragEvent, listId: string, slotIndex: number) => {
        e.preventDefault();
        if (draggedTask) {
            // If subtask, remove from parent first
            if (draggedTask.parentTaskId) {
                setTasks((prev) =>
                    prev.map((t) =>
                        t.id === draggedTask.parentTaskId
                            ? { ...t, subTasks: (t.subTasks || []).filter((s) => s.id !== draggedTask.id) }
                            : t
                    )
                );
            }

            // Update local state for someday lists
            setSomedayLists((prev) =>
                prev.map((l) => {
                    // Remove the task from its current position in all lists
                    const filteredTasks = l.tasks.filter((t) => t.id !== draggedTask.id);
                    if (l.id === listId) {
                        const movedTask = {
                            ...draggedTask,
                            parentTaskId: null,
                            somedayListId: listId,
                            somedaySlotIndex: slotIndex,
                            scheduledDate: null as any,
                            dayOfWeek: null as any,
                            startTime: null as any,
                        };
                        return {
                            ...l,
                            tasks: [...filteredTasks, movedTask],
                        };
                    }
                    return { ...l, tasks: filteredTasks };
                }),
            );

            // If it was a calendar task (not someday, not subtask), remove from calendar tasks
            if (!draggedTask.somedayListId && !draggedTask.parentTaskId) {
                setTasks((prev) => prev.filter((t) => t.id !== draggedTask.id));
            }

            // Persist the change
            try {
                await fetch("/api/tasks", {
                    method: "PATCH",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({
                        id: draggedTask.id,
                        parentTaskId: null,
                        somedayListId: listId,
                        somedaySlotIndex: slotIndex,
                        scheduledDate: null,
                        dayOfWeek: null,
                        startTime: null,
                    }),
                });

                // If the target list is synced to an external provider and
                // the task doesn't already exist at that provider/list, create it there
                const targetList = somedayLists.find((l) => l.id === listId);
                const needsSync = targetList?.externalId && targetList?.externalProvider && (
                    !draggedTask.externalId ||
                    draggedTask.externalProvider !== targetList.externalProvider ||
                    draggedTask.externalListId !== targetList.externalId
                );
                if (needsSync) {
                    try {
                        const syncRes = await fetch("/api/tasks/sync", {
                            method: "POST",
                            headers: { "Content-Type": "application/json" },
                            body: JSON.stringify({ taskId: draggedTask.id }),
                        });
                        if (syncRes.ok) {
                            const syncData = await syncRes.json();
                            // Update local state with external IDs
                            if (syncData.task) {
                                setSomedayLists((prev) =>
                                    prev.map((l) => ({
                                        ...l,
                                        tasks: l.tasks.map((t) =>
                                            t.id === draggedTask.id
                                                ? {
                                                    ...t,
                                                    externalId: syncData.task.externalId,
                                                    externalProvider: syncData.task.externalProvider,
                                                    externalListId: syncData.task.externalListId,
                                                }
                                                : t
                                        ),
                                    }))
                                );
                            }
                        }
                    } catch (syncError) {
                        console.error("Failed to sync task to external provider:", syncError);
                    }
                }
            } catch (error) {
                console.error("Error moving task to someday slot:", error);
            }
            setDraggedTask(null);
            setDropPreview(null);
        }
    };

    // Sync calendar
    const handleSync = async () => {
        setSyncStatus("syncing");
        try {
            // Pull changes from Google Tasks, then force-refresh calendar cache
            await fetch("/api/tasks/sync").catch((e) =>
                console.error("Task pull sync error:", e),
            );
            // Force live refresh from providers (bypass staleness check)
            const syncRes = await fetch("/api/calendar/sync", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    timeMin: new Date(
                        currentWeekStart.getTime() - 7 * 24 * 60 * 60 * 1000,
                    ).toISOString(),
                    timeMax: new Date(
                        currentWeekStart.getTime() + 14 * 24 * 60 * 60 * 1000,
                    ).toISOString(),
                    forceRefresh: true,
                }),
            });
            if (syncRes.ok) {
                const data = await syncRes.json();
                if (data.events) setRawCalendarEvents(data.events);
            }
            await fetchTasks();
            // Re-fetch after background refresh completes
            if (true) {
                setTimeout(() => fetchCalendarEvents(), 8000);
            }
            setSyncStatus("synced");
            setTimeout(() => setSyncStatus("idle"), 3000);
        } catch (error) {
            console.error("Error syncing:", error);
            setSyncStatus("idle");
            setSyncError("Sync failed");
            setTimeout(() => setSyncError(null), 10000);
        }
    };

    // Start adding someday list UI
    const handleStartAddSomedayList = () => {
        setIsAddingSomedayList(true);
        // Focus will happen in render logic if possible or via ref, but let's render conditional input first
    };

    const saveSomedayList = async () => {
        if (!newSomedayListName.trim()) {
            setIsAddingSomedayList(false);
            setNewSomedayListName("");
            setSelectedSomedayProvider(null);
            return;
        }

        try {
            const url = selectedSomedayProvider
                ? "/api/someday-lists/external"
                : "/api/someday-lists";

            const response = await fetch(url, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    title: newSomedayListName.trim(),
                    provider: selectedSomedayProvider,
                }),
            });

            if (response.ok) {
                const data = await response.json();
                setSomedayLists((prev) => [
                    ...prev,
                    {
                        ...(data.somedayList || data.list),
                        tasks: [], // Initially empty
                    },
                ]);
                setNewSomedayListName("");
                setSelectedSomedayProvider(null);
                setIsAddingSomedayList(false);
            } else {
                const error = await response.json();
                alert(error.error || "Failed to create list");
            }
        } catch (error) {
            console.error("Error adding someday list:", error);
            alert("An error occurred while creating the list");
        }
    };

    // Get time slots to display
    const visibleSlots = getTimeSlots(
        effectiveCellDuration,
        0,
        24,
    );

    const fontSizeScale = fontSize === "S" ? 0.85 : fontSize === "L" ? 1.15 : 1;
    const mobileScale = isMobile ? (profile.mobileFontScale || 1.0) : 1.0;
    const fontVal = (v: string | undefined) => v && v !== "__custom__" ? v : "";
    const scaleRem = (base: string) => {
        const num = parseFloat(base);
        return `${(num * fontSizeScale * mobileScale).toFixed(3)}rem`;
    };
    const activeTheme = (darkMode ? profile.darkTheme : profile.lightTheme) as Record<string, string> | null;

    const containerStyle = {
        ...(activeTheme ? {
            "--weekly-bg": activeTheme.background,
            "--weekly-text": activeTheme.foreground,
            "--weekly-text-light": activeTheme.color8 || activeTheme.color7,
            "--weekly-border": activeTheme.color0,
            "--weekly-teal": activeTheme.color4 || activeTheme.color6,
            "--weekly-settings-item-bg": activeTheme.color0,
            "--weekly-item-hover": activeTheme.color0,
        } : {}),
        "--weekly-font-headline":
            fontVal(profile.headlineFont) || headlineFont
                ? `"${fontVal(profile.headlineFont) || headlineFont}", sans-serif`
                : "var(--font-headline)",
        "--weekly-headline-size": scaleRem(profile.headlineFontSize || "1.25rem"),
        "--weekly-headline-weight": profile.headlineFontWeight || "900",
        "--weekly-date-font": fontVal(profile.dateFontFamily)
            ? `"${fontVal(profile.dateFontFamily)}", sans-serif`
            : "var(--weekly-font-headline)",
        "--weekly-date-size": scaleRem(profile.dateFontSize || "0.65rem"),
        "--weekly-date-weight": profile.dateFontWeight || "400",
        "--weekly-time-task-font": (() => {
            // If time task font is explicitly customized (not default "Inter"), use it
            // Otherwise inherit from task font
            const ttf = fontVal(profile.timeTaskFontFamily);
            const tf = fontVal(profile.taskFontFamily);
            const isDefault = !ttf || ttf === "Inter";
            if (!isDefault) return `"${ttf}", sans-serif`;
            if (tf) return `"${tf}", sans-serif`;
            return "var(--weekly-font)";
        })(),
        "--weekly-time-task-size": scaleRem(
            // If time task size is the old default 0.75rem, use task size instead
            profile.timeTaskFontSize && profile.timeTaskFontSize !== "0.75rem"
                ? profile.timeTaskFontSize
                : profile.taskFontSize || "0.9rem"
        ),
        "--weekly-time-task-weight":
            // If time task weight is the old default 500, use task weight instead
            profile.timeTaskFontWeight && profile.timeTaskFontWeight !== "500"
                ? profile.timeTaskFontWeight
                : profile.taskFontWeight || "400",
        "--weekly-font":
            "var(--font-body)" /* Force default body font as requested */,
        "--weekly-task-font": fontVal(profile.taskFontFamily)
            ? `"${fontVal(profile.taskFontFamily)}", sans-serif`
            : "var(--weekly-font)",
        "--weekly-task-size": scaleRem(profile.taskFontSize || "0.9rem"),
        "--weekly-task-weight": profile.taskFontWeight || "400",
        "--weekly-event-font":
            fontVal(profile.eventFontFamily) || eventFontFamily
                ? `"${fontVal(profile.eventFontFamily) || eventFontFamily}", sans-serif`
                : "var(--weekly-font)",
        "--weekly-event-size": scaleRem(profile.eventFontSize || eventFontSize || "0.85rem"),
        "--weekly-event-weight":
            profile.eventFontWeight || eventFontWeight || "400",
        "--font-weight-body": profile.fontWeight || fontWeight || "400",
        "--weekly-weekend-sat": activeTheme?.color3 || (darkMode
            ? invertColor(profile.weekendColorSat || "#666666")
            : profile.weekendColorSat || "#666666"),
        "--weekly-weekend-sun": activeTheme?.color1 || (darkMode
            ? invertColor(profile.weekendColorSun || "#dc2626")
            : profile.weekendColorSun || "#dc2626"),
        "--weekly-weekday-color": activeTheme?.foreground || (darkMode
            ? invertColor(profile.weekdayColor || "#888888")
            : profile.weekdayColor || "#888888"),
        "--weekly-date-color": activeTheme?.color8 || (darkMode
            ? invertColor(profile.dateColor || "#888888")
            : profile.dateColor || "#888888"),
        "--weekly-task-color": activeTheme?.color7 || (darkMode
            ? invertColor(profile.taskColor || "#333333")
            : profile.taskColor || "#333333"),
        "--weekly-today-highlight": activeTheme?.color0 || (darkMode
            ? invertColor(profile.todayHighlightColor || "#f0fafa")
            : profile.todayHighlightColor || "#f0fafa"),
        "--weekly-past-color": activeTheme?.color8 || (darkMode
            ? invertColor(profile.pastDayColor || "#a6a6a7")
            : profile.pastDayColor || "#a6a6a7"),
    } as React.CSSProperties;

    if (isLoading) {
        return (
            <div
                className="weekly-container"
                style={{ alignItems: "center", justifyContent: "center" }}
            >
                <div style={{ color: "var(--weekly-text-light)" }}>
                    {translations[language]?.loading || translations["en"].loading}
                </div>
            </div>
        );
    }

    const activeDateLayout = isMobile ? (profile.mobileDateLayout || "below") : (profile.dateLayout || "right");

    // Quick settings sidebar button styles
    const qsBtnStyle = (dm: boolean): React.CSSProperties => ({
        padding: "6px", borderRadius: "6px", border: "none", cursor: "pointer",
        display: "flex", alignItems: "center", justifyContent: "center",
        background: dm ? "#1f2937" : "#e5e7eb", color: dm ? "#9ca3af" : "#6b7280",
    });
    const qsActionStyle = (dm: boolean): React.CSSProperties => ({
        display: "flex", alignItems: "center", gap: "8px", padding: "7px 8px",
        fontSize: "0.8rem", borderRadius: "6px", border: "none", cursor: "pointer",
        background: "none", color: dm ? "#d1d5db" : "#333", textAlign: "left" as const,
    });

    // All-Day Events Section (reusable for above/below positioning)
    const allDaySection = (() => {
        if (!effectiveShowAllDay) return null;
        const allDayEvents = calendarEvents.filter((event) =>
            isAllDayEvent(event),
        );
        if (allDayEvents.length === 0) return null;

        const handleOnTop = effectiveAllDayPosition === "below";
        const resizeHandle = isAllDayExpanded ? (
            <div
                className="resize-handle"
                onMouseDown={(e) => startResize(e, 'allday', handleOnTop)}
                onTouchStart={(e) => startResize(e, 'allday', handleOnTop)}
            >
                <div className="resize-handle-bar" />
            </div>
        ) : null;

        return (
            <>
            {effectiveAllDayPosition === "below" && resizeHandle}
            <section
                className={`all-day-events-section ${isAllDayExpanded ? "expanded" : "collapsed"}`}
                style={isAllDayExpanded && allDayHeight ? { height: `${allDayHeight}px`, overflowY: 'auto' } : undefined}
            >
                <div style={{ display: "flex", flexDirection: "row" }}>
                    {showTimeGrid && (
                        <div
                            className="all-day-label-column"
                            onClick={() => setIsAllDayExpanded(!isAllDayExpanded)}
                            style={{
                                width: "55px",
                                flexShrink: 0,
                                display: "flex",
                                flexDirection: "column",
                                alignItems: "center",
                                justifyContent: "center",
                                cursor: "pointer",
                                borderRight: "1px solid var(--weekly-border)",
                                padding: "2px 4px",
                                gap: "0px",
                                marginLeft: "-1px",
                                position: "relative",
                            }}
                            title={isAllDayExpanded ? "Collapse" : "Expand"}
                        >
                            <span
                                style={{
                                    fontSize: "0.6rem",
                                    fontWeight: 600,
                                    color: "var(--weekly-text-light)",
                                    textTransform: "uppercase",
                                    letterSpacing: "0.05em",
                                    lineHeight: 1.1,
                                    textAlign: "center",
                                }}
                            >
                                all day
                            </span>
                            <span
                                className="all-day-events-count"
                                style={{
                                    fontSize: "0.55rem",
                                    padding: "0px 3px",
                                    marginTop: "1px",
                                }}
                            >
                                {allDayEvents.length}
                            </span>
                        </div>
                    )}
                    {/* In list mode (no time grid), skip the label column so events align with day columns */}
                    {isAllDayExpanded && (
                        <div
                            className={`all-day-events-grid cols-${viewDays}`}
                            style={{ flex: 1 }}
                        >
                            {getVisibleDays().map((date) => {
                                const dayEvents = getAllDayEventsForDate(date);
                                return (
                                    <div
                                        key={date.toISOString()}
                                        className="all-day-events-column"
                                    >
                                        {dayEvents.length > 0 ? (
                                            dayEvents.map((event) => (
                                                <div
                                                    key={event.id}
                                                    className="all-day-event"
                                                    title={`${event.calendarTitle}: ${event.title}`}
                                                    onClick={(e) => {
                                                        e.stopPropagation();
                                                        if (event.editable) {
                                                            setCalendarEventModal({
                                                                isOpen: true,
                                                                event: event,
                                                            });
                                                        }
                                                    }}
                                                    style={{
                                                        backgroundColor:
                                                            event.calendarColor || "#3b82f6",
                                                        color: "white",
                                                        borderLeft: "none",
                                                        padding: "2px 4px",
                                                        borderRadius: "3px",
                                                        fontSize: "0.75rem",
                                                        marginBottom: "2px",
                                                        whiteSpace: "nowrap",
                                                        overflow: "hidden",
                                                        textOverflow: "ellipsis",
                                                        display: "flex",
                                                        alignItems: "center",
                                                        gap: "4px",
                                                        cursor: event.editable ? "pointer" : "default",
                                                        transition: "filter 0.1s ease",
                                                    }}
                                                    onMouseEnter={(e) => {
                                                        if (event.editable) e.currentTarget.style.filter = "brightness(0.9)";
                                                    }}
                                                    onMouseLeave={(e) => {
                                                        if (event.editable) e.currentTarget.style.filter = "none";
                                                    }}
                                                >
                                                    <span className="event-indicator">📅</span>
                                                    <span className="all-day-event-title">
                                                        {event.title}
                                                    </span>
                                                </div>
                                            ))
                                        ) : (
                                            <div className="all-day-empty"></div>
                                        )}
                                    </div>
                                );
                            })}
                        </div>
                    )}
                </div>
            </section>
            {effectiveAllDayPosition === "above" && resizeHandle}
            </>
        );
    })();

    return (
        <div
            className={`weekly-container ${darkMode ? "dark-mode" : ""} font-size-${fontSize.toLowerCase()} ${viewStyle}-view ${showTimeGrid ? "time-grid-on" : "time-grid-off"}`}
            style={containerStyle}
        >
            {/* Quick Settings Sidebar (TeuxDeux-style) */}
            {showQuickSettings && (
                <>
                <div
                    onClick={() => setShowQuickSettings(false)}
                    style={{ position: "fixed", inset: 0, zIndex: 999 }}
                />
                <div
                    style={{
                        position: "fixed",
                        left: 0,
                        top: 0,
                        bottom: 0,
                        width: "240px",
                        background: darkMode ? "#1a1a2e" : "#fafafa",
                        borderRight: `1px solid ${darkMode ? "#333" : "#e5e7eb"}`,
                        zIndex: 1000,
                        display: "flex",
                        flexDirection: "column",
                        padding: "16px 14px",
                        gap: "10px",
                        overflowY: "auto",
                        boxShadow: "2px 0 12px rgba(0,0,0,0.08)",
                    }}
                >
                    <div style={{ fontSize: "0.85rem", fontWeight: 700, color: darkMode ? "#e5e7eb" : "#333", marginBottom: "2px" }}>
                        {language === "de" ? "Einstellungen" : "Preferences"}
                    </div>

                    {/* Navigation Row */}
                    <div style={{ display: "flex", justifyContent: "center", gap: "4px", padding: "4px 0", borderBottom: `1px solid ${darkMode ? "#333" : "#e5e7eb"}`, paddingBottom: "10px" }}>
                        <button onClick={() => { goToPrevWeek(); setShowQuickSettings(false); }} style={{ ...qsBtnStyle(darkMode), minWidth: "36px" }} title="Previous Week"><ChevronsLeft size={16} /></button>
                        <button onClick={() => { goToPrevDay(); setShowQuickSettings(false); }} style={{ ...qsBtnStyle(darkMode), minWidth: "36px" }} title="Previous Day"><ChevronLeft size={16} /></button>
                        <button onClick={() => { goToToday(); setShowQuickSettings(false); }} style={{ ...qsBtnStyle(darkMode), minWidth: "56px", fontWeight: 700, fontSize: "0.7rem" }} title="Today">{language === "de" ? "Heute" : "Today"}</button>
                        <button onClick={() => { goToNextDay(); setShowQuickSettings(false); }} style={{ ...qsBtnStyle(darkMode), minWidth: "36px" }} title="Next Day"><ChevronRight size={16} /></button>
                        <button onClick={() => { goToNextWeek(); setShowQuickSettings(false); }} style={{ ...qsBtnStyle(darkMode), minWidth: "36px" }} title="Next Week"><ChevronsRight size={16} /></button>
                    </div>

                    {/* Quick Actions */}
                    <div style={{ display: "flex", flexDirection: "column", gap: "1px" }}>
                        <button onClick={() => { setIsSearchOpen(true); setShowQuickSettings(false); }} style={qsActionStyle(darkMode)}><Search size={16} /> <span>{language === "de" ? "Suche" : "Search"}</span></button>
                        <button onClick={() => { setShowDatePicker(true); setShowQuickSettings(false); }} style={qsActionStyle(darkMode)}><Calendar size={16} /> <span>{language === "de" ? "Datum wählen" : "Jump to date"}</span></button>
                        <button onClick={() => { const now = new Date(); setCalendarEventModal({ isOpen: true, event: undefined, initialDate: now, initialStartTime: `${String(now.getHours()).padStart(2, "0")}:00` }); setShowQuickSettings(false); }} style={qsActionStyle(darkMode)}><Plus size={16} /> <span>{language === "de" ? "Kalendereintrag" : "Calendar Event"}</span></button>
                        <button onClick={() => { setShowProjectsSidebar(true); setShowQuickSettings(false); }} style={qsActionStyle(darkMode)}><FolderPlus size={16} /> <span>{language === "de" ? "Projekte" : "Projects"}</span></button>
                        <button onClick={() => { setIsRecurringTasksOpen(true); setShowQuickSettings(false); }} style={qsActionStyle(darkMode)}><Repeat size={16} /> <span>{language === "de" ? "Wiederkehrend" : "Recurring Tasks"}</span></button>
                        <button onClick={() => { const nv = !showNextTask; setShowNextTask(nv); saveSetting("showNextTask", nv); }} style={qsActionStyle(darkMode)}>
                            {showNextTask ? <Play size={16} /> : <Target size={16} />}
                            <span>{showNextTask ? (language === "de" ? "Nächste Aufgabe" : "Next Task") : (language === "de" ? "Ziel" : "Goal")}</span>
                        </button>
                        <button onClick={() => { setShowFocusMode(true); setShowQuickSettings(false); }} style={qsActionStyle(darkMode)}><Zap size={16} /> <span>{language === "de" ? "Fokus" : "Focus"}</span></button>
                    </div>

                    {/* Separator */}
                    <div style={{ borderTop: `1px solid ${darkMode ? "#333" : "#e5e7eb"}`, paddingTop: "8px" }} />

                    {/* View Style */}
                    <div style={{ display: "flex", flexDirection: "column", gap: "6px" }}>
                        <span style={{ fontSize: "0.7rem", fontWeight: 600, color: darkMode ? "#9ca3af" : "#6b7280" }}>
                            {language === "de" ? "Ansicht" : "View"}
                        </span>
                        <div style={{ display: "flex", gap: "4px" }}>
                            {[
                                { key: "simple", icon: <Calendar size={13} /> },
                                { key: "calendar", icon: <CalendarDays size={13} /> },
                                { key: "list", icon: <ListTodo size={13} /> },
                                { key: "kanban", icon: <Kanban size={13} /> },
                            ].map((v) => (
                                <button key={v.key} onClick={() => { setViewStyle(v.key as any); saveSetting("viewStyle", v.key); }}
                                    style={{ flex: 1, padding: "5px 0", borderRadius: "6px", border: "none", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", fontWeight: viewStyle === v.key ? 700 : 400, background: viewStyle === v.key ? "#0ea5e9" : (darkMode ? "#1f2937" : "#e5e7eb"), color: viewStyle === v.key ? "#fff" : (darkMode ? "#9ca3af" : "#6b7280") }}>
                                    {v.icon}
                                </button>
                            ))}
                        </div>
                    </div>

                    {/* Columns / Days */}
                    <div style={{ display: "flex", flexDirection: "column", gap: "6px" }}>
                        <span style={{ fontSize: "0.7rem", fontWeight: 600, color: darkMode ? "#9ca3af" : "#6b7280" }}>
                            {language === "de" ? "Spalten" : "Days"}
                        </span>
                        <div style={{ display: "flex", gap: "4px" }}>
                            {[1, 2, 3, 5, 7].map((num) => (
                                <button key={num} onClick={() => { setViewDays(num); savedViewDaysRef.current = num; saveSetting("viewDays", num); }}
                                    style={{ flex: 1, padding: "5px 0", fontSize: "0.8rem", borderRadius: "6px", border: "none", cursor: "pointer", fontWeight: viewDays === num ? 700 : 400, background: viewDays === num ? (darkMode ? "#374151" : "#333") : (darkMode ? "#1f2937" : "#e5e7eb"), color: viewDays === num ? "#fff" : (darkMode ? "#9ca3af" : "#6b7280") }}>
                                    {num}
                                </button>
                            ))}
                        </div>
                    </div>

                    {/* Slot Duration (only with time grid) */}
                    {showTimeGrid && (
                        <div style={{ display: "flex", flexDirection: "column", gap: "6px" }}>
                            <span style={{ fontSize: "0.7rem", fontWeight: 600, color: darkMode ? "#9ca3af" : "#6b7280" }}>
                                {language === "de" ? "Zeitfenster" : "Slot"}
                            </span>
                            <div style={{ display: "flex", gap: "4px" }}>
                                {[15, 30, 60].map((d) => (
                                    <button key={d} onClick={() => { setCellDuration(d as CellDuration); saveSetting("cellDuration", d); }}
                                        style={{ flex: 1, padding: "5px 0", fontSize: "0.8rem", borderRadius: "6px", border: "none", cursor: "pointer", fontWeight: effectiveCellDuration === d ? 700 : 400, background: effectiveCellDuration === d ? (darkMode ? "#374151" : "#333") : (darkMode ? "#1f2937" : "#e5e7eb"), color: effectiveCellDuration === d ? "#fff" : (darkMode ? "#9ca3af" : "#6b7280") }}>
                                        {d}m
                                    </button>
                                ))}
                            </div>
                        </div>
                    )}

                    {/* Visible Hours (only with time grid) */}
                    {showTimeGrid && (
                        <div style={{ display: "flex", alignItems: "center", gap: "6px" }}>
                            <Clock size={14} style={{ color: darkMode ? "#9ca3af" : "#6b7280", flexShrink: 0 }} />
                            <input type="number" min={0} max={23} value={startHour} onChange={(e) => { const h = Math.max(0, Math.min(23, parseInt(e.target.value) || 0)); setStartHour(h); saveSetting("startHour", h); }}
                                style={{ width: "44px", padding: "4px 4px", borderRadius: "6px", border: `1px solid ${darkMode ? "#555" : "#e5e7eb"}`, background: darkMode ? "#1f2937" : "#f3f4f6", color: darkMode ? "#e5e7eb" : "#333", fontSize: "0.8rem", textAlign: "center", outline: "none" }} />
                            <span style={{ fontSize: "0.7rem", color: darkMode ? "#9ca3af" : "#6b7280" }}>–</span>
                            <input type="number" min={1} max={24} value={endHour} onChange={(e) => { const h = Math.max(1, Math.min(24, parseInt(e.target.value) || 24)); setEndHour(h); saveSetting("endHour", h); }}
                                style={{ width: "44px", padding: "4px 4px", borderRadius: "6px", border: `1px solid ${darkMode ? "#555" : "#e5e7eb"}`, background: darkMode ? "#1f2937" : "#f3f4f6", color: darkMode ? "#e5e7eb" : "#333", fontSize: "0.8rem", textAlign: "center", outline: "none" }} />
                            <span style={{ fontSize: "0.7rem", color: darkMode ? "#9ca3af" : "#6b7280" }}>h</span>
                        </div>
                    )}

                    {/* Text size */}
                    <div style={{ display: "flex", flexDirection: "column", gap: "6px" }}>
                        <span style={{ fontSize: "0.7rem", fontWeight: 600, color: darkMode ? "#9ca3af" : "#6b7280" }}>
                            {language === "de" ? "Textgröße" : "Text size"}
                        </span>
                        <div style={{ display: "flex", gap: "4px" }}>
                            {(["S", "M", "L"] as const).map((size) => (
                                <button key={size} onClick={() => { setFontSize(size); saveSetting("fontSize", size); }}
                                    style={{ padding: "4px 10px", fontSize: "0.8rem", borderRadius: "6px", border: "none", cursor: "pointer", fontWeight: fontSize === size ? 700 : 400, background: fontSize === size ? (darkMode ? "#374151" : "#333") : (darkMode ? "#1f2937" : "#e5e7eb"), color: fontSize === size ? "#fff" : (darkMode ? "#9ca3af" : "#6b7280") }}>
                                    {size}
                                </button>
                            ))}
                        </div>
                    </div>

                    {/* Separator */}
                    <div style={{ borderTop: `1px solid ${darkMode ? "#333" : "#e5e7eb"}`, paddingTop: "4px" }} />

                    {/* Toggle switches */}
                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                        <span style={{ fontSize: "0.75rem", fontWeight: 600, color: darkMode ? "#9ca3af" : "#6b7280" }}>{language === "de" ? "Irgendwann" : "Someday"}</span>
                        <button onClick={() => { const v = !showSomeday; setShowSomeday(v); saveSetting("showSomeday", v); }} style={{ background: "none", border: "none", cursor: "pointer", padding: "2px", color: darkMode ? "#9ca3af" : "#6b7280" }}>
                            {effectiveShowSomeday ? <Eye size={16} /> : <EyeOff size={16} />}
                        </button>
                    </div>
                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                        <span style={{ fontSize: "0.75rem", fontWeight: 600, color: darkMode ? "#9ca3af" : "#6b7280" }}>{language === "de" ? "Zeitplan" : "Schedule"}</span>
                        <button onClick={() => { const v = !showTimeGrid; setShowTimeGrid(v); saveSetting("showTimeGrid", v); }} style={{ background: "none", border: "none", cursor: "pointer", padding: "2px", color: darkMode ? "#9ca3af" : "#6b7280" }}>
                            {showTimeGrid ? <Eye size={16} /> : <EyeOff size={16} />}
                        </button>
                    </div>
                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                        <span style={{ fontSize: "0.75rem", fontWeight: 600, color: darkMode ? "#9ca3af" : "#6b7280" }}>{language === "de" ? "Ganztägig" : "All-day"}</span>
                        <button onClick={() => { const v = !showAllDay; setShowAllDay(v); saveSetting("showAllDayEvents", v); }} style={{ background: "none", border: "none", cursor: "pointer", padding: "2px", color: darkMode ? "#9ca3af" : "#6b7280" }}>
                            {effectiveShowAllDay ? <Eye size={16} /> : <EyeOff size={16} />}
                        </button>
                    </div>
                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                        <span style={{ fontSize: "0.75rem", fontWeight: 600, color: darkMode ? "#9ca3af" : "#6b7280" }}>{language === "de" ? "Checkboxen" : "Checkboxes"}</span>
                        <button onClick={() => { const v = !profile.showTaskCheckboxes; setProfile({ ...profile, showTaskCheckboxes: v }); saveSetting("showTaskCheckboxes", v); }} style={{ background: "none", border: "none", cursor: "pointer", padding: "2px", color: darkMode ? "#9ca3af" : "#6b7280" }}>
                            {profile.showTaskCheckboxes ? <Eye size={16} /> : <EyeOff size={16} />}
                        </button>
                    </div>
                    <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
                        <span style={{ fontSize: "0.75rem", fontWeight: 600, color: darkMode ? "#9ca3af" : "#6b7280" }}>{language === "de" ? "Projekt-Icons" : "Project Icons"}</span>
                        <button onClick={() => { const v = !profile.showProjectIcons; setProfile({ ...profile, showProjectIcons: v }); saveSetting("showProjectIcons", v); }} style={{ background: "none", border: "none", cursor: "pointer", padding: "2px", color: darkMode ? "#9ca3af" : "#6b7280" }}>
                            {profile.showProjectIcons ? <Eye size={16} /> : <EyeOff size={16} />}
                        </button>
                    </div>

                    {/* Start on */}
                    <div style={{ display: "flex", flexDirection: "column", gap: "6px" }}>
                        <span style={{ fontSize: "0.7rem", fontWeight: 600, color: darkMode ? "#9ca3af" : "#6b7280" }}>{language === "de" ? "Starten mit" : "Start on"}</span>
                        <div style={{ display: "flex", gap: "4px" }}>
                            <button onClick={() => { setProfile({ ...profile, startDayOffset: 0 }); saveSetting("startDayOffset", 0); const d = new Date(); d.setHours(0, 0, 0, 0); setCurrentWeekStart(d); }}
                                style={{ padding: "4px 10px", fontSize: "0.75rem", borderRadius: "6px", border: "none", cursor: "pointer", fontWeight: (profile.startDayOffset || 0) === 0 ? 700 : 400, background: (profile.startDayOffset || 0) === 0 ? (darkMode ? "#374151" : "#333") : (darkMode ? "#1f2937" : "#e5e7eb"), color: (profile.startDayOffset || 0) === 0 ? "#fff" : (darkMode ? "#9ca3af" : "#6b7280") }}>
                                {language === "de" ? "Heute" : "Today"}
                            </button>
                            <button onClick={() => { setProfile({ ...profile, startDayOffset: -1 }); saveSetting("startDayOffset", -1); const d = new Date(); d.setHours(0, 0, 0, 0); d.setDate(d.getDate() - 1); setCurrentWeekStart(d); }}
                                style={{ padding: "4px 10px", fontSize: "0.75rem", borderRadius: "6px", border: "none", cursor: "pointer", fontWeight: profile.startDayOffset === -1 ? 700 : 400, background: profile.startDayOffset === -1 ? (darkMode ? "#374151" : "#333") : (darkMode ? "#1f2937" : "#e5e7eb"), color: profile.startDayOffset === -1 ? "#fff" : (darkMode ? "#9ca3af" : "#6b7280") }}>
                                {language === "de" ? "Gestern" : "Yesterday"}
                            </button>
                        </div>
                    </div>

                    {/* Display mode */}
                    <div style={{ display: "flex", flexDirection: "column", gap: "6px" }}>
                        <span style={{ fontSize: "0.7rem", fontWeight: 600, color: darkMode ? "#9ca3af" : "#6b7280" }}>{language === "de" ? "Anzeige" : "Display"}</span>
                        <div style={{ display: "flex", gap: "4px" }}>
                            <button onClick={() => setDarkMode(false)}
                                style={{ padding: "4px 10px", fontSize: "0.75rem", borderRadius: "6px", border: "none", cursor: "pointer", display: "flex", alignItems: "center", gap: "4px", fontWeight: !darkMode ? 700 : 400, background: !darkMode ? "#333" : (darkMode ? "#1f2937" : "#e5e7eb"), color: !darkMode ? "#fff" : (darkMode ? "#9ca3af" : "#6b7280") }}>
                                <Sun size={12} /> {language === "de" ? "Hell" : "Light"}
                            </button>
                            <button onClick={() => setDarkMode(true)}
                                style={{ padding: "4px 10px", fontSize: "0.75rem", borderRadius: "6px", border: "none", cursor: "pointer", display: "flex", alignItems: "center", gap: "4px", fontWeight: darkMode ? 700 : 400, background: darkMode ? "#374151" : "#e5e7eb", color: darkMode ? "#fff" : "#6b7280" }}>
                                <Moon size={12} /> {language === "de" ? "Dunkel" : "Dark"}
                            </button>
                        </div>
                    </div>

                    {/* Separator */}
                    <div style={{ borderTop: `1px solid ${darkMode ? "#333" : "#e5e7eb"}`, paddingTop: "4px" }} />

                    {/* Undo / Redo / Refresh */}
                    <div style={{ display: "flex", justifyContent: "center", gap: "8px", padding: "2px 0" }}>
                        <button onClick={handleUndo} disabled={undoCount === 0} style={{ ...qsBtnStyle(darkMode), opacity: undoCount === 0 ? 0.3 : 1 }} title="Undo"><Undo2 size={15} /></button>
                        <button onClick={handleRedo} disabled={redoCount === 0} style={{ ...qsBtnStyle(darkMode), opacity: redoCount === 0 ? 0.3 : 1 }} title="Redo"><Redo2 size={15} /></button>
                        <button onClick={() => { fetchCalendarEvents(true); fetchTasks(); setShowQuickSettings(false); }} style={qsBtnStyle(darkMode)} title="Refresh"><RefreshCcw size={15} /></button>
                    </div>

                    {/* Spacer */}
                    <div style={{ flex: 1 }} />

                    {/* Close button at bottom */}
                    <button
                        onClick={() => setShowQuickSettings(false)}
                        style={{ display: "flex", alignItems: "center", gap: "6px", background: "none", border: "none", cursor: "pointer", fontSize: "0.75rem", color: darkMode ? "#6b7280" : "#9ca3af", padding: "4px 0" }}
                    >
                        <PanelLeftClose size={16} />
                        {language === "de" ? "Ausblenden" : "Hide"}
                    </button>
                </div>
                </>
            )}

            {/* Projects Sidebar */}
            {showProjectsSidebar && (
                <ProjectsSidebar
                    darkMode={darkMode}
                    language={language}
                    projects={projects}
                    onProjectsChanged={fetchProjects}
                    onClose={() => setShowProjectsSidebar(false)}
                />
            )}

            {/* Quick Settings toggle button is now in the desktop header toolbar */}

            {/* View Transitions Style Block */}
            <style
                dangerouslySetInnerHTML={{
                    __html: (() => {
                        // Generate View Transition styles for a wide range of days around current view
                        // to ensure both entering and exiting days have the 500ms duration.
                        const center = currentWeekStart;
                        const validNames = [];
                        // Cover +/- 2 weeks just to be safe (exiting days need styles too)
                        for (let i = -14; i <= 21; i++) {
                            const d = new Date(center);
                            d.setDate(d.getDate() + i);
                            validNames.push(
                                `day-${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`,
                            );
                        }

                        return validNames
                            .map(
                                (name) => `
                        ::view-transition-group(${name}) {
                            animation-duration: 0.5s;
                            animation-timing-function: ease-in-out;
                        }
                    `,
                            )
                            .join("");
                    })(),
                }}
            />

            {/* Mobile Header */}
            {isMobile && (
                <header className="mobile-header" style={{ background: darkMode ? "#111827" : "#ffffff", borderBottom: `1px solid ${darkMode ? "#374151" : "#e5e7eb"}` }}>
                    {/* Left: Quick settings */}
                    <button className="mobile-header-btn" onClick={() => setShowQuickSettings(true)} title="Quick Settings" style={{ color: darkMode ? "#e5e7eb" : "#6b7280" }}>
                        <PanelLeftOpen size={22} />
                    </button>

                    {/* Center: Date display (tap to jump to date) */}
                    <button className="mobile-header-date" onClick={() => setShowDatePicker(true)} style={{
                        fontFamily: profile.cwFontFamily || "Inter",
                        fontSize: scaleRem(profile.cwFontSize || "0.9rem"),
                        fontWeight: Number(profile.cwFontWeight || "700"),
                        color: adjustColorForDarkMode(profile.cwColor || (darkMode ? "#e5e7eb" : "#333333"), darkMode),
                    }}>
                        {(isLoading || isSyncing || syncStatus === "syncing") && (
                            <div className="weekly-spinner" title="Syncing..." style={{ width: 14, height: 14 }}></div>
                        )}
                        {syncError && <AlertCircle size={14} className="text-red-500" />}
                        <span>
                            {profile.headerDisplay === "none" ? "" :
                            profile.headerDisplay === "date" ? (() => {
                                const today = new Date();
                                const isTodayInWeek = getVisibleDays().some(d =>
                                    d.getDate() === today.getDate() &&
                                    d.getMonth() === today.getMonth() &&
                                    d.getFullYear() === today.getFullYear()
                                );
                                const refDate = isTodayInWeek ? today : getCWReferenceDate(getVisibleDays());
                                return refDate.toLocaleDateString(language, { day: '2-digit', month: '2-digit', year: 'numeric' });
                            })() :
                            profile.headerDisplay === "month_year" ?
                                getCWReferenceDate(getVisibleDays()).toLocaleDateString(language, { month: 'long', year: 'numeric' }) :
                            profile.headerDisplay === "custom" ?
                                formatCustomHeader(profile.headerCustomFormat || "KW WW | YYYY", getVisibleDays(), language, t) :
                            profile.headerDisplay === "month" ?
                                getCWReferenceDate(getVisibleDays()).toLocaleDateString(language, { month: "long" }) :
                                `KW ${getWeekNumber(getCWReferenceDate(getVisibleDays())).toString().padStart(2, "0")} | ${getCWReferenceDate(getVisibleDays()).getFullYear()}`
                            }
                        </span>
                        <ChevronDown size={12} style={{ opacity: 0.5 }} />
                    </button>

                    {/* Right: Settings menu */}
                    <button className="mobile-header-btn" onClick={() => setShowSettings(true)} title="Settings" style={{ color: darkMode ? "#e5e7eb" : "#6b7280" }}>
                        <Menu size={22} />
                    </button>
                </header>
            )}

            {/* Desktop Header: Left, Center, Right */}
            <header className="group relative flex items-center justify-between w-full px-4 py-2 border-b border-gray-200 bg-white dark:bg-gray-900 dark:border-gray-700 dark:text-white transition-colors duration-200" style={isMobile ? { display: "none" } : {}}>
                {/* LEFT SECTION: View Switcher, Days, Hours, Slot Duration */}
                <div className="weekly-header-controls flex items-center gap-4 transition-opacity duration-300 opacity-0 group-hover:opacity-100" style={{ zIndex: 1 }}>
                    {/* Quick Settings toggle */}
                    {!showQuickSettings && (
                        <button
                            onClick={() => setShowQuickSettings(true)}
                            className="p-1.5 rounded text-gray-400 hover:text-gray-700 hover:bg-gray-100 dark:hover:text-white dark:hover:bg-gray-700 transition-colors"
                            title={language === "de" ? "Schnelleinstellungen" : "Quick Settings"}
                        >
                            <PanelLeftOpen size={16} />
                        </button>
                    )}
                    {/* View Switcher */}
                    <div className="flex items-center gap-0.5 bg-gray-100 dark:bg-gray-800 rounded p-0.5" title={t.viewStyle}>
                        <button
                            onClick={() => { setViewStyle("simple"); setShowTimeGrid(true); saveSetting("viewStyle", "simple"); saveSetting("showTimeGrid", true); }}
                            className={`p-1.5 rounded transition-colors ${viewStyle === "simple" ? "bg-white shadow-sm text-black dark:bg-gray-700 dark:text-white" : "text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700"}`}
                            title={t.simpleView}
                        >
                            <Calendar size={16} />
                        </button>
                        <button
                            onClick={() => { setViewStyle("calendar"); setShowTimeGrid(true); saveSetting("viewStyle", "calendar"); saveSetting("showTimeGrid", true); }}
                            className={`p-1.5 rounded transition-colors ${viewStyle === "calendar" ? "bg-white shadow-sm text-black dark:bg-gray-700 dark:text-white" : "text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700"}`}
                            title={t.calendarView}
                        >
                            <CalendarDays size={16} />
                        </button>
                        <button
                            onClick={() => { setViewStyle("list"); setShowTimeGrid(false); saveSetting("viewStyle", "list"); saveSetting("showTimeGrid", false); }}
                            className={`p-1.5 rounded transition-colors ${viewStyle === "list" ? "bg-white shadow-sm text-black dark:bg-gray-700 dark:text-white" : "text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700"}`}
                            title={t.listView}
                        >
                            <ListTodo size={16} />
                        </button>
                        <button
                            onClick={() => { setViewStyle("kanban"); saveSetting("viewStyle", "kanban"); }}
                            className={`p-1.5 rounded transition-colors ${viewStyle === "kanban" ? "bg-white shadow-sm text-black dark:bg-gray-700 dark:text-white" : "text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700"}`}
                            title={t.kanbanView}
                        >
                            <Kanban size={16} />
                        </button>
                    </div>

                    {/* Days to Show — desktop only (available in sidebar on tablet) */}
                    <div
                        className="header-desktop-only items-center gap-1 bg-gray-100 dark:bg-gray-800 rounded p-1"
                        title="Days to show"
                    >
                        <LayoutGrid size={16} className="text-gray-500 mr-1" />
                        {[1, 2, 3, 5, 7].map((num) => (
                            <button
                                key={num}
                                onClick={() => {
                                    setViewDays(num);
                                    savedViewDaysRef.current = num;
                                    saveSetting("viewDays", num);
                                }}
                                className={`px-2 py-0.5 text-xs rounded transition-colors ${viewDays === num ? "bg-white shadow-sm font-bold text-black" : "text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700"}`}
                            >
                                {num}
                            </button>
                        ))}
                    </div>

                    {/* Time Range — desktop only (available in sidebar on tablet) */}
                    {showTimeGrid && (
                        <div
                            className="header-desktop-only items-center gap-2 text-xs text-gray-500 bg-gray-100 dark:bg-gray-800 rounded p-1 px-2"
                            title="Visible Hours"
                        >
                            <Clock size={16} className="text-gray-500" />
                            <div className="flex items-center gap-1">
                                <input
                                    type="number"
                                    min="0"
                                    max={effectiveEndHour - 1}
                                    value={effectiveStartHour}
                                    onChange={(e) => {
                                        const val = Math.max(
                                            0,
                                            Math.min(parseInt(e.target.value) || 0, effectiveEndHour - 1),
                                        );
                                        setStartHour(val);
                                        saveSetting("startHour", val);
                                    }}
                                    className="w-10 p-0.5 border border-gray-200 dark:border-gray-700 rounded text-center bg-transparent focus:outline-none focus:border-teal-500"
                                />
                                <span>-</span>
                                <input
                                    type="number"
                                    min={effectiveStartHour + 1}
                                    max="24"
                                    value={effectiveEndHour}
                                    onChange={(e) => {
                                        const val = Math.max(
                                            effectiveStartHour + 1,
                                            Math.min(parseInt(e.target.value) || 24, 24),
                                        );
                                        setEndHour(val);
                                        saveSetting("endHour", val);
                                    }}
                                    className="w-10 p-0.5 border border-gray-200 dark:border-gray-700 rounded text-center bg-transparent focus:outline-none focus:border-teal-500"
                                />
                            </div>
                        </div>
                    )}

                    {/* Slot Duration — desktop only (available in sidebar on tablet) */}
                    {showTimeGrid && (
                        <div
                            className="header-desktop-only items-center gap-1 bg-gray-100 dark:bg-gray-800 rounded p-1"
                            title="Slot Duration"
                        >
                            <Clock size={16} className="text-gray-500 mr-1" />
                            {[15, 30, 60].map((duration) => (
                                <button
                                    key={duration}
                                    onClick={() => {
                                        setCellDuration(duration as CellDuration);
                                        saveSetting("cellDuration", duration);
                                    }}
                                    className={`px-2 py-0.5 text-xs rounded transition-colors ${effectiveCellDuration === duration ? "bg-white shadow-sm font-bold text-black" : "text-gray-500 hover:text-gray-900 hover:bg-gray-200 dark:hover:bg-gray-700"}`}
                                >
                                    {duration}m
                                </button>
                            ))}
                        </div>
                    )}

                </div>

                {/* CENTER SECTION: Week/Year, Goal, Focus Mode - Reveal on Hover */}
                <div className="flex items-center justify-center gap-6 absolute left-1/2 transform -translate-x-1/2 group z-10 opacity-100" style={{ pointerEvents: "auto" }}>
                    {/* Week & Year */}
                    <div className="whitespace-nowrap flex items-center gap-2">
                        {/* Clickable Week & Year */}
                        <div
                            ref={datePickerBtnRef}
                            className="relative flex items-center gap-2 cursor-pointer hover:opacity-80"
                            onClick={() => setShowDatePicker(!showDatePicker)}
                            title="Jump to date"
                        >
                            {showDatePicker && !isMobile && (
                                <SimpleDatePicker
                                    selected={currentWeekStart}
                                    onSelect={(date) => {
                                        setCurrentWeekStart(getStartOfWeek(date));
                                        setShowDatePicker(false);
                                    }}
                                    onClose={() => setShowDatePicker(false)}
                                    language={language}
                                    anchorRef={datePickerBtnRef}
                                />
                            )}
                            <span style={{
                                fontFamily: profile.cwFontFamily || "Inter",
                                fontSize: profile.cwFontSize || "1.125rem",
                                fontWeight: Number(profile.cwFontWeight || "700"),
                                color: adjustColorForDarkMode(profile.cwColor || "#333333", darkMode),
                                filter: "brightness(var(--weekly-header-brightness, 1))"
                            }}>
                                {
                                    profile.headerDisplay === "none"
                                        ? ""
                                        : profile.headerDisplay === "month"
                                            ? getCWReferenceDate(getVisibleDays()).toLocaleDateString(language, { month: "long" })
                                            : profile.headerDisplay === "month_year"
                                                ? getCWReferenceDate(getVisibleDays()).toLocaleDateString(language, { month: "long", year: "numeric" })
                                                : profile.headerDisplay === "date"
                                                    ? (() => {
                                                        const today = new Date();
                                                        const isTodayInWeek = getVisibleDays().some(d =>
                                                            d.getDate() === today.getDate() &&
                                                            d.getMonth() === today.getMonth() &&
                                                            d.getFullYear() === today.getFullYear()
                                                        );
                                                        const refDate = isTodayInWeek ? today : getCWReferenceDate(getVisibleDays());
                                                        return refDate.toLocaleDateString(language, { day: '2-digit', month: '2-digit', year: 'numeric' });
                                                    })()
                                                    : profile.headerDisplay === "custom"
                                                        ? formatCustomHeader(profile.headerCustomFormat || "KW WW | YYYY", getVisibleDays(), language, t)
                                                        : `KW ${getWeekNumber(getCWReferenceDate(getVisibleDays())).toString().padStart(2, "0")}`
                                }
                            </span>
                            {profile.headerDisplay !== "none" && (profile.headerDisplay === "kw" || profile.headerDisplay === "month" || !profile.headerDisplay) && (
                                <>
                                    <span className="text-gray-400">|</span>
                                    <span
                                        style={{
                                            fontFamily: profile.yearFontFamily || "Inter",
                                            fontSize: profile.yearFontSize || "1.125rem",
                                            fontWeight: Number(profile.yearFontWeight || "700"),
                                            color: adjustColorForDarkMode(profile.yearColor || "#333333", darkMode),
                                            filter: "brightness(var(--weekly-header-brightness, 1))"
                                        }}
                                    >
                                        {getCWReferenceDate(getVisibleDays()).getFullYear()}
                                    </span>
                                </>
                            )}
                        </div>
                    </div>

                    {/* Goal — hidden on tablet to save space */}
                    <div className="header-desktop-only items-center text-sm">
                        {syncError ? (
                            <div className="flex items-center gap-1 text-red-500 mr-2" title={syncError}>
                                <AlertCircle size={14} />
                                <span className="text-xs">{syncError}</span>
                            </div>
                        ) : (isLoading || isSyncing || syncStatus === "syncing") ? (
                            <div className="weekly-spinner mr-2" title="Syncing..."></div>
                        ) : (
                            <button
                                onClick={() => { fetchCalendarEvents(true); fetchTasks(); }}
                                className="p-1 rounded-full hover:bg-gray-100 dark:hover:bg-gray-800 transition-all text-gray-400 hover:text-gray-600 opacity-0 group-hover:opacity-100 mr-1"
                                title="Refresh Calendar & Tasks"
                            >
                                <RefreshCcw size={14} />
                            </button>
                        )}
                        {isEditingGoal ? (
                            <input
                                type="text"
                                value={goal}
                                onChange={(e) => setGoal(e.target.value)}
                                onBlur={() => {
                                    saveGoal(goal);
                                    setIsEditingGoal(false);
                                }}
                                onKeyDown={(e) => e.key === "Enter" && e.currentTarget.blur()}
                                autoFocus
                                className="border-b border-gray-300 focus:outline-none focus:border-black px-1 text-center font-medium italic"
                                style={{
                                    width: `${Math.max(10, goal.length)}ch`,
                                    fontFamily: profile.goalFontFamily
                                        ? `"${profile.goalFontFamily}", sans-serif`
                                        : undefined,
                                    fontSize: profile.goalFontSize || undefined,
                                    fontWeight: profile.goalFontWeight || undefined,
                                }}
                            />
                        ) : (
                            <span
                                onClick={() => !showNextTask && setIsEditingGoal(true)}
                                className={`cursor-pointer font-medium italic transition-colors ${showNextTask ? "cursor-default text-gray-600 dark:text-white hover:text-black dark:hover:text-gray-100" : "text-gray-600 dark:text-yellow-400 hover:text-black dark:hover:text-yellow-300"}`}
                                title={showNextTask ? "Next task" : "Edit goal"}
                                style={{
                                    fontFamily: profile.goalFontFamily
                                        ? `"${profile.goalFontFamily}", sans-serif`
                                        : undefined,
                                    fontSize: profile.goalFontSize || undefined,
                                    fontWeight: profile.goalFontWeight || undefined,
                                    color: adjustColorForDarkMode((profile.goalFallbackType === "quote" ? profile.taskColor : undefined) || "#333333", darkMode),
                                    filter: "brightness(var(--weekly-goal-brightness, 1))",
                                    maxWidth: "800px",
                                    textAlign: "center" as const,
                                    overflow: "hidden",
                                    display: "-webkit-box",
                                    WebkitLineClamp: 2,
                                    WebkitBoxOrient: "vertical" as const,
                                }}
                            >
                                {showNextTask
                                    ? (() => {
                                        const today = new Date();
                                        today.setHours(0, 0, 0, 0);
                                        const todayStr = formatDateToISO(today);
                                        const todayDay = today.getDay();
                                        const todaysTasks = tasks
                                            .filter((t) => {
                                                if (t.completed || t.somedayListId) return false;
                                                if (t.scheduledDate)
                                                    return (
                                                        formatDateToISO(new Date(t.scheduledDate)) ===
                                                        todayStr
                                                    );
                                                if (t.dayOfWeek === todayDay && !t.scheduledDate)
                                                    return true;
                                                return false;
                                            })
                                            .sort((a, b) => {
                                                if (a.startTime && b.startTime)
                                                    return a.startTime.localeCompare(b.startTime);
                                                if (a.startTime) return -1;
                                                if (b.startTime) return 1;
                                                return a.order - b.order;
                                            });
                                        const nextTask = todaysTasks[0];
                                        const nextTaskText = nextTask ? `Do this now: ${nextTask.title}` : (goal || (profile.goalFallbackType === "quote" ? motivationalQuote : goal));
                                        return nextTaskText;
                                    })()
                                    : (goal || (profile.goalFallbackType === "quote" ? motivationalQuote : goal))}
                            </span>
                        )}
                    </div>
                </div>

                {/* RIGHT SECTION: Navigation & Tools */}
                <div className="weekly-header-controls flex-shrink-0 flex items-center gap-1.5 sm:gap-2 transition-opacity duration-300 opacity-0 group-hover:opacity-100" style={{ zIndex: 10 }}>
                    {/* Secondary actions — hidden on tablet, visible on desktop */}
                    <div className="header-desktop-only flex items-center gap-1.5">
                        <button onClick={handleUndo} disabled={undoCount === 0} className="weekly-btn-icon disabled:opacity-30 disabled:cursor-default" title="Undo (Ctrl+Z)">
                            <Undo2 size={17} className="text-gray-600 hover:text-black transition-colors" />
                        </button>
                        <button onClick={handleRedo} disabled={redoCount === 0} className="weekly-btn-icon disabled:opacity-30 disabled:cursor-default" title="Redo (Ctrl+Y)">
                            <Redo2 size={17} className="text-gray-600 hover:text-black transition-colors" />
                        </button>
                        <button onClick={() => { const now = new Date(); setCalendarEventModal({ isOpen: true, event: undefined, initialDate: now, initialStartTime: `${String(now.getHours()).padStart(2, "0")}:00` }); }} className="weekly-btn-icon" title="Add Calendar Event">
                            <Plus size={17} className="text-gray-600 hover:text-black transition-colors" />
                        </button>
                        <button onClick={() => { const newVal = !showNextTask; setShowNextTask(newVal); saveSetting("showNextTask", newVal); }} className={`weekly-btn-icon ${showNextTask ? "active" : ""}`} title={showNextTask ? "Showing Next Task" : "Showing Goal"}>
                            {showNextTask ? <Play size={17} className="text-teal-600" /> : <Target size={17} className="text-gray-400" />}
                        </button>
                        <button onClick={() => setShowFocusMode(true)} className="weekly-btn-icon" title="Enter Focus Mode">
                            <Zap size={17} className="text-gray-600 hover:text-yellow-500 transition-colors" />
                        </button>
                        <button onClick={() => setDarkMode(!darkMode)} className="weekly-btn-icon" title={darkMode ? "Light Mode" : "Dark Mode"}>
                            {darkMode ? <Sun size={17} className="text-yellow-500" /> : <Moon size={17} className="text-gray-500" />}
                        </button>
                    </div>

                    {/* Navigation Controls — always visible */}
                    <div className="flex items-center bg-gray-100 dark:bg-gray-800 rounded-lg p-0.5">
                        <button className="p-1 hover:bg-white dark:hover:bg-gray-700 hover:shadow-sm rounded text-gray-500 hover:text-black dark:hover:text-white transition-all" onClick={goToPrevWeek} title="Previous Week"><ChevronsLeft size={15} /></button>
                        <button className="p-1 hover:bg-white dark:hover:bg-gray-700 hover:shadow-sm rounded text-gray-500 hover:text-black dark:hover:text-white transition-all" onClick={goToPrevDay} title="Previous Day"><ChevronLeft size={15} /></button>
                        <button className="px-2 py-1 text-xs font-bold text-gray-600 dark:text-gray-400 hover:text-black dark:hover:text-white hover:bg-white dark:hover:bg-gray-700 hover:shadow-sm rounded transition-all" onClick={goToToday} title="Go to Today">Today</button>
                        <button className="p-1 hover:bg-white dark:hover:bg-gray-700 hover:shadow-sm rounded text-gray-500 hover:text-black dark:hover:text-white transition-all" onClick={goToNextDay} title="Next Day"><ChevronLeft size={15} className="rotate-180" /></button>
                        <button className="p-1 hover:bg-white dark:hover:bg-gray-700 hover:shadow-sm rounded text-gray-500 hover:text-black dark:hover:text-white transition-all" onClick={goToNextWeek} title="Next Week"><ChevronsLeft size={15} className="rotate-180" /></button>
                    </div>

                    {/* Always visible: Search, Settings, User */}
                    <button className="weekly-btn-icon" onClick={() => setIsSearchOpen(true)} title="Search"><Search size={17} /></button>
                    <button className="weekly-btn-icon" onClick={() => setShowSettings(true)} title="Settings"><Settings size={17} /></button>

                    {/* Overflow menu — visible on tablet, hidden on desktop */}
                    <div className="header-tablet-only" style={{ position: "relative" }}>
                        <button className="weekly-btn-icon" onClick={() => setShowHeaderMore(!showHeaderMore)} title="More">
                            <MoreVertical size={17} />
                        </button>
                        {showHeaderMore && (
                            <>
                                <div style={{ position: "fixed", inset: 0, zIndex: 99 }} onClick={() => setShowHeaderMore(false)} />
                                <div className="header-overflow-menu">
                                    <button onClick={() => { handleUndo(); setShowHeaderMore(false); }} disabled={undoCount === 0}><Undo2 size={16} /> <span>Undo</span></button>
                                    <button onClick={() => { handleRedo(); setShowHeaderMore(false); }} disabled={redoCount === 0}><Redo2 size={16} /> <span>Redo</span></button>
                                    <button onClick={() => { const now = new Date(); setCalendarEventModal({ isOpen: true, event: undefined, initialDate: now, initialStartTime: `${String(now.getHours()).padStart(2, "0")}:00` }); setShowHeaderMore(false); }}><Plus size={16} /> <span>{language === "de" ? "Termin erstellen" : "Add Event"}</span></button>
                                    <button onClick={() => { setIsRecurringTasksOpen(true); setShowHeaderMore(false); }}><Repeat size={16} /> <span>{language === "de" ? "Wiederkehrend" : "Recurring"}</span></button>
                                    <button onClick={() => { const nv = !showNextTask; setShowNextTask(nv); saveSetting("showNextTask", nv); setShowHeaderMore(false); }}>{showNextTask ? <Play size={16} /> : <Target size={16} />} <span>{showNextTask ? "Next Task" : "Goal"}</span></button>
                                    <button onClick={() => { setShowFocusMode(true); setShowHeaderMore(false); }}><Zap size={16} /> <span>{language === "de" ? "Fokus" : "Focus"}</span></button>
                                    <button onClick={() => { setDarkMode(!darkMode); setShowHeaderMore(false); }}>{darkMode ? <Sun size={16} /> : <Moon size={16} />} <span>{darkMode ? "Light" : "Dark"}</span></button>
                                    <button onClick={() => { setShowProjectsSidebar(true); setShowHeaderMore(false); }}><FolderPlus size={16} /> <span>{language === "de" ? "Neues Projekt" : "New Project"}</span></button>
                                    <div style={{ borderTop: "1px solid var(--border-color, #e5e7eb)", margin: "2px 0" }} />
                                    <div style={{ padding: "6px 12px", display: "flex", alignItems: "center", gap: "6px", flexWrap: "wrap" }}>
                                        <span style={{ fontSize: "12px", color: "#888", marginRight: "4px" }}>{language === "de" ? "Tage" : "Days"}:</span>
                                        {[1, 2, 3, 5, 7].map((num) => (
                                            <button
                                                key={num}
                                                onClick={() => { setViewDays(num); savedViewDaysRef.current = num; saveSetting("viewDays", num); }}
                                                style={{ padding: "2px 8px", fontSize: "12px", borderRadius: "4px", border: "none", cursor: "pointer", fontWeight: viewDays === num ? 700 : 400, background: viewDays === num ? "var(--bg-secondary, #e5e7eb)" : "transparent", color: "inherit" }}
                                            >
                                                {num}
                                            </button>
                                        ))}
                                    </div>
                                    {showTimeGrid && (
                                        <div style={{ padding: "6px 12px", display: "flex", alignItems: "center", gap: "6px" }}>
                                            <span style={{ fontSize: "12px", color: "#888", marginRight: "4px" }}>{language === "de" ? "Slot" : "Slot"}:</span>
                                            {[15, 30, 60].map((duration) => (
                                                <button
                                                    key={duration}
                                                    onClick={() => { setCellDuration(duration as CellDuration); saveSetting("cellDuration", duration); }}
                                                    style={{ padding: "2px 8px", fontSize: "12px", borderRadius: "4px", border: "none", cursor: "pointer", fontWeight: effectiveCellDuration === duration ? 700 : 400, background: effectiveCellDuration === duration ? "var(--bg-secondary, #e5e7eb)" : "transparent", color: "inherit" }}
                                                >
                                                    {duration}m
                                                </button>
                                            ))}
                                        </div>
                                    )}
                                </div>
                            </>
                        )}
                    </div>

                    {/* Desktop only: Recurring Tasks + New Project */}
                    <button className="weekly-btn-icon header-desktop-only" onClick={() => setIsRecurringTasksOpen(true)} title="Recurring Tasks"><Repeat size={17} /></button>
                    <button className="weekly-btn-icon header-desktop-only" onClick={() => setShowProjectsSidebar(true)} title="New Project"><FolderPlus size={17} /></button>

                    {/* User Menu */}
                    <UserMenu
                        userEmail={session?.user?.email}
                        onOpenSettings={() => setShowSettings(true)}
                        language={profile.language}
                        trigger={<button className="weekly-btn-icon" title="User Menu"><User size={17} /></button>}
                    />
                </div>
            </header>

            {/* All-Day Events Section (above position) — hidden in kanban */}
            {viewStyle !== "kanban" && effectiveAllDayPosition === "above" && allDaySection}

            {/* Kanban Board View */}
            {viewStyle === "kanban" && (() => {
                // Combine all tasks (weekly + someday) for kanban
                const allSomedayTasks = somedayLists.flatMap(l => l.tasks);
                const allKanbanTasks = [...tasks, ...allSomedayTasks];

                // Build week options for filter
                const weekOptions = (() => {
                    const weeks = new Map<string, string>();
                    allKanbanTasks.forEach(t => {
                        if (t.scheduledDate) {
                            const d = new Date(t.scheduledDate);
                            const weekStart = getStartOfWeek(d);
                            const key = weekStart.toISOString().split("T")[0];
                            if (!weeks.has(key)) {
                                const weekEnd = new Date(weekStart);
                                weekEnd.setDate(weekEnd.getDate() + 6);
                                weeks.set(key, `${weekStart.toLocaleDateString(language, { month: "short", day: "numeric" })} - ${weekEnd.toLocaleDateString(language, { month: "short", day: "numeric" })}`);
                            }
                        }
                    });
                    return Array.from(weeks.entries()).sort((a, b) => a[0].localeCompare(b[0]));
                })();

                // Apply filters
                const filteredKanbanTasks = allKanbanTasks.filter(t => {
                    if (!effectiveShowCompletedTasks && t.completed) return false;
                    if (kanbanSearch && !t.title.toLowerCase().includes(kanbanSearch.toLowerCase())) return false;
                    if (kanbanFilterProject && t.projectId !== kanbanFilterProject) return false;
                    if (kanbanFilterList) {
                        if (kanbanFilterList === "__none__") {
                            if (t.somedayListId) return false;
                        } else {
                            if (t.somedayListId !== kanbanFilterList) return false;
                        }
                    }
                    if (kanbanFilterWeek && t.scheduledDate) {
                        const d = new Date(t.scheduledDate);
                        const weekStart = getStartOfWeek(d);
                        if (weekStart.toISOString().split("T")[0] !== kanbanFilterWeek) return false;
                    }
                    return true;
                });

                const renderKanbanCard = (task: Task) => {
                    const subTasks = task.subTasks || [];
                    const subCompleted = subTasks.filter(s => s.completed).length;
                    const subTotal = subTasks.length;
                    const subPct = subTotal > 0 ? (subCompleted / subTotal) * 100 : 0;
                    const allSubDone = subTotal > 0 && subCompleted === subTotal;
                    const isExpanded = kanbanExpandedCards.has(task.id);

                    return (
                    <div
                        key={task.id}
                        className={`kanban-card ${task.completed ? "kanban-card-done" : ""}`}
                        draggable
                        onDragStart={(e) => {
                            e.dataTransfer.setData("text/kanban-task", task.id);
                            e.dataTransfer.setData("text/plain", task.id);
                            e.dataTransfer.effectAllowed = "move";
                            setDraggedTask(task);
                        }}
                        onDragEnd={() => setDraggedTask(null)}
                        onClick={(e) => {
                            const target = e.target as HTMLElement;
                            if (target.tagName === "INPUT" || target.contentEditable === "true" || target.closest("button") || target.closest(".kanban-card-subtask-list")) return;
                            setKanbanDetailTask(task);
                        }}
                        style={{ cursor: "pointer" }}
                    >
                        <div className="kanban-card-header">
                            {effectiveShowTaskCheckboxes && (
                                <input
                                    type="checkbox"
                                    checked={task.completed}
                                    onChange={() => toggleTask(task.id)}
                                    className="kanban-card-checkbox"
                                />
                            )}
                            <span
                                className="kanban-card-title"
                                contentEditable
                                suppressContentEditableWarning
                                onBlur={(e) => {
                                    const text = (e.target as HTMLElement).textContent || "";
                                    if (text !== task.title) updateTask(task.id, text);
                                }}
                                onKeyDown={(e) => {
                                    if (e.key === "Enter") { e.preventDefault(); (e.target as HTMLElement).blur(); }
                                }}
                            >
                                {task.title}
                            </span>
                        </div>
                        {subTotal > 0 && (
                            <div className="kanban-card-subtask-toggle" onClick={(e) => e.stopPropagation()}>
                                <button
                                    className="kanban-card-subtask-btn"
                                    onClick={() => {
                                        setKanbanExpandedCards(prev => {
                                            const next = new Set(prev);
                                            if (next.has(task.id)) next.delete(task.id);
                                            else next.add(task.id);
                                            return next;
                                        });
                                    }}
                                >
                                    <ChevronDown size={12} style={{ transform: isExpanded ? "rotate(0deg)" : "rotate(-90deg)", transition: "transform 0.2s" }} />
                                    <span className="kanban-card-subtask-bar">
                                        <span className="kanban-card-subtask-bar-fill" style={{ width: `${subPct}%`, background: allSubDone ? "#0d9488" : "var(--weekly-accent, #6366f1)" }} />
                                    </span>
                                    <span className="kanban-card-subtask-count" style={{ color: allSubDone ? "#0d9488" : undefined }}>
                                        {subCompleted}/{subTotal}
                                    </span>
                                </button>
                                {isExpanded && (
                                    <div className="kanban-card-subtask-list">
                                        {subTasks.map(sub => (
                                            <div key={sub.id} className={`kanban-card-subtask-item ${sub.completed ? "completed" : ""}`}>
                                                <input
                                                    type="checkbox"
                                                    checked={sub.completed}
                                                    onChange={() => toggleSubTask(sub.id)}
                                                    style={{ accentColor: "var(--weekly-accent, #6366f1)" }}
                                                />
                                                <span className={sub.completed ? "kanban-card-subtask-done" : ""}>{sub.title}</span>
                                            </div>
                                        ))}
                                    </div>
                                )}
                            </div>
                        )}
                        {task.markdownContent && (
                            <div className="kanban-card-has-notes" style={{ fontSize: "0.65rem", color: "#9ca3af", marginTop: "2px", display: "flex", alignItems: "center", gap: "3px" }}>
                                <FileText size={10} /> {language === "de" ? "Notizen" : "Notes"}
                            </div>
                        )}
                        {(task.scheduledDate || task.startTime) && (
                            <div className="kanban-card-date">
                                {task.scheduledDate && new Date(task.scheduledDate).toLocaleDateString(language, { weekday: "short", month: "short", day: "numeric" })}
                                {task.startTime && <span className="kanban-card-time"> {task.startTime}</span>}
                            </div>
                        )}
                        {task.project && (
                            <div className="kanban-card-project" style={{ color: task.project.color || "#888" }}>
                                <ProjectIcon icon={task.project.icon} size={12} color={task.project.color || "#888"} /> {task.project.name}
                            </div>
                        )}
                        {task.somedayListId && (() => {
                            const list = somedayLists.find(l => l.id === task.somedayListId);
                            return list ? <div className="kanban-card-list">{list.title}</div> : null;
                        })()}
                    </div>
                    );
                };

                const kanbanColumnDrop = (stageId: string | null) => ({
                    onDragOver: (e: React.DragEvent) => {
                        e.preventDefault();
                        e.dataTransfer.dropEffect = "move";
                        e.currentTarget.classList.add("kanban-column-drag-over");
                    },
                    onDragLeave: (e: React.DragEvent) => {
                        if (!e.currentTarget.contains(e.relatedTarget as Node)) {
                            e.currentTarget.classList.remove("kanban-column-drag-over");
                        }
                    },
                    onDrop: async (e: React.DragEvent) => {
                        e.preventDefault();
                        e.currentTarget.classList.remove("kanban-column-drag-over");
                        const taskId = e.dataTransfer.getData("text/kanban-task");
                        if (taskId) {
                            await updateTaskFields(taskId, { kanbanStage: stageId });
                        }
                    },
                });

                const kanbanProjectDrop = (projectId: string | null) => ({
                    onDragOver: (e: React.DragEvent) => {
                        e.preventDefault();
                        e.dataTransfer.dropEffect = "move";
                        e.currentTarget.classList.add("kanban-project-chip-drag-over");
                    },
                    onDragLeave: (e: React.DragEvent) => {
                        if (!e.currentTarget.contains(e.relatedTarget as Node)) {
                            e.currentTarget.classList.remove("kanban-project-chip-drag-over");
                        }
                    },
                    onDrop: async (e: React.DragEvent) => {
                        e.preventDefault();
                        e.currentTarget.classList.remove("kanban-project-chip-drag-over");
                        const taskId = e.dataTransfer.getData("text/kanban-task");
                        if (taskId) {
                            await updateTaskFields(taskId, { projectId });
                        }
                    },
                });

                const hasActiveFilters = kanbanSearch || kanbanFilterProject || kanbanFilterList || kanbanFilterWeek;

                return (
                    <div className="kanban-wrapper">
                        {/* Unified toolbar: projects on left, filters on right */}
                        <div className="kanban-filter-bar">
                            {/* Left side: + button, project chips */}
                            <button
                                onClick={() => setShowProjectsSidebar(true)}
                                className="kanban-project-chip"
                                style={{ background: darkMode ? "#374151" : "#e5e7eb", color: darkMode ? "#9ca3af" : "#6b7280", cursor: "pointer", border: "2px dashed " + (darkMode ? "#4b5563" : "#d1d5db") }}
                                title={t.projects || "Projects"}
                            >
                                <Plus size={12} />
                            </button>
                            {projects.map(p => (
                                <div key={p.id} className="kanban-project-chip" style={{ background: (p.color || "#6366f1") + "18", color: p.color || "#6366f1" }} {...kanbanProjectDrop(p.id)}>
                                    <ProjectIcon icon={p.icon} size={12} color={p.color || "#6366f1"} />
                                    <span>{p.name}</span>
                                </div>
                            ))}
                            {projects.length > 0 && (
                                <div className="kanban-project-chip" style={{ background: darkMode ? "#1f2937" : "#f3f4f6", color: "#9ca3af" }} {...kanbanProjectDrop(null)}>
                                    <X size={12} />
                                    <span>{language === "de" ? "Kein Projekt" : "No project"}</span>
                                </div>
                            )}
                            {/* Spacer pushes filters to right */}
                            <div style={{ flex: 1 }} />
                            {/* Right side: search + filters */}
                            <div className="kanban-filter-search">
                                <Search size={14} className="kanban-filter-icon" />
                                <input
                                    type="text"
                                    value={kanbanSearch}
                                    onChange={(e) => setKanbanSearch(e.target.value)}
                                    placeholder="Search..."
                                    className="kanban-filter-input"
                                />
                                {kanbanSearch && (
                                    <button onClick={() => setKanbanSearch("")} className="kanban-filter-clear"><X size={12} /></button>
                                )}
                            </div>
                            <select
                                value={kanbanFilterProject}
                                onChange={(e) => setKanbanFilterProject(e.target.value)}
                                className="kanban-filter-select"
                            >
                                <option value="">{t.filterByProject}</option>
                                {projects.map(p => (
                                    <option key={p.id} value={p.id}>● {p.name}</option>
                                ))}
                            </select>
                            <select
                                value={kanbanFilterList}
                                onChange={(e) => setKanbanFilterList(e.target.value)}
                                className="kanban-filter-select"
                            >
                                <option value="">{t.filterByList}</option>
                                <option value="__none__">{t.weekView}</option>
                                {somedayLists.map(l => (
                                    <option key={l.id} value={l.id}>{l.title}</option>
                                ))}
                            </select>
                            <select
                                value={kanbanFilterWeek}
                                onChange={(e) => setKanbanFilterWeek(e.target.value)}
                                className="kanban-filter-select"
                            >
                                <option value="">{t.filterByWeek}</option>
                                {weekOptions.map(([key, label]) => (
                                    <option key={key} value={key}>{label}</option>
                                ))}
                            </select>
                            {hasActiveFilters && (
                                <button
                                    onClick={() => { setKanbanSearch(""); setKanbanFilterProject(""); setKanbanFilterList(""); setKanbanFilterWeek(""); }}
                                    className="kanban-filter-reset"
                                    title="Clear filters"
                                >
                                    <X size={14} />
                                </button>
                            )}
                        </div>
                        <div className="kanban-board">
                            {kanbanStages.map((stage, idx) => {
                                const stageTasks = filteredKanbanTasks.filter(t => (t.kanbanStage || null) === stage.id);
                                return (
                                    <div key={stage.id} className="kanban-column" {...kanbanColumnDrop(stage.id)}>
                                        <div className="kanban-column-header" style={{ borderBottomColor: stage.color }}>
                                            <input
                                                type="color"
                                                value={stage.color}
                                                onChange={(e) => {
                                                    const updated = kanbanStages.map((s, i) => i === idx ? { ...s, color: e.target.value } : s);
                                                    saveKanbanStages(updated);
                                                }}
                                                title={language === "de" ? "Farbe ändern" : "Change color"}
                                                style={{ width: "14px", height: "14px", border: "none", cursor: "pointer", padding: 0, borderRadius: "50%", flexShrink: 0 }}
                                            />
                                            <span
                                                className="kanban-column-title"
                                                contentEditable
                                                suppressContentEditableWarning
                                                onBlur={(e) => {
                                                    const name = (e.target as HTMLElement).textContent || stage.name;
                                                    if (name !== stage.name) {
                                                        const updated = kanbanStages.map((s, i) => i === idx ? { ...s, name } : s);
                                                        saveKanbanStages(updated);
                                                    }
                                                }}
                                                onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); (e.target as HTMLElement).blur(); } }}
                                            >
                                                {stage.name}
                                            </span>
                                            <span className="kanban-column-count">{stageTasks.length}</span>
                                            {kanbanDeleteStageId === stage.id ? (
                                                <div style={{ display: "flex", alignItems: "center", gap: "3px", flexShrink: 0 }}>
                                                    <button
                                                        onClick={async () => {
                                                            // Move all tasks in this stage back to "no phase"
                                                            const tasksInStage = filteredKanbanTasks.filter(tk => tk.kanbanStage === stage.id);
                                                            for (const tk of tasksInStage) {
                                                                await updateTaskFields(tk.id, { kanbanStage: null });
                                                            }
                                                            saveKanbanStages(kanbanStages.filter((_, i) => i !== idx));
                                                            setKanbanDeleteStageId(null);
                                                        }}
                                                        style={{ padding: "2px 6px", fontSize: "0.65rem", borderRadius: "4px", border: "none", cursor: "pointer", background: "#ef4444", color: "#fff", fontWeight: 600, whiteSpace: "nowrap" }}
                                                    >
                                                        {language === "de" ? "Ja, löschen" : "Confirm"}
                                                    </button>
                                                    <button
                                                        onClick={() => setKanbanDeleteStageId(null)}
                                                        style={{ padding: "2px", background: "none", border: "none", cursor: "pointer", color: "#9ca3af", display: "flex" }}
                                                        title={language === "de" ? "Abbrechen" : "Cancel"}
                                                    >
                                                        <X size={12} />
                                                    </button>
                                                </div>
                                            ) : (
                                                <button
                                                    onClick={() => setKanbanDeleteStageId(stage.id)}
                                                    className="kanban-column-delete"
                                                    title={language === "de" ? "Phase löschen" : "Delete stage"}
                                                >
                                                    <Trash2 size={12} />
                                                </button>
                                            )}
                                        </div>
                                        <div className="kanban-column-body">
                                            {stageTasks.map(renderKanbanCard)}
                                            {kanbanAddingStageId === stage.id ? (
                                                <div className="kanban-add-task-input">
                                                    <input
                                                        type="text"
                                                        autoFocus
                                                        placeholder={language === "de" ? "Aufgabe eingeben..." : "Enter task..."}
                                                        value={kanbanNewTaskTitle}
                                                        onChange={(e) => setKanbanNewTaskTitle(e.target.value)}
                                                        onKeyDown={(e) => {
                                                            if (e.key === "Enter" && kanbanNewTaskTitle.trim()) {
                                                                addKanbanTask(kanbanNewTaskTitle, stage.id);
                                                            } else if (e.key === "Escape") {
                                                                setKanbanAddingStageId(null);
                                                                setKanbanNewTaskTitle("");
                                                            }
                                                        }}
                                                        onBlur={() => {
                                                            if (kanbanNewTaskTitle.trim()) {
                                                                addKanbanTask(kanbanNewTaskTitle, stage.id);
                                                            } else {
                                                                setKanbanAddingStageId(null);
                                                                setKanbanNewTaskTitle("");
                                                            }
                                                        }}
                                                        style={{
                                                            width: "100%",
                                                            padding: "6px 8px",
                                                            fontSize: "0.8rem",
                                                            border: "1px solid var(--border-color, #d1d5db)",
                                                            borderRadius: "6px",
                                                            background: "var(--card-bg, #fff)",
                                                            color: "var(--text-color, #111)",
                                                            outline: "none",
                                                        }}
                                                    />
                                                </div>
                                            ) : (
                                                <button
                                                    className="kanban-add-task-btn"
                                                    onClick={() => {
                                                        setKanbanAddingStageId(stage.id);
                                                        setKanbanNewTaskTitle("");
                                                    }}
                                                    style={{
                                                        width: "100%",
                                                        padding: "6px 8px",
                                                        fontSize: "0.75rem",
                                                        color: "#9ca3af",
                                                        background: "none",
                                                        border: "1px dashed #d1d5db",
                                                        borderRadius: "6px",
                                                        cursor: "pointer",
                                                        display: "flex",
                                                        alignItems: "center",
                                                        gap: "4px",
                                                        justifyContent: "center",
                                                        marginTop: "4px",
                                                    }}
                                                >
                                                    <Plus size={12} />
                                                    {language === "de" ? "Aufgabe" : "Add task"}
                                                </button>
                                            )}
                                        </div>
                                    </div>
                                );
                            })}
                            {/* Add stage column */}
                            <div
                                className="kanban-column kanban-column-add"
                                onClick={() => {
                                    const id = `stage-${Date.now()}`;
                                    saveKanbanStages([...kanbanStages, { id, name: t.stageName, color: "#6b7280" }]);
                                }}
                            >
                                <div className="kanban-column-header" style={{ borderBottomColor: "transparent", cursor: "pointer", justifyContent: "center", color: "#9ca3af" }}>
                                    <Plus size={16} />
                                </div>
                            </div>
                            {/* Unassigned column */}
                            {(() => {
                                const unassigned = filteredKanbanTasks.filter(t => !t.kanbanStage && !t.completed);
                                if (unassigned.length === 0 && !hasActiveFilters) return null;
                                return (
                                    <div className="kanban-column kanban-column-unassigned" {...kanbanColumnDrop(null)}>
                                        <div className="kanban-column-header" style={{ borderBottomColor: "#d1d5db" }}>
                                            <span className="kanban-column-dot" style={{ background: "#d1d5db" }} />
                                            <span className="kanban-column-title">{t.noStage}</span>
                                            <span className="kanban-column-count">{unassigned.length}</span>
                                        </div>
                                        <div className="kanban-column-body">
                                            {unassigned.map(renderKanbanCard)}
                                            {kanbanAddingStageId === "__unassigned__" ? (
                                                <div className="kanban-add-task-input">
                                                    <input
                                                        type="text"
                                                        autoFocus
                                                        placeholder={language === "de" ? "Aufgabe eingeben..." : "Enter task..."}
                                                        value={kanbanNewTaskTitle}
                                                        onChange={(e) => setKanbanNewTaskTitle(e.target.value)}
                                                        onKeyDown={(e) => {
                                                            if (e.key === "Enter" && kanbanNewTaskTitle.trim()) {
                                                                addKanbanTask(kanbanNewTaskTitle, null);
                                                            } else if (e.key === "Escape") {
                                                                setKanbanAddingStageId(null);
                                                                setKanbanNewTaskTitle("");
                                                            }
                                                        }}
                                                        onBlur={() => {
                                                            if (kanbanNewTaskTitle.trim()) {
                                                                addKanbanTask(kanbanNewTaskTitle, null);
                                                            } else {
                                                                setKanbanAddingStageId(null);
                                                                setKanbanNewTaskTitle("");
                                                            }
                                                        }}
                                                        style={{
                                                            width: "100%",
                                                            padding: "6px 8px",
                                                            fontSize: "0.8rem",
                                                            border: "1px solid var(--border-color, #d1d5db)",
                                                            borderRadius: "6px",
                                                            background: "var(--card-bg, #fff)",
                                                            color: "var(--text-color, #111)",
                                                            outline: "none",
                                                        }}
                                                    />
                                                </div>
                                            ) : (
                                                <button
                                                    className="kanban-add-task-btn"
                                                    onClick={() => {
                                                        setKanbanAddingStageId("__unassigned__");
                                                        setKanbanNewTaskTitle("");
                                                    }}
                                                    style={{
                                                        width: "100%",
                                                        padding: "6px 8px",
                                                        fontSize: "0.75rem",
                                                        color: "#9ca3af",
                                                        background: "none",
                                                        border: "1px dashed #d1d5db",
                                                        borderRadius: "6px",
                                                        cursor: "pointer",
                                                        display: "flex",
                                                        alignItems: "center",
                                                        gap: "4px",
                                                        justifyContent: "center",
                                                        marginTop: "4px",
                                                    }}
                                                >
                                                    <Plus size={12} />
                                                    {language === "de" ? "Aufgabe" : "Add task"}
                                                </button>
                                            )}
                                        </div>
                                    </div>
                                );
                            })()}
                        </div>
                    </div>
                );
            })()}

            {/* Main Grid with Time Column */}
            {viewStyle !== "kanban" && <div style={{ position: "relative", flex: 1, minHeight: 0, overflow: 'hidden' }}>
            <div className="time-grid-wrapper" ref={timeGridWrapperRef} style={showTimeGrid ? {
                maxHeight: '100%',
            } : undefined}>
                {/* Time Column */}
                {showTimeGrid && (
                    <div 
                      className="time-column" 
                      ref={timeColumnRef} 
                      onScroll={handleTimeColumnScroll}
                      style={{
                        height: `${24 * (60 / effectiveCellDuration) * getSlotHeight(effectiveCellDuration) + measuredHeaderHeight}px`,
                        maxHeight: `${24 * (60 / effectiveCellDuration) * getSlotHeight(effectiveCellDuration) + measuredHeaderHeight}px`,
                        overflowY: 'auto',
                        flex: 'none',
                        alignSelf: "flex-start",
                        position: 'relative'
                      }}
                    >
                        <div className="time-column-header" style={{
                            border: 'none',
                            background: 'var(--weekly-bg)',
                            position: 'sticky',
                            top: 0,
                            zIndex: 30,
                            minHeight: `${measuredHeaderHeight}px`,
                            display: 'flex',
                            alignItems: 'center',
                            justifyContent: 'center'
                        }}>
                            {/* Side Navigation Arrows (hover overlays) - now inside header */}
                            <div className="side-nav side-nav-left">
                                <button onClick={goToPrevDay} title="Previous Day" className="side-nav-btn">
                                    <ChevronLeft size={16} />
                                </button>
                                <button onClick={goToPrevWeek} title="Previous Week" className="side-nav-btn">
                                    <ChevronsLeft size={16} />
                                </button>
                            </div>
                            {/* Invisible structural match of day header to guarantee perfect height alignment */}
                            <div
                                style={{
                                    visibility: "hidden", pointerEvents: "none",
                                    display: "flex",
                                    width: "100%",
                                    alignItems:
                                        activeDateLayout === "above" ||
                                            activeDateLayout === "below"
                                            ? (profile.dateAlignment === "left" ? "flex-start" : profile.dateAlignment === "right" ? "flex-end" : "center")
                                            : "center",
                                    justifyContent:
                                        profile.dateAlignment === "left"
                                            ? "flex-start"
                                            : profile.dateAlignment === "right"
                                                ? "flex-end"
                                                : "center",
                                    flexDirection:
                                        activeDateLayout === "above"
                                            ? "column-reverse"
                                            : activeDateLayout === "below"
                                                ? "column"
                                                : "row",
                                    gap: profile.dateAlignment === "tight" ? "2px" : (profile.dayHeaderGap || "0.35em"),
                                }}
                            >
                                {activeDateLayout === "left" && (
                                    <span className="weekly-day-date">W</span>
                                )}
                                <h3 className="weekly-day-name" style={{ marginBottom: 0 }}>
                                    X
                                </h3>
                                {(activeDateLayout === "right" ||
                                    activeDateLayout === "above" ||
                                    activeDateLayout === "below" ||
                                    activeDateLayout === undefined) && (
                                        <span className="weekly-day-date">W</span>
                                    )}
                            </div>
                        </div>
                        <div
                            className="time-column-slots"
                            style={{ 
                                flex: "none",
                                position: 'relative'
                            }}
                        >
                            {visibleSlots.map((slot, index) => {
                                const hour = getHourFromSlot(slot);
                                const minutes = slot.split(":")[1];
                                const isHourStart = minutes === "00";
                                if (!isHourStart && !effectiveShowSubHourSlots) return (
                                    <div
                                        key={slot}
                                        className="time-slot-label"
                                        style={{ height: `${getSlotHeight(effectiveCellDuration)}px` }}
                                    />
                                );
                                return (
                                    <div
                                        key={slot}
                                        className={`time-slot-label ${isHourStart ? "hour-start" : "sub-hour"}`}
                                        style={{ height: `${getSlotHeight(effectiveCellDuration)}px`, cursor: isHourStart ? 'pointer' : 'default' }}
                                        onClick={isHourStart ? () => jumpToHour(hour) : undefined}
                                        title={isHourStart ? `Jump to ${hour}:00` : undefined}
                                    >
                                        {(isHourStart || effectiveShowSubHourSlots) && (
                                            <span>{formatHour(hour, parseInt(minutes), (isHourStart ? effectiveHourLabelFormat : 'full') as "short" | "full", timeFormat)}</span>
                                        )}
                                    </div>
                                );
                            })}
                        </div>
                    </div>
                )}

                {/* Day Columns */}
                <main
                    ref={gridRef}
                    className={`weekly-days-grid cols-${viewDays}`}
                    data-slide-direction={slideDirection}
                    data-nav-type={viewDays > 1 ? "week" : "day"}
                    onScroll={handleGridScroll}
                    style={{ 
                        height: `${24 * (60 / effectiveCellDuration) * getSlotHeight(effectiveCellDuration) + getHeaderHeight(effectiveCellDuration)}px`,
                        maxHeight: `${24 * (60 / effectiveCellDuration) * getSlotHeight(effectiveCellDuration) + getHeaderHeight(effectiveCellDuration)}px`,
                        flex: 1,
                        alignSelf: "flex-start",
                        overflowY: 'auto'
                    }}
                >
                    {getVisibleDays().map((date, colIndex) => {
                        const todayMidnight = new Date();
                        todayMidnight.setHours(0, 0, 0, 0);
                        const isToday = isSameDay(date, todayMidnight);
                        const isPast = date < todayMidnight && !isToday;

                        return (
                            <div
                                key={date.toISOString()}
                                className={`weekly-day-column ${date.getDay() === 6 ? "is-sat" : ""} ${date.getDay() === 0 ? "is-sun" : ""} ${isToday ? "is-today" : ""} ${isPast ? "is-past" : ""}`}
                            >
                                {/* Day Header */}
                                <header className="weekly-day-header" ref={colIndex === 0 ? dayHeaderRef : undefined}>
                                    <div
                                        style={{
                                            display: "flex",
                                            width: "100%",
                                            alignItems:
                                                activeDateLayout === "above" ||
                                                    activeDateLayout === "below"
                                                    ? (profile.dateAlignment === "left" ? "flex-start" : profile.dateAlignment === "right" ? "flex-end" : "center")
                                                    : "baseline",
                                            justifyContent:
                                                profile.dateAlignment === "left"
                                                    ? "flex-start"
                                                    : profile.dateAlignment === "right"
                                                        ? "flex-end"
                                                        : "center",
                                            flexDirection:
                                                activeDateLayout === "above"
                                                    ? "column-reverse"
                                                    : activeDateLayout === "below"
                                                        ? "column"
                                                        : "row",
                                            gap: profile.dateAlignment === "tight" ? "2px"
                                                : (activeDateLayout === "above" || activeDateLayout === "below") ? "0px"
                                                : (profile.dayHeaderGap || "0.35em"),
                                        }}
                                    >
                                        {(() => {
                                            // Compute date vertical offset relative to weekday font size
                                            const isHorizontal = activeDateLayout === "left" || activeDateLayout === "right" || activeDateLayout === undefined;
                                            const headlineSizePx = parseFloat(profile.headlineFontSize || "1.25rem") * (String(profile.headlineFontSize || "").includes("px") ? 1 : 16);
                                            const dateOffset = !isHorizontal ? undefined
                                                : profile.dateVerticalAlign === "top" ? `${-headlineSizePx * 0.55}px`
                                                : profile.dateVerticalAlign === "bottom" ? "0px"
                                                : `${-headlineSizePx * 0.25}px`; // center
                                            const dateStyle = isHorizontal ? {
                                                flexShrink: 0 as const, marginBottom: 0,
                                                position: "relative" as const, top: dateOffset,
                                            } : { flexShrink: 0 as const };
                                            return (
                                                <>
                                                    {activeDateLayout === "left" && (
                                                        <span className="weekly-day-date" style={dateStyle}>
                                                            {formatDateHeader(date, language)}
                                                        </span>
                                                    )}
                                                    <h3
                                                        className={`weekly-day-name ${isSameDay(date, new Date()) ? "is-today" : ""}`}
                                                        style={{ marginBottom: 0, flexShrink: 0 }}
                                                    >
                                                        {getDayName(date, language, weekdayFormat, customWeekdayNames, weekStartDay, weekdayCase)}
                                                    </h3>
                                                    {(activeDateLayout === "right" ||
                                                        activeDateLayout === "above" ||
                                                        activeDateLayout === "below" ||
                                                        activeDateLayout === undefined) && (
                                                            <span className="weekly-day-date" style={dateStyle}>
                                                                {formatDateHeader(date, language)}
                                                            </span>
                                                        )}
                                                </>
                                            );
                                        })()}
                                    </div>
                                </header>

                                {/* Time Grid or Simple List */}
                                {showTimeGrid ? (
                                    <div
                                        className="time-slots-container"
                                        onDragLeave={handleDragLeave}
                                        style={{ position: "relative" }}
                                    >
                                        {/* Calendar Fetching Indicator */}
                                        {showTimeGrid && colIndex === 0 && isFetchingCalendar && (
                                            <div className="absolute top-2 left-2 z-[60] flex items-center gap-2 bg-white/90 dark:bg-zinc-800/90 px-3 py-1.5 rounded-full shadow-sm border border-zinc-200 dark:border-zinc-700 text-xs text-zinc-600 dark:text-zinc-300 pointer-events-none">
                                                <div className="w-3 h-3 border-2 border-zinc-400 border-t-transparent rounded-full animate-spin"></div>
                                                Syncing Calendar...
                                            </div>
                                        )}

                                        {/* Now Line - only show on today's column */}
                                        {isSameDay(date, new Date()) &&
                                            (() => {
                                                const now = currentTime;
                                                const nowHour = now.getHours();
                                                const nowMinute = now.getMinutes();
                                                // Show if within 24h range
                                                if (
                                                    nowHour >= 0 &&
                                                    nowHour < 24
                                                ) {
                                                    const minutesSinceStart =
                                                        nowHour * 60 + nowMinute;
                                                    const pixelsPerMinute =
                                                        getSlotHeight(effectiveCellDuration) / effectiveCellDuration;
                                                    const topPosition =
                                                        minutesSinceStart * pixelsPerMinute;
                                                    const timeString = formatHour(nowHour, nowMinute, "full", timeFormat);
                                                    return (
                                                        <div
                                                            className="now-line"
                                                            data-time={timeString}
                                                            style={{ top: `${topPosition}px` }}
                                                        />
                                                    );
                                                }
                                                return null;
                                            })()}
                                        {/* Protection overlays - render at exact event positions */}
                                        {protectEventTimes &&
                                            getEventsForDate(date)
                                                .filter((e) => !isAllDayEvent(e))
                                                .map((event) => {
                                                    const eventStart = new Date(event.startTime);
                                                    const eventEnd = new Date(event.endTime);
                                                    const eventStartHour = eventStart.getHours();
                                                    const eventStartMinute = eventStart.getMinutes();

                                                    // Show if within 24h range
                                                    if (
                                                        eventStartHour < 0 ||
                                                        eventStartHour >= 24
                                                    )
                                                        return null;

                                                    const minutesSinceStart =
                                                        eventStartHour * 60 +
                                                        eventStartMinute;
                                                    const pixelsPerMinute =
                                                        getSlotHeight(effectiveCellDuration) / effectiveCellDuration;
                                                    const topPosition =
                                                        minutesSinceStart * pixelsPerMinute;

                                                    // Calculate height based on event duration
                                                    const durationMinutes =
                                                        (eventEnd.getTime() - eventStart.getTime()) /
                                                        (1000 * 60);
                                                    const calculatedHeight =
                                                        durationMinutes * pixelsPerMinute;
                                                    // Ensure minimum height of 15px for visibility
                                                    const height = Math.max(calculatedHeight, 15);

                                                    const isUnlocked = unlockedEvents.has(event.id);

                                                    return (
                                                        <div
                                                            key={`protection-${event.id}`}
                                                            className="event-protection-overlay"
                                                            style={{
                                                                position: "absolute",
                                                                top: `${topPosition}px`,
                                                                left: 0,
                                                                right: 0,
                                                                height: `${height}px`,
                                                                zIndex: 1,
                                                                pointerEvents: "none",
                                                            }}
                                                        >
                                                            <button
                                                                className="event-unlock-btn"
                                                                onClick={(e) => {
                                                                    e.stopPropagation();
                                                                    setUnlockedEvents((prev) => {
                                                                        const next = new Set(prev);
                                                                        if (next.has(event.id)) {
                                                                            next.delete(event.id);
                                                                        } else {
                                                                            next.add(event.id);
                                                                        }
                                                                        return next;
                                                                    });
                                                                }}
                                                                title={
                                                                    isUnlocked
                                                                        ? "Lock this time slot"
                                                                        : "Unlock this time slot"
                                                                }
                                                                style={{ pointerEvents: "auto" }}
                                                            >
                                                                {isUnlocked ? "🔓" : "🔒"}
                                                            </button>
                                                        </div>
                                                    );
                                                })}
                                        {/* GridTaskBlocks for timed tasks */}
                                        {getTasksForDate(date)
                                            .filter(t => !!t.startTime)
                                            .map(task => (
                                                <GridTaskBlock
                                                    key={task.id}
                                                    task={task}
                                                    date={date}
                                                    activeDate={currentWeekStart}
                                                    cellDuration={effectiveCellDuration}
                                                    darkMode={darkMode}
                                                    isProtected={false}
                                                    editingTaskId={editingTaskId}
                                                    setEditingTaskId={setEditingTaskId}
                                                    updateTask={updateTask}
                                                    updateTaskNotes={updateTaskNotes}
                                                    updateTaskDuration={updateTaskDuration}
                                                    toggleTask={toggleTask}
                                                    deleteTask={deleteTask}
                                                    toggleTaskRolling={toggleTaskRolling}
                                                    setSelectedTaskForNotes={setSelectedTaskForNotes}
                                                    setSelectedTaskForRecurrence={setSelectedTaskForRecurrence}
                                                    handleDragStart={handleDragStart}
                                                    handleDragEnd={handleDragEnd}
                                                    getSlotHeight={getSlotHeight}
                                                    draggedTask={draggedTask as any}
                                                    addSubTask={addSubTask}
                                                    toggleSubTask={toggleSubTask}
                                                    updateSubTask={updateSubTask}
                                                    deleteSubTask={deleteSubTask}
                                                    onSetEditingTaskId={setEditingTaskId}
                                                    workingHoursStart={workingHoursStart}
                                                    showTaskCheckboxes={effectiveShowTaskCheckboxes}
                                                    showProjectIcons={effectiveShowProjectIcons}
                                                    projects={projects}
                                                    onProjectAssign={assignProject}
                                                    kanbanStages={kanbanStages}
                                                    weatherEnabled={effectiveWeatherEnabled}
                                                />
                                            ))}
                                        {visibleSlots.map((slot) => {
                                            const hour = getHourFromSlot(slot);
                                            const minutes = slot.split(":")[1];
                                            const isHourStart = minutes === "00";
                                            const slotEvents = getEventsForSlot(date, slot);
                                            const isActive =
                                                activeSlot?.day === date.getDay() &&
                                                activeSlot?.slot === slot;
                                            const isProtected = isSlotProtected(date, slot);
                                            const isOccupiedByTask = isSlotOccupiedByTask(date, slot, draggedTask?.id);
                                            const isOccupiedByAnyTask = isSlotOccupiedByTask(date, slot);

                                            const handleSlotClick = (e: React.MouseEvent) => {
                                                if (isProtected || isOccupiedByAnyTask) return; // Don't allow adding tasks to protected or occupied slots

                                                // Alt+Click to Create Calendar Event
                                                if (e.altKey) {
                                                    e.stopPropagation();
                                                    setCalendarEventModal({
                                                        isOpen: true,
                                                        initialDate: date,
                                                        initialStartTime: slot,
                                                    });
                                                    return;
                                                }

                                                if (!isActive) {
                                                    setActiveSlot({ day: date.getDay(), slot });
                                                    setNewSlotTask("");
                                                }
                                            };

                                            const handleSlotSubmit = async (e: React.FormEvent) => {
                                                e.preventDefault();
                                                e.stopPropagation();
                                                const taskTitle = newSlotTask.trim();
                                                // Clear state immediately to prevent double submit
                                                setActiveSlot(null);
                                                setNewSlotTask("");
                                                if (taskTitle) {
                                                    await addTask(date, taskTitle, slot);
                                                }
                                            };

                                            const handleSlotDrop = (e: React.DragEvent) => {
                                                e.preventDefault();
                                                if (isProtected || isOccupiedByTask) return; // Don't allow dropping on protected or occupied slots
                                                handleDrop(e, date.getDay(), slot);
                                            };

                                            const isDropTarget =
                                                dropPreview?.day === date.getDay() &&
                                                dropPreview?.slot === slot;

                                            return (
                                                <div
                                                    key={slot}
                                                    className={`time-slot ${isHourStart ? "hour-start" : ""} ${draggedTask && !isProtected && !isOccupiedByTask ? "drop-target" : ""} ${isActive ? "active" : ""}`}
                                                    style={{
                                                        height: `${getSlotHeight(effectiveCellDuration)}px`,
                                                        position: "relative",
                                                        cursor: isProtected || isOccupiedByAnyTask ? "not-allowed" : "text",
                                                    }}
                                                    onClick={handleSlotClick}
                                                    onDragOver={(e) =>
                                                        !isProtected && !isOccupiedByTask &&
                                                        handleDragOver(e, date.getDay(), slot)
                                                    }
                                                    onDrop={handleSlotDrop}
                                                >
                                                    {/* Weather indicator for hour-start slots */}
                                                    {isHourStart && effectiveWeatherEnabled && (() => {
                                                        const h = parseInt(slot.split(":")[0]);
                                                        const dateStr = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}T${String(h).padStart(2, "0")}:00`;
                                                        const w = weatherData[dateStr];
                                                        if (!w) return null;
                                                        const d = effectiveWeatherDisplay;
                                                        const parts: string[] = [];
                                                        if (d.includes("temp")) parts.push(`${w.temp}°`);
                                                        if (d.includes("feelsLike") && w.feelsLike != null) parts.push(`(${w.feelsLike}°)`);
                                                        if (d.includes("wind") && w.wind != null) parts.push(`${w.wind}km/h`);
                                                        if (d.includes("gusts") && w.gusts != null) parts.push(`💨${w.gusts}`);
                                                        if (d.includes("precipProb") && w.precipProb != null) parts.push(`${w.precipProb}%`);
                                                        if (d.includes("precip") && w.precip != null && w.precip > 0) parts.push(`${w.precip}mm`);
                                                        if (d.includes("humidity") && w.humidity != null) parts.push(`💧${w.humidity}%`);
                                                        if (d.includes("uv") && w.uv != null && w.uv > 0) parts.push(`UV${w.uv}`);
                                                        return (
                                                            <div className="weather-chip" style={{ position: "absolute", top: "2px", right: "3px", display: "flex", alignItems: "center", gap: "2px", fontSize: "10px", pointerEvents: "none", zIndex: 20, lineHeight: 1, color: darkMode ? "#bbb" : "#555", background: darkMode ? "rgba(17,17,17,0.9)" : "rgba(255,255,255,0.92)", padding: "1px 5px", borderRadius: "6px", backdropFilter: "blur(4px)", boxShadow: "0 0 0 1px " + (darkMode ? "rgba(255,255,255,0.06)" : "rgba(0,0,0,0.06)") }}>
                                                                {d.includes("icon") && <span>{getWeatherIcon(w.code)}</span>}
                                                                {parts.length > 0 && <span style={{ fontWeight: 600 }}>{parts.join(" ")}</span>}
                                                            </div>
                                                        );
                                                    })()}
                                                    {/* Drop preview indicator */}
                                                    {isDropTarget && !isProtected && !isOccupiedByTask && (
                                                        <div className="drop-preview" />
                                                    )}
                                                    {/* Calendar Events in time slot */}
                                                    {slotEvents.map((event) => {
                                                        const eventHeight = getEventDuration(event);
                                                        const startTime = new Date(event.startTime);
                                                        const endTime = new Date(event.endTime);
                                                        const timeStr = `${startTime.getHours().toString().padStart(2, "0")}:${startTime.getMinutes().toString().padStart(2, "0")} - ${endTime.getHours().toString().padStart(2, "0")}:${endTime.getMinutes().toString().padStart(2, "0")}`;

                                                        // Calculate offset within the slot based on event start time
                                                        const [slotHour, slotMinute] = slot
                                                            .split(":")
                                                            .map(Number);
                                                        const slotStartMinutes = slotHour * 60 + slotMinute;
                                                        const eventStartMinutes =
                                                            startTime.getHours() * 60 +
                                                            startTime.getMinutes();
                                                        const offsetMinutes =
                                                            eventStartMinutes - slotStartMinutes;
                                                        const pixelsPerMinute =
                                                            getSlotHeight(effectiveCellDuration) / effectiveCellDuration;
                                                        const topOffset = offsetMinutes * pixelsPerMinute;

                                                        // Convert hex to rgba for background, or use default
                                                        const eventColor = event.calendarColor || "#009a9a";
                                                        const bgColor = eventColor.startsWith("#")
                                                            ? `${eventColor}20` // Add alpha for transparency
                                                            : eventColor;
                                                        const borderColor = eventColor.startsWith("#")
                                                            ? eventColor
                                                            : "var(--weekly-teal)";

                                                        return (
                                                            <div
                                                                key={event.id}
                                                                className="time-slot-event"
                                                                title={`${event.calendarTitle}: ${event.title}\n${timeStr}`}
                                                                style={{
                                                                    height: `${Math.max(eventHeight, 15)}px`,
                                                                    minHeight: `15px`,
                                                                    position: "absolute",
                                                                    top: `${topOffset}px`,
                                                                    left: "1px",
                                                                    right: "2px",
                                                                    zIndex: 1,
                                                                    flexDirection: "column",
                                                                    alignItems: "flex-start",
                                                                    justifyContent: "flex-start",
                                                                    backgroundColor: bgColor,
                                                                    borderLeftColor: borderColor,
                                                                    color: borderColor,
                                                                    cursor: event.editable
                                                                        ? "pointer"
                                                                        : "default",
                                                                }}
                                                                onClick={(e) => {
                                                                    e.stopPropagation();
                                                                    if (event.editable) {
                                                                        setCalendarEventModal({
                                                                            isOpen: true,
                                                                            event: event,
                                                                        });
                                                                    }
                                                                }}
                                                            >
                                                                <div className="event-title-row">
                                                                    <span className="event-indicator">📅</span>
                                                                    <span className="event-title">
                                                                        {event.title}
                                                                    </span>
                                                                </div>
                                                                <div className="event-time-row">{timeStr}</div>
                                                            </div>
                                                        );
                                                    })}
                                                    {isActive && (
                                                        <form
                                                            onSubmit={handleSlotSubmit}
                                                            className="slot-input-form"
                                                        >
                                                            <input
                                                                type="text"
                                                                value={newSlotTask}
                                                                onChange={(e) => setNewSlotTask(e.target.value)}
                                                                onBlur={async (e) => {
                                                                    // Prevent double submission if form was submitted
                                                                    if (activeSlot && newSlotTask.trim()) {
                                                                        // Delay slightly to let onSubmit fire if that was the cause
                                                                        setTimeout(async () => {
                                                                            if (activeSlot && newSlotTask.trim()) {
                                                                                const taskTitle = newSlotTask.trim();
                                                                                setActiveSlot(null);
                                                                                setNewSlotTask("");
                                                                                await addTask(date, taskTitle, slot);
                                                                            }
                                                                        }, 100);
                                                                    } else {
                                                                        setActiveSlot(null);
                                                                        setNewSlotTask("");
                                                                    }
                                                                }}
                                                                onKeyDown={(e) => {
                                                                    if (e.key === "Escape") {
                                                                        setActiveSlot(null);
                                                                        setNewSlotTask("");
                                                                    }
                                                                }}
                                                                autoFocus
                                                                className="weekly-task-input"
                                                                style={{
                                                                    width: "100%",
                                                                    background: "transparent",
                                                                    outline: "none",
                                                                    minHeight: "24px",
                                                                    paddingLeft: "0",
                                                                }}
                                                            />

                                                        </form>
                                                    )}
                                                </div>
                                            );
                                        })}
                                        {/* All Day Events Section */}


                                    </div>
                                ) : (
                                    <div
                                        onDragOver={(e) => handleDragOver(e, date.getDay())}
                                        onDrop={(e) => handleDrop(e, date.getDay())}
                                        onDragLeave={handleDragLeave}
                                        style={{ flex: 1 }}
                                    >
                                        {/* Calendar Events */}
                                        {getEventsForDate(date).map((event) => {
                                            const eventColor = event.calendarColor || "#009a9a";
                                            const bgColor = eventColor.startsWith("#")
                                                ? `${eventColor}20`
                                                : eventColor;
                                            const borderColor = eventColor.startsWith("#")
                                                ? eventColor
                                                : "var(--weekly-teal)";

                                            return (
                                                <div
                                                    key={event.id}
                                                    className="weekly-calendar-event"
                                                    onClick={(e) => {
                                                        e.stopPropagation();
                                                        if (event.editable) {
                                                            setCalendarEventModal({
                                                                isOpen: true,
                                                                event: event,
                                                            });
                                                        }
                                                    }}
                                                    style={{
                                                        backgroundColor: bgColor,
                                                        borderLeftColor: borderColor,
                                                        color: borderColor,
                                                        cursor: event.editable ? "pointer" : "default",
                                                    }}
                                                >
                                                    <div
                                                        className="weekly-calendar-event-time"
                                                        style={{ color: "inherit", opacity: 0.8 }}
                                                    >
                                                        {new Date(event.startTime).toLocaleTimeString(
                                                            "en-US",
                                                            { hour: "numeric", minute: "2-digit" },
                                                        )}
                                                    </div>
                                                    <div
                                                        className="weekly-calendar-event-title"
                                                        style={{ color: "inherit" }}
                                                    >
                                                        {event.title}
                                                    </div>
                                                </div>
                                            );
                                        })}

                                        {/* Tasks */}
                                        <ol className="weekly-task-list">
                                            {getTasksForDate(date).map((task) => (
                                                <TaskItem
                                                    key={task.id}
                                                    task={task}
                                                    isEditing={editingTaskId === task.id}
                                                    onToggle={() => toggleTask(task.id)}
                                                    onEdit={() => setEditingTaskId(task.id)}
                                                    onUpdate={(newTitle) => updateTask(task.id, newTitle)}
                                                    onDelete={() => deleteTask(task.id)}
                                                    onNotes={() => setSelectedTaskForNotes(task)}
                                                    onRollToggle={() => toggleTaskRolling(task.id)}
                                                    onRecurrence={() =>
                                                        setSelectedTaskForRecurrence(task)
                                                    }
                                                    onDragStart={(e, t) => handleDragStart(e, t)}
                                                    onDragEnd={handleDragEnd}
                                                    onAddSubTask={addSubTask}
                                                    onToggleSubTask={toggleSubTask}
                                                    onDeleteSubTask={deleteSubTask}
                                                    onUpdateSubTask={updateSubTask}
                                                    editingTaskId={editingTaskId}
                                                    onSetEditingTaskId={setEditingTaskId}
                                                    showTaskCheckboxes={effectiveShowTaskCheckboxes}
                                                    showProjectIcons={effectiveShowProjectIcons}
                                                    projects={projects}
                                                    onProjectAssign={assignProject}
                                                    kanbanStages={kanbanStages}
                                                />
                                            ))}
                                        </ol>
                                    </div>
                                )}
                            </div>
                        );
                    })}
                </main>

            </div>
            {/* Right Navigation Arrows (outside scroll wrapper, fixed to right edge) */}
            <div
              className="side-nav side-nav-right"
              style={{
                height: `${measuredHeaderHeight}px`,
                position: 'absolute',
                top: 0,
                right: 16,
                width: '30px',
                zIndex: 50
              }}
            >
                <button onClick={goToNextDay} title="Next Day" className="side-nav-btn">
                    <ChevronRight size={16} />
                </button>
                <button onClick={goToNextWeek} title="Next Week" className="side-nav-btn">
                    <ChevronsRight size={16} />
                </button>
            </div>
            </div>}

            {/* All-Day Events Section (below position) — hidden in kanban */}
            {viewStyle !== "kanban" && effectiveAllDayPosition === "below" && allDaySection}

            {/* Someday Section */}
            {effectiveShowSomeday && (<>
                {/* Resize handle - on top border of someday section */}
                {somedayExpanded && (
                    <div
                        className="resize-handle"
                        onMouseDown={(e) => startResize(e, 'someday', true)}
                        onTouchStart={(e) => startResize(e, 'someday', true)}
                    >
                        <div className="resize-handle-bar" />
                    </div>
                )}
                <section
                    ref={somedaySectionRefCb}
                    className={`weekly-someday ${somedayExpanded ? "expanded" : "collapsed"} transition-colors duration-200`}
                    style={somedayExpanded && somedayHeight ? { height: `${somedayHeight}px`, overflowY: 'auto' } : undefined}
                >
                    {/* Someday tabs bar */}
                    <div className="someday-tabs-bar">
                        <div
                            onClick={() => setSomedayExpanded(!somedayExpanded)}
                            style={{
                                cursor: "pointer",
                                display: "flex",
                                alignItems: "center",
                                gap: "4px",
                                marginRight: "4px",
                            }}
                            title={somedayExpanded ? "Collapse" : "Expand"}
                        >
                            <ChevronRight
                                size={14}
                                style={{
                                    transform: somedayExpanded ? "rotate(90deg)" : "rotate(0deg)",
                                    transition: "transform 0.15s",
                                    color: "var(--weekly-text-light)",
                                    flexShrink: 0,
                                }}
                            />
                            <span style={{
                                fontSize: "0.7rem",
                                fontWeight: 600,
                                color: "var(--weekly-text-light)",
                                textTransform: "uppercase",
                                letterSpacing: "0.05em",
                                whiteSpace: "nowrap",
                            }}>
                                any day
                            </span>
                        </div>
                        <button
                            className="someday-bar-icon-btn"
                            onClick={() => handleStartAddSomedayList()}
                            title={t.newList}
                        >
                            <ListPlus size={14} />
                        </button>
                        <button
                            className="someday-bar-icon-btn"
                            onClick={() => { setCreatingNewTab(true); setCreatingNewTabName(""); }}
                            title={t.newTab}
                        >
                            <FolderPlus size={14} />
                        </button>
                        {creatingNewTab && (
                            <input
                                className="someday-tab-rename-input"
                                value={creatingNewTabName}
                                onChange={(e) => setCreatingNewTabName(e.target.value)}
                                onBlur={() => {
                                    const name = creatingNewTabName.trim();
                                    if (name && !somedayTabs.includes(name)) {
                                        saveCustomTabs([...customTabs, name]);
                                        setSomedayTab(name);
                                    } else if (name) {
                                        setSomedayTab(name);
                                    }
                                    setCreatingNewTab(false);
                                }}
                                onKeyDown={(e) => {
                                    if (e.key === "Enter") e.currentTarget.blur();
                                    if (e.key === "Escape") setCreatingNewTab(false);
                                }}
                                placeholder={t.newTab}
                                autoFocus
                                style={{
                                    fontSize: "0.75rem",
                                    border: "1px solid var(--weekly-border)",
                                    borderRadius: "3px",
                                    padding: "2px 6px",
                                    background: "var(--weekly-bg)",
                                    color: "var(--weekly-text)",
                                    width: "80px",
                                }}
                            />
                        )}
                        <div className="someday-tabs-bar-divider" />
                        <button
                            className={`someday-tab-btn-h ${activeSomedayTab === null ? "active" : ""} ${dragOverTab === "__all__" ? "drag-over" : ""}`}
                            onClick={() => setSomedayTab(null)}
                            onDragOver={(e) => {
                                if (e.dataTransfer.types.includes("text/list-id")) {
                                    e.preventDefault();
                                    e.dataTransfer.dropEffect = "move";
                                    setDragOverTab("__all__");
                                }
                            }}
                            onDragLeave={() => setDragOverTab(null)}
                            onDrop={(e) => {
                                const listId = e.dataTransfer.getData("text/list-id");
                                if (listId) {
                                    e.preventDefault();
                                    e.stopPropagation();
                                    assignListToTab(listId, null);
                                    setDraggingListId(null);
                                    setDropTargetListIndex(null);
                                }
                                setDragOverTab(null);
                            }}
                        >{t.allTabs} <span className="someday-tab-count">{somedayLists.length}</span></button>
                        {somedayTabs.map(tab => (
                            editingTabName === tab ? (
                                <input
                                    key={tab}
                                    className="someday-tab-rename-input"
                                    value={renamingTabValue}
                                    onChange={(e) => setRenamingTabValue(e.target.value)}
                                    onBlur={() => {
                                        renameTab(tab, renamingTabValue);
                                        setEditingTabName(null);
                                    }}
                                    onKeyDown={(e) => {
                                        if (e.key === "Enter") e.currentTarget.blur();
                                        if (e.key === "Escape") setEditingTabName(null);
                                    }}
                                    autoFocus
                                    style={{
                                        fontSize: "0.75rem",
                                        border: "1px solid var(--weekly-border)",
                                        borderRadius: "3px",
                                        padding: "2px 6px",
                                        background: "var(--weekly-bg)",
                                        color: "var(--weekly-text)",
                                        width: "80px",
                                    }}
                                />
                            ) : (
                                <div
                                    key={tab}
                                    className="someday-tab-wrapper-h"
                                    onDragOver={(e) => {
                                        if (e.dataTransfer.types.includes("text/list-id")) {
                                            e.preventDefault();
                                            e.dataTransfer.dropEffect = "move";
                                            setDragOverTab(tab);
                                        }
                                    }}
                                    onDragLeave={() => setDragOverTab(null)}
                                    onDrop={(e) => {
                                        const listId = e.dataTransfer.getData("text/list-id");
                                        if (listId) {
                                            e.preventDefault();
                                            e.stopPropagation();
                                            assignListToTab(listId, tab);
                                            setDraggingListId(null);
                                            setDropTargetListIndex(null);
                                        }
                                        setDragOverTab(null);
                                    }}
                                >
                                    <button
                                        className={`someday-tab-btn-h ${activeSomedayTab === tab ? "active" : ""} ${dragOverTab === tab ? "drag-over" : ""}`}
                                        onClick={() => setSomedayTab(tab)}
                                        onDoubleClick={() => {
                                            setEditingTabName(tab);
                                            setRenamingTabValue(tab);
                                        }}
                                        title={t.renameTab}
                                    >{tab} <span className="someday-tab-count">{somedayLists.filter(l => l.tab === tab).length}</span></button>
                                    <button
                                        className="someday-tab-dissolve-h"
                                        onClick={(e) => { e.stopPropagation(); dissolveTab(tab); }}
                                        title={t.dissolveTab}
                                    ><X size={10} /></button>
                                </div>
                            )
                        ))}
                    </div>
                    <div style={{ display: "flex", flexDirection: "row", maxWidth: "100%", width: "100%" }}>
                        <div ref={somedayGridRef} style={{ flex: 1, minWidth: 0, overflowX: "auto" }}>
                            {somedayExpanded && (
                                <div
                                    className={`weekly-someday-lists-grid cols-${Math.min(7, Math.max(1, viewDays))}`}
                                    style={{ display: "flex", flexDirection: "row", flexWrap: "nowrap" }}
                                    onDragLeave={(e) => {
                                        // Clear indicator when leaving the someday grid entirely
                                        if (draggingListId && !e.currentTarget.contains(e.relatedTarget as Node)) {
                                            setDropTargetListIndex(null);
                                        }
                                    }}
                                >
                                    {(() => {
                                        const baseLists = filteredSomedayLists.length > 0
                                            ? filteredSomedayLists
                                            : [{ id: "default", title: "LISTE", tasks: [] as Task[] }];
                                        return baseLists.slice(0, Math.max(filteredSomedayLists.length, viewDays));
                                    })()
                                        .flatMap((list, listIdx, arr) => {
                                            const indicator = draggingListId && dropTargetListIndex === listIdx && draggingListId !== list.id ? (
                                                <div key={`drop-indicator-${listIdx}`} style={{
                                                    width: "3px",
                                                    flexShrink: 0,
                                                    background: "#6366f1",
                                                    borderRadius: "2px",
                                                    alignSelf: "stretch",
                                                    transition: "opacity 0.15s",
                                                }} />
                                            ) : null;
                                            // After last item, check for drop at end
                                            const endIndicator = listIdx === arr.length - 1 && draggingListId && dropTargetListIndex === arr.length && draggingListId !== list.id ? (
                                                <div key="drop-indicator-end" style={{
                                                    width: "3px",
                                                    flexShrink: 0,
                                                    background: "#6366f1",
                                                    borderRadius: "2px",
                                                    alignSelf: "stretch",
                                                    transition: "opacity 0.15s",
                                                }} />
                                            ) : null;
                                            const listEl = (
                                            <div
                                                key={list.id}
                                                className={`weekly-someday-list ${draggingListId === list.id ? "is-dragging" : ""} p-2 transition-colors duration-200`}
                                                style={{
                                                    minHeight: "200px",
                                                    cursor: "text",
                                                    display: "flex",
                                                    flexDirection: "column",
                                                }}
                                                onMouseDown={(e) => {
                                                    const target = e.target as HTMLElement;
                                                    if (
                                                        target.closest(".task-list-slot") ||
                                                        target.closest(".someday-list-header") ||
                                                        target.closest("button") ||
                                                        target.tagName === "INPUT"
                                                    ) {
                                                        return;
                                                    }

                                                    const input = e.currentTarget.querySelector(
                                                        `[data-someday-add-input="${list.id}"]`,
                                                    ) as HTMLInputElement;
                                                    if (input) {
                                                        input.focus();
                                                    }
                                                }}
                                                draggable
                                                onDragStart={(e) => {
                                                    const target = e.target as HTMLElement;
                                                    if (target.closest(".weekly-task-item")) {
                                                        return;
                                                    }
                                                    if (!isDragFromHandle.current) {
                                                        e.preventDefault();
                                                        return;
                                                    }
                                                    isDragFromHandle.current = false;
                                                    setDraggingListId(list.id);
                                                    e.dataTransfer.setData("text/list-id", list.id);
                                                    e.dataTransfer.effectAllowed = "move";
                                                }}
                                                onDragEnd={() => { setDraggingListId(null); setDropTargetListIndex(null); setDragOverTab(null); }}
                                                onDragOver={(e) => {
                                                    e.preventDefault();
                                                    e.dataTransfer.dropEffect = "move";
                                                    if (!draggingListId || draggingListId === list.id) return;
                                                    const rect = (e.currentTarget as HTMLElement).getBoundingClientRect();
                                                    const midX = rect.left + rect.width / 2;
                                                    // Drop before or after this list
                                                    if (e.clientX < midX) {
                                                        setDropTargetListIndex(listIdx);
                                                    } else {
                                                        setDropTargetListIndex(listIdx + 1);
                                                    }
                                                }}
                                                onDrop={async (e) => {
                                                    e.preventDefault();
                                                    const droppedListId =
                                                        e.dataTransfer.getData("text/list-id");
                                                    const draggedTaskId =
                                                        e.dataTransfer.getData("text/plain");

                                                    if (droppedListId === list.id && !draggedTaskId) {
                                                        setDraggingListId(null);
                                                        setDropTargetListIndex(null);
                                                        return;
                                                    }

                                                    // If a task is dropped on the list generally (not on a specific slot), 
                                                    // find the first free slot and place it there.
                                                    if (draggedTaskId && draggedTask && draggedTask.id === draggedTaskId) {
                                                        const occupiedSlots = list.tasks.map(t => t.somedaySlotIndex).filter(s => s !== null && s !== undefined) as number[];
                                                        let nextFreeSlot = 0;
                                                        while (occupiedSlots.includes(nextFreeSlot)) {
                                                            nextFreeSlot++;
                                                        }
                                                        handleSomedayDrop(e, list.id, nextFreeSlot);
                                                        return;
                                                    }

                                                    // Reorder logic (list drag) - apply the visual order
                                                    if (!droppedListId || dropTargetListIndex === null) {
                                                        setDraggingListId(null);
                                                        setDropTargetListIndex(null);
                                                        return;
                                                    }
                                                    const dragIdx = somedayLists.findIndex(
                                                        (l) => l.id === droppedListId,
                                                    );
                                                    if (dragIdx === -1) {
                                                        setDraggingListId(null);
                                                        setDropTargetListIndex(null);
                                                        return;
                                                    }

                                                    const newLists = [...somedayLists];
                                                    const [moved] = newLists.splice(dragIdx, 1);
                                                    // Adjust target index since we removed an item before it
                                                    const insertIdx = dragIdx < dropTargetListIndex
                                                        ? dropTargetListIndex - 1
                                                        : dropTargetListIndex;
                                                    newLists.splice(insertIdx, 0, moved);

                                                    setSomedayLists(newLists);
                                                    setDraggingListId(null);
                                                    setDropTargetListIndex(null);

                                                    // Persist order
                                                    const orderUpdates = newLists.map((l, index) => ({
                                                        id: l.id,
                                                        order: index,
                                                    }));
                                                    try {
                                                        await fetch("/api/someday-lists", {
                                                            method: "PATCH",
                                                            headers: { "Content-Type": "application/json" },
                                                            body: JSON.stringify(orderUpdates),
                                                        });
                                                    } catch (err) {
                                                        console.error("Failed to update list order", err);
                                                    }
                                                }}
                                            >
                                                <div
                                                    className="weekly-someday-list-title-header"
                                                    style={{
                                                        display: "flex",
                                                        justifyContent: "flex-start",
                                                        alignItems: "center",
                                                        ...(listToDelete === list.id ? { position: "relative", zIndex: 10 } : {}),
                                                    }}
                                                >
                                                    {listToDelete === list.id ? (
                                                        <div style={{ display: "flex", flexDirection: "column", width: "100%", gap: "8px", padding: "4px" }}>
                                                            <span style={{ fontSize: "0.9rem", fontWeight: "bold" }}>Delete this list?</span>
                                                            {list.externalProvider && <span style={{ fontSize: "0.75rem", color: "#888" }}>Note: This list is not deleted from {list.externalProvider}, just from this view.</span>}
                                                            <div style={{ display: "flex", gap: "8px", marginTop: "4px" }}>
                                                                <button onClick={(e) => {
                                                                    e.stopPropagation();
                                                                    setListToDelete(null);
                                                                }} style={{ padding: "4px 8px", borderRadius: "4px", backgroundColor: "#eee", color: "#333", border: "none", cursor: "pointer", fontSize: "0.8rem" }}>Cancel</button>
                                                                <button onClick={async (e) => {
                                                                    e.stopPropagation();
                                                                    try {
                                                                        await fetch(`/api/someday-lists?id=${list.id}`, { method: "DELETE" });
                                                                        setSomedayLists((prev) => prev.filter((l) => l.id !== list.id));
                                                                        setListToDelete(null);
                                                                    } catch (err) { console.error(err); }
                                                                }} style={{ padding: "4px 8px", borderRadius: "4px", backgroundColor: "#dc2626", color: "#fff", border: "none", cursor: "pointer", fontSize: "0.8rem" }}>Delete</button>
                                                            </div>
                                                        </div>
                                                    ) : (
                                                        <>
                                                            <div
                                                                className="someday-drag-handle"
                                                                title="Drag to reorder"
                                                                onMouseDown={() => { isDragFromHandle.current = true; }}
                                                                onMouseUp={() => { isDragFromHandle.current = false; }}
                                                            >
                                                                <GripVertical size={14} />
                                                            </div>
                                                            <input
                                                                type="text"
                                                                defaultValue={list.title}
                                                                className="weekly-someday-list-title-input dark:bg-transparent dark:text-white"
                                                                onBlur={async (e) => {
                                                                    const newTitle = e.target.value.trim();
                                                                    if (newTitle && newTitle !== list.title) {
                                                                        try {
                                                                            await fetch("/api/someday-lists", {
                                                                                method: "PATCH",
                                                                                headers: {
                                                                                    "Content-Type": "application/json",
                                                                                },
                                                                                body: JSON.stringify({
                                                                                    id: list.id,
                                                                                    title: newTitle,
                                                                                }),
                                                                            });
                                                                            setSomedayLists((prev) =>
                                                                                prev.map((l) =>
                                                                                    l.id === list.id
                                                                                        ? { ...l, title: newTitle }
                                                                                        : l,
                                                                                ),
                                                                            );
                                                                        } catch (err) {
                                                                            console.error(err);
                                                                            e.target.value = list.title;
                                                                        }
                                                                    }
                                                                }}
                                                                onKeyDown={(e) => {
                                                                    if (e.key === "Enter") e.currentTarget.blur();
                                                                }}
                                                            />
                                                            {list.externalProvider && (() => {
                                                                const providerUrl = list.externalProvider === "google" ? "https://tasks.google.com/tasks/" :
                                                                                    list.externalProvider === "outlook" ? "https://to-do.live.com/tasks/" :
                                                                                    list.externalProvider === "apple" ? "https://www.icloud.com/reminders/" : null;
                                                                const iconContent = (
                                                                    <span
                                                                        title={`Synced with ${list.externalProvider === "outlook" ? "Microsoft" : list.externalProvider === "google" ? "Google" : list.externalProvider === "apple" ? "Apple" : list.externalProvider === "notion" ? "Notion" : list.externalProvider}`}
                                                                        style={{ display: "inline-flex", alignItems: "center", marginLeft: "8px", opacity: 0.8, flexShrink: 0, cursor: providerUrl ? "pointer" : "default" }}
                                                                    >
                                                                        {list.externalProvider === "outlook" ? (
                                                                            <FontAwesomeIcon icon={faMicrosoft} className="w-4 h-4 text-zinc-600 dark:text-zinc-400 hover:text-[#0078D4] dark:hover:text-[#00A4EF] transition-colors" />
                                                                        ) : list.externalProvider === "google" ? (
                                                                            <FontAwesomeIcon icon={faGoogle} className="w-4 h-4 text-zinc-600 dark:text-zinc-400 hover:text-[#4285F4] dark:hover:text-[#8AB4F8] transition-colors" />
                                                                        ) : list.externalProvider === "apple" ? (
                                                                            <FontAwesomeIcon icon={faApple} className="w-4 h-4 text-zinc-600 dark:text-zinc-400 hover:text-[#555] dark:hover:text-[#ccc] transition-colors" />
                                                                        ) : list.externalProvider === "synology" ? (
                                                                            <FontAwesomeIcon icon={faServer} className="w-4 h-4 text-zinc-600 dark:text-zinc-400 hover:text-[#007AFF] dark:hover:text-[#3A9CFF] transition-colors" />
                                                                        ) : list.externalProvider === "notion" ? (
                                                                            <FontAwesomeIcon icon={faNotion} className="w-4 h-4 text-zinc-600 dark:text-zinc-400 hover:text-[#000] dark:hover:text-[#fff] transition-colors" />
                                                                        ) : (
                                                                            <RefreshCcw size={14} className="text-zinc-400" />
                                                                        )}
                                                                    </span>
                                                                );
                                                                return providerUrl ? (
                                                                    <a href={providerUrl} target="_blank" rel="noopener noreferrer" onClick={(e) => e.stopPropagation()}>
                                                                        {iconContent}
                                                                    </a>
                                                                ) : iconContent;
                                                            })()}
                                                            <div className="someday-tab-assign" style={{ marginLeft: "auto", position: "relative", display: "flex", alignItems: "center" }}>
                                                                <FolderPlus size={13} style={{ color: list.tab ? "var(--weekly-accent, #6366f1)" : "#bbb", flexShrink: 0 }} />
                                                                <select
                                                                    className="someday-tab-select"
                                                                    value={list.tab || ""}
                                                                    onClick={(e) => e.stopPropagation()}
                                                                    onChange={(e) => {
                                                                        const val = e.target.value;
                                                                        if (val === "__new__") {
                                                                            e.target.value = list.tab || "";
                                                                            setNewTabForListId(list.id);
                                                                            setNewTabNameValue("");
                                                                        } else {
                                                                            assignListToTab(list.id, val || null);
                                                                        }
                                                                    }}
                                                                    style={{
                                                                        position: "absolute",
                                                                        inset: 0,
                                                                        opacity: 0,
                                                                        cursor: "pointer",
                                                                        width: "100%",
                                                                    }}
                                                                    title={t.assignTab || "Assign to tab"}
                                                                >
                                                                    <option value="">{t.noTab}</option>
                                                                    {somedayTabs.map(tab => (
                                                                        <option key={tab} value={tab}>{tab}</option>
                                                                    ))}
                                                                    <option value="__new__">+ {t.newTab || "New tab"}</option>
                                                                </select>
                                                            </div>
                                                            {newTabForListId === list.id && (
                                                                <input
                                                                    className="someday-tab-new-input"
                                                                    value={newTabNameValue}
                                                                    onChange={(e) => setNewTabNameValue(e.target.value)}
                                                                    onBlur={() => {
                                                                        if (newTabNameValue.trim()) {
                                                                            assignListToTab(list.id, newTabNameValue.trim());
                                                                        }
                                                                        setNewTabForListId(null);
                                                                        setNewTabNameValue("");
                                                                    }}
                                                                    onKeyDown={(e) => {
                                                                        if (e.key === "Enter") e.currentTarget.blur();
                                                                        if (e.key === "Escape") {
                                                                            setNewTabForListId(null);
                                                                            setNewTabNameValue("");
                                                                        }
                                                                    }}
                                                                    placeholder={t.newTabName || "Tab name..."}
                                                                    autoFocus
                                                                    onClick={(e) => e.stopPropagation()}
                                                                    style={{
                                                                        fontSize: "0.7rem",
                                                                        border: "1px solid var(--weekly-border)",
                                                                        borderRadius: "4px",
                                                                        padding: "2px 6px",
                                                                        background: "var(--weekly-bg)",
                                                                        color: "var(--weekly-text)",
                                                                        width: "80px",
                                                                        outline: "none",
                                                                    }}
                                                                />
                                                            )}
                                                            <button
                                                                className="someday-list-delete-btn"
                                                                onClick={(e) => {
                                                                    e.stopPropagation();
                                                                    setListToDelete(list.id);
                                                                }}
                                                                style={{
                                                                    border: "none",
                                                                    background: "none",
                                                                    cursor: "pointer",
                                                                    color: "#ccc",
                                                                    marginLeft: "4px",
                                                                    display: "flex",
                                                                    alignItems: "center",
                                                                    justifyContent: "center",
                                                                    padding: "4px"
                                                                }}
                                                                title="Delete List"
                                                            >
                                                                <Trash2 size={16} />
                                                            </button>
                                                        </>
                                                    )}
                                                </div>

                                                <div
                                                    className="weekly-task-list"
                                                    style={{
                                                        flex: 1,
                                                        flexDirection: "column",
                                                        justifyContent: "flex-start",
                                                        position: "relative",
                                                        display: "flex",
                                                    }}
                                                >
                                                    {(() => {
                                                        const slotCount = getSomedaySlotCount(list.tasks);
                                                        const indexedTasks = list.tasks.filter(t => t.somedaySlotIndex !== null && t.somedaySlotIndex !== undefined && t.somedaySlotIndex < slotCount);
                                                        const unindexedTasks = list.tasks.filter(t => t.somedaySlotIndex === null || t.somedaySlotIndex === undefined || t.somedaySlotIndex >= slotCount);
                                                        
                                                        // Fill indexed slots and put unindexed tasks in empty slots starting from top
                                                        const slots = Array.from({ length: slotCount }, (_, i) => ({ index: i, task: indexedTasks.find(t => t.somedaySlotIndex === i) || null }));
                                                        
                                                        let unindexedIdx = 0;
                                                        const finalSlots = slots.map(slot => {
                                                            if (!slot.task && unindexedIdx < unindexedTasks.length) {
                                                                return { ...slot, task: unindexedTasks[unindexedIdx++] };
                                                            }
                                                            return slot;
                                                        });

                                                        // Any remaining unindexed tasks that didn't fit in slots
                                                        const remainingTasks = unindexedTasks.slice(unindexedIdx);

                                                        return (
                                                            <>
                                                                {listToDelete !== list.id && <SomedayAddTask
                                                                    listId={list.id}
                                                                    onAdd={async (title) => {
                                                                        const occupiedSlots = list.tasks.map(t => t.somedaySlotIndex).filter(s => s !== null && s !== undefined) as number[];
                                                                        let nextFreeSlot = 0;
                                                                        while (occupiedSlots.includes(nextFreeSlot)) {
                                                                            nextFreeSlot++;
                                                                        }

                                                                        try {
                                                                            const res = await fetch("/api/tasks", {
                                                                                method: "POST",
                                                                                headers: {
                                                                                    "Content-Type": "application/json",
                                                                                },
                                                                                body: JSON.stringify({
                                                                                    title,
                                                                                    somedayListId: list.id,
                                                                                    somedaySlotIndex: nextFreeSlot
                                                                                }),
                                                                            });
                                                                            if (res.ok) {
                                                                                const data = await res.json();
                                                                                const newTask = {
                                                                                    ...data.task,
                                                                                    createdAt: new Date(data.task.createdAt),
                                                                                    updatedAt: new Date(data.task.updatedAt),
                                                                                };
                                                                                setSomedayLists((prev) =>
                                                                                    prev.map((l) =>
                                                                                        l.id === list.id
                                                                                            ? { ...l, tasks: [...l.tasks, newTask] }
                                                                                            : l,
                                                                                    ),
                                                                                );
                                                                            }
                                                                        } catch (e) {
                                                                            console.error(e);
                                                                        }
                                                                    }}
                                                                />}
                                                                {finalSlots.map((slot) => {
                                                                    const isTarget = dropPreview?.listId === list.id && dropPreview?.slotIdx === slot.index;
                                                                    const task = slot.task;
                                                                    return (
                                                                        <div
                                                                            key={slot.index}
                                                                            className={`task-list-slot ${isTarget ? 'drop-target' : ''}`}
                                                                            onDragOver={(e) => handleSomedayDragOver(e, list.id, slot.index)}
                                                                            onDrop={(e) => handleSomedayDrop(e, list.id, slot.index)}
                                                                            onDragLeave={() => setDropPreview(null)}
                                                                            onMouseDown={(e) => {
                                                                                e.stopPropagation();
                                                                                if (!task) {
                                                                                    setActiveAddSlot({ listId: list.id, slotIdx: slot.index });
                                                                                }
                                                                            }}
                                                                            style={{ minHeight: "24px", cursor: task ? "default" : "text" }}
                                                                        >
                                                                            {task ? (
                                                                                <TaskItem
                                                                                    key={task.id}
                                                                                    task={task}
                                                                                    isEditing={editingTaskId === task.id}
                                                                                    onToggle={() => toggleTask(task.id)}
                                                                                    onEdit={() => setEditingTaskId(task.id)}
                                                                                    onUpdate={(title) => updateTask(task.id, title)}
                                                                                    onDelete={() => deleteTask(task.id)}
                                                                                    onNotes={() => setSelectedTaskForNotes(task)}
                                                                                    onRollToggle={() => toggleTaskRolling(task.id)}
                                                                                    onRecurrence={() => setSelectedTaskForRecurrence(task)}
                                                                                    onDragStart={(e, t) => handleDragStart(e, t)}
                                                                                    onDragEnd={handleDragEnd}
                                                                                    variant="minimal"
                                                                                    isSomeday={true}
                                                                                    onAddSubTask={addSubTask}
                                                                                    onToggleSubTask={toggleSubTask}
                                                                                    onDeleteSubTask={deleteSubTask}
                                                                                    onUpdateSubTask={updateSubTask}
                                                                                    editingTaskId={editingTaskId}
                                                                                    onSetEditingTaskId={setEditingTaskId}
                                                                                    showTaskCheckboxes={effectiveShowTaskCheckboxes}
                                                    showProjectIcons={effectiveShowProjectIcons}
                                                                                    projects={projects}
                                                                                    onProjectAssign={assignProject}
                                                                                    kanbanStages={kanbanStages}
                                                                                />
                                                                            ) : (
                                                                                activeAddSlot?.listId === list.id && activeAddSlot?.slotIdx === slot.index && (
                                                                                    <SomedayAddTask
                                                                                        listId={list.id}
                                                                                        slotIdx={slot.index}
                                                                                        onAdd={async (title) => {
                                                                                            try {
                                                                                                const res = await fetch("/api/tasks", {
                                                                                                    method: "POST",
                                                                                                    headers: { "Content-Type": "application/json" },
                                                                                                    body: JSON.stringify({
                                                                                                        title,
                                                                                                        somedayListId: list.id,
                                                                                                        somedaySlotIndex: slot.index
                                                                                                    }),
                                                                                                });
                                                                                                if (res.ok) {
                                                                                                    const data = await res.json();
                                                                                                    const newTask = {
                                                                                                        ...data.task,
                                                                                                        createdAt: new Date(data.task.createdAt),
                                                                                                        updatedAt: new Date(data.task.updatedAt),
                                                                                                    };
                                                                                                    setSomedayLists((prev) =>
                                                                                                        prev.map((l) =>
                                                                                                            l.id === list.id
                                                                                                                ? { ...l, tasks: [...l.tasks, newTask] }
                                                                                                                : l,
                                                                                                        ),
                                                                                                    );
                                                                                                }
                                                                                            } catch (e) {
                                                                                                console.error(e);
                                                                                            }
                                                                                            setActiveAddSlot(null);
                                                                                        }}
                                                                                        onCancel={() => setActiveAddSlot(null)}
                                                                                    />
                                                                                )
                                                                            )}
                                                                        </div>
                                                                    );
                                                                })}
                                                                {remainingTasks.map((task) => (
                                                                    <div key={task.id} className="task-list-slot">
                                                                        <TaskItem
                                                                            key={task.id}
                                                                            task={task}
                                                                            isEditing={editingTaskId === task.id}
                                                                            onToggle={() => toggleTask(task.id)}
                                                                            onEdit={() => setEditingTaskId(task.id)}
                                                                            onUpdate={(title) => updateTask(task.id, title)}
                                                                            onDelete={() => deleteTask(task.id)}
                                                                            onNotes={() => setSelectedTaskForNotes(task)}
                                                                            onRollToggle={() => toggleTaskRolling(task.id)}
                                                                            onRecurrence={() => setSelectedTaskForRecurrence(task)}
                                                                            onDragStart={(e, t) => handleDragStart(e, t)}
                                                                            onDragEnd={handleDragEnd}
                                                                            variant="minimal"
                                                                            isSomeday={true}
                                                                            onAddSubTask={addSubTask}
                                                                            onToggleSubTask={toggleSubTask}
                                                                            onDeleteSubTask={deleteSubTask}
                                                                            onUpdateSubTask={updateSubTask}
                                                                            editingTaskId={editingTaskId}
                                                                            onSetEditingTaskId={setEditingTaskId}
                                                                            showTaskCheckboxes={effectiveShowTaskCheckboxes}
                                                    showProjectIcons={effectiveShowProjectIcons}
                                                                            projects={projects}
                                                                            onProjectAssign={assignProject}
                                                                            kanbanStages={kanbanStages}
                                                                        />
                                                                    </div>
                                                                ))}
                                                            </>
                                                        );
                                                    })()}
                                                </div>
                                            </div>
                                            );
                                            return [indicator, listEl, endIndicator].filter(Boolean);
                                        })}

                                    {/* Modal for adding lists if needed, or just rely on placeholders */}
                                    {isAddingSomedayList && (
                                        <div
                                            className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 px-4"
                                            onClick={(e) => {
                                                e.stopPropagation();
                                                setIsAddingSomedayList(false);
                                                setSelectedSomedayProvider(null);
                                            }}
                                        >
                                            <div
                                                className="bg-white dark:bg-zinc-900 p-6 rounded-xl shadow-2xl w-full max-w-md"
                                                onClick={(e) => e.stopPropagation()}
                                            >
                                                <h3 className="text-xl font-black mb-1 flex items-center gap-2">
                                                    <Plus className="w-6 h-6" />
                                                    NEW LIST
                                                </h3>
                                                <p className="text-xs text-zinc-500 dark:text-zinc-400 mb-6 uppercase tracking-widest font-bold">
                                                    Create a new section for your tasks
                                                </p>

                                                <div className="mb-6">
                                                    <label className="block text-xs font-black text-zinc-400 dark:text-zinc-500 mb-2 uppercase tracking-tighter">
                                                        List Title
                                                    </label>
                                                    <input
                                                        autoFocus
                                                        type="text"
                                                        placeholder="NAME YOUR LIST..."
                                                        value={newSomedayListName}
                                                        onChange={(e) =>
                                                            setNewSomedayListName(e.target.value)
                                                        }
                                                        onKeyDown={(e) => {
                                                            if (e.key === "Enter") saveSomedayList();
                                                            if (e.key === "Escape") {
                                                                setIsAddingSomedayList(false);
                                                                setNewSomedayListName("");
                                                                setSelectedSomedayProvider(null);
                                                            }
                                                        }}
                                                        className="w-full p-4 bg-zinc-50 dark:bg-zinc-800/50 border-2 border-zinc-100 dark:border-zinc-800 rounded-xl focus:border-zinc-900 dark:focus:border-zinc-100 outline-none transition-all font-bold text-lg"
                                                        style={{
                                                            fontFamily: profile.taskFontFamily
                                                                ? `"${profile.taskFontFamily}"`
                                                                : "inherit",
                                                        }}
                                                    />
                                                </div>

                                                <div className="mb-8">
                                                    <label className="block text-xs font-black text-zinc-400 dark:text-zinc-500 mb-3 uppercase tracking-tighter">
                                                        Sync with External Provider (Optional)
                                                    </label>
                                                    <div
                                                        className="grid gap-2"
                                                        style={{ gridTemplateColumns: `repeat(${1 + (connections?.some(c => c.provider === "google") ? 1 : 0) + (connections?.some(c => c.provider === "outlook") ? 1 : 0) + (connections?.some(c => c.provider === "synology") ? 1 : 0)}, minmax(0, 1fr))` }}
                                                    >
                                                        <button
                                                            onClick={() => setSelectedSomedayProvider(null)}
                                                            className={`flex flex-col items-center justify-center p-3 rounded-xl border-2 transition-all ${!selectedSomedayProvider ? "border-zinc-900 bg-zinc-900 text-white" : "border-zinc-100 dark:border-zinc-800 hover:border-zinc-300 dark:hover:border-zinc-600"}`}
                                                        >
                                                            <div className="w-6 h-6 flex items-center justify-center mb-1">
                                                                <Layout size={18} />
                                                            </div>
                                                            <span className="text-[10px] font-black uppercase">
                                                                Local
                                                            </span>
                                                        </button>
                                                        {connections?.some(c => c.provider === "google") && (
                                                            <button
                                                                onClick={() =>
                                                                    setSelectedSomedayProvider("google")
                                                                }
                                                                className={`flex flex-col items-center justify-center p-3 rounded-xl border-2 transition-all ${selectedSomedayProvider === "google" ? "border-blue-500 bg-blue-50 dark:bg-blue-900/20" : "border-zinc-100 dark:border-zinc-800 hover:border-blue-200 dark:hover:border-blue-800/40"}`}
                                                            >
                                                                <div className="w-6 h-6 flex items-center justify-center mb-1">
                                                                    <FontAwesomeIcon icon={faGoogle} className="w-4 h-4 text-[#4285F4]" />
                                                                </div>
                                                                <span className="text-[10px] font-black uppercase">
                                                                    Google
                                                                </span>
                                                            </button>
                                                        )}
                                                        {connections?.some(c => c.provider === "outlook") && (
                                                            <button
                                                                onClick={() =>
                                                                    setSelectedSomedayProvider("outlook")
                                                                }
                                                                className={`flex flex-col items-center justify-center p-3 rounded-xl border-2 transition-all ${selectedSomedayProvider === "outlook" ? "border-blue-600 bg-blue-100 dark:bg-blue-900/30" : "border-zinc-100 dark:border-zinc-800 hover:border-blue-300 dark:hover:border-blue-800/50"}`}
                                                            >
                                                                <div className="w-6 h-6 flex items-center justify-center mb-1">
                                                                    <FontAwesomeIcon icon={faMicrosoft} className="w-4 h-4 text-[#00A4EF]" />
                                                                </div>
                                                                <span className="text-[10px] font-black uppercase">
                                                                    Outlook
                                                                </span>
                                                            </button>
                                                        )}
                                                        {connections?.some(c => c.provider === "synology") && (
                                                            <button
                                                                onClick={() =>
                                                                    setSelectedSomedayProvider("synology")
                                                                }
                                                                className={`flex flex-col items-center justify-center p-3 rounded-xl border-2 transition-all ${selectedSomedayProvider === "synology" ? "border-zinc-900 bg-zinc-50 dark:bg-zinc-800" : "border-zinc-100 dark:border-zinc-800 hover:border-zinc-300 dark:hover:border-zinc-600"}`}
                                                            >
                                                                <div className="w-6 h-6 flex items-center justify-center mb-1">
                                                                    <FontAwesomeIcon icon={faServer} className="w-4 h-4 text-zinc-500" />
                                                                </div>
                                                                <span className="text-[10px] font-black uppercase">
                                                                    Synology
                                                                </span>
                                                            </button>
                                                        )}
                                                    </div>
                                                </div>

                                                <div className="flex gap-3">
                                                    <button
                                                        onClick={() => {
                                                            setIsAddingSomedayList(false);
                                                            setNewSomedayListName("");
                                                            setSelectedSomedayProvider(null);
                                                        }}
                                                        className="flex-1 px-4 py-4 text-sm font-black text-zinc-500 hover:bg-zinc-100 dark:hover:bg-zinc-800 rounded-xl transition-all uppercase tracking-widest"
                                                    >
                                                        Cancel
                                                    </button>
                                                    <button
                                                        onClick={saveSomedayList}
                                                        disabled={!newSomedayListName.trim()}
                                                        className="flex-[2] px-4 py-4 bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 font-black rounded-xl hover:opacity-90 transition-all uppercase tracking-widest shadow-xl disabled:opacity-50 disabled:cursor-not-allowed"
                                                    >
                                                        Create List
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    )}
                                </div>
                            )}
                        </div>
                    </div>
                    {/* close flex row */}
                </section>
            </>
            )
            }

            {/* Search Modal */}
            <SearchModal
                isOpen={isSearchOpen}
                onClose={() => setIsSearchOpen(false)}
                tasks={tasks}
                events={calendarEvents}
                somedayLists={somedayLists}
                onSelectTask={(date) => {
                    setCurrentWeekStart(getStartOfWeek(date));
                }}
            />

            {/* Recurring Tasks Manager */}
            <RecurringTasksManager
                isOpen={isRecurringTasksOpen}
                onClose={() => setIsRecurringTasksOpen(false)}
                tasks={tasks}
                onStopRecurring={async (task) => {
                    const idToUpdate = task.id.startsWith("virtual-")
                        ? task.id.split("-")[1]
                        : task.id;
                    const dateStr = new Date().toISOString();

                    // Update locally
                    setTasks((prev) => {
                        const newTasks = [];
                        for (const t of prev) {
                            const isMatch =
                                t.title === task.title &&
                                t.userId === task.userId &&
                                t.recurrenceInterval === task.recurrenceInterval &&
                                t.recurrenceUnit === task.recurrenceUnit;

                            if (isMatch) {
                                // Remove future occurrences from the UI
                                if (t.scheduledDate && new Date(t.scheduledDate) > new Date(dateStr)) {
                                    continue;
                                }
                                newTasks.push({ ...t, recurrenceEndDate: new Date(dateStr) });
                            } else {
                                newTasks.push(t);
                            }
                        }
                        return newTasks;
                    });

                    // Update DB
                    try {
                        await fetch("/api/tasks", {
                            method: "PATCH",
                            headers: { "Content-Type": "application/json" },
                            body: JSON.stringify({
                                id: idToUpdate,
                                recurrenceEndDate: dateStr,
                            }),
                        });
                        fetchTasks();
                    } catch (error) {
                        console.error("Failed to stop recurring series:", error);
                    }
                }}
                onSeriesUpdated={() => fetchTasks()}
            />

            {/* Recurring Task Delete Confirmation Modal */}
            {
                recurringDeleteModal.isOpen && (
                    <div
                        className="fixed inset-0 bg-black/50 flex items-center justify-center z-[100] px-4"
                        onClick={() =>
                            setRecurringDeleteModal({ isOpen: false, taskId: null })
                        }
                    >
                        <div
                            className="bg-white dark:bg-zinc-900 p-8 rounded-2xl shadow-2xl w-full max-w-md border border-zinc-100 dark:border-zinc-800"
                            onClick={(e) => e.stopPropagation()}
                        >
                            <div className="flex items-center gap-3 mb-6">
                                <div className="w-12 h-12 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center text-red-600 dark:text-red-400">
                                    <Repeat size={24} />
                                </div>
                                <div>
                                    <h3 className="text-xl font-black uppercase tracking-tight">
                                        Recurring Task
                                    </h3>
                                    <p className="text-xs text-zinc-500 dark:text-zinc-400 font-bold uppercase tracking-widest">
                                        Deletion Options
                                    </p>
                                </div>
                            </div>

                            <div className="space-y-4 mb-8">
                                <div className="p-4 bg-zinc-50 dark:bg-zinc-800/50 rounded-xl border border-zinc-100 dark:border-zinc-800">
                                    <p className="text-sm font-medium text-zinc-600 dark:text-zinc-300 leading-relaxed">
                                        How would you like to delete this task?
                                    </p>
                                </div>
                            </div>

                            <div className="grid gap-3">
                                <button
                                    onClick={() =>
                                        recurringDeleteModal.taskId &&
                                        handleConfirmDeleteSeries(recurringDeleteModal.taskId)
                                    }
                                    className="group flex items-center gap-4 p-4 bg-red-600 hover:bg-red-700 text-white rounded-xl transition-all shadow-lg hover:shadow-red-500/20 text-left"
                                >
                                    <div className="w-10 h-10 bg-white/20 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
                                        <Repeat size={20} />
                                    </div>
                                    <div>
                                        <span className="block font-black uppercase text-xs tracking-widest">
                                            Entire Series
                                        </span>
                                        <span className="text-[10px] opacity-80 font-bold">
                                            Stop recurrence & remove all future
                                        </span>
                                    </div>
                                </button>

                                <button
                                    onClick={() =>
                                        recurringDeleteModal.taskId &&
                                        handleConfirmDeleteOccurrence(recurringDeleteModal.taskId)
                                    }
                                    className="group flex items-center gap-4 p-4 bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700 text-zinc-900 dark:text-zinc-100 rounded-xl transition-all text-left"
                                >
                                    <div className="w-10 h-10 bg-zinc-200 dark:bg-zinc-700 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
                                        <Calendar size={20} />
                                    </div>
                                    <div>
                                        <span className="block font-black uppercase text-xs tracking-widest">
                                            Only This One
                                        </span>
                                        <span className="text-[10px] text-zinc-500 dark:text-zinc-400 font-bold">
                                            Only remove the selected instance
                                        </span>
                                    </div>
                                </button>

                                <button
                                    onClick={() =>
                                        setRecurringDeleteModal({ isOpen: false, taskId: null })
                                    }
                                    className="w-full mt-2 p-3 text-xs font-black text-zinc-400 dark:text-zinc-500 hover:text-zinc-900 dark:hover:text-zinc-100 uppercase tracking-widest transition-colors"
                                >
                                    Cancel
                                </button>
                            </div>
                        </div>
                    </div>
                )
            }

            {/* Calendar Event Modal */}
            {
                calendarEventModal.isOpen && (
                    <CalendarEventModal
                        event={calendarEventModal.event}
                        initialDate={calendarEventModal.initialDate}
                        initialStartTime={calendarEventModal.initialStartTime}
                        connections={connections}
                        onClose={() =>
                            setCalendarEventModal({ ...calendarEventModal, isOpen: false })
                        }
                        onSave={handleEventSave}
                        onDelete={handleEventDelete}
                    />
                )
            }
            {/* Focus Mode Overlay */}
            {
                showFocusMode && (
                    <FocusModeOverlay
                        task={(() => {
                            // Logic to find the "Next Task"
                            // 1. Tasks for today with start time, sorted by time
                            // 2. Tasks for today without start time, sorted by order
                            // 3. Tasks rolling over from previous days

                            const now = new Date();
                            const todayStr = now.toISOString().split("T")[0];

                            // Get all tasks relevant for "Now"
                            const activeTasks = tasks.filter(
                                (t) =>
                                    !t.completed &&
                                    !t.somedayListId &&
                                    // Scheduled for today
                                    ((t.scheduledDate &&
                                        new Date(t.scheduledDate).toISOString().split("T")[0] ===
                                        todayStr) ||
                                        // Or rolling and overdue (simplified, assuming rolling means show on today if not done)
                                        (t.isRolling &&
                                            (!t.scheduledDate || new Date(t.scheduledDate) <= now)) ||
                                        // Or implicitly today if within current view logic (e.g. dayOfWeek match in current week)
                                        // But let's stick to explicit date or rolling for Focus Mode to be precise.
                                        (!t.scheduledDate &&
                                            t.dayOfWeek === now.getDay() &&
                                            isSameDay(
                                                currentWeekStart,
                                                getStartOfWeek(now, weekStartDay),
                                            ))),
                            );

                            // Sort: Time-based first, then Order
                            activeTasks.sort((a, b) => {
                                if (a.startTime && b.startTime)
                                    return a.startTime.localeCompare(b.startTime);
                                if (a.startTime) return -1;
                                if (b.startTime) return 1;
                                return a.order - b.order;
                            });

                            return activeTasks.length > 0 ? activeTasks[0] : null;
                        })()}
                        duration={focusTimerDuration}
                        onClose={() => setShowFocusMode(false)}
                        onComplete={(taskId) => toggleTask(taskId)}
                    />
                )
            }

            {/* Settings Sidebar */}
            {
                showSettings && (
                    <SettingsSidebar
                        initialTab={activeTab}
                        onRemoveConnection={handleRemoveConnection}
                        onClose={() => {
                            setShowSettings(false);
                            if (profile.hasCompletedOnboarding === false && localStorage.getItem("onboarding_step")) {
                                setShowOnboarding(true);
                            }
                        }}
                        onSettingsChanged={handleSettingsChanged}
                        showTimeGrid={showTimeGrid}
                        setShowTimeGrid={setShowTimeGrid}
                        cellDuration={cellDuration}
                        setCellDuration={setCellDuration}
                        weekStartDay={weekStartDay}
                        setWeekStartDay={setWeekStartDay}
                        viewStyle={viewStyle}
                        setViewStyle={setViewStyle}
                        showSomeday={showSomeday}
                        setShowSomeday={setShowSomeday}
                        showAllDay={showAllDay}
                        setShowAllDay={setShowAllDay}
                        showSchedule={showSchedule}
                        setShowSchedule={setShowSchedule}
                        goal={goal}
                        setGoal={setGoal}
                        saveGoal={saveGoal}
                        connections={connections}
                        onUpdateConnections={setConnections}
                        focusTimerDuration={focusTimerDuration}
                        setFocusTimerDuration={setFocusTimerDuration}
                        focusBreakDuration={focusBreakDuration}
                        setFocusBreakDuration={setFocusBreakDuration}
                        fontSize={fontSize}
                        setFontSize={setFontSize}
                        showNextTask={showNextTask}
                        setShowNextTask={setShowNextTask}
                        headlineFont={headlineFont}
                        headlineFontSize={headlineFontSize}
                        headlineFontWeight={headlineFontWeight}
                        dateFontFamily={dateFontFamily}
                        dateFontSize={dateFontSize}
                        dateFontWeight={dateFontWeight}
                        timeTaskFontFamily={timeTaskFontFamily}
                        timeTaskFontSize={timeTaskFontSize}
                        timeTaskFontWeight={timeTaskFontWeight}
                        bodyFont={bodyFont}
                        taskFontFamily={taskFontFamily}
                        taskFontSize={taskFontSize}
                        taskFontWeight={taskFontWeight}
                        fontWeight={fontWeight}
                        weekendColorSat={weekendColorSat}
                        weekendColorSun={weekendColorSun}
                        protectEventTimes={protectEventTimes}
                        setProtectEventTimes={setProtectEventTimes}
                        goalFontWeight={profile.goalFontWeight || "500"}
                        goalFallbackType={profile.goalFallbackType}
                        goalDefaultSentence={profile.goalDefaultSentence}
                        importingTasksState={importingTasksState}
                        executeImport={executeImport}
                        onImportLists={(lists) => doImport("apple", lists)}
                        importStatusMsg={importStatusMsg}
                        hourLabelFormat={hourLabelFormat}
                        setHourLabelFormat={setHourLabelFormat}
                        showSubHourSlots={showSubHourSlots}
                        setShowSubHourSlots={setShowSubHourSlots}
                        allDayPosition={allDayPosition}
                        setAllDayPosition={setAllDayPosition}
                        saveSetting={saveSetting}
                        availableTaskLists={availableTaskLists}
                        isFetchingProviderLists={isFetchingProviderLists}
                        somedayLists={somedayLists}
                        handleToggleTaskList={handleToggleTaskList}
                        unsyncConfirm={unsyncConfirm}
                        onConfirmUnsync={confirmUnsync}
                        onCancelUnsync={() => setUnsyncConfirm(null)}
                        handleSyncAll={handleSyncAll}
                        fetchAvailableTaskLists={fetchAvailableTaskLists}
                        setCurrentWeekStart={setCurrentWeekStart}
                        projects={projects}
                        onProjectsChanged={fetchProjects}
                        kanbanStages={kanbanStages}
                        saveKanbanStages={saveKanbanStages}
                        profile={profile}
                        setProfile={setProfile}
                        isMobile={isMobile}
                        mobileActions={{
                            goToPrevWeek,
                            goToPrevDay,
                            goToToday,
                            goToNextDay,
                            goToNextWeek,
                            onJumpToDate: () => setShowDatePicker(true),
                            onAddCalendarEvent: () => {
                                const now = new Date();
                                setCalendarEventModal({ isOpen: true, event: undefined, initialDate: now, initialStartTime: `${String(now.getHours()).padStart(2, "0")}:00` });
                            },
                            onAddProject: () => { setShowProjectsSidebar(true); },
                            onRecurringTasks: () => setIsRecurringTasksOpen(true),
                            onToggleNextTask: () => { const newVal = !showNextTask; setShowNextTask(newVal); saveSetting("showNextTask", newVal); },
                            onFocusMode: () => setShowFocusMode(true),
                            onToggleDarkMode: () => setDarkMode(!darkMode),
                            onSearch: () => setIsSearchOpen(true),
                            onUndo: handleUndo,
                            onRedo: handleRedo,
                            onRefresh: () => { fetchCalendarEvents(true); fetchTasks(); },
                            darkMode,
                            showNextTask,
                            undoCount,
                            redoCount,
                            viewDays,
                            onViewDaysChange: (num: number) => { setViewDays(num); savedViewDaysRef.current = num; saveSetting("viewDays", num); },
                            showTimeGrid,
                            cellDuration,
                            onCellDurationChange: (d: CellDuration) => { setCellDuration(d); saveSetting("cellDuration", d); },
                            viewStyle,
                            onViewStyleChange: (s: string) => { setViewStyle(s as any); saveSetting("viewStyle", s); },
                            startHour,
                            endHour,
                            onStartHourChange: (h: number) => { setStartHour(h); saveSetting("startHour", h); },
                            onEndHourChange: (h: number) => { setEndHour(h); saveSetting("endHour", h); },
                        }}
                        perView={{
                            saveViewSetting: saveViewSetting as any,
                            getEffective: getEffective as any,
                        }}
                        onRunSetupAssistant={() => setShowOnboarding(true)}
                    />
                )
            }

            {
                selectedTaskForRecurrence && (
                    <TaskRecurrenceModal
                        task={selectedTaskForRecurrence}
                        onClose={() => setSelectedTaskForRecurrence(null)}
                        onSave={handleRecurrenceSave}
                        language={language}
                    />
                )
            }

            {/* Onboarding Wizard */}
            {showOnboarding && (
                <OnboardingWizard
                    profile={profile}
                    darkMode={darkMode}
                    language={language}
                    connections={connections}
                    onComplete={async () => { await saveSetting("hasCompletedOnboarding", true); setShowOnboarding(false); await fetchProfile(); }}
                    onSkip={async () => { await saveSetting("hasCompletedOnboarding", true); setShowOnboarding(false); await fetchProfile(); }}
                    saveSetting={saveSetting}
                    onLanguageChange={(lang: string) => { setLanguage(lang); }}
                    onDarkModeToggle={() => setDarkMode(!darkMode)}
                    onConnectProvider={(provider: string) => {
                        setShowOnboarding(false);
                        setActiveTab("calendar");
                        setShowSettings(true);
                    }}
                />
            )}

            {
                selectedTaskForNotes && (
                    <NotesSidebar
                        task={selectedTaskForNotes}
                        onClose={() => setSelectedTaskForNotes(null)}
                        updateTaskNotes={updateTaskNotes}
                    />
                )
            }

            {/* Kanban Detail Modal */}
            {kanbanDetailTask && (() => {
                const task = kanbanDetailTask;
                // Re-resolve the task from state to get latest data
                const liveTask = findTaskAnywhere(task.id) || task;
                return (
                    <div className="kanban-detail-overlay" onClick={() => setKanbanDetailTask(null)}>
                        <div className="kanban-detail-modal" onClick={(e) => e.stopPropagation()}>
                            {/* Header */}
                            <div className="kanban-detail-header">
                                <div style={{ display: "flex", alignItems: "center", gap: "8px", flex: 1 }}>
                                    <input
                                        type="checkbox"
                                        checked={liveTask.completed}
                                        onChange={() => { toggleTask(liveTask.id); setKanbanDetailTask({ ...liveTask, completed: !liveTask.completed }); }}
                                        style={{ width: "18px", height: "18px", cursor: "pointer", accentColor: "var(--weekly-accent, #6366f1)" }}
                                    />
                                    <input
                                        type="text"
                                        defaultValue={liveTask.title}
                                        onBlur={(e) => {
                                            const val = e.target.value.trim();
                                            if (val && val !== liveTask.title) {
                                                updateTask(liveTask.id, val);
                                                setKanbanDetailTask({ ...liveTask, title: val });
                                            }
                                        }}
                                        onKeyDown={(e) => { if (e.key === "Enter") (e.target as HTMLInputElement).blur(); }}
                                        className="kanban-detail-title-input"
                                    />
                                </div>
                                <button onClick={() => setKanbanDetailTask(null)} className="kanban-detail-close">
                                    <X size={18} />
                                </button>
                            </div>

                            <div className="kanban-detail-body">
                                {/* Meta row: project, stage, date */}
                                <div className="kanban-detail-meta">
                                    {/* Project picker */}
                                    <div className="kanban-detail-field">
                                        <label><Tag size={13} /> {t.project || "Project"}</label>
                                        <select
                                            value={liveTask.projectId || ""}
                                            onChange={(e) => {
                                                const pid = e.target.value || null;
                                                assignProject(liveTask.id, pid);
                                                const proj = pid ? projects.find(p => p.id === pid) || null : null;
                                                setKanbanDetailTask({ ...liveTask, projectId: pid, project: proj });
                                            }}
                                            className="kanban-detail-select"
                                        >
                                            <option value="">{t.noProject || "No project"}</option>
                                            {projects.map(p => (
                                                <option key={p.id} value={p.id}>{p.name}</option>
                                            ))}
                                        </select>
                                    </div>

                                    {/* Kanban stage picker */}
                                    <div className="kanban-detail-field">
                                        <label><Kanban size={13} /> {t.stage || "Stage"}</label>
                                        <select
                                            value={liveTask.kanbanStage || ""}
                                            onChange={(e) => {
                                                const stage = e.target.value || null;
                                                updateTaskFields(liveTask.id, { kanbanStage: stage });
                                                setKanbanDetailTask({ ...liveTask, kanbanStage: stage });
                                            }}
                                            className="kanban-detail-select"
                                        >
                                            <option value="">{t.noStage || "No stage"}</option>
                                            {kanbanStages.map(s => (
                                                <option key={s.id} value={s.id}>{s.name}</option>
                                            ))}
                                        </select>
                                    </div>

                                    {/* Due date */}
                                    <div className="kanban-detail-field">
                                        <label><CalendarDays size={13} /> {t.dueDate || "Due date"}</label>
                                        <input
                                            type="date"
                                            value={liveTask.scheduledDate ? new Date(liveTask.scheduledDate).toISOString().split("T")[0] : ""}
                                            onChange={(e) => {
                                                const val = e.target.value || null;
                                                updateTaskFields(liveTask.id, { scheduledDate: val });
                                                setKanbanDetailTask({ ...liveTask, scheduledDate: val });
                                            }}
                                            className="kanban-detail-date"
                                        />
                                    </div>

                                    {/* Someday list */}
                                    <div className="kanban-detail-field">
                                        <label><ListTodo size={13} /> {t.list || "List"}</label>
                                        <select
                                            value={liveTask.somedayListId || ""}
                                            onChange={(e) => {
                                                const lid = e.target.value || null;
                                                updateTaskFields(liveTask.id, { somedayListId: lid });
                                                setKanbanDetailTask({ ...liveTask, somedayListId: lid });
                                                fetchTasks();
                                            }}
                                            className="kanban-detail-select"
                                        >
                                            <option value="">—</option>
                                            {somedayLists.map(sl => (
                                                <option key={sl.id} value={sl.id}>{sl.title}</option>
                                            ))}
                                        </select>
                                    </div>
                                </div>

                                {/* Notes */}
                                <div className="kanban-detail-section">
                                    <label><FileText size={13} /> {t.notes || "Notes"}</label>
                                    <textarea
                                        defaultValue={liveTask.markdownContent || ""}
                                        onBlur={(e) => {
                                            const val = e.target.value;
                                            if (val !== (liveTask.markdownContent || "")) {
                                                updateTaskNotes(liveTask.id, val);
                                                setKanbanDetailTask({ ...liveTask, markdownContent: val });
                                            }
                                        }}
                                        placeholder={language === "de" ? "Notizen hinzufügen..." : "Add notes..."}
                                        className="kanban-detail-notes"
                                        rows={4}
                                    />
                                </div>

                                {/* Subtasks */}
                                <div className="kanban-detail-section">
                                    <label><Check size={13} /> {t.subtasks || "Subtasks"}</label>
                                    <div className="kanban-detail-subtasks">
                                        {(liveTask.subTasks || []).map(sub => (
                                            <div key={sub.id} className="kanban-detail-subtask">
                                                <input
                                                    type="checkbox"
                                                    checked={sub.completed}
                                                    onChange={() => toggleSubTask(sub.id)}
                                                    style={{ accentColor: "var(--weekly-accent, #6366f1)" }}
                                                />
                                                <input
                                                    type="text"
                                                    defaultValue={sub.title}
                                                    onBlur={(e) => {
                                                        const val = e.target.value.trim();
                                                        if (!val) deleteSubTask(sub.id);
                                                        else if (val !== sub.title) updateSubTask(sub.id, val);
                                                    }}
                                                    onKeyDown={(e) => { if (e.key === "Enter") (e.target as HTMLInputElement).blur(); }}
                                                    className={`kanban-detail-subtask-title ${sub.completed ? "completed" : ""}`}
                                                />
                                                <button onClick={() => deleteSubTask(sub.id)} className="kanban-detail-subtask-delete">
                                                    <X size={12} />
                                                </button>
                                            </div>
                                        ))}
                                        <form
                                            onSubmit={(e) => {
                                                e.preventDefault();
                                                const input = (e.target as HTMLFormElement).elements.namedItem("newSub") as HTMLInputElement;
                                                const val = input.value.trim();
                                                if (val) {
                                                    addSubTask(liveTask.id, val);
                                                    input.value = "";
                                                    // Refresh modal task after adding
                                                    setTimeout(() => {
                                                        const refreshed = findTaskAnywhere(liveTask.id);
                                                        if (refreshed) setKanbanDetailTask(refreshed);
                                                    }, 300);
                                                }
                                            }}
                                            className="kanban-detail-subtask-add"
                                        >
                                            <Plus size={14} />
                                            <input
                                                name="newSub"
                                                type="text"
                                                placeholder={language === "de" ? "Unteraufgabe hinzufügen..." : "Add subtask..."}
                                                className="kanban-detail-subtask-input"
                                            />
                                        </form>
                                    </div>
                                </div>
                            </div>

                            {/* Footer */}
                            <div className="kanban-detail-footer">
                                <button
                                    onClick={() => { deleteTask(liveTask.id); setKanbanDetailTask(null); }}
                                    className="kanban-detail-delete"
                                    title={language === "de" ? "Löschen" : "Delete"}
                                >
                                    <Trash2 size={16} />
                                </button>
                                <div className="kanban-detail-footer-right">
                                    <button
                                        onClick={() => setKanbanDetailTask(null)}
                                        className="kanban-detail-btn kanban-detail-btn-cancel"
                                    >
                                        {language === "de" ? "Abbrechen" : "Cancel"}
                                    </button>
                                    <button
                                        onClick={() => setKanbanDetailTask(null)}
                                        className="kanban-detail-btn kanban-detail-btn-ok"
                                    >
                                        OK
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                );
            })()}

            <ImportListModal
                isOpen={isImportModalOpen}
                onClose={() => setIsImportModalOpen(false)}
                onImport={handleConfirmImport}
                provider={importProvider}
                lists={importLists}
                isLoading={isFetchingLists}
            />

            {/* Mobile: Floating Action Button with quick menu */}
            {isMobile && !showMobileFabSheet && !showSettings && !showFocusMode && (
                <>
                    {showMobileFabMenu && (
                        <div className="mobile-fab-backdrop" onClick={() => setShowMobileFabMenu(false)} />
                    )}
                    {showMobileFabMenu && (
                        <div className="mobile-fab-menu">
                            <button className="mobile-fab-menu-item" onClick={() => { setShowMobileFabMenu(false); setShowMobileFabSheet(true); }}>
                                <div className="mobile-fab-menu-icon" style={{ background: "#0ea5e9" }}><Plus size={18} /></div>
                                <span>{language === "de" ? "Aufgabe" : "Task"}</span>
                            </button>
                            <button className="mobile-fab-menu-item" onClick={() => {
                                setShowMobileFabMenu(false);
                                const now = new Date();
                                setCalendarEventModal({ isOpen: true, event: undefined, initialDate: now, initialStartTime: `${String(now.getHours()).padStart(2, "0")}:00` });
                            }}>
                                <div className="mobile-fab-menu-icon" style={{ background: "#8b5cf6" }}><Calendar size={18} /></div>
                                <span>{language === "de" ? "Termin" : "Event"}</span>
                            </button>
                            <button className="mobile-fab-menu-item" onClick={() => { setShowMobileFabMenu(false); setShowFocusMode(true); }}>
                                <div className="mobile-fab-menu-icon" style={{ background: "#f59e0b" }}><Zap size={18} /></div>
                                <span>{language === "de" ? "Fokus" : "Focus"}</span>
                            </button>
                            <button className="mobile-fab-menu-item" onClick={() => { setShowMobileFabMenu(false); setIsSearchOpen(true); }}>
                                <div className="mobile-fab-menu-icon" style={{ background: "#10b981" }}><Search size={18} /></div>
                                <span>{language === "de" ? "Suche" : "Search"}</span>
                            </button>
                            <button className="mobile-fab-menu-item" onClick={() => { setShowMobileFabMenu(false); setShowProjectsSidebar(true); }}>
                                <div className="mobile-fab-menu-icon" style={{ background: "#6366f1" }}><FolderPlus size={18} /></div>
                                <span>{language === "de" ? "Projekt" : "Project"}</span>
                            </button>
                        </div>
                    )}
                    <button
                        className={`mobile-fab ${showMobileFabMenu ? "active" : ""}`}
                        onClick={() => setShowMobileFabMenu(!showMobileFabMenu)}
                    >
                        <Plus size={28} style={{ transform: showMobileFabMenu ? "rotate(45deg)" : "rotate(0deg)", transition: "transform 0.2s ease" }} />
                    </button>
                </>
            )}

            {/* Mobile: Bottom Sheet for task creation */}
            {isMobile && showMobileFabSheet && (
                <>
                    <div className="bottom-sheet-backdrop" onClick={() => { setShowMobileFabSheet(false); setFabTaskTitle(""); }} />
                    <div className="bottom-sheet">
                        <div className="bottom-sheet-handle" />
                        <textarea
                            ref={fabTextareaRef}
                            value={fabTaskTitle}
                            onChange={(e) => setFabTaskTitle(e.target.value)}
                            onKeyDown={(e) => {
                                if (e.key === "Enter" && !e.shiftKey) {
                                    e.preventDefault();
                                    if (fabTaskTitle.trim()) {
                                        // Find today's date and add task
                                        const today = new Date();
                                        const todayStr = formatDateToISO(today);
                                        addTask(today, fabTaskTitle.trim());
                                        setFabTaskTitle("");
                                        setShowMobileFabSheet(false);
                                    }
                                }
                            }}
                            placeholder="What do you need to do?"
                            rows={2}
                            style={{
                                width: "100%",
                                border: `1px solid ${darkMode ? "#374151" : "#e5e7eb"}`,
                                borderRadius: "12px",
                                padding: "12px 16px",
                                fontSize: "1rem",
                                background: darkMode ? "#111827" : "#f9fafb",
                                color: darkMode ? "#e5e7eb" : "#333",
                                outline: "none",
                                resize: "none",
                                fontFamily: "inherit",
                            }}
                        />
                        <div style={{ display: "flex", justifyContent: "flex-end", marginTop: "12px", gap: "8px" }}>
                            <button
                                onClick={() => { setShowMobileFabSheet(false); setFabTaskTitle(""); }}
                                style={{ padding: "8px 16px", borderRadius: "8px", border: "none", background: darkMode ? "#374151" : "#e5e7eb", color: darkMode ? "#e5e7eb" : "#333", fontSize: "0.85rem", cursor: "pointer" }}
                            >
                                Cancel
                            </button>
                            <button
                                onClick={() => {
                                    if (fabTaskTitle.trim()) {
                                        const today = new Date();
                                        addTask(today, fabTaskTitle.trim());
                                        setFabTaskTitle("");
                                        setShowMobileFabSheet(false);
                                    }
                                }}
                                style={{ padding: "8px 16px", borderRadius: "8px", border: "none", background: "#0ea5e9", color: "white", fontSize: "0.85rem", fontWeight: 600, cursor: "pointer" }}
                            >
                                Add Task
                            </button>
                        </div>
                    </div>
                </>
            )}

            {/* Mobile: Date Picker as centered modal overlay */}
            {isMobile && showDatePicker && (
                <div className="mobile-date-picker-overlay" onClick={() => setShowDatePicker(false)}>
                    <div onClick={(e) => e.stopPropagation()}>
                        <SimpleDatePicker
                            selected={currentWeekStart}
                            onSelect={(date) => {
                                setCurrentWeekStart(getStartOfWeek(date));
                                setShowDatePicker(false);
                            }}
                            onClose={() => setShowDatePicker(false)}
                            language={language}
                        />
                    </div>
                </div>
            )}
        </div >
    );
}

// Task Input Component
interface TaskInputProps {
    onAddTask: (title: string) => void;
    onDragOver: (e: React.DragEvent) => void;
    onDrop: (e: React.DragEvent) => void;
}

function TaskInput({ onAddTask, onDragOver, onDrop }: TaskInputProps) {
    const [newTaskTitle, setNewTaskTitle] = useState("");

    const handleAddTask = () => {
        if (newTaskTitle.trim()) {
            onAddTask(newTaskTitle);
            setNewTaskTitle("");
        }
    };

    return (
        <div
            className="weekly-task-input"
            onDragOver={onDragOver}
            onDrop={onDrop}
        >
            <textarea
                value={newTaskTitle}
                onChange={(e) => setNewTaskTitle(e.target.value)}
                onKeyDown={(e) => {
                    if (e.key === "Enter" && !e.shiftKey) {
                        e.preventDefault();
                        handleAddTask();
                    }
                }}
                placeholder="Type a to-do..."
                rows={newTaskTitle.split("\n").length || 1}
                style={{
                    resize: "none",
                    overflow: "hidden",
                    fontFamily: "inherit",
                    lineHeight: "inherit",
                    width: "100%",
                    border: "none",
                    background: "transparent",
                    outline: "none",
                    padding: "inherit",
                    fontSize: "inherit",
                }}
            />
        </div>
    );
}

function SomedayAddTask({
    listId,
    onAdd,
    onCancel,
    slotIdx,
}: {
    listId: string;
    onAdd: (title: string) => void;
    onCancel?: () => void;
    slotIdx?: number;
}) {
    const [title, setTitle] = useState("");
    const inputRef = useRef<HTMLInputElement>(null);

    const handleSubmit = () => {
        if (title.trim()) {
            onAdd(title.trim());
            setTitle("");
        } else if (onCancel) {
            onCancel();
        }
    };

    useEffect(() => {
        if (slotIdx !== undefined && inputRef.current) {
            inputRef.current.focus();
        }
    }, [slotIdx]);

    return (
        <li
            className="weekly-task-item minimal"
            style={{
                margin: slotIdx !== undefined ? "0" : "0 0.5rem",
                listStyle: "none",
                width: "100%"
            }}
        >
            <form
                onSubmit={(e) => {
                    e.preventDefault();
                    handleSubmit();
                }}
                style={{ width: "100%" }}
            >
                <input
                    ref={inputRef}
                    type="text"
                    value={title}
                    onChange={(e) => setTitle(e.target.value)}
                    onBlur={handleSubmit}
                    onKeyDown={(e) => {
                        if (e.key === "Escape") {
                            setTitle("");
                            if (onCancel) onCancel();
                            else e.currentTarget.blur();
                        }
                    }}
                    className="weekly-task-text"
                    style={{
                        width: "100%",
                        border: "none",
                        background: "transparent",
                        padding: "0 0",
                        fontSize: "0.9375rem",
                        outline: "none",
                        height: slotIdx !== undefined ? "auto" : "24px",
                        display: "block", 
                    }}
                    placeholder={slotIdx !== undefined ? "" : "Add task..."}
                    data-someday-add-input={slotIdx !== undefined ? undefined : listId}
                />
            </form>
        </li>
    );
}

// Task Item Component
interface TaskItemProps {
    task: Task;
    isEditing: boolean;
    onToggle: () => void;
    onEdit: () => void;
    onUpdate: (title: string) => void;
    onDelete: () => void;
    onNotes: (notes: string) => void;
    onRollToggle: () => void;
    onRecurrence: () => void;
    onDragStart: (e: DragEvent, task: Task) => void;
    onDragEnd: () => void;
    variant?: "default" | "minimal";
    isSomeday?: boolean;
    onAddSubTask?: (parentId: string, title: string) => void;
    onToggleSubTask?: (subTaskId: string) => void;
    onDeleteSubTask?: (subTaskId: string) => void;
    onUpdateSubTask?: (subTaskId: string, title: string) => void;
    editingTaskId?: string | null;
    onSetEditingTaskId?: (id: string | null) => void;
    isSubTask?: boolean;
    showTaskCheckboxes?: boolean;
    showProjectIcons?: boolean;
    projects?: { id: string; name: string; icon?: string | null; color?: string | null }[];
    onProjectAssign?: (taskId: string, projectId: string | null) => void;
    kanbanStages?: KanbanStage[];
}

function TaskItem({
    task,
    isEditing,
    onToggle,
    onEdit,
    onUpdate,
    onDelete,
    onNotes,
    onRollToggle,
    onRecurrence,
    onDragStart,
    onDragEnd,
    variant = "default",
    isSomeday = false,
    onAddSubTask,
    onToggleSubTask,
    onDeleteSubTask,
    onUpdateSubTask,
    editingTaskId,
    onSetEditingTaskId,
    isSubTask = false,
    showTaskCheckboxes = false,
    showProjectIcons = false,
    projects = [],
    onProjectAssign,
    kanbanStages = [],
}: TaskItemProps) {
    const [editValue, setEditValue] = useState(task.title);
    const [isNotesOpen, setIsNotesOpen] = useState(false);
    const [notesValue, setNotesValue] = useState(task.markdownContent || "");
    const [isSubTaskInputOpen, setIsSubTaskInputOpen] = useState(false);
    const [isSubTasksOpen, setIsSubTasksOpen] = useState(false);
    const [newSubTaskTitle, setNewSubTaskTitle] = useState("");
    const [showProjectPicker, setShowProjectPicker] = useState(false);
    const projectPickerRef = useRef<HTMLDivElement>(null);
    const inputRef = useRef<HTMLTextAreaElement>(null);
    const notesRef = useRef<HTMLTextAreaElement>(null);
    const subTaskInputRef = useRef<HTMLInputElement>(null);

    // Touch: tap-to-reveal actions
    const [touchActive, setTouchActive] = useState(false);
    const taskItemRef = useRef<HTMLLIElement>(null);

    // Touch: swipe gesture state
    const [swipeX, setSwipeX] = useState(0);
    const swipeTouchStart = useRef({ x: 0, y: 0, swiping: false });

    // Close touch-active on outside click
    useEffect(() => {
        if (!touchActive) return;
        const handler = (e: Event) => {
            if (taskItemRef.current && !taskItemRef.current.contains(e.target as Node)) {
                setTouchActive(false);
            }
        };
        document.addEventListener("touchstart", handler);
        document.addEventListener("mousedown", handler);
        return () => {
            document.removeEventListener("touchstart", handler);
            document.removeEventListener("mousedown", handler);
        };
    }, [touchActive]);

    // Close project picker on outside click
    useEffect(() => {
        if (!showProjectPicker) return;
        const handler = (e: Event) => {
            if (projectPickerRef.current && !projectPickerRef.current.contains(e.target as Node)) {
                setShowProjectPicker(false);
            }
        };
        document.addEventListener("mousedown", handler);
        return () => document.removeEventListener("mousedown", handler);
    }, [showProjectPicker]);

    const needsSync = task.externalProvider && (
        !task.externalId ||
        !task.lastSyncedAt ||
        new Date(task.updatedAt) > new Date(task.lastSyncedAt)
    );

    useEffect(() => {
        if (isEditing && inputRef.current) {
            inputRef.current.focus();
            inputRef.current.select();
        }
    }, [isEditing]);

    // Focus notes when opened
    useEffect(() => {
        if (isNotesOpen && notesRef.current) {
            notesRef.current.focus();
        }
    }, [isNotesOpen]);

    const handleSubmit = (e: React.FormEvent) => {
        e.preventDefault();
        onUpdate(editValue);
    };

    const handleKeyDown = (e: React.KeyboardEvent) => {
        if (e.key === "Enter" && !e.shiftKey) {
            e.preventDefault();
            (e.target as HTMLElement).blur();
        }
        if (e.key === "Escape") {
            setEditValue(task.title);
            onUpdate(task.title);
        }
    };

    const handleNotesBlur = () => {
        if (notesValue !== task.markdownContent) {
            onNotes(notesValue);
        }
    };

    // Markdown insertion helper
    const insertMarkdown = (prefix: string, suffix: string = "") => {
        if (!notesRef.current) return;

        const start = notesRef.current.selectionStart;
        const end = notesRef.current.selectionEnd;
        const text = notesValue;
        const before = text.substring(0, start);
        const selection = text.substring(start, end);
        const after = text.substring(end);

        const newText = `${before}${prefix}${selection}${suffix}${after}`;
        setNotesValue(newText);

        setTimeout(() => {
            if (notesRef.current) {
                notesRef.current.focus();
                const newCursorPos =
                    start + prefix.length + selection.length + suffix.length;
                notesRef.current.setSelectionRange(newCursorPos, newCursorPos);
            }
        }, 0);
    };

    return (
        <li
            ref={taskItemRef}
            className={`weekly-task-item ${variant} ${task.completed ? "completed" : ""} ${task.completed && showTaskCheckboxes ? "completed-with-checkbox" : ""} ${isSomeday ? "relative mx-2 w-full" : ""} ${touchActive ? "touch-active" : ""} ${showProjectPicker ? "picker-open" : ""} ${swipeX !== 0 ? "task-swipe-container" : ""}`}
            style={(() => {
                const stageColor = task.kanbanStage ? kanbanStages.find(s => s.id === task.kanbanStage)?.color : null;
                if (stageColor) return { borderLeft: `4px solid ${stageColor}`, paddingLeft: "6px" };
                if (task.project?.color) return { borderLeft: `3px solid ${task.project.color}`, paddingLeft: "6px" };
                return undefined;
            })()}
            draggable={!isEditing && !isNotesOpen && swipeX === 0}
            onDragStart={(e) => {
                // If dragging a subtask, don't drag the parent
                const target = e.target as HTMLElement;
                if (target.closest('.subtask-list')) {
                    e.stopPropagation();
                    return;
                }
                onDragStart(e as unknown as DragEvent, task);
            }}
            onDragEnd={onDragEnd}
            onClick={(e) => {
                // Touch: toggle action toolbar on tap
                if (window.matchMedia("(pointer: coarse)").matches && !isEditing) {
                    const target = e.target as HTMLElement;
                    if (target.closest(".task-actions") || target.closest("button")) return;
                    setTouchActive(!touchActive);
                    return;
                }
                if ((variant === "minimal" || isSomeday) && !isEditing) {
                    const target = e.target as HTMLElement;
                    if (
                        target.tagName === "BUTTON" ||
                        target.tagName === "INPUT" ||
                        target.closest("button")
                    )
                        return;
                    onEdit();
                }
            }}
            onTouchStart={() => {
                // No task-level swipe — container handles day navigation
            }}
        >
            {/* Swipe indicators */}
            {swipeX > 20 && (
                <div className="task-swipe-indicator complete" style={{ width: Math.abs(swipeX) }}>
                    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><polyline points="20 6 9 17 4 12" /></svg>
                </div>
            )}
            {swipeX < -20 && (
                <div className="task-swipe-indicator delete" style={{ width: Math.abs(swipeX) }}>
                    <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round"><line x1="18" y1="6" x2="6" y2="18" /><line x1="6" y1="6" x2="18" y2="18" /></svg>
                </div>
            )}
            <div style={{ width: "100%", position: "relative", transform: swipeX !== 0 ? `translateX(${swipeX}px)` : undefined, transition: swipeX === 0 ? "transform 0.2s ease" : "none", background: "inherit" }}>
                {/* Visual Indicator for Rolling Tasks */}
                {task.isRolling && !task.completed && !isSomeday && (
                    <div className="rolling-icon-indicator" title="Auto-rolling task">
                        <svg
                            viewBox="0 0 24 24"
                            width="10"
                            height="10"
                            stroke="currentColor"
                            strokeWidth="3"
                            fill="none"
                            strokeLinecap="round"
                            strokeLinejoin="round"
                        >
                            <polyline points="23 4 23 10 17 10"></polyline>
                            <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
                        </svg>
                    </div>
                )}

                <div
                    style={{
                        display: "flex",
                        alignItems: "flex-start",
                        gap: "0.5rem",
                        width: "100%",
                    }}
                >
                    {isEditing ? (
                        <form onSubmit={handleSubmit} style={{ flex: 1, display: "flex" }}>
                            {variant === "minimal" ? (
                                <textarea
                                    ref={inputRef}
                                    className="weekly-task-text"
                                    value={editValue}
                                    onChange={(e) => setEditValue(e.target.value)}
                                    onKeyDown={handleKeyDown}
                                    onBlur={() => onUpdate(editValue)}
                                    rows={editValue.split("\n").length || 1}
                                    style={{
                                        border: "none",
                                        background: "transparent",
                                        outline: "none",
                                        width: "100%",
                                        padding: "0",
                                        resize: "none",
                                        overflow: "hidden",
                                        fontFamily: "inherit",
                                        fontSize: "inherit",
                                        fontWeight: "inherit",
                                        lineHeight: "inherit",
                                    }}
                                />
                            ) : (
                                <textarea
                                    ref={inputRef}
                                    className="weekly-task-text"
                                    value={editValue}
                                    onChange={(e) => setEditValue(e.target.value)}
                                    onKeyDown={handleKeyDown}
                                    onBlur={() => onUpdate(editValue)}
                                    rows={editValue.split("\n").length || 1}
                                    style={{
                                        resize: "none",
                                        overflow: "hidden",
                                        fontFamily: "inherit",
                                        lineHeight: "inherit",
                                    }}
                                />
                            )}
                        </form>
                    ) : (
                        <>
                            <span
                                className={`weekly-task-text flex-1 ${task.completed ? "completed" : ""}`}
                                onClick={(e) => {
                                    if (variant === "default" && !showTaskCheckboxes) onToggle();
                                    // For minimal/someday, parent onClick handles edit
                                }}
                                onDoubleClick={variant === "default" ? onEdit : undefined}
                                style={
                                    variant === "minimal" || isSomeday
                                        ? { display: "flex", alignItems: "center", gap: "4px", ...(task.completed && showTaskCheckboxes ? { opacity: 0.5 } : {}) }
                                        : { display: "flex", alignItems: "center", gap: "6px", ...(task.completed && showTaskCheckboxes ? { opacity: 0.5 } : {}) }
                                }
                            >
                                {showTaskCheckboxes && (
                                    <input
                                        type="checkbox"
                                        checked={task.completed}
                                        onChange={(e) => { e.stopPropagation(); onToggle(); }}
                                        onClick={(e) => e.stopPropagation()}
                                        className="task-checkbox flex-shrink-0"
                                        style={{ 
                                            width: "16px", 
                                            height: "16px", 
                                            margin: 0, 
                                            cursor: "pointer", 
                                            position: "relative", 
                                            top: "3px", 
                                            left: "-2px", 
                                            accentColor: "var(--weekly-teal, #009a9a)",
                                            WebkitAppearance: "checkbox"
                                        }}
                                    />
                                )}
                                <span
                                    style={{
                                        whiteSpace: "pre-wrap",
                                        wordBreak: "break-word",
                                        overflow: "visible",
                                        flex: 1,
                                    }}
                                >
                                    {showProjectIcons && task.project && (
                                        <span style={{ marginRight: "4px", verticalAlign: "middle" }}>
                                            <ProjectIcon icon={task.project.icon} size={13} color={task.project.color || "#888"} />
                                        </span>
                                    )}
                                    {task.title}
                                </span>
                                {(() => {
                                    const provider = task.externalProvider
                                        || (task.externalId?.startsWith("synology::") ? "synology" : null);
                                    if (!provider) return null;
                                    const iconMap: Record<string, { icon: any; color: string; label: string }> = {
                                        google: { icon: faGoogle, color: "#4285F4", label: "Google" },
                                        outlook: { icon: faMicrosoft, color: "#0078D4", label: "Microsoft" },
                                        apple: { icon: faApple, color: "#555", label: "Apple" },
                                        synology: { icon: faServer, color: "#007AFF", label: "Synology" },
                                        notion: { icon: faNotion, color: "#000000", label: "Notion" },
                                    };
                                    const info = iconMap[provider];
                                    if (!info) return null;
                                    return (
                                        <span
                                            className="flex-shrink-0"
                                            title={`Synced with ${info.label}`}
                                            style={{ display: "inline-flex", alignItems: "center", opacity: 0.55, paddingLeft: "4px" }}
                                        >
                                            <FontAwesomeIcon icon={info.icon} style={{ width: 12, height: 12, color: info.color }} />
                                        </span>
                                    );
                                })()}
                            </span>

                            {/* Subtask indicator - toggles subtask list */}
                            {task.subTasks && task.subTasks.length > 0 && !isSubTask && (() => {
                                const completed = task.subTasks!.filter(s => s.completed).length;
                                const total = task.subTasks!.length;
                                const allDone = completed === total;
                                const expanded = isSubTasksOpen || isSubTaskInputOpen;
                                const pct = total > 0 ? (completed / total) * 100 : 0;
                                return (
                                    <button
                                        onClick={(e) => {
                                            e.stopPropagation();
                                            setIsSubTasksOpen(!isSubTasksOpen);
                                        }}
                                        className="subtask-indicator-badge"
                                        title={expanded ? "Collapse subtasks" : `${completed}/${total} subtasks done`}
                                        style={{
                                            display: "inline-flex",
                                            alignItems: "center",
                                            gap: "4px",
                                            padding: "2px 8px 2px 4px",
                                            borderRadius: "12px",
                                            background: expanded ? "rgba(99,102,241,0.08)" : "transparent",
                                            color: allDone ? "var(--weekly-teal, #0d9488)" : "var(--weekly-text-light, #9ca3af)",
                                            border: "none",
                                            cursor: "pointer",
                                            fontSize: "0.7rem",
                                            fontWeight: 600,
                                            lineHeight: 1,
                                            flexShrink: 0,
                                            whiteSpace: "nowrap",
                                            transition: "all 0.15s",
                                        }}
                                    >
                                        <ChevronDown size={12} style={{ transform: expanded ? "rotate(0deg)" : "rotate(-90deg)", transition: "transform 0.2s", flexShrink: 0 }} />
                                        <span style={{
                                            display: "inline-block",
                                            width: "36px",
                                            height: "5px",
                                            borderRadius: "3px",
                                            background: "var(--weekly-border, #e5e7eb)",
                                            position: "relative",
                                            overflow: "hidden",
                                            flexShrink: 0,
                                        }}>
                                            <span style={{
                                                position: "absolute",
                                                left: 0,
                                                top: 0,
                                                height: "100%",
                                                width: `${pct}%`,
                                                borderRadius: "3px",
                                                background: allDone ? "var(--weekly-teal, #0d9488)" : "var(--weekly-accent, #6366f1)",
                                                transition: "width 0.3s ease",
                                            }} />
                                        </span>
                                        <span style={{ opacity: 0.8 }}>{completed}/{total}</span>
                                    </button>
                                );
                            })()}

                            {/* Note indicator - toggles inline notes */}
                            {task.markdownContent && task.markdownContent.trim().length > 0 && (
                                <button
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        setIsNotesOpen(!isNotesOpen);
                                    }}
                                    className="focus:outline-none flex-shrink-0"
                                    title={isNotesOpen ? "Collapse note" : "Expand note"}
                                    style={{
                                        display: "inline-flex",
                                        alignItems: "center",
                                        gap: "2px",
                                        padding: "2px 5px",
                                        borderRadius: "4px",
                                        background: isNotesOpen ? "rgba(245, 158, 11, 0.1)" : "transparent",
                                        color: isNotesOpen ? "#f59e0b" : "var(--weekly-text-muted, #999)",
                                        border: "none",
                                        cursor: "pointer",
                                        lineHeight: 1,
                                        transition: "background 0.15s, color 0.15s",
                                    }}
                                >
                                    <svg viewBox="0 0 24 24" width="11" height="11" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                                        <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
                                        <polyline points="14 2 14 8 20 8" />
                                        <line x1="16" y1="13" x2="8" y2="13" />
                                        <line x1="16" y1="17" x2="8" y2="17" />
                                    </svg>
                                    <svg viewBox="0 0 24 24" width="8" height="8" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" style={{ transform: isNotesOpen ? "rotate(90deg)" : "rotate(0deg)", transition: "transform 0.2s" }}>
                                        <polyline points="9 18 15 12 9 6" />
                                    </svg>
                                </button>
                            )}

                            <div className="task-actions z-20">
                                {/* Complete */}
                                <button
                                    className={`task-action-btn ${task.completed ? "active text-green-600 dark:text-green-500" : ""}`}
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        onToggle();
                                    }}
                                    title={task.completed ? "Mark incomplete" : "Mark complete"}
                                >
                                    <svg
                                        viewBox="0 0 24 24"
                                        width="12"
                                        height="12"
                                        stroke="currentColor"
                                        strokeWidth="3"
                                        fill="none"
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                    >
                                        <line x1="5" y1="12" x2="19" y2="12"></line>
                                    </svg>
                                </button>
                                {/* Edit */}
                                <button
                                    className="task-action-btn"
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        onEdit();
                                    }}
                                    title="Edit"
                                >
                                    <svg
                                        viewBox="0 0 24 24"
                                        width="12"
                                        height="12"
                                        stroke="currentColor"
                                        strokeWidth="2.5"
                                        fill="none"
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                    >
                                        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"></path>
                                        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"></path>
                                    </svg>
                                </button>

                                {/* Add Sub-task */}
                                {!isSubTask && onAddSubTask && (
                                    <button
                                        className={`task-action-btn ${isSubTaskInputOpen ? "active" : ""}`}
                                        onClick={(e) => {
                                            e.stopPropagation();
                                            setIsSubTaskInputOpen(!isSubTaskInputOpen);
                                            if (!isSubTaskInputOpen) {
                                                setTimeout(() => subTaskInputRef.current?.focus(), 50);
                                            }
                                        }}
                                        title="Add sub-task"
                                    >
                                        <svg
                                            viewBox="0 0 24 24"
                                            width="12"
                                            height="12"
                                            stroke="currentColor"
                                            strokeWidth="2.5"
                                            fill="none"
                                            strokeLinecap="round"
                                            strokeLinejoin="round"
                                        >
                                            <line x1="12" y1="5" x2="12" y2="19"></line>
                                            <line x1="5" y1="12" x2="19" y2="12"></line>
                                        </svg>
                                    </button>
                                )}

                                {/* Recurrence (hidden for someday tasks) */}
                                {!isSomeday && (
                                <button
                                    className={`task-action-btn ${task.isRecurring ? "active" : ""}`}
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        onRecurrence();
                                    }}
                                    title={
                                        task.isRecurring ? "Edit recurrence" : "Make recurring"
                                    }
                                >
                                    <svg
                                        viewBox="0 0 24 24"
                                        width="12"
                                        height="12"
                                        stroke="currentColor"
                                        strokeWidth="2.5"
                                        fill="none"
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                    >
                                        <polyline points="23 4 23 10 17 10"></polyline>
                                        <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
                                    </svg>
                                </button>
                                )}

                                {/* Notes */}
                                <button
                                    className={`task-action-btn ${isNotesOpen || (task.markdownContent && task.markdownContent.trim().length > 0) ? "active" : ""}`}
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        setIsNotesOpen(!isNotesOpen);
                                    }}
                                    title="Notes"
                                >
                                    <svg
                                        viewBox="0 0 24 24"
                                        width="12"
                                        height="12"
                                        stroke="currentColor"
                                        strokeWidth="2.5"
                                        fill="none"
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                    >
                                        <line x1="3" y1="12" x2="21" y2="12"></line>
                                        <line x1="3" y1="6" x2="21" y2="6"></line>
                                        <line x1="3" y1="18" x2="21" y2="18"></line>
                                    </svg>
                                </button>

                                {/* Project Assignment */}
                                {!isSubTask && projects.length > 0 && onProjectAssign && (
                                    <div className="relative" ref={projectPickerRef}>
                                        <button
                                            className={`task-action-btn ${task.project ? "active" : ""}`}
                                            onClick={(e) => {
                                                e.stopPropagation();
                                                setShowProjectPicker(!showProjectPicker);
                                            }}
                                            title={task.project ? task.project.name : "Assign project"}
                                        >
                                            {task.project?.icon ? (
                                                <span style={{ fontSize: "12px", lineHeight: 1 }}>{task.project.icon}</span>
                                            ) : (
                                                <Circle
                                                    size={12}
                                                    fill={task.project?.color || "none"}
                                                    stroke={task.project?.color || "currentColor"}
                                                    strokeWidth={2}
                                                />
                                            )}
                                        </button>
                                        {showProjectPicker && (
                                            <div className="absolute z-50 top-full left-0 mt-1 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-lg shadow-lg py-1 min-w-[140px]" style={{ whiteSpace: "nowrap" }}>
                                                {task.projectId && (
                                                    <button
                                                        className="flex items-center gap-2 w-full px-3 py-1.5 text-xs hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-500"
                                                        onClick={(e) => {
                                                            e.stopPropagation();
                                                            onProjectAssign(task.id, null);
                                                            setShowProjectPicker(false);
                                                        }}
                                                    >
                                                        <X size={10} /> Remove
                                                    </button>
                                                )}
                                                {projects.map((p) => (
                                                    <button
                                                        key={p.id}
                                                        className={`flex items-center gap-2 w-full px-3 py-1.5 text-xs hover:bg-gray-100 dark:hover:bg-gray-700 ${task.projectId === p.id ? "font-bold" : ""}`}
                                                        onClick={(e) => {
                                                            e.stopPropagation();
                                                            onProjectAssign(task.id, task.projectId === p.id ? null : p.id);
                                                            setShowProjectPicker(false);
                                                        }}
                                                    >
                                                        <span style={{ fontSize: "12px" }}><ProjectIcon icon={p.icon} size={12} color={p.color || "#999"} /></span>
                                                        <Circle size={8} fill={p.color || "#999"} stroke={p.color || "#999"} strokeWidth={0} />
                                                        {p.name}
                                                    </button>
                                                ))}
                                            </div>
                                        )}
                                    </div>
                                )}

                                {/* Roll Toggle - Active State Colored (hidden for someday tasks) */}
                                {!task.completed && !isSomeday && (
                                    <button
                                        className={`task-action-btn ${task.isRolling ? "active" : ""}`}
                                        onClick={(e) => {
                                            e.stopPropagation();
                                            onRollToggle();
                                        }}
                                        title={
                                            task.isRolling ? "Disable rolling" : "Enable rolling"
                                        }
                                    >
                                        <svg
                                            viewBox="0 0 24 24"
                                            width="12"
                                            height="12"
                                            stroke="currentColor"
                                            strokeWidth="2.5"
                                            fill="none"
                                            strokeLinecap="round"
                                            strokeLinejoin="round"
                                        >
                                            <polyline points="1 4 1 10 7 10"></polyline>
                                            <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"></path>
                                        </svg>
                                    </button>
                                )}

                                {/* Delete */}
                                <button
                                    className="task-action-btn delete text-red-500 hover:text-red-700 hover:bg-red-100/50 dark:hover:bg-red-900/30 rounded"
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        onDelete();
                                    }}
                                    title="Delete"
                                >
                                    <svg
                                        viewBox="0 0 24 24"
                                        width="12"
                                        height="12"
                                        stroke="currentColor"
                                        strokeWidth="2.5"
                                        fill="none"
                                        strokeLinecap="round"
                                        strokeLinejoin="round"
                                    >
                                        <polyline points="3 6 5 6 21 6"></polyline>
                                        <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                                    </svg>
                                </button>
                            </div>

                        </>
                    )}
                </div>

                {/* Inline Notes Editor with Toolbar */}
                {
                    isNotesOpen && (
                        <div
                            className="weekly-notes-inline"
                            onClick={(e) => e.stopPropagation()}
                        >
                            <div className="notes-toolbar">
                                <button className="notes-toolbar-btn" onClick={() => insertMarkdown("**", "**")} title="Bold" style={{ fontWeight: 700 }}>B</button>
                                <button className="notes-toolbar-btn" onClick={() => insertMarkdown("*", "*")} title="Italic" style={{ fontStyle: "italic" }}>I</button>
                                <button className="notes-toolbar-btn" onClick={() => insertMarkdown("[", "](url)")} title="Link">
                                    <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
                                </button>
                                <button className="notes-toolbar-btn" onClick={() => insertMarkdown("- ")} title="List">
                                    <svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/></svg>
                                </button>
                                <span style={{ marginLeft: "auto", fontSize: "0.65rem", color: "var(--weekly-text-muted, #999)", opacity: 0.6 }}>md</span>
                            </div>
                            <textarea
                                ref={notesRef}
                                className="weekly-notes-editor-inline"
                                value={notesValue}
                                onChange={(e) => setNotesValue(e.target.value)}
                                onBlur={handleNotesBlur}
                                placeholder="Add notes..."
                            />
                        </div>
                    )
                }

                {/* Sub-tasks section */}
                {
                    !isSubTask && (isSubTasksOpen || isSubTaskInputOpen) && task.subTasks && task.subTasks.length > 0 && (
                        <ul className="subtask-list" onClick={(e) => e.stopPropagation()} style={task.project?.color ? { borderLeft: `2px solid ${task.project.color}`, marginLeft: "2px" } : undefined}>
                            {task.subTasks.map((subTask) => (
                                <li
                                    key={subTask.id}
                                    className={`subtask-item ${subTask.completed ? "completed" : ""}`}
                                    draggable
                                    onDragStart={(e) => {
                                        e.stopPropagation();
                                        if (onDragStart) {
                                            onDragStart(e as any, { ...subTask, parentTaskId: task.id, scheduledDate: task.scheduledDate } as any);
                                        }
                                    }}
                                    onDragEnd={(e) => { e.stopPropagation(); onDragEnd?.(); }}
                                >
                                    <button
                                        className="subtask-checkbox"
                                        onClick={() => onToggleSubTask?.(subTask.id)}
                                        aria-label={subTask.completed ? "Mark incomplete" : "Mark complete"}
                                    >
                                        {subTask.completed ? (
                                            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
                                                <polyline points="20 6 9 17 4 12" />
                                            </svg>
                                        ) : (
                                            <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                                                <circle cx="12" cy="12" r="10" />
                                            </svg>
                                        )}
                                    </button>
                                    {editingTaskId === subTask.id ? (
                                        <form
                                            onSubmit={(e) => {
                                                e.preventDefault();
                                                const input = e.currentTarget.querySelector("input");
                                                if (input) {
                                                    onUpdateSubTask?.(subTask.id, input.value);
                                                    onSetEditingTaskId?.(null);
                                                }
                                            }}
                                            style={{ flex: 1 }}
                                        >
                                            <input
                                                type="text"
                                                defaultValue={subTask.title}
                                                autoFocus
                                                className="subtask-edit-input"
                                                onBlur={(e) => {
                                                    onUpdateSubTask?.(subTask.id, e.target.value);
                                                    onSetEditingTaskId?.(null);
                                                }}
                                                onKeyDown={(e) => {
                                                    if (e.key === "Escape") onSetEditingTaskId?.(null);
                                                }}
                                            />
                                        </form>
                                    ) : (
                                        <span
                                            className={`subtask-title ${subTask.completed ? "completed" : ""}`}
                                            onClick={() => onSetEditingTaskId?.(subTask.id)}
                                        >
                                            {subTask.title}
                                        </span>
                                    )}
                                    <button
                                        className="subtask-delete-btn"
                                        onClick={() => onDeleteSubTask?.(subTask.id)}
                                        title="Remove sub-task"
                                    >
                                        <svg viewBox="0 0 24 24" width="10" height="10" stroke="currentColor" strokeWidth="2.5" fill="none" strokeLinecap="round" strokeLinejoin="round">
                                            <line x1="18" y1="6" x2="6" y2="18" />
                                            <line x1="6" y1="6" x2="18" y2="18" />
                                        </svg>
                                    </button>
                                </li>
                            ))}
                        </ul>
                    )
                }

                {/* Add sub-task input */}
                {
                    !isSubTask && isSubTaskInputOpen && (
                        <div className="subtask-add-row" onClick={(e) => e.stopPropagation()}>
                            <form
                                onSubmit={(e) => {
                                    e.preventDefault();
                                    if (newSubTaskTitle.trim()) {
                                        onAddSubTask?.(task.id, newSubTaskTitle.trim());
                                        setNewSubTaskTitle("");
                                    }
                                }}
                                style={{ display: "flex", alignItems: "center", gap: "0.25rem", flex: 1 }}
                            >
                                <svg viewBox="0 0 24 24" width="12" height="12" stroke="var(--weekly-text-muted, #999)" strokeWidth="2" fill="none" strokeLinecap="round" strokeLinejoin="round" style={{ flexShrink: 0 }}>
                                    <circle cx="12" cy="12" r="10" />
                                </svg>
                                <input
                                    ref={subTaskInputRef}
                                    type="text"
                                    value={newSubTaskTitle}
                                    onChange={(e) => setNewSubTaskTitle(e.target.value)}
                                    onBlur={() => {
                                        if (!newSubTaskTitle.trim()) {
                                            setIsSubTaskInputOpen(false);
                                        }
                                    }}
                                    onKeyDown={(e) => {
                                        if (e.key === "Escape") {
                                            setNewSubTaskTitle("");
                                            setIsSubTaskInputOpen(false);
                                        }
                                    }}
                                    placeholder="Add sub-task..."
                                    className="subtask-add-input"
                                    autoFocus
                                />
                            </form>
                        </div>
                    )
                }
            </div >
        </li >
    );
}

// Projects Sidebar Component
const projectIconsGlobal: { name: string; icon: IconDefinition }[] = [
    { name: "folder", icon: faFolder }, { name: "briefcase", icon: faBriefcase },
    { name: "bullseye", icon: faBullseye }, { name: "rocket", icon: faRocket },
    { name: "star", icon: faStar }, { name: "lightbulb", icon: faLightbulb },
    { name: "fire", icon: faFire }, { name: "palette", icon: faPalette },
    { name: "music", icon: faMusic }, { name: "mobile", icon: faMobileScreen },
    { name: "laptop", icon: faLaptop }, { name: "globe", icon: faGlobe },
    { name: "house", icon: faHouse }, { name: "building", icon: faBuilding },
    { name: "chart-bar", icon: faChartBar }, { name: "chart-line", icon: faChartLine },
    { name: "wrench", icon: faWrench }, { name: "bolt", icon: faBolt },
    { name: "gamepad", icon: faGamepad }, { name: "pen", icon: faPen },
    { name: "book", icon: faBook }, { name: "graduation-cap", icon: faGraduationCap },
    { name: "flask", icon: faFlask }, { name: "microscope", icon: faMicroscope },
    { name: "dumbbell", icon: faDumbbell }, { name: "utensils", icon: faUtensils },
    { name: "plane", icon: faPlane }, { name: "leaf", icon: faLeaf },
    { name: "heart", icon: faHeart }, { name: "cart-shopping", icon: faCartShopping },
    { name: "coins", icon: faCoins }, { name: "gift", icon: faGift },
    { name: "camera", icon: faCamera }, { name: "film", icon: faFilm },
    { name: "broom", icon: faBroom }, { name: "paw", icon: faPaw },
    { name: "earth", icon: faEarthAmericas }, { name: "lock", icon: faLock },
    { name: "check", icon: faCheck }, { name: "code", icon: faCode },
    { name: "cube", icon: faCube }, { name: "users", icon: faUsers },
    { name: "car", icon: faCar }, { name: "mountain", icon: faMountain },
    { name: "umbrella", icon: faUmbrella }, { name: "clock", icon: faClock },
    { name: "tag", icon: faTag },
];

// Helper to render a project icon (FA name, MDI name, or legacy emoji)
function ProjectIcon({ icon, size = 18, color }: { icon?: string | null; size?: number; color?: string }) {
    if (!icon) return <FontAwesomeIcon icon={faFolder} style={{ fontSize: size, color }} />;
    // Check unified icon registry (FA + MDI)
    const found = allIcons.find((i) => i.name === icon);
    if (found) {
        if (found.type === "fa") {
            return <FontAwesomeIcon icon={found.icon as import("@fortawesome/free-solid-svg-icons").IconDefinition} style={{ fontSize: size, color }} />;
        }
        return <MdiIcon path={found.icon as string} size={size / 24} color={color} />;
    }
    // Legacy: check old projectIconsGlobal for backwards compat
    const legacy = projectIconsGlobal.find((i) => i.name === icon);
    if (legacy) return <FontAwesomeIcon icon={legacy.icon} style={{ fontSize: size, color }} />;
    // Legacy emoji fallback
    return <span style={{ fontSize: size, lineHeight: 1 }}>{icon}</span>;
}

function ProjectsSidebar({ darkMode, language, projects, onProjectsChanged, onClose }: {
    darkMode: boolean;
    language: string;
    projects: { id: string; name: string; icon?: string | null; color?: string | null }[];
    onProjectsChanged: () => void;
    onClose: () => void;
}) {
    const [newProjectName, setNewProjectName] = useState("");
    const [newProjectColor, setNewProjectColor] = useState("#3b82f6");
    const [newProjectIcon, setNewProjectIcon] = useState("folder");
    const [showNewIconPicker, setShowNewIconPicker] = useState(false);
    const [editingId, setEditingId] = useState<string | null>(null);
    const [editName, setEditName] = useState("");
    const [editColor, setEditColor] = useState("");
    const [editIcon, setEditIcon] = useState("folder");
    const [showEditIconPicker, setShowEditIconPicker] = useState(false);

    const t = {
        projects: language === "de" ? "Projekte" : "Projects",
        desc: language === "de" ? "Aufgaben mit farbcodierten Projekten organisieren" : "Organize tasks with color-coded projects",
        noProjects: language === "de" ? "Noch keine Projekte erstellt" : "No projects yet",
        addProject: language === "de" ? "Projekt hinzufügen" : "Add Project",
        name: language === "de" ? "Name" : "Name",
        cancel: language === "de" ? "Abbrechen" : "Cancel",
        save: language === "de" ? "Speichern" : "Save",
        color: language === "de" ? "Farbe" : "Color",
        deleteConfirm: (name: string) => language === "de" ? `Projekt "${name}" löschen?` : `Delete project "${name}"?`,
    };

    const createProject = () => {
        if (!newProjectName.trim()) return;
        fetch("/api/projects", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name: newProjectName.trim(), color: newProjectColor, icon: newProjectIcon }) })
            .then(() => { onProjectsChanged(); setNewProjectName(""); setNewProjectIcon("folder"); });
    };

    const updateProject = (id: string) => {
        fetch("/api/projects", { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id, name: editName, color: editColor, icon: editIcon }) })
            .then(() => { onProjectsChanged(); setEditingId(null); });
    };

    const deleteProject = (id: string, name: string) => {
        if (confirm(t.deleteConfirm(name))) {
            fetch(`/api/projects?id=${id}`, { method: "DELETE" }).then(() => onProjectsChanged());
        }
    };

    return (
        <>
            <div onClick={onClose} style={{ position: "fixed", inset: 0, zIndex: 999, background: "rgba(0,0,0,0.3)" }} />
            <div style={{
                position: "fixed", right: 0, top: 0, bottom: 0, width: "min(380px, 90vw)", zIndex: 1000,
                background: darkMode ? "#1e1e2e" : "#fff",
                borderLeft: `1px solid ${darkMode ? "#333" : "#e5e7eb"}`,
                display: "flex", flexDirection: "column",
                boxShadow: "-4px 0 24px rgba(0,0,0,0.12)",
            }}>
                {/* Header */}
                <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", padding: "16px 20px", borderBottom: `1px solid ${darkMode ? "#333" : "#e5e7eb"}` }}>
                    <h2 style={{ fontSize: "1.1rem", fontWeight: 700, display: "flex", alignItems: "center", gap: "8px", color: darkMode ? "#f0f0f0" : "#333" }}>
                        <FolderOpen size={20} /> {t.projects}
                    </h2>
                    <button onClick={onClose} style={{ background: "none", border: "none", cursor: "pointer", padding: "6px", color: darkMode ? "#9ca3af" : "#666", borderRadius: "6px" }}>
                        <X size={20} />
                    </button>
                </div>

                {/* Scrollable content */}
                <div style={{ flex: 1, overflowY: "auto", padding: "16px 20px", display: "flex", flexDirection: "column", gap: "12px" }}>
                    <p style={{ fontSize: "0.8rem", color: darkMode ? "#9ca3af" : "#888" }}>{t.desc}</p>

                    {projects.length === 0 ? (
                        <div style={{ textAlign: "center", padding: "32px 16px" }}>
                            <div style={{ width: "56px", height: "56px", borderRadius: "50%", background: darkMode ? "#2a2a3a" : "#f3f4f6", display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto 12px" }}><ProjectIcon icon="folder" size={24} color={darkMode ? "#9ca3af" : "#999"} /></div>
                            <p style={{ fontSize: "0.9rem", color: "#aaa", fontStyle: "italic" }}>{t.noProjects}</p>
                        </div>
                    ) : (
                        projects.map((p) => (
                            <div key={p.id} style={{ display: "flex", alignItems: "center", gap: "10px", padding: "10px 14px", borderRadius: "12px", background: darkMode ? "#2a2a3a" : "#f9fafb", borderLeft: `4px solid ${p.color || "#999"}` }}>
                                {editingId === p.id ? (
                                    <div style={{ display: "flex", flexDirection: "column", gap: "10px", width: "100%" }}>
                                        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
                                            <div style={{ position: "relative" }}>
                                                <button onClick={() => setShowEditIconPicker(!showEditIconPicker)} style={{ width: "40px", height: "40px", borderRadius: "10px", border: `1px solid ${darkMode ? "#555" : "#e5e7eb"}`, background: darkMode ? "#1e1e2e" : "#fff", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }}>
                                                    <ProjectIcon icon={editIcon} size={18} color={darkMode ? "#d1d5db" : "#555"} />
                                                </button>
                                                {showEditIconPicker && (
                                                    <div style={{ position: "absolute", top: "100%", left: 0, marginTop: "4px", zIndex: 50 }}>
                                                        <IconPicker selectedIcon={editIcon} onSelect={(name) => { setEditIcon(name); setShowEditIconPicker(false); }} darkMode={darkMode} />
                                                    </div>
                                                )}
                                            </div>
                                            <input type="text" value={editName} onChange={(e) => setEditName(e.target.value)} className="weekly-input" style={{ flex: 1, padding: "8px 12px", fontSize: "0.9rem" }} onKeyDown={(e) => { if (e.key === "Enter") updateProject(p.id); if (e.key === "Escape") setEditingId(null); }} autoFocus />
                                        </div>
                                        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
                                            <input type="color" value={editColor} onChange={(e) => setEditColor(e.target.value)} style={{ width: "32px", height: "32px", border: "none", cursor: "pointer", padding: 0, borderRadius: "8px" }} />
                                            <span style={{ fontSize: "0.8rem", color: darkMode ? "#9ca3af" : "#888" }}>{t.color}</span>
                                            <div style={{ flex: 1 }} />
                                            <button onClick={() => setEditingId(null)} style={{ padding: "6px 14px", fontSize: "0.8rem", background: "none", border: `1px solid ${darkMode ? "#555" : "#ddd"}`, borderRadius: "8px", cursor: "pointer", color: darkMode ? "#9ca3af" : "#666" }}>{t.cancel}</button>
                                            <button onClick={() => updateProject(p.id)} className="weekly-btn-primary" style={{ padding: "6px 14px", fontSize: "0.8rem" }}><Check size={14} /> {t.save}</button>
                                        </div>
                                    </div>
                                ) : (
                                    <>
                                        <ProjectIcon icon={p.icon} size={20} color={p.color || "#999"} />
                                        <div style={{ flex: 1, minWidth: 0 }}>
                                            <span style={{ fontSize: "0.9rem", fontWeight: 600, display: "block", color: darkMode ? "#f0f0f0" : "#333" }}>{p.name}</span>
                                        </div>
                                        <button onClick={() => { setEditingId(p.id); setEditName(p.name); setEditColor(p.color || "#999"); setEditIcon(p.icon || "folder"); setShowEditIconPicker(false); }} style={{ padding: "6px", opacity: 0.5, cursor: "pointer", background: "none", border: "none", borderRadius: "6px", color: darkMode ? "#ccc" : "#333" }} title="Edit">
                                            <Pencil size={15} />
                                        </button>
                                        <button onClick={() => deleteProject(p.id, p.name)} style={{ padding: "6px", opacity: 0.5, cursor: "pointer", color: "#ef4444", background: "none", border: "none", borderRadius: "6px" }} title="Delete">
                                            <Trash2 size={15} />
                                        </button>
                                    </>
                                )}
                            </div>
                        ))
                    )}
                </div>

                {/* Add project form — fixed at bottom */}
                <div style={{ padding: "16px 20px", borderTop: `1px solid ${darkMode ? "#333" : "#e5e7eb"}`, background: darkMode ? "#1e1e2e" : "#fff" }}>
                    <p style={{ fontSize: "0.8rem", fontWeight: 600, color: darkMode ? "#9ca3af" : "#888", marginBottom: "10px" }}>{t.addProject}</p>
                    <div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
                        <div style={{ position: "relative" }}>
                            <button onClick={() => setShowNewIconPicker(!showNewIconPicker)} style={{ width: "40px", height: "40px", borderRadius: "10px", border: `1px solid ${darkMode ? "#555" : "#e5e7eb"}`, background: darkMode ? "#2a2a3a" : "#fff", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }}>
                                <ProjectIcon icon={newProjectIcon} size={18} color={darkMode ? "#d1d5db" : "#555"} />
                            </button>
                            {showNewIconPicker && (
                                <div style={{ position: "absolute", bottom: "100%", left: 0, marginBottom: "4px", zIndex: 50 }}>
                                    <IconPicker selectedIcon={newProjectIcon} onSelect={(name) => { setNewProjectIcon(name); setShowNewIconPicker(false); }} darkMode={darkMode} />
                                </div>
                            )}
                        </div>
                        <input type="color" value={newProjectColor} onChange={(e) => setNewProjectColor(e.target.value)} style={{ width: "32px", height: "32px", border: "none", cursor: "pointer", padding: 0, borderRadius: "8px" }} />
                        <input type="text" value={newProjectName} onChange={(e) => setNewProjectName(e.target.value)} placeholder={t.name} className="weekly-input" style={{ flex: 1, padding: "8px 12px", fontSize: "0.9rem" }} onKeyDown={(e) => { if (e.key === "Enter") createProject(); }} />
                        <button onClick={createProject} className="weekly-btn-primary" style={{ padding: "8px 16px", fontSize: "0.85rem", whiteSpace: "nowrap" }}>
                            <Plus size={14} /> {t.addProject}
                        </button>
                    </div>
                </div>
            </div>
        </>
    );
}

// Settings Modal Component
interface SettingsSidebarProps {
    onClose: () => void;
    onSettingsChanged?: (newSettings: {
        showTimeGrid: boolean;
        cellDuration: CellDuration;
        viewStyle: ViewStyle;
        language: string;
        dateFormat: string;
        timeFormat: string;
        startHour: number;
        endHour: number;
        fontSize: "S" | "M" | "L";
        showNextTask: boolean;
        showSomeday: boolean;
        showAllDayEvents: boolean;
        showSchedule: boolean;
        headlineFont: string;
        headlineFontSize: string;
        headlineFontWeight: string;
        goalFontWeight: string;
        dateFontFamily: string;
        dateFontSize: string;
        dateFontWeight: string;
        timeTaskFontFamily: string;
        timeTaskFontSize: string;
        timeTaskFontWeight: string;
        bodyFont: string;
        taskFontFamily: string;
        taskFontSize: string;
        taskFontWeight: string;
        fontWeight: string;
        weekendColorSat: string;
        weekendColorSun: string;
        weekdayColor?: string;
        dateColor?: string;
        taskColor?: string;
        todayHighlightColor?: string;
        dateLayout?: "above" | "below" | "left" | "right" | "hidden";
        mobileDateLayout?: "above" | "below" | "left" | "right" | "hidden";
        dateAlignment?: "left" | "center" | "right" | "tight";
        hourLabelFormat?: "short" | "full";
        showSubHourSlots?: boolean;
        allDayPosition?: "above" | "below";
        cwFontFamily?: string;
        cwFontSize?: string;
        cwFontWeight?: string;
        cwColor?: string;
        yearFontFamily?: string;
        yearFontSize?: string;
        yearFontWeight?: string;
        yearColor?: string;
        dayHeaderGap?: string;
        showTaskCheckboxes?: boolean;
        startDayOffset?: number;
        quoteSourceUrls: string[];
        quoteLanguages: string[];
    }) => void;
    profile: any;
    setProfile: React.Dispatch<React.SetStateAction<any>>;
    setCurrentWeekStart: (d: Date) => void;
    quoteSourceUrls?: string[];
    quoteLanguages?: string[];
    goal: string;
    setGoal: (goal: string) => void;
    saveGoal: (goal: string) => void;
    connections: any[];
    onUpdateConnections: (connections: any[]) => void;
    onRemoveConnection: (id: string) => void | Promise<void>;
    focusTimerDuration: number;
    setFocusTimerDuration: (duration: number) => void;
    focusBreakDuration: number;
    setFocusBreakDuration: (duration: number) => void;
    showNextTask: boolean;
    setShowNextTask: (show: boolean) => void;
    protectEventTimes: boolean;
    setProtectEventTimes: (protect: boolean) => void;
    goalDefaultSentence?: string;
    goalFallbackType?: string;
    importingTasksState: boolean;
    executeImport: (provider: "google" | "apple" | "outlook") => Promise<void>;
    onImportLists: (lists: { id: string; title: string }[]) => Promise<void>;
    importStatusMsg: { type: "success" | "error"; text: string } | null;
    showTimeGrid: boolean;
    setShowTimeGrid: (show: boolean) => void;
    cellDuration: CellDuration;
    setCellDuration: (duration: CellDuration) => void;
    weekStartDay: number;
    setWeekStartDay: (day: number) => void;
    fontSize: "S" | "M" | "L";
    setFontSize: (size: "S" | "M" | "L") => void;
    headlineFont: string;
    headlineFontSize: string;
    headlineFontWeight: string;
    goalFontWeight: string;
    dateFontFamily: string;
    dateFontSize: string;
    dateFontWeight: string;
    timeTaskFontFamily: string;
    timeTaskFontSize: string;
    timeTaskFontWeight: string;
    bodyFont: string;
    taskFontFamily: string;
    taskFontSize: string;
    taskFontWeight: string;
    fontWeight: string;
    weekendColorSat: string;
    weekendColorSun: string;
    viewStyle: ViewStyle;
    setViewStyle: (style: ViewStyle) => void;
    showSomeday: boolean;
    setShowSomeday: (show: boolean) => void;
    showAllDay: boolean;
    setShowAllDay: (show: boolean) => void;
    showSchedule: boolean;
    setShowSchedule: (show: boolean) => void;
    dateLayout?: "above" | "below" | "left" | "right" | "hidden";
    mobileDateLayout?: "above" | "below" | "left" | "right" | "hidden";
    weekdayFormat?: "long" | "short" | "narrow" | "custom";
    weekdayCase?: "normal" | "capitalize" | "uppercase";
    customWeekdayNames?: string;
    dateAlignment?: "left" | "center" | "right" | "tight";
    hourLabelFormat: "short" | "full";
    setHourLabelFormat: (fmt: "short" | "full") => void;
    showSubHourSlots: boolean;
    setShowSubHourSlots: (show: boolean) => void;
    allDayPosition: "above" | "below";
    setAllDayPosition: (pos: "above" | "below") => void;
    saveSetting: (key: string, value: any) => void;
    availableTaskLists: {
        [key in "google" | "apple" | "outlook" | "synology"]?: { id: string; title: string }[];
    };
    isFetchingProviderLists: Record<string, boolean>;
    somedayLists: SomedayList[];
    handleToggleTaskList: (
        provider: "google" | "apple" | "outlook" | "synology",
        list: { id: string; title: string },
    ) => Promise<void>;
    unsyncConfirm: {
        provider: "google" | "apple" | "outlook" | "synology";
        list: { id: string; title: string };
    } | null;
    onConfirmUnsync: () => Promise<void>;
    onCancelUnsync: () => void;
    handleSyncAll: (
        provider: "google" | "outlook" | "synology",
        lists: { id: string; title: string }[],
        syncOn: boolean,
    ) => Promise<void>;
    fetchAvailableTaskLists: (
        provider: "google" | "apple" | "outlook" | "synology",
    ) => Promise<void>;
    initialTab?: "calendar" | "general" | "account" | "styling" | "motivation" | "about";
    projects: { id: string; name: string; icon?: string | null; color?: string | null }[];
    onProjectsChanged: () => void;
    kanbanStages: KanbanStage[];
    saveKanbanStages: (stages: KanbanStage[]) => Promise<void>;
    // Quick actions
    isMobile?: boolean;
    mobileActions?: {
        goToPrevWeek: () => void;
        goToPrevDay: () => void;
        goToToday: () => void;
        goToNextDay: () => void;
        goToNextWeek: () => void;
        onJumpToDate: () => void;
        onAddCalendarEvent: () => void;
        onAddProject: () => void;
        onRecurringTasks: () => void;
        onToggleNextTask: () => void;
        onFocusMode: () => void;
        onToggleDarkMode: () => void;
        onSearch: () => void;
        onUndo: () => void;
        onRedo: () => void;
        onRefresh: () => void;
        darkMode: boolean;
        showNextTask: boolean;
        undoCount: number;
        redoCount: number;
        viewDays: number;
        onViewDaysChange: (days: number) => void;
        showTimeGrid: boolean;
        cellDuration: CellDuration;
        onCellDurationChange: (d: CellDuration) => void;
        viewStyle: string;
        onViewStyleChange: (style: string) => void;
        startHour: number;
        endHour: number;
        onStartHourChange: (h: number) => void;
        onEndHourChange: (h: number) => void;
    };
    perView: {
        saveViewSetting: (key: string, value: any, perView: boolean) => void;
        getEffective: (key: string, globalVal: any) => any;
    };
    onRunSetupAssistant?: () => void;
}
// Notes Sidebar Component
interface NotesSidebarProps {
    task: Task;
    onClose: () => void;
    updateTaskNotes: (id: string, notes: string) => void;
}

function NotesSidebar({ task, onClose, updateTaskNotes }: NotesSidebarProps) {
    const [isVisible, setIsVisible] = useState(false);
    const textareaRef = useRef<HTMLTextAreaElement>(null);
    const [sidebarWidth, setSidebarWidth] = useState(500);
    const isResizing = useRef(false);

    useEffect(() => {
        const handleMouseMove = (e: MouseEvent) => {
            if (!isResizing.current) return;
            const newWidth = window.innerWidth - e.clientX;
            setSidebarWidth(Math.max(320, Math.min(newWidth, window.innerWidth * 0.9)));
        };
        const handleMouseUp = () => {
            if (isResizing.current) {
                isResizing.current = false;
                document.body.style.cursor = '';
                document.body.style.userSelect = '';
            }
        };
        window.addEventListener('mousemove', handleMouseMove);
        window.addEventListener('mouseup', handleMouseUp);
        return () => {
            window.removeEventListener('mousemove', handleMouseMove);
            window.removeEventListener('mouseup', handleMouseUp);
        };
    }, []);

    useEffect(() => {
        const timer = setTimeout(() => setIsVisible(true), 10);
        return () => clearTimeout(timer);
    }, []);

    const handleClose = () => {
        setIsVisible(false);
        setTimeout(onClose, 300);
    };

    const handleToolbarClick = (before: string, after: string, selectOffsetStart?: number, selectOffsetEnd?: number) => {
        const textarea = textareaRef.current;
        if (!textarea) return;
        const start = textarea.selectionStart;
        const end = textarea.selectionEnd;
        const text = textarea.value;
        const beforeText = text.substring(0, start);
        const selection = text.substring(start, end);
        const afterText = text.substring(end);

        let newText = `${beforeText}${before}${selection}${after}${afterText}`;
        if (before === "![" && after === "](url)") {
            // Special case for image to match original logic precisely
            newText = `${beforeText}![alt text](url)${afterText}`;
        }

        updateTaskNotes(task.id, newText);
        textarea.value = newText;
        textarea.focus();

        if (before === "![" && after === "](url)") {
            textarea.setSelectionRange(start + 2, start + 10);
        } else {
            textarea.setSelectionRange(
                start + before.length,
                start + before.length + selection.length
            );
        }
    };

    return (
        <>
            <div
                className={`weekly-modal-overlay ${isVisible ? "show" : ""}`}
                onClick={handleClose}
                style={{ zIndex: 1999 }}
            />
            <div className={`weekly-notes-sidebar ${isVisible ? "open" : ""}`} style={{ width: `${sidebarWidth}px` }}>
                {/* Resize handle */}
                <div
                    onMouseDown={(e) => {
                        e.preventDefault();
                        isResizing.current = true;
                        document.body.style.cursor = 'col-resize';
                        document.body.style.userSelect = 'none';
                    }}
                    style={{
                        position: 'absolute',
                        left: 0,
                        top: 0,
                        bottom: 0,
                        width: '6px',
                        cursor: 'col-resize',
                        zIndex: 10,
                    }}
                    title="Drag to resize"
                />
                <header className="weekly-notes-sidebar-header">
                    <h2 className="weekly-notes-sidebar-title">Notes: {task.title}</h2>
                    <button className="weekly-notes-sidebar-close" onClick={handleClose}>
                        ×
                    </button>
                </header>
                <div className="weekly-notes-sidebar-content">
                    <div className="notes-toolbar">
                        <button className="notes-toolbar-btn" onClick={() => handleToolbarClick("**", "**")} title="Bold">B</button>
                        <button className="notes-toolbar-btn" onClick={() => handleToolbarClick("*", "*")} title="Italic">i</button>
                        <button className="notes-toolbar-btn" onClick={() => handleToolbarClick("[", "](url)")} title="Link">🔗</button>
                        <button className="notes-toolbar-btn" onClick={() => handleToolbarClick("- ", "")} title="List">☑</button>
                        <button className="notes-toolbar-btn" onClick={() => handleToolbarClick("![", "](url)")} title="Image">🖼️</button>
                    </div>

                    <textarea
                        ref={textareaRef}
                        className="weekly-notes-editor"
                        defaultValue={task.markdownContent || ""}
                        autoFocus
                        placeholder="Add details, notes, or links..."
                        onBlur={(e) => updateTaskNotes(task.id, e.target.value)}
                    />

                    <div className="weekly-modal-actions" style={{ marginTop: '24px' }}>
                        <button
                            className="weekly-btn weekly-btn-secondary"
                            onClick={handleClose}
                            style={{ width: '100%' }}
                        >
                            Close
                        </button>
                    </div>
                </div>
            </div>
        </>
    );
}


function SettingsSidebar({
    onClose,
    onSettingsChanged,
    viewStyle,
    setViewStyle,
    showSomeday,
    setShowSomeday,
    showAllDay,
    setShowAllDay,
    showSchedule,
    setShowSchedule,
    goal,
    setGoal,
    saveGoal,
    connections,
    onUpdateConnections,
    onRemoveConnection,
    focusTimerDuration,
    setFocusTimerDuration,
    focusBreakDuration,
    setFocusBreakDuration,
    showNextTask,
    setShowNextTask,
    protectEventTimes,
    setProtectEventTimes,
    goalFallbackType,
    goalDefaultSentence,
    importingTasksState,
    executeImport,
    onImportLists,
    importStatusMsg,
    showTimeGrid,
    setShowTimeGrid,
    cellDuration,
    setCellDuration,
    weekStartDay,
    setWeekStartDay,
    fontSize,
    setFontSize,
    headlineFont,
    headlineFontSize,
    headlineFontWeight,
    goalFontWeight,
    dateFontFamily,
    dateFontSize,
    dateFontWeight,
    timeTaskFontFamily,
    timeTaskFontSize,
    timeTaskFontWeight,
    bodyFont,
    taskFontFamily,
    taskFontSize,
    taskFontWeight,
    fontWeight,
    weekendColorSat,
    weekendColorSun,
    hourLabelFormat,
    setHourLabelFormat,
    showSubHourSlots,
    setShowSubHourSlots,
    allDayPosition,
    setAllDayPosition,
    saveSetting,
    availableTaskLists,
    isFetchingProviderLists,
    somedayLists,
    handleToggleTaskList,
    unsyncConfirm,
    onConfirmUnsync,
    onCancelUnsync,
    handleSyncAll,
    fetchAvailableTaskLists,
    initialTab,
    setCurrentWeekStart,
    projects,
    onProjectsChanged,
    kanbanStages,
    saveKanbanStages,
    profile,
    setProfile,
    isMobile: isMobileSidebar,
    mobileActions,
    perView,
    onRunSetupAssistant,
}: SettingsSidebarProps) {
    const [activeTab, setActiveTab] = useState<
        "calendar" | "general" | "account" | "styling" | "motivation" | "about" | "localisation"
    >(initialTab || "general");
    const [isLoading, setIsLoading] = useState(true);
    const [isSyncing, setIsSyncing] = useState(false);
    const [exportStartDate, setExportStartDate] = useState("");
    const [exportEndDate, setExportEndDate] = useState("");
    const [importMode, setImportMode] = useState<"merge" | "replace">("merge");
    const [importFile, setImportFile] = useState<File | null>(null);
    const [importMsg, setImportMsg] = useState("");
    const [isImporting, setIsImporting] = useState(false);
    const [isExportingAll, setIsExportingAll] = useState(false);
    const [passwords, setPasswords] = useState({ new: "", confirm: "" });
    const [accountMsg, setAccountMsg] = useState("");
    const [isVisible, setIsVisible] = useState(false);

    // Apple Calendar (CalDAV) State
    const [showAppleCalendarModal, setShowAppleCalendarModal] = useState(false);
    const [appleCalEmail, setAppleCalEmail] = useState("");
    const [appleCalPassword, setAppleCalPassword] = useState("");
    const [isConnectingAppleCal, setIsConnectingAppleCal] = useState(false);
    const [appleCalError, setAppleCalError] = useState("");

    // Synology Calendar State
    const [showSynologyCalendarModal, setShowSynologyCalendarModal] = useState(false);
    const [synologyCalServerUrl, setSynologyCalServerUrl] = useState("");
    const [synologyCalUsername, setSynologyCalUsername] = useState("");
    const [synologyCalPassword, setSynologyCalPassword] = useState("");
    const [isConnectingSynologyCal, setIsConnectingSynologyCal] = useState(false);
    const [synologyCalError, setSynologyCalError] = useState("");

    const [disconnectingId, setDisconnectingId] = useState<string | null>(null);
    const [confirmDisconnectId, setConfirmDisconnectId] = useState<string | null>(
        null,
    );
    const [newProjectName, setNewProjectName] = useState("");
    const [newProjectColor, setNewProjectColor] = useState("#3b82f6");
    const [newProjectIcon, setNewProjectIcon] = useState("📁");
    const [showNewProjectIconPicker, setShowNewProjectIconPicker] = useState(false);
    const [editingProjectId, setEditingProjectId] = useState<string | null>(null);
    const [editProjectName, setEditProjectName] = useState("");
    const [editProjectColor, setEditProjectColor] = useState("");
    const [editProjectIcon, setEditProjectIcon] = useState("");
    const [showEditProjectIconPicker, setShowEditProjectIconPicker] = useState(false);
    const [weatherSearchResults, setWeatherSearchResults] = useState<any[]>([]);

    // Fetch lists when the calendar tab is selected
    useEffect(() => {
        if (activeTab === "calendar") {
            const providersWithAccounts = connections.map((c) => c.provider);
            if (providersWithAccounts.includes("google"))
                fetchAvailableTaskLists("google");
            if (providersWithAccounts.includes("outlook"))
                fetchAvailableTaskLists("outlook");
            if (providersWithAccounts.includes("synology"))
                fetchAvailableTaskLists("synology");
        }
    }, [activeTab, connections, fetchAvailableTaskLists]);
    const [connMsg, setConnMsg] = useState<{
        type: "success" | "error";
        text: string;
    } | null>(null);

    const showConnMsg = (type: "success" | "error", text: string) => {
        setConnMsg({ type, text });
        setTimeout(() => setConnMsg(null), 5000);
    };

    // profile state removed (centralized in parent)

    const t = translations[profile.language || "en"] || translations["en"];

    // --- Auto-save helpers: save settings immediately on change ---
    // For discrete inputs (checkbox, select, button) — save right away
    const saveField = (key: string, value: any) => {
        setProfile((p: any) => ({ ...p, [key]: value }));
        saveSetting(key, value);
    };
    // For continuous inputs (text, number, color picker) — debounce 500ms
    const debouncedTimers = useRef<Record<string, NodeJS.Timeout>>({});
    const saveFieldDebounced = (key: string, value: any) => {
        setProfile((p: any) => ({ ...p, [key]: value }));
        if (debouncedTimers.current[key]) clearTimeout(debouncedTimers.current[key]);
        debouncedTimers.current[key] = setTimeout(() => saveSetting(key, value), 500);
    };
    // For standalone state + saveSetting (showSomeday, showTimeGrid, etc.)
    const saveStateAndSetting = (setter: (v: any) => void, key: string, value: any) => {
        setter(value);
        saveSetting(key, value);
    };

    // Load fonts for preview
    // Font loading moved to top level WeeklyView component

    useEffect(() => {
        setIsLoading(false);
        // Trigger slide-in after mount
        const timer = setTimeout(() => setIsVisible(true), 10);
        return () => clearTimeout(timer);
    }, []);

    const handleClose = () => {
        setIsVisible(false);
        setTimeout(onClose, 300);
    };


    const handleUpdateConnections = async (updatedConnections: any[]) => {
        onUpdateConnections(updatedConnections);
    };

    const handleRemoveConnection = async (connectionId: string) => {
        await onRemoveConnection(connectionId);
    };


    const handleGoogleConnect = () => {
        window.location.href = "/api/calendar/google/start";
    };

    // --- Apple Calendar (CalDAV) handlers ---
    const handleAppleCalendarConnect = () => {
        setShowAppleCalendarModal(true);
        setAppleCalError("");
        setAppleCalEmail("");
        setAppleCalPassword("");
    };

    const submitAppleCalendarConnection = async () => {
        if (!appleCalEmail || !appleCalPassword) {
            setAppleCalError("Please enter both email and app-specific password.");
            return;
        }

        setIsConnectingAppleCal(true);
        setAppleCalError("");

        try {
            const response = await fetch("/api/calendar/apple/connect", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    email: appleCalEmail,
                    password: appleCalPassword,
                }),
            });

            const data = await response.json();

            if (!response.ok) {
                throw new Error(data.error || "Failed to connect Apple Calendar");
            }

            setShowAppleCalendarModal(false);
            showConnMsg("success", "Apple Calendar connected successfully!");
            setTimeout(() => { window.location.href = window.location.pathname + "?calendar=apple_connected&openSettings=calendars"; }, 1200);
        } catch (err: any) {
            setAppleCalError(err.message || "Connection failed");
        } finally {
            setIsConnectingAppleCal(false);
        }
    };

    // --- Synology Calendar handlers ---
    const handleSynologyCalendarConnect = () => {
        setShowSynologyCalendarModal(true);
        setSynologyCalError("");
        setSynologyCalServerUrl("");
        setSynologyCalUsername("");
        setSynologyCalPassword("");
    };

    const submitSynologyCalendarConnection = async () => {
        if (!synologyCalServerUrl || !synologyCalUsername || !synologyCalPassword) {
            setSynologyCalError("Please enter Server URL, username, and password.");
            return;
        }

        setIsConnectingSynologyCal(true);
        setSynologyCalError("");

        try {
            const response = await fetch("/api/calendar/synology/connect", {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    serverUrl: synologyCalServerUrl,
                    username: synologyCalUsername,
                    password: synologyCalPassword,
                }),
            });

            const data = await response.json();

            if (!response.ok) {
                throw new Error(data.error || "Failed to connect Synology Calendar");
            }

            setShowSynologyCalendarModal(false);
            showConnMsg("success", "Synology Calendar connected successfully!");
            setTimeout(() => { window.location.href = window.location.pathname + "?calendar=synology_connected&openSettings=calendars"; }, 1200);
        } catch (err: any) {
            setSynologyCalError(err.message || "Connection failed");
        } finally {
            setIsConnectingSynologyCal(false);
        }
    };

    const handleOutlookConnect = () => {
        window.location.href = "/api/calendar/outlook/start";
    };

    const handleNotionConnect = () => {
        window.location.href = "/api/calendar/notion/start";
    };

    const handleUpdateCalendar = async (
        connectionId: string,
        calendarId: string,
        updates: { selected?: boolean; editable?: boolean },
    ) => {
        // Optimistic Update
        const updatedConnections = connections.map((conn) => {
            if (conn.id === connectionId && conn.calendars) {
                return {
                    ...conn,
                    calendars: conn.calendars.map((c: any) =>
                        c.id === calendarId ? { ...c, ...updates } : c,
                    ),
                };
            }
            return conn;
        });

        onUpdateConnections(updatedConnections); // used props instead of setConnections

        // API Call
        try {
            const conn = updatedConnections.find((c) => c.id === connectionId);
            if (conn) {
                await fetch("/api/calendar/connections", {
                    method: "PATCH",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({
                        id: connectionId,
                        calendars: conn.calendars,
                    }),
                });
            }
        } catch (error) {
            console.error("Failed to update calendar selection", error);
            // Revert on error - tough to do without refetching from parent or keeping prev state
        }
    };

    const handleUpdateProfile = async (e: React.FormEvent) => {
        e.preventDefault();

        // Only validate password if in Account tab and password field is filled
        if (
            activeTab === "account" &&
            passwords.new &&
            passwords.new !== passwords.confirm
        ) {
            setAccountMsg("Passwords do not match");
            return;
        }

        try {
            const res = await fetch("/api/user/profile", {
                method: "PATCH",
                headers: { "Content-Type": "application/json" },
                body: JSON.stringify({
                    ...profile,
                    dateAlignment: profile.dateAlignment,
                    showTimeGrid: showTimeGrid,
                    cellDuration: cellDuration,
                    viewStyle: viewStyle,
                    showNextTask: showNextTask,
                    showSomeday: showSomeday,
                    showAllDayEvents: showAllDay,
                    showSchedule: showSchedule,
                    // The following will be taken from profile if present,
                    // ensuring edited state is saved.
                    // Validate numeric fields to avoid NaN
                    focusBreakDuration: !isNaN(Number(profile.focusBreakDuration))
                        ? Number(profile.focusBreakDuration)
                        : focusBreakDuration || 5,
                    focusTimerDuration: !isNaN(Number(profile.focusTimerDuration))
                        ? Number(profile.focusTimerDuration)
                        : focusTimerDuration || 25,
                    password:
                        passwords.new && passwords.new.trim() !== ""
                            ? passwords.new
                            : undefined,
                }),
            });

            const data = await res.json();

            if (res.ok) {
                setAccountMsg("Profile updated successfully!");

                // Update local app state
                if (onSettingsChanged) {
                    onSettingsChanged({
                        showTimeGrid: showTimeGrid,
                        cellDuration: cellDuration,
                        viewStyle: viewStyle,
                        language: profile.language || "de",
                        dateFormat: profile.dateFormat || "MM/dd/yyyy",
                        timeFormat: profile.timeFormat || "12h",
                        startHour: profile.startHour || 8,
                        endHour: profile.endHour || 18,
                        fontSize: fontSize,
                        showNextTask: showNextTask,
                        showSomeday: showSomeday,
                        showAllDayEvents: showAllDay,
                        showSchedule: showSchedule,
                        headlineFont: headlineFont,
                        headlineFontSize: headlineFontSize,
                        headlineFontWeight: headlineFontWeight,
                        dateFontFamily: dateFontFamily,
                        dateFontSize: dateFontSize,
                        dateFontWeight: dateFontWeight,
                        timeTaskFontFamily: timeTaskFontFamily,
                        timeTaskFontSize: timeTaskFontSize,
                        timeTaskFontWeight: timeTaskFontWeight,
                        bodyFont: bodyFont,
                        taskFontFamily: taskFontFamily,
                        taskFontSize: taskFontSize,
                        taskFontWeight: taskFontWeight,
                        fontWeight: fontWeight,
                        weekendColorSat: weekendColorSat,
                        weekendColorSun: weekendColorSun,
                        weekdayColor: profile.weekdayColor,
                        dateColor: profile.dateColor,
                        taskColor: profile.taskColor,
                        todayHighlightColor: profile.todayHighlightColor,
                        autoRolling: profile.autoRolling,
                        protectEventTimes: profile.protectEventTimes || protectEventTimes,
                        focusTimerDuration:
                            profile.focusTimerDuration || focusTimerDuration,
                        focusBreakDuration:
                            profile.focusBreakDuration || focusBreakDuration,
                        pastDayColor: profile.pastDayColor,
                        goalScope: profile.goalScope,
                        dateLayout: profile.dateLayout,
                        mobileDateLayout: profile.mobileDateLayout,
                        dateAlignment: profile.dateAlignment,
                        startDayOffset: profile.startDayOffset,
                    } as any);
                }

                if (profile.focusTimerDuration && setFocusTimerDuration) {
                    setFocusTimerDuration(profile.focusTimerDuration);
                }
                if (profile.focusBreakDuration && setFocusBreakDuration) {
                    setFocusBreakDuration(profile.focusBreakDuration);
                }

                // Temporary success message
                setTimeout(() => setAccountMsg(""), 3000);
            } else {
                console.error("Failed to update profile:", data);
                setAccountMsg(
                    data.details
                        ? `${data.error}: ${data.details}`
                        : data.error || "Failed to update profile",
                );
            }
        } catch (e) {
            console.error("Error updating profile:", e);
            setAccountMsg("Error updating profile");
        }
    };

    const handleDownloadData = () => {
        window.open("/api/user/export", "_blank");
    };

    const handleExportAllData = async () => {
        setIsExportingAll(true);
        try {
            const res = await fetch("/api/user/export-data");
            if (!res.ok) throw new Error("Export failed");
            const blob = await res.blob();
            const url = URL.createObjectURL(blob);
            const a = document.createElement("a");
            a.href = url;
            a.download = `weekly_todo_backup_${new Date().toISOString().split("T")[0]}.json`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            URL.revokeObjectURL(url);
        } catch (e) {
            console.error("Export error:", e);
        } finally {
            setIsExportingAll(false);
        }
    };

    const handleImportData = async () => {
        if (!importFile) return;

        if (importMode === "replace") {
            const confirmed = confirm(t.importConfirmReplace);
            if (!confirmed) return;
        }

        setIsImporting(true);
        setImportMsg("");

        try {
            const text = await importFile.text();
            JSON.parse(text); // validate JSON

            const res = await fetch(`/api/user/import-data?mode=${importMode}`, {
                method: "POST",
                headers: { "Content-Type": "application/json" },
                body: text,
            });

            const data = await res.json();

            if (!res.ok) {
                setImportMsg(`❌ ${data.error || "Import failed"}`);
                return;
            }

            const { imported } = data;
            const parts: string[] = [];
            if (imported.tasks > 0) parts.push(`${imported.tasks} ${profile.language === "de" ? "Aufgaben" : "tasks"}`);
            if (imported.somedayLists > 0) parts.push(`${imported.somedayLists} ${profile.language === "de" ? "Listen" : "lists"}`);
            if (imported.projects > 0) parts.push(`${imported.projects} ${profile.language === "de" ? "Projekte" : "projects"}`);

            setImportMsg(`✓ ${profile.language === "de" ? "Importiert" : "Imported"}: ${parts.join(", ")}`);
            setImportFile(null);

            // Reset file input
            const fileInput = document.getElementById("import-file-input") as HTMLInputElement;
            if (fileInput) fileInput.value = "";

            // Reload to reflect imported data
            setTimeout(() => window.location.reload(), 1500);
        } catch (e) {
            setImportMsg(`❌ ${profile.language === "de" ? "Ungültige JSON-Datei" : "Invalid JSON file"}`);
        } finally {
            setIsImporting(false);
        }
    };

    const handleDeleteAccount = async () => {
        if (
            !confirm(
                "Are you sure you want to delete your account? This action cannot be undone.",
            )
        )
            return;

        try {
            const res = await fetch("/api/user/profile", { method: "DELETE" });
            if (res.ok) {
                window.location.href = "/";
            } else {
                alert("Failed to delete account");
            }
        } catch (e) {
            alert("Error deleting account");
        }
    };

    return (
        <>
            <div
                className={`weekly-settings-overlay ${isVisible ? "show" : ""}`}
                onClick={handleClose}
                style={{ zIndex: 1999 }}
            />
            <div className={`weekly-settings-sidebar ${isVisible ? "open" : ""}`}>
                <header className="weekly-settings-header">
                    <h2 className="weekly-settings-title">{t.settings}</h2>
                    <button className="weekly-settings-close" onClick={handleClose}>
                        ×
                    </button>
                </header>

                <div
                    className="weekly-settings-tabs"
                    style={{
                        display: "flex",
                        justifyContent: "center",
                        flexWrap: "wrap",
                        gap: "4px",
                        borderBottom: "1px solid var(--weekly-border, #eee)",
                        padding: "0 24px",
                    }}
                >
                    {([
                        { key: "general", icon: <Settings size={18} />, label: t.general },
                        { key: "localisation", icon: <Globe size={18} />, label: t.localisation },
                        { key: "calendar", icon: <Link size={18} />, label: t.calendar },
                        { key: "account", icon: <User size={18} />, label: t.account },
                        { key: "styling", icon: <Palette size={18} />, label: t.styling },
                        { key: "motivation", icon: <Sparkles size={18} />, label: t.motivation },
                        { key: "about", icon: <Info size={18} />, label: t.about },
                    ] as const).map((tab) => (
                        <button
                            key={tab.key}
                            onClick={() => setActiveTab(tab.key as any)}
                            title={tab.label}
                            className="settings-tab-btn"
                            style={{
                                padding: "10px 14px",
                                borderBottom:
                                    activeTab === tab.key
                                        ? "2px solid var(--weekly-text, black)"
                                        : "2px solid transparent",
                                background: "none",
                                border: "none",
                                borderBottomStyle: "solid",
                                borderBottomWidth: "2px",
                                borderBottomColor:
                                    activeTab === tab.key
                                        ? "var(--weekly-text, black)"
                                        : "transparent",
                                cursor: "pointer",
                                opacity: activeTab === tab.key ? 1 : 0.5,
                                color: "var(--weekly-text, #333)",
                                display: "flex",
                                alignItems: "center",
                                justifyContent: "center",
                                transition: "opacity 0.15s, border-color 0.15s",
                                position: "relative",
                            }}
                        >
                            {tab.icon}
                        </button>
                    ))}
                </div>

                <div
                    className="weekly-settings-content"
                    style={{ flex: 1, overflowY: "auto", padding: "24px" }}
                >
                    {activeTab === "general" ? (
                        <div
                            style={{ display: "flex", flexDirection: "column", gap: "16px" }}
                        >
                            {/* ── General settings (not view-specific) ── */}
                            <div style={{ display: "flex", flexDirection: "column", gap: "12px", paddingBottom: "16px", borderBottom: "1px solid var(--weekly-border, #e5e7eb)" }}>
                                {/* Header Display */}
                                <div>
                                    <label style={{ fontSize: "0.85rem", fontWeight: 600, color: "var(--weekly-settings-label)" }}>
                                        {t.headerDisplay}
                                    </label>
                                    <div className="mt-1">
                                        <select
                                            value={profile.headerDisplay || "kw"}
                                            onChange={(e) => {
                                                const val = e.target.value as any;
                                                setProfile({ ...profile, headerDisplay: val });
                                                saveSetting("headerDisplay", val);
                                            }}
                                            className="weekly-input w-full p-2 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white rounded"
                                        >
                                            <option value="kw">{t.headerDisplayKW}</option>
                                            <option value="month">{t.headerDisplayMonth}</option>
                                            <option value="month_year">{t.headerDisplayMonthYear}</option>
                                            <option value="date">{t.headerDisplayDate}</option>
                                            <option value="custom">{t.headerDisplayCustom}</option>
                                            <option value="none">{t.headerDisplayNone}</option>
                                        </select>
                                    </div>
                                    {profile.headerDisplay === "custom" && (
                                        <div className="mt-2">
                                            <label style={{ fontSize: "0.75rem", color: "var(--weekly-settings-label)", display: "block", marginBottom: "4px" }}>
                                                {t.headerCustomFormatLabel}
                                            </label>
                                            <input
                                                type="text"
                                                value={profile.headerCustomFormat || ""}
                                                onChange={(e) => {
                                                    const val = e.target.value;
                                                    setProfile({ ...profile, headerCustomFormat: val });
                                                    saveSetting("headerCustomFormat", val);
                                                }}
                                                placeholder="KW WW | YYYY or DD.MM.YYYY"
                                                className="w-full px-3 py-1.5 text-sm rounded border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                                            />
                                            <div className="mt-1 text-[10px] text-gray-500 leading-tight">
                                                Tokens: WW (Week), YYYY (Year), MMMM (Month Name), MM (Month Num), DD (Day), [TODAY] (Active Date)
                                            </div>
                                        </div>
                                    )}
                                </div>

                                {/* Push Notifications */}
                                <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
                                    <input
                                        type="checkbox"
                                        id="notificationsEnabled"
                                        checked={profile.notificationsEnabled || false}
                                        onChange={async (e) => {
                                            const enabled = e.target.checked;
                                            if (enabled) {
                                                try {
                                                    const { isNotificationSupported, requestNotificationPermission, registerServiceWorker, subscribeToPush, sendSubscriptionToServer } = await import('@/lib/push-notifications');
                                                    if (!isNotificationSupported()) {
                                                        alert('Push notifications are not supported in this browser.');
                                                        return;
                                                    }
                                                    const permission = await requestNotificationPermission();
                                                    if (permission !== 'granted') {
                                                        alert('Notification permission was denied.');
                                                        return;
                                                    }
                                                    const registration = await registerServiceWorker();
                                                    if (!registration) { alert('Failed to register service worker.'); return; }
                                                    const subscription = await subscribeToPush(registration);
                                                    if (!subscription) { alert('Failed to subscribe to push notifications.'); return; }
                                                    const sent = await sendSubscriptionToServer(subscription);
                                                    if (!sent) { alert('Failed to save subscription.'); return; }
                                                    saveField("notificationsEnabled", true);
                                                } catch (err) {
                                                    console.error('Push notification setup failed:', err);
                                                    alert('Failed to enable notifications.');
                                                }
                                            } else {
                                                try {
                                                    const { unsubscribeFromPush } = await import('@/lib/push-notifications');
                                                    const registration = await navigator.serviceWorker.ready;
                                                    await unsubscribeFromPush(registration);
                                                } catch (err) {
                                                    console.error('Unsubscribe failed:', err);
                                                }
                                                saveField("notificationsEnabled", false);
                                            }
                                        }}
                                        style={{ width: "16px", height: "16px" }}
                                    />
                                    <label htmlFor="notificationsEnabled" style={{ fontSize: "0.9rem", fontWeight: 600 }}>
                                        {(profile.language || "en") === "de" ? "Push-Benachrichtigungen" : "Push Notifications"}
                                    </label>
                                </div>
                            </div>

                            {/* ── View Style Tabs ── */}
                            <div>
                                <div style={{
                                    display: "flex",
                                    borderBottom: "2px solid var(--weekly-border, #e5e7eb)",
                                    gap: "0",
                                }}>
                                    {([
                                        { key: "simple", label: t.simpleView, icon: <Calendar size={14} /> },
                                        { key: "calendar", label: t.calendarView, icon: <CalendarDays size={14} /> },
                                        { key: "list", label: t.listView, icon: <ListTodo size={14} /> },
                                        { key: "kanban", label: t.kanbanView, icon: <Kanban size={14} /> },
                                    ] as const).map((tab) => (
                                        <button
                                            key={tab.key}
                                            onClick={() => {
                                                setViewStyle(tab.key);
                                                saveSetting("viewStyle", tab.key);
                                                if (tab.key === "simple" || tab.key === "calendar") {
                                                    setShowTimeGrid(true);
                                                    saveSetting("showTimeGrid", true);
                                                } else if (tab.key === "list") {
                                                    setShowTimeGrid(false);
                                                    saveSetting("showTimeGrid", false);
                                                }
                                            }}
                                            style={{
                                                flex: 1,
                                                padding: "10px 8px",
                                                fontSize: "0.8rem",
                                                fontWeight: viewStyle === tab.key ? 700 : 400,
                                                color: viewStyle === tab.key ? "var(--weekly-text, #333)" : "var(--weekly-text-light, #9ca3af)",
                                                background: "none",
                                                border: "none",
                                                borderBottom: viewStyle === tab.key ? "2px solid var(--weekly-text, #333)" : "2px solid transparent",
                                                marginBottom: "-2px",
                                                cursor: "pointer",
                                                transition: "all 0.15s",
                                                display: "flex",
                                                alignItems: "center",
                                                justifyContent: "center",
                                                gap: "4px",
                                            }}
                                        >
                                            {tab.icon}
                                            {tab.label}
                                        </button>
                                    ))}
                                </div>
                            </div>

                            {/* ── View-specific settings ── */}
                            <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>

                                {/* Time grid settings — for simple & calendar views */}
                                {(viewStyle === "simple" || viewStyle === "calendar") && (
                                    <div style={{ display: "flex", flexDirection: "column", gap: "10px" }}>
                                        <div>
                                            <label style={{ display: "block", fontSize: "0.9rem", fontWeight: 600, marginBottom: "4px" }}>
                                                {t.timeSlotDuration}
                                            </label>
                                            <select
                                                value={perView.getEffective("cellDuration", cellDuration) as number}
                                                onChange={(e) => {
                                                    const val = Number(e.target.value) as CellDuration;
                                                    perView.saveViewSetting("cellDuration", val, true);
                                                }}
                                                className="weekly-input"
                                                style={{ width: "100%", padding: "8px", border: "1px solid #ddd", borderRadius: "4px" }}
                                            >
                                                <option value={15}>15 min</option>
                                                <option value={20}>20 min</option>
                                                <option value={30}>30 min</option>
                                                <option value={60}>1 hour</option>
                                            </select>
                                        </div>

                                        <div style={{ display: "flex", gap: "12px" }}>
                                            <div style={{ flex: 1 }}>
                                                <label style={{ display: "block", fontSize: "0.9rem", fontWeight: 600, marginBottom: "4px" }}>
                                                    {t.startHour}
                                                </label>
                                                <input
                                                    type="number" min="0" max="23"
                                                    value={(perView.getEffective("startHour", profile.startHour ?? 8) as number)}
                                                    onChange={(e) => {
                                                        const h = parseInt(e.target.value) || 0;
                                                        perView.saveViewSetting("startHour", h, true);
                                                    }}
                                                    className="weekly-input"
                                                    style={{ width: "100%", padding: "8px", border: "1px solid #ddd", borderRadius: "4px" }}
                                                />
                                            </div>
                                            <div style={{ flex: 1 }}>
                                                <label style={{ display: "block", fontSize: "0.9rem", fontWeight: 600, marginBottom: "4px" }}>
                                                    {t.endHour}
                                                </label>
                                                <input
                                                    type="number" min="1" max="24"
                                                    value={(perView.getEffective("endHour", profile.endHour ?? 18) as number)}
                                                    onChange={(e) => {
                                                        const h = parseInt(e.target.value) || 0;
                                                        perView.saveViewSetting("endHour", h, true);
                                                    }}
                                                    className="weekly-input"
                                                    style={{ width: "100%", padding: "8px", border: "1px solid #ddd", borderRadius: "4px" }}
                                                />
                                            </div>
                                        </div>

                                        <div>
                                            <label style={{ display: "block", fontSize: "0.9rem", fontWeight: 600, marginBottom: "4px" }}>
                                                {t.hourLabelFormat}
                                            </label>
                                            <select
                                                value={perView.getEffective("hourLabelFormat", hourLabelFormat) as string}
                                                onChange={(e) => {
                                                    const fmt = e.target.value as "short" | "full";
                                                    perView.saveViewSetting("hourLabelFormat", fmt, true);
                                                }}
                                                className="weekly-input"
                                                style={{ width: "100%", padding: "8px", border: "1px solid #ddd", borderRadius: "4px" }}
                                            >
                                                <option value="short">{t.hourLabelShort}</option>
                                                <option value="full">{t.hourLabelFull}</option>
                                            </select>
                                        </div>

                                        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
                                            <input
                                                type="checkbox" id="showSubHourSlots"
                                                checked={perView.getEffective("showSubHourSlots", showSubHourSlots) as boolean}
                                                onChange={(e) => {
                                                    perView.saveViewSetting("showSubHourSlots", e.target.checked, true);
                                                }}
                                                style={{ width: "16px", height: "16px" }}
                                            />
                                            <label htmlFor="showSubHourSlots" style={{ fontSize: "0.9rem", fontWeight: 600 }}>
                                                {t.showSubhourLabels}
                                            </label>
                                        </div>

                                        {/* Weather Settings */}
                                        <div style={{ marginTop: "8px", borderTop: "1px solid var(--border-color, #e5e7eb)", paddingTop: "12px" }}>
                                            <label style={{ display: "flex", alignItems: "center", gap: "8px", marginBottom: "8px", cursor: "pointer" }}>
                                                <input
                                                    type="checkbox"
                                                    checked={perView.getEffective("weatherEnabled", profile.weatherEnabled || false) as boolean}
                                                    onChange={(e) => {
                                                        setProfile({ ...profile, weatherEnabled: e.target.checked });
                                                        saveSetting("weatherEnabled", e.target.checked);
                                                        perView.saveViewSetting("weatherEnabled", e.target.checked, true);
                                                    }}
                                                    style={{ width: "16px", height: "16px" }}
                                                />
                                                <span style={{ fontSize: "0.9rem", fontWeight: 600 }}>
                                                    {profile.language === "de" ? "Wetter anzeigen" : "Show weather"}
                                                </span>
                                            </label>
                                            {(perView.getEffective("weatherEnabled", profile.weatherEnabled || false) as boolean) && (() => {
                                                const recentCities: Array<{ name: string; country: string; admin1?: string; lat: number; lon: number }> = Array.isArray(profile.weatherRecentCities) ? profile.weatherRecentCities : [];
                                                const selectCity = (city: { name: string; country: string; admin1?: string; lat: number; lon: number }) => {
                                                    const locationStr = `${city.name}, ${city.country}`;
                                                    setProfile({ ...profile, weatherLat: city.lat, weatherLon: city.lon, weatherLocation: locationStr });
                                                    saveSetting("weatherLat", city.lat);
                                                    saveSetting("weatherLon", city.lon);
                                                    saveSetting("weatherLocation", locationStr);
                                                    // Add to recent cities (deduplicate by lat+lon, keep max 8)
                                                    const entry = { name: city.name, country: city.country, ...(city.admin1 ? { admin1: city.admin1 } : {}), lat: city.lat, lon: city.lon };
                                                    const filtered = recentCities.filter((c: any) => !(Math.abs(c.lat - city.lat) < 0.01 && Math.abs(c.lon - city.lon) < 0.01));
                                                    const updated = [entry, ...filtered].slice(0, 8);
                                                    setProfile((p: any) => ({ ...p, weatherRecentCities: updated }));
                                                    saveSetting("weatherRecentCities", updated);
                                                    setWeatherSearchResults([]);
                                                };
                                                return (
                                                <div style={{ display: "flex", flexDirection: "column", gap: "8px", marginLeft: "24px" }}>
                                                    <input
                                                        type="text"
                                                        placeholder={profile.language === "de" ? "Stadt suchen..." : "Search city..."}
                                                        className="weekly-input"
                                                        style={{ padding: "6px 10px", fontSize: "0.85rem" }}
                                                        onChange={async (e) => {
                                                            const q = e.target.value;
                                                            if (q.length < 2) { setWeatherSearchResults([]); return; }
                                                            try {
                                                                const res = await fetch(`/api/weather/geocode?q=${encodeURIComponent(q)}`);
                                                                const data = await res.json();
                                                                setWeatherSearchResults(data.results || []);
                                                            } catch { setWeatherSearchResults([]); }
                                                        }}
                                                    />
                                                    {weatherSearchResults.length > 0 && (
                                                        <div style={{ border: "1px solid var(--border-color, #e5e7eb)", borderRadius: "8px", overflow: "hidden" }}>
                                                            {weatherSearchResults.map((r: any, i: number) => (
                                                                <button
                                                                    key={i}
                                                                    onClick={() => selectCity(r)}
                                                                    style={{ display: "block", width: "100%", padding: "8px 12px", textAlign: "left", border: "none", borderBottom: "1px solid var(--border-color, #e5e7eb)", background: "var(--bg-secondary, #f9fafb)", cursor: "pointer", fontSize: "0.85rem" }}
                                                                >
                                                                    {r.name}{r.admin1 ? `, ${r.admin1}` : ""}, {r.country} <span style={{ color: "#888", fontSize: "0.75rem" }}>({r.lat.toFixed(2)}, {r.lon.toFixed(2)})</span>
                                                                </button>
                                                            ))}
                                                        </div>
                                                    )}
                                                    {profile.weatherLocation && (
                                                        <div style={{ display: "flex", alignItems: "center", gap: "8px", padding: "8px 12px", borderRadius: "8px", background: "var(--bg-secondary, #f9fafb)" }}>
                                                            <span style={{ fontSize: "0.85rem", fontWeight: 500 }}>📍 {profile.weatherLocation}</span>
                                                            <span style={{ fontSize: "0.75rem", color: "#888" }}>({profile.weatherLat?.toFixed(2)}, {profile.weatherLon?.toFixed(2)})</span>
                                                        </div>
                                                    )}
                                                    {recentCities.length > 0 && (
                                                        <div>
                                                            <div style={{ fontSize: "0.75rem", fontWeight: 600, color: "var(--weekly-text-light, #9ca3af)", marginBottom: "4px" }}>
                                                                {profile.language === "de" ? "Letzte Städte" : "Recent cities"}
                                                            </div>
                                                            <div style={{ display: "flex", flexWrap: "wrap", gap: "4px" }}>
                                                                {recentCities.map((c: any, i: number) => {
                                                                    const isActive = profile.weatherLat && Math.abs(c.lat - profile.weatherLat) < 0.01 && profile.weatherLon && Math.abs(c.lon - profile.weatherLon) < 0.01;
                                                                    return (
                                                                        <button
                                                                            key={i}
                                                                            onClick={() => selectCity(c)}
                                                                            style={{
                                                                                padding: "4px 10px", fontSize: "0.8rem", borderRadius: "999px",
                                                                                border: isActive ? "1.5px solid var(--weekly-accent, #0ea5e9)" : "1px solid var(--weekly-border, #e5e7eb)",
                                                                                background: isActive ? "var(--weekly-accent, #0ea5e9)" : "var(--bg-secondary, #f9fafb)",
                                                                                color: isActive ? "#fff" : "var(--weekly-text, #333)",
                                                                                cursor: "pointer", fontWeight: isActive ? 600 : 400,
                                                                            }}
                                                                        >
                                                                            {c.name}
                                                                        </button>
                                                                    );
                                                                })}
                                                            </div>
                                                        </div>
                                                    )}
                                                    {/* Weather display options */}
                                                    <div style={{ marginTop: "8px", borderTop: "1px solid var(--border-color, #e5e7eb)", paddingTop: "8px" }}>
                                                        <div style={{ fontSize: "0.8rem", fontWeight: 600, marginBottom: "6px", color: "var(--weekly-text-light, #666)" }}>
                                                            {profile.language === "de" ? "Angezeigte Daten" : "Display data"}
                                                        </div>
                                                        {([
                                                            { key: "icon" as WeatherDisplayKey, label: profile.language === "de" ? "Wettersymbol" : "Weather icon", icon: "☀️" },
                                                            { key: "temp" as WeatherDisplayKey, label: profile.language === "de" ? "Temperatur" : "Temperature", icon: "🌡️" },
                                                            { key: "feelsLike" as WeatherDisplayKey, label: profile.language === "de" ? "Gefühlte Temp." : "Feels like", icon: "🤒" },
                                                            { key: "wind" as WeatherDisplayKey, label: profile.language === "de" ? "Windgeschwindigkeit" : "Wind speed", icon: "🌬️" },
                                                            { key: "gusts" as WeatherDisplayKey, label: profile.language === "de" ? "Windböen" : "Wind gusts", icon: "💨" },
                                                            { key: "precipProb" as WeatherDisplayKey, label: profile.language === "de" ? "Regenwahrscheinl." : "Rain probability", icon: "🌧️" },
                                                            { key: "precip" as WeatherDisplayKey, label: profile.language === "de" ? "Niederschlag (mm)" : "Precipitation (mm)", icon: "💦" },
                                                            { key: "humidity" as WeatherDisplayKey, label: profile.language === "de" ? "Luftfeuchtigkeit" : "Humidity", icon: "💧" },
                                                            { key: "uv" as WeatherDisplayKey, label: "UV Index", icon: "☀️" },
                                                        ]).map(({ key, label, icon }) => {
                                                            const current = (perView.getEffective("weatherDisplay", WEATHER_DISPLAY_DEFAULTS) || WEATHER_DISPLAY_DEFAULTS) as WeatherDisplayKey[];
                                                            const checked = current.includes(key);
                                                            return (
                                                                <label key={key} style={{ display: "flex", alignItems: "center", gap: "6px", cursor: "pointer", padding: "3px 0", fontSize: "0.82rem" }}>
                                                                    <input
                                                                        type="checkbox"
                                                                        checked={checked}
                                                                        onChange={() => {
                                                                            const updated = checked ? current.filter(k => k !== key) : [...current, key];
                                                                            perView.saveViewSetting("weatherDisplay", updated.length > 0 ? updated : ["icon"], true);
                                                                        }}
                                                                        style={{ width: "14px", height: "14px" }}
                                                                    />
                                                                    <span>{icon}</span>
                                                                    <span>{label}</span>
                                                                </label>
                                                            );
                                                        })}
                                                    </div>
                                                </div>
                                                );
                                            })()}
                                        </div>
                                    </div>
                                )}

                                {/* Per-view display settings */}
                                <div style={{ display: "flex", flexDirection: "column", gap: "10px", borderTop: (viewStyle === "simple" || viewStyle === "calendar") ? "1px solid var(--weekly-border, #e5e7eb)" : "none", paddingTop: (viewStyle === "simple" || viewStyle === "calendar") ? "12px" : "0" }}>
                                    <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
                                        <input type="checkbox" id="showSomeday"
                                            checked={perView.getEffective("showSomeday", showSomeday) as boolean}
                                            onChange={(e) => {
                                                perView.saveViewSetting("showSomeday", e.target.checked, true);
                                            }}
                                            style={{ width: "16px", height: "16px" }} />
                                        <label htmlFor="showSomeday" style={{ fontSize: "0.9rem", fontWeight: 600 }}>{t.showSomeday}</label>
                                    </div>

                                    {viewStyle !== "kanban" && (
                                        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
                                            <input type="checkbox" id="showAllDay"
                                                checked={perView.getEffective("showAllDayEvents", showAllDay) as boolean}
                                                onChange={(e) => {
                                                    perView.saveViewSetting("showAllDayEvents", e.target.checked, true);
                                                }}
                                                style={{ width: "16px", height: "16px" }} />
                                            <label htmlFor="showAllDay" style={{ fontSize: "0.9rem", fontWeight: 600 }}>{t.showAllDay}</label>
                                        </div>
                                    )}

                                    {viewStyle !== "kanban" && (perView.getEffective("showAllDayEvents", showAllDay) as boolean) && (
                                        <div style={{ marginLeft: "24px" }}>
                                            <select
                                                value={perView.getEffective("allDayPosition", allDayPosition) as string}
                                                onChange={(e) => {
                                                    const pos = e.target.value as "above" | "below";
                                                    perView.saveViewSetting("allDayPosition", pos, true);
                                                }}
                                                className="weekly-input"
                                                style={{ width: "100%", padding: "8px", border: "1px solid #ddd", borderRadius: "4px" }}
                                            >
                                                <option value="above">{t.allDayAbove}</option>
                                                <option value="below">{t.allDayBelow}</option>
                                            </select>
                                        </div>
                                    )}

                                    {viewStyle !== "kanban" && (
                                        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
                                            <input type="checkbox" id="autoRolling" checked={profile.autoRolling || false}
                                                onChange={(e) => saveField("autoRolling", e.target.checked)}
                                                style={{ width: "16px", height: "16px" }} />
                                            <label htmlFor="autoRolling" style={{ fontSize: "0.9rem", fontWeight: 600 }}>{t.runningList}</label>
                                        </div>
                                    )}

                                    <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
                                        <input type="checkbox" id="showTaskCheckboxes"
                                            checked={perView.getEffective("showTaskCheckboxes", profile.showTaskCheckboxes) as boolean}
                                            onChange={(e) => {
                                                perView.saveViewSetting("showTaskCheckboxes", e.target.checked, true);
                                            }}
                                            style={{ width: "16px", height: "16px" }} />
                                        <label htmlFor="showTaskCheckboxes" style={{ fontSize: "0.9rem", fontWeight: 600 }}>{t.showTaskCheckboxes}</label>
                                    </div>

                                    <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
                                        <input type="checkbox" id="showProjectIcons"
                                            checked={perView.getEffective("showProjectIcons", profile.showProjectIcons) as boolean}
                                            onChange={(e) => {
                                                perView.saveViewSetting("showProjectIcons", e.target.checked, true);
                                            }}
                                            style={{ width: "16px", height: "16px" }} />
                                        <label htmlFor="showProjectIcons" style={{ fontSize: "0.9rem", fontWeight: 600 }}>{t.showProjectIcons}</label>
                                    </div>

                                    {viewStyle !== "kanban" && (
                                        <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
                                            <input type="checkbox" id="protectEventTimes" checked={profile.protectEventTimes || false}
                                                onChange={(e) => saveField("protectEventTimes", e.target.checked)}
                                                style={{ width: "16px", height: "16px" }} />
                                            <label htmlFor="protectEventTimes" style={{ fontSize: "0.9rem", fontWeight: 600 }}>{t.protectEventTimes}</label>
                                        </div>
                                    )}

                                    <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
                                        <input type="checkbox" id="showCompletedTasks"
                                            checked={perView.getEffective("showCompletedTasks", profile.showCompletedTasks !== false) as boolean}
                                            onChange={(e) => {
                                                perView.saveViewSetting("showCompletedTasks", e.target.checked, true);
                                            }}
                                            style={{ width: "16px", height: "16px" }} />
                                        <label htmlFor="showCompletedTasks" style={{ fontSize: "0.9rem", fontWeight: 600 }}>
                                            {profile.language === "de" ? "Erledigte Aufgaben anzeigen" : "Show completed tasks"}
                                        </label>
                                    </div>
                                </div>
                            </div>

                        </div>
                    ) : activeTab === "localisation" ? (
                        <div
                            style={{ display: "flex", flexDirection: "column", gap: "20px" }}
                        >
                            <h4 style={{ fontSize: "1rem", fontWeight: 600, margin: 0 }}>
                                {t.localisation || "Localisation"}
                            </h4>

                            {/* Start Week Setting + Start View On */}
                            <div style={{ display: "flex", gap: "24px", flexWrap: "wrap" }}>
                                <div>
                                    <label
                                        style={{
                                            display: "block",
                                            fontSize: "0.9rem",
                                            fontWeight: 600,
                                            marginBottom: "4px",
                                        }}
                                    >
                                        {t.weekStartLabel}
                                    </label>
                                    <div style={{ display: "flex", gap: "8px" }}>
                                        <button
                                            className={`px-3 py-2 rounded text-sm ${weekStartDay === 1 ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300"}`}
                                            onClick={() => setWeekStartDay(1)}
                                        >
                                            {t.monday}
                                        </button>
                                        <button
                                            className={`px-3 py-2 rounded text-sm ${weekStartDay === 0 ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300"}`}
                                            onClick={() => setWeekStartDay(0)}
                                        >
                                            {t.sunday}
                                        </button>
                                    </div>
                                </div>
                                <div>
                                    <label
                                        style={{
                                            display: "block",
                                            fontSize: "0.9rem",
                                            fontWeight: 600,
                                            marginBottom: "4px",
                                        }}
                                    >
                                        {t.startViewLabel}
                                    </label>
                                    <div style={{ display: "flex", gap: "8px" }}>
                                        <button
                                            className={`px-3 py-2 rounded text-sm ${(profile.startDayOffset || 0) === 0 ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300"}`}
                                            onClick={() => {
                                                setProfile({ ...profile, startDayOffset: 0 });
                                                saveSetting("startDayOffset", 0);
                                                const d = new Date();
                                                d.setHours(0, 0, 0, 0);
                                                setCurrentWeekStart(d);
                                            }}
                                        >
                                            {t.today}
                                        </button>
                                        <button
                                            className={`px-3 py-2 rounded text-sm ${profile.startDayOffset === -1 ? "bg-blue-600 text-white" : "bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300"}`}
                                            onClick={() => {
                                                setProfile({ ...profile, startDayOffset: -1 });
                                                saveSetting("startDayOffset", -1);
                                                const d = new Date();
                                                d.setHours(0, 0, 0, 0);
                                                d.setDate(d.getDate() - 1);
                                                setCurrentWeekStart(d);
                                            }}
                                        >
                                            {t.yesterday}
                                        </button>
                                    </div>
                                </div>
                            </div>

                            {/* Weekday Format */}
                            <div style={{ marginTop: "8px" }}>
                                <label
                                    style={{
                                        display: "block",
                                        fontSize: "0.9rem",
                                        fontWeight: 600,
                                        marginBottom: "8px",
                                    }}
                                >
                                    {t.weekdayFormat || translations["en"].weekdayFormat}
                                </label>
                                <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
                                    <select
                                        value={profile.weekdayFormat || "long"}
                                        onChange={(e) => saveField("weekdayFormat", e.target.value)}
                                        className="weekly-input"
                                        style={{ width: "100%", padding: "8px", fontSize: "0.9rem", border: "1px solid var(--weekly-settings-input-border)", borderRadius: "4px", background: "var(--weekly-settings-input-bg)", color: "var(--weekly-settings-text)" }}
                                    >
                                        <option value="long">{t.weekdayFormatFull || translations["en"].weekdayFormatFull}</option>
                                        <option value="short">{t.weekdayFormatShort || translations["en"].weekdayFormatShort}</option>
                                        <option value="narrow">{t.weekdayFormatNarrow || translations["en"].weekdayFormatNarrow}</option>
                                        <option value="custom">{t.weekdayFormatCustom || translations["en"].weekdayFormatCustom}</option>
                                    </select>

                                    {profile.weekdayFormat === "custom" && (
                                        <input
                                            type="text"
                                            value={profile.customWeekdayNames || ""}
                                            onChange={(e) => saveFieldDebounced("customWeekdayNames", e.target.value)}
                                            placeholder={
                                                weekStartDay === 1
                                                    ? (t.customWeekdayNamesMon || translations["en"].customWeekdayNamesMon)
                                                    : (t.customWeekdayNamesSun || translations["en"].customWeekdayNamesSun)
                                            }
                                            className="weekly-input"
                                            style={{ width: "100%", padding: "8px", fontSize: "0.85rem", border: "1px solid var(--weekly-settings-input-border)", borderRadius: "4px", background: "var(--weekly-settings-input-bg)", color: "var(--weekly-settings-text)" }}
                                        />
                                    )}
                                </div>
                            </div>

                            {/* Weekday Case */}
                            <div style={{ marginTop: "8px" }}>
                                <label
                                    style={{
                                        display: "block",
                                        fontSize: "0.9rem",
                                        fontWeight: 600,
                                        marginBottom: "8px",
                                    }}
                                >
                                    {t.weekdayCase || "Weekday Case"}
                                </label>
                                <select
                                    value={profile.weekdayCase || "capitalize"}
                                    onChange={(e) => saveField("weekdayCase", e.target.value)}
                                    className="weekly-input"
                                    style={{ width: "100%", padding: "8px", fontSize: "0.9rem", border: "1px solid var(--weekly-settings-input-border)", borderRadius: "4px", background: "var(--weekly-settings-input-bg)", color: "var(--weekly-settings-text)" }}
                                >
                                    <option value="normal">{t.weekdayCaseNormal || "Normal (monday)"}</option>
                                    <option value="capitalize">{t.weekdayCaseCapitalize || "Capitalize (Monday)"}</option>
                                    <option value="uppercase">{t.weekdayCaseUppercase || "Uppercase (MONDAY)"}</option>
                                </select>
                            </div>

                            <div style={{ marginTop: "8px" }}>
                                <label
                                    style={{
                                        display: "block",
                                        fontSize: "0.9rem",
                                        fontWeight: 600,
                                        marginBottom: "4px",
                                    }}
                                >
                                    {t.language}
                                </label>
                                <select
                                    value={profile.language || "de"}
                                    onChange={(e) => saveField("language", e.target.value)}
                                    className="weekly-input"
                                    style={{
                                        width: "100%",
                                        padding: "8px",
                                        border: "1px solid #ddd",
                                        borderRadius: "4px",
                                    }}
                                >
                                    <option value="en">🇬🇧 English</option>
                                    <option value="de">🇩🇪 Deutsch</option>
                                    <option value="fr">🇫🇷 Français</option>
                                    <option value="es">🇪🇸 Español</option>
                                    <option value="it">🇮🇹 Italiano</option>
                                </select>
                            </div>

                            <div>
                                <label
                                    style={{
                                        display: "block",
                                        fontSize: "0.9rem",
                                        fontWeight: 600,
                                        marginBottom: "4px",
                                    }}
                                >
                                    {t.dateFormat}
                                </label>
                                <select
                                    value={profile.dateFormat}
                                    onChange={(e) => saveField("dateFormat", e.target.value)}
                                    className="weekly-input"
                                    style={{
                                        width: "100%",
                                        padding: "8px",
                                        border: "1px solid #ddd",
                                        borderRadius: "4px",
                                    }}
                                >
                                    <option value="MM/dd/yyyy">MM/DD/YYYY</option>
                                    <option value="dd/MM/yyyy">DD/MM/YYYY</option>
                                    <option value="yyyy-MM-dd">YYYY-MM-DD</option>
                                </select>
                            </div>

                            <div>
                                <label
                                    style={{
                                        display: "block",
                                        fontSize: "0.9rem",
                                        fontWeight: 600,
                                        marginBottom: "4px",
                                    }}
                                >
                                    {t.timeFormat}
                                </label>
                                <select
                                    value={profile.timeFormat}
                                    onChange={(e) => saveField("timeFormat", e.target.value)}
                                    className="weekly-input"
                                    style={{
                                        width: "100%",
                                        padding: "8px",
                                        border: "1px solid #ddd",
                                        borderRadius: "4px",
                                    }}
                                >
                                    <option value="12h">12h AM/PM</option>
                                    <option value="24h">24H</option>
                                </select>
                            </div>

                            <div />
                        </div>
                    ) : activeTab === "calendar" ? (
                        isLoading ? (
                            <p>Loading connections...</p>
                        ) : (
                            <>
                                <h3
                                    style={{
                                        marginBottom: "1rem",
                                        fontSize: "1rem",
                                        fontWeight: 600,
                                    }}
                                >
                                    {t.connectedCalendars}
                                </h3>

                                {connMsg && (
                                    <div
                                        style={{
                                            padding: "8px 12px",
                                            borderRadius: "4px",
                                            marginBottom: "12px",
                                            fontSize: "0.875rem",
                                            background:
                                                connMsg.type === "success"
                                                    ? "rgba(16, 185, 129, 0.1)"
                                                    : "rgba(239, 68, 68, 0.1)",
                                            color: connMsg.type === "success" ? "#059669" : "#dc2626",
                                            border: `1px solid ${connMsg.type === "success" ? "#10b981" : "#ef4444"}`,
                                        }}
                                    >
                                        {connMsg.text}
                                    </div>
                                )}

                                {connections.length === 0 ? (
                                    <p
                                        style={{
                                            color: "var(--weekly-text-light)",
                                            marginBottom: "1.5rem",
                                        }}
                                    >
                                        {t.noCalendars}
                                    </p>
                                ) : (
                                    <ul
                                        style={{
                                            marginBottom: "1.5rem",
                                            listStyle: "none",
                                            padding: 0,
                                        }}
                                    >
                                        {connections.map((conn) => (
                                            <li
                                                key={conn.id}
                                                style={{
                                                    padding: "1rem 0",
                                                    borderBottom: "1px solid var(--weekly-border)",
                                                }}
                                            >
                                                <div
                                                    style={{
                                                        marginBottom: "0.5rem",
                                                        display: "flex",
                                                        alignItems: "center",
                                                        justifyContent: "space-between",
                                                    }}
                                                >
                                                    <div
                                                        style={{
                                                            fontWeight: 600,
                                                            display: "flex",
                                                            alignItems: "center",
                                                            gap: "8px",
                                                        }}
                                                    >
                                                        <span>
                                                            {conn.provider === "google"
                                                                ? <FontAwesomeIcon icon={faGoogle} />
                                                                : conn.provider === "apple"
                                                                    ? <FontAwesomeIcon icon={faApple} />
                                                                    : conn.provider === "synology"
                                                                        ? <FontAwesomeIcon icon={faServer} />
                                                                        : conn.provider === "notion"
                                                                            ? <FontAwesomeIcon icon={faNotion} />
                                                                            : <FontAwesomeIcon icon={faMicrosoft} />}
                                                        </span>
                                                        {conn.provider === "google"
                                                            ? "Google Calendar"
                                                            : conn.provider === "apple"
                                                                ? "Apple Calendar"
                                                                : conn.provider === "synology"
                                                                    ? "Synology Calendar"
                                                                    : conn.provider === "notion"
                                                                        ? "Notion"
                                                                        : "Outlook Calendar"}
                                                    </div>
                                                    {confirmDisconnectId === conn.id ? (
                                                        <div
                                                            style={{
                                                                display: "flex",
                                                                alignItems: "center",
                                                                gap: "6px",
                                                            }}
                                                        >
                                                            <span
                                                                style={{
                                                                    fontSize: "0.8rem",
                                                                    color: "var(--weekly-text)",
                                                                }}
                                                            >
                                                                Sure?
                                                            </span>
                                                            <button
                                                                type="button"
                                                                onClick={async (e) => {
                                                                    e.preventDefault();
                                                                    e.stopPropagation();
                                                                    setConfirmDisconnectId(null);
                                                                    setDisconnectingId(conn.id);
                                                                    try {
                                                                        await onRemoveConnection(conn.id);
                                                                        showConnMsg(
                                                                            "success",
                                                                            "Calendar disconnected.",
                                                                        );
                                                                    } catch (err: any) {
                                                                        console.error("Failed to disconnect:", err);
                                                                        showConnMsg(
                                                                            "error",
                                                                            err.message ||
                                                                            "Failed to disconnect calendar",
                                                                        );
                                                                    } finally {
                                                                        setDisconnectingId(null);
                                                                    }
                                                                }}
                                                                style={{
                                                                    padding: "3px 8px",
                                                                    fontSize: "0.8rem",
                                                                    background: "#dc2626",
                                                                    color: "white",
                                                                    border: "none",
                                                                    borderRadius: "4px",
                                                                    cursor: "pointer",
                                                                }}
                                                            >
                                                                Yes
                                                            </button>
                                                            <button
                                                                type="button"
                                                                onClick={(e) => {
                                                                    e.preventDefault();
                                                                    e.stopPropagation();
                                                                    setConfirmDisconnectId(null);
                                                                }}
                                                                style={{
                                                                    padding: "3px 8px",
                                                                    fontSize: "0.8rem",
                                                                    background: "#e5e7eb",
                                                                    color: "#374151",
                                                                    border: "none",
                                                                    borderRadius: "4px",
                                                                    cursor: "pointer",
                                                                }}
                                                            >
                                                                No
                                                            </button>
                                                        </div>
                                                    ) : (
                                                        <button
                                                            type="button"
                                                            onClick={(e) => {
                                                                e.preventDefault();
                                                                e.stopPropagation();
                                                                setConfirmDisconnectId(conn.id);
                                                            }}
                                                            disabled={disconnectingId === conn.id}
                                                            style={{
                                                                padding: "4px 8px",
                                                                fontSize: "0.8rem",
                                                                color:
                                                                    disconnectingId === conn.id
                                                                        ? "#999"
                                                                        : "#dc2626",
                                                                background: "none",
                                                                border: `1px solid ${disconnectingId === conn.id ? "#999" : "#dc2626"}`,
                                                                borderRadius: "4px",
                                                                cursor:
                                                                    disconnectingId === conn.id
                                                                        ? "not-allowed"
                                                                        : "pointer",
                                                                opacity: disconnectingId === conn.id ? 0.7 : 1,
                                                            }}
                                                        >
                                                            {disconnectingId === conn.id
                                                                ? "Disconnecting..."
                                                                : "Disconnect"}
                                                        </button>
                                                    )}
                                                </div>

                                                {/* Calendar Event Selection List */}
                                                {conn.calendars &&
                                                    Array.isArray(conn.calendars) &&
                                                    conn.calendars.length > 0 ? (
                                                    <div style={{ paddingLeft: "8px" }}>
                                                        {/* Column Headers */}
                                                        <div
                                                            style={{
                                                                display: "flex",
                                                                alignItems: "center",
                                                                gap: "8px",
                                                                marginBottom: "6px",
                                                                paddingBottom: "4px",
                                                                borderBottom: "1px solid var(--weekly-border, #eee)",
                                                            }}
                                                        >
                                                            <span style={{ flex: 1, fontSize: "0.75rem", color: "var(--weekly-text-light)", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.5px" }}>
                                                                Calendar
                                                            </span>
                                                            <span style={{ width: "50px", textAlign: "center", fontSize: "0.75rem", color: "var(--weekly-text-light)", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.5px" }}>
                                                                Display
                                                            </span>
                                                            <span style={{ width: "50px", textAlign: "center", fontSize: "0.75rem", color: "var(--weekly-text-light)", fontWeight: 600, textTransform: "uppercase", letterSpacing: "0.5px" }}>
                                                                Edit
                                                            </span>
                                                        </div>
                                                        {/* Calendar Rows */}
                                                        {conn.calendars.map((cal: any) => {
                                                            const isShared = /⚠/.test(cal.title);
                                                            const cleanTitle = cal.title
                                                                .replace(/\s*⚠️?\s*/g, "")
                                                                .trim();
                                                            return (
                                                                <div
                                                                    key={cal.id}
                                                                    style={{
                                                                        display: "flex",
                                                                        alignItems: "center",
                                                                        gap: "8px",
                                                                        padding: "3px 0",
                                                                    }}
                                                                >
                                                                    {/* Calendar Color + Name */}
                                                                    <span
                                                                        style={{
                                                                            flex: 1,
                                                                            fontSize: "0.9rem",
                                                                            color: "var(--weekly-text)",
                                                                            overflow: "hidden",
                                                                            textOverflow: "ellipsis",
                                                                            whiteSpace: "nowrap",
                                                                            display: "flex",
                                                                            alignItems: "center",
                                                                            gap: "6px",
                                                                        }}
                                                                    >
                                                                        <span style={{
                                                                            width: "10px", height: "10px", borderRadius: "50%", flexShrink: 0,
                                                                            backgroundColor: cal.backgroundColor || cal.color || "#3b82f6",
                                                                        }} />
                                                                        {cleanTitle}
                                                                        {isShared && (
                                                                            <span title="Shared calendar" style={{ marginLeft: "4px", fontSize: "0.75rem", opacity: 0.5 }}>
                                                                                🔗
                                                                            </span>
                                                                        )}
                                                                        {cal.isPrimary && (
                                                                            <span style={{ fontSize: "0.8em", color: "var(--weekly-text-light)", marginLeft: "4px" }}>
                                                                                (Primary)
                                                                            </span>
                                                                        )}
                                                                    </span>

                                                                    {/* Display checkbox */}
                                                                    <span style={{ width: "50px", textAlign: "center" }}>
                                                                        <input
                                                                            type="checkbox"
                                                                            checked={cal.selected !== false}
                                                                            onChange={(e) =>
                                                                                handleUpdateCalendar(conn.id, cal.id, {
                                                                                    selected: e.target.checked,
                                                                                })
                                                                            }
                                                                            style={{ cursor: "pointer" }}
                                                                        />
                                                                    </span>

                                                                    {/* Edit checkbox */}
                                                                    <span style={{ width: "50px", textAlign: "center" }}>
                                                                        <input
                                                                            type="checkbox"
                                                                            checked={cal.editable === true}
                                                                            onChange={(e) =>
                                                                                handleUpdateCalendar(conn.id, cal.id, {
                                                                                    editable: e.target.checked,
                                                                                })
                                                                            }
                                                                            style={{ cursor: "pointer" }}
                                                                            title="Allow adding/editing events"
                                                                        />
                                                                    </span>
                                                                </div>
                                                            );
                                                        })}
                                                    </div>
                                                ) : (
                                                    <div
                                                        style={{
                                                            fontSize: "0.85rem",
                                                            color: "#888",
                                                            paddingLeft: "24px",
                                                        }}
                                                    >
                                                        {conn.provider === "google"
                                                            ? t.noCalendarsFound
                                                            : conn.provider === "apple"
                                                                ? t.noCalendarsApple
                                                                : conn.provider === "synology"
                                                                    ? t.noCalendarsSynology
                                                                    : conn.provider === "notion"
                                                                        ? t.selectionAfterConnect
                                                                        : t.selectionAfterConnect}
                                                    </div>
                                                )}
                                            </li>
                                        ))}
                                    </ul>
                                )}

                                <h3
                                    style={{
                                        marginBottom: "1rem",
                                        fontSize: "1rem",
                                        fontWeight: 600,
                                    }}
                                >
                                    {t.connectMore}
                                </h3>

                                <div style={{ display: "flex", gap: "1rem", flexWrap: "wrap" }}>
                                    <button
                                        onClick={handleGoogleConnect}
                                        className="calendar-connect-btn"
                                    >
                                        <FontAwesomeIcon icon={faGoogle} className="mr-2" /> {t.connectGoogle}
                                    </button>
                                    <button
                                        onClick={handleAppleCalendarConnect}
                                        className="calendar-connect-btn"
                                    >
                                        <FontAwesomeIcon icon={faApple} className="mr-2" /> {t.connectApple}
                                    </button>
                                    <button
                                        onClick={handleOutlookConnect}
                                        className="calendar-connect-btn"
                                    >
                                        <FontAwesomeIcon icon={faMicrosoft} className="mr-2" /> {t.connectOutlook}
                                    </button>
                                    <button
                                        onClick={handleSynologyCalendarConnect}
                                        className="calendar-connect-btn"
                                    >
                                        <FontAwesomeIcon icon={faServer} className="mr-2" /> {t.connectSynology || "Connect Synology"}
                                    </button>
                                    <button
                                        onClick={handleNotionConnect}
                                        className="calendar-connect-btn"
                                    >
                                        <FontAwesomeIcon icon={faNotion} className="mr-2" /> {t.connectNotion || "Connect Notion"}
                                    </button>
                                </div>

                                <h3
                                    style={{
                                        marginBottom: "1rem",
                                        fontSize: "1rem",
                                        fontWeight: 600,
                                        marginTop: "2rem",
                                    }}
                                >
                                    {t.syncTasks}
                                </h3>
                                <p
                                    style={{
                                        fontSize: "0.9rem",
                                        color: "var(--weekly-text-light)",
                                        marginBottom: "1rem",
                                    }}
                                >
                                    {t.syncTasksDesc}
                                </p>

                                <div
                                    style={{
                                        display: "flex",
                                        flexDirection: "column",
                                        gap: "1.5rem",
                                    }}
                                >
                                    {connections
                                        .filter((c) => ["google", "outlook", "synology"].includes(c.provider))
                                        .map((conn) => {
                                            const providerLists =
                                                availableTaskLists[
                                                conn.provider as "google" | "outlook" | "synology"
                                                ] || [];
                                            const isFetching =
                                                isFetchingProviderLists[conn.provider];

                                            return (
                                                <div key={conn.id}>
                                                    <div
                                                        style={{
                                                            display: "flex",
                                                            alignItems: "center",
                                                            gap: "8px",
                                                            marginBottom: "0.5rem",
                                                            fontWeight: 600,
                                                            fontSize: "0.9rem",
                                                        }}
                                                    >
                                                        <span>
                                                            {conn.provider === "google" ? <FontAwesomeIcon icon={faGoogle} /> : conn.provider === "synology" ? <FontAwesomeIcon icon={faServer} /> : <FontAwesomeIcon icon={faMicrosoft} />}
                                                        </span>
                                                        {conn.provider === "google"
                                                            ? "Google Tasks"
                                                            : conn.provider === "synology"
                                                                ? "Synology Tasks"
                                                                : "Microsoft To-Do"}
                                                        {isFetching && (
                                                            <span
                                                                style={{
                                                                    fontSize: "0.75rem",
                                                                    fontWeight: 400,
                                                                    color: "#888",
                                                                }}
                                                            >
                                                                (fetching lists...)
                                                            </span>
                                                        )}
                                                    </div>

                                                    <div
                                                        style={{
                                                            display: "flex",
                                                            flexDirection: "column",
                                                            gap: "4px",
                                                        }}
                                                    >
                                                        {/* Column header with sync all / unsync all */}
                                                        {providerLists.length > 0 && (() => {
                                                            const allSynced = providerLists.every(
                                                                (list: { id: string; title: string }) => somedayLists.some(
                                                                    (sl: SomedayList) => sl.externalId === list.id && sl.externalProvider === conn.provider,
                                                                ),
                                                            );
                                                            const noneSynced = providerLists.every(
                                                                (list: { id: string; title: string }) => !somedayLists.some(
                                                                    (sl: SomedayList) => sl.externalId === list.id && sl.externalProvider === conn.provider,
                                                                ),
                                                            );
                                                            return (
                                                                <div style={{
                                                                    display: "flex",
                                                                    alignItems: "center",
                                                                    padding: "2px 8px",
                                                                    fontSize: "0.75rem",
                                                                    fontWeight: 600,
                                                                    color: "var(--weekly-text-light, #888)",
                                                                    textTransform: "uppercase",
                                                                    letterSpacing: "0.05em",
                                                                }}>
                                                                    <span style={{ flex: 1 }}>List</span>
                                                                    {!allSynced && (
                                                                        <button
                                                                            onClick={() => handleSyncAll(
                                                                                conn.provider as "google" | "outlook" | "synology",
                                                                                providerLists,
                                                                                true,
                                                                            )}
                                                                            disabled={importingTasksState}
                                                                            style={{
                                                                                background: "none",
                                                                                border: "none",
                                                                                cursor: "pointer",
                                                                                fontSize: "0.7rem",
                                                                                color: "var(--weekly-accent, #6366f1)",
                                                                                padding: "2px 6px",
                                                                                fontWeight: 500,
                                                                                textTransform: "none",
                                                                            }}
                                                                        >{t.syncAll}</button>
                                                                    )}
                                                                    {!noneSynced && (
                                                                        <button
                                                                            onClick={() => handleSyncAll(
                                                                                conn.provider as "google" | "outlook" | "synology",
                                                                                providerLists,
                                                                                false,
                                                                            )}
                                                                            disabled={importingTasksState}
                                                                            style={{
                                                                                background: "none",
                                                                                border: "none",
                                                                                cursor: "pointer",
                                                                                fontSize: "0.7rem",
                                                                                color: "#ef4444",
                                                                                padding: "2px 6px",
                                                                                fontWeight: 500,
                                                                                textTransform: "none",
                                                                            }}
                                                                        >{t.unsyncAll}</button>
                                                                    )}
                                                                    <span style={{ width: "50px", textAlign: "center" }}>Sync</span>
                                                                </div>
                                                            );
                                                        })()}

                                                        {/* Inline unsync confirmation */}
                                                        {unsyncConfirm && unsyncConfirm.provider === conn.provider && (
                                                            <div style={{
                                                                display: "flex",
                                                                alignItems: "center",
                                                                gap: "8px",
                                                                padding: "8px 10px",
                                                                borderRadius: "6px",
                                                                background: "#fef2f2",
                                                                border: "1px solid #fecaca",
                                                                fontSize: "0.82rem",
                                                                color: "#991b1b",
                                                            }}>
                                                                <span style={{ flex: 1 }}>
                                                                    {t.unsyncConfirmMsg.replace("{title}", unsyncConfirm.list.title)}
                                                                </span>
                                                                <button
                                                                    onClick={onConfirmUnsync}
                                                                    style={{
                                                                        background: "#ef4444",
                                                                        color: "#fff",
                                                                        border: "none",
                                                                        borderRadius: "4px",
                                                                        padding: "4px 10px",
                                                                        cursor: "pointer",
                                                                        fontSize: "0.8rem",
                                                                        fontWeight: 600,
                                                                        whiteSpace: "nowrap",
                                                                    }}
                                                                >{t.unsyncConfirm}</button>
                                                                <button
                                                                    onClick={onCancelUnsync}
                                                                    style={{
                                                                        background: "none",
                                                                        border: "1px solid #d1d5db",
                                                                        borderRadius: "4px",
                                                                        padding: "4px 10px",
                                                                        cursor: "pointer",
                                                                        fontSize: "0.8rem",
                                                                        color: "#666",
                                                                        whiteSpace: "nowrap",
                                                                    }}
                                                                >{t.unsyncCancel}</button>
                                                            </div>
                                                        )}

                                                        {providerLists.map((list: { id: string; title: string }) => {
                                                            const isSynced = somedayLists.some(
                                                                (sl: SomedayList) =>
                                                                    sl.externalId === list.id &&
                                                                    sl.externalProvider === conn.provider,
                                                            );
                                                            return (
                                                                <div
                                                                    key={list.id}
                                                                    style={{
                                                                        display: "flex",
                                                                        alignItems: "center",
                                                                        padding: "4px 8px",
                                                                        borderRadius: "4px",
                                                                        background: "rgba(0,0,0,0.02)",
                                                                    }}
                                                                >
                                                                    <span style={{ flex: 1, fontSize: "0.9rem" }}>
                                                                        {list.title}
                                                                    </span>
                                                                    <span style={{ width: "50px", textAlign: "center" }}>
                                                                        <input
                                                                            type="checkbox"
                                                                            checked={isSynced}
                                                                            onChange={() =>
                                                                                handleToggleTaskList(
                                                                                    conn.provider as
                                                                                    | "google"
                                                                                    | "outlook"
                                                                                    | "synology",
                                                                                    list,
                                                                                )
                                                                            }
                                                                            disabled={importingTasksState}
                                                                        />
                                                                    </span>
                                                                </div>
                                                            );
                                                        })}
                                                        {!isFetching && providerLists.length === 0 && (
                                                            <div
                                                                style={{
                                                                    fontSize: "0.85rem",
                                                                    color: "#888",
                                                                    paddingLeft: "24px",
                                                                }}
                                                            >
                                                                No task lists found.
                                                            </div>
                                                        )}
                                                    </div>
                                                </div>
                                            );
                                        })}

                                    {connections.filter((c) =>
                                        ["google", "outlook", "synology"].includes(c.provider),
                                    ).length === 0 && (
                                            <div
                                                style={{
                                                    fontSize: "0.9rem",
                                                    color: "#888",
                                                    fontStyle: "italic",
                                                }}
                                            >
                                                Connect a provider above to sync task lists.
                                            </div>
                                        )}

                                    {importStatusMsg && (
                                        <div
                                            style={{
                                                padding: "8px 12px",
                                                borderRadius: "4px",
                                                fontSize: "0.9rem",
                                                background:
                                                    importStatusMsg.type === "success"
                                                        ? "rgba(16, 185, 129, 0.1)"
                                                        : "rgba(239, 68, 68, 0.1)",
                                                color:
                                                    importStatusMsg.type === "success"
                                                        ? "#059669"
                                                        : "#dc2626",
                                                border: `1px solid ${importStatusMsg.type === "success" ? "#10b981" : "#ef4444"}`,
                                            }}
                                        >
                                            {importStatusMsg.text}
                                        </div>
                                    )}
                                </div>
                            </>
                        )
                    ) : activeTab === "styling" ? (
                        <div
                            style={{ display: "flex", flexDirection: "column", gap: "24px" }}
                        >
                            {/* Mobile Font Scale */}
                            <div style={{
                                background: "var(--weekly-settings-item-bg)",
                                padding: "12px",
                                borderRadius: "8px",
                            }}>
                                <label style={{
                                    display: "block", fontSize: "0.85rem", fontWeight: 600,
                                    marginBottom: "8px", color: "var(--weekly-settings-label)",
                                }}>
                                    {(profile.language || "en") === "de" ? "Mobile Schriftgröße" : "Mobile Font Scale"}
                                </label>
                                <div style={{ display: "flex", gap: "6px" }}>
                                    {[
                                        { label: "75%", value: 0.75 },
                                        { label: "85%", value: 0.85 },
                                        { label: "100%", value: 1.0 },
                                        { label: "115%", value: 1.15 },
                                        { label: "130%", value: 1.3 },
                                    ].map(opt => (
                                        <button
                                            key={opt.value}
                                            onClick={() => {
                                                setProfile({ ...profile, mobileFontScale: opt.value });
                                                saveSetting("mobileFontScale", opt.value);
                                            }}
                                            style={{
                                                flex: 1, padding: "6px 4px", borderRadius: "6px",
                                                border: (profile.mobileFontScale || 1.0) === opt.value
                                                    ? "2px solid var(--weekly-teal, #0ea5e9)"
                                                    : "1px solid var(--weekly-border, #ddd)",
                                                background: (profile.mobileFontScale || 1.0) === opt.value
                                                    ? "var(--weekly-teal, #0ea5e9)" : "transparent",
                                                color: (profile.mobileFontScale || 1.0) === opt.value
                                                    ? "white" : "var(--weekly-text)",
                                                fontSize: "0.8rem", fontWeight: 600, cursor: "pointer",
                                            }}
                                        >
                                            {opt.label}
                                        </button>
                                    ))}
                                </div>
                                <span style={{ fontSize: "0.7rem", color: "var(--weekly-text-light)", marginTop: "4px", display: "block" }}>
                                    {(profile.language || "en") === "de"
                                        ? "Skaliert alle Schriften auf Mobilgeräten (< 768px)"
                                        : "Scales all fonts on mobile devices (< 768px)"}
                                </span>
                            </div>

                            {/* Typography Settings */}
                            <div
                                style={{
                                    marginBottom: "1.5rem",
                                    borderBottom: "1px solid var(--weekly-border)",
                                    paddingBottom: "1rem",
                                }}
                            >
                                <label
                                    style={{
                                        display: "block",
                                        fontSize: "1rem",
                                        fontWeight: 700,
                                        marginBottom: "12px",
                                        color: "var(--weekly-settings-title)",
                                    }}
                                >
                                    {t.fontCustomization}
                                </label>

                                {/* Date Layout & Alignment side-by-side */}
                                <div
                                    style={{
                                        display: "grid",
                                        gridTemplateColumns: "1fr 1fr",
                                        gap: "16px",
                                        marginBottom: "1.5rem",
                                        background: "var(--weekly-settings-item-bg)",
                                        padding: "12px",
                                        borderRadius: "8px",
                                    }}
                                >
                                    <div>
                                        <label
                                            style={{
                                                display: "block",
                                                fontSize: "0.85rem",
                                                fontWeight: 600,
                                                color: "var(--weekly-settings-label)",
                                                marginBottom: "8px",
                                            }}
                                        >
                                            {t.dateLayout}
                                        </label>
                                        <select
                                            value={profile.dateLayout || "right"}
                                            onChange={(e) =>
                                                saveField("dateLayout", e.target.value)
                                            }
                                            className="weekly-input"
                                            style={{
                                                width: "100%",
                                                padding: "8px",
                                                fontSize: "0.9rem",
                                                border: "1px solid var(--weekly-settings-input-border)",
                                                borderRadius: "4px",
                                                background: "var(--weekly-settings-input-bg)",
                                                color: "var(--weekly-settings-text)",
                                            }}
                                        >
                                            <option value="right">{t.dateLayoutRight}</option>
                                            <option value="left">{t.dateLayoutLeft}</option>
                                            <option value="above">{t.dateLayoutAbove}</option>
                                            <option value="below">{t.dateLayoutBelow}</option>
                                            <option value="hidden">{t.dateLayoutHidden}</option>
                                        </select>
                                    </div>
                                    <div>
                                        <label
                                            style={{
                                                display: "block",
                                                fontSize: "0.85rem",
                                                fontWeight: 600,
                                                color: "var(--weekly-settings-label)",
                                                marginBottom: "8px",
                                            }}
                                        >
                                            {t.dateLayoutMobile}
                                        </label>
                                        <select
                                            value={profile.mobileDateLayout || "below"}
                                            onChange={(e) =>
                                                saveField("mobileDateLayout", e.target.value)
                                            }
                                            className="weekly-input"
                                            style={{
                                                width: "100%",
                                                padding: "8px",
                                                fontSize: "0.9rem",
                                                border: "1px solid var(--weekly-settings-input-border)",
                                                borderRadius: "4px",
                                                background: "var(--weekly-settings-input-bg)",
                                                color: "var(--weekly-settings-text)",
                                            }}
                                        >
                                            <option value="right">{t.dateLayoutRight}</option>
                                            <option value="left">{t.dateLayoutLeft}</option>
                                            <option value="above">{t.dateLayoutAbove}</option>
                                            <option value="below">{t.dateLayoutBelow}</option>
                                            <option value="hidden">{t.dateLayoutHidden}</option>
                                        </select>
                                    </div>
                                    <div>
                                        <label
                                            style={{
                                                display: "block",
                                                fontSize: "0.85rem",
                                                fontWeight: 600,
                                                color: "var(--weekly-settings-label)",
                                                marginBottom: "8px",
                                            }}
                                        >
                                            {t.dateAlignment || "Date Alignment"}
                                        </label>
                                        <select
                                            value={profile.dateAlignment || "center"}
                                            onChange={(e) =>
                                                saveField("dateAlignment", e.target.value)
                                            }
                                            className="weekly-input"
                                            style={{
                                                width: "100%",
                                                padding: "8px",
                                                fontSize: "0.9rem",
                                                border: "1px solid var(--weekly-settings-input-border)",
                                                borderRadius: "4px",
                                                background: "var(--weekly-settings-input-bg)",
                                                color: "var(--weekly-settings-text)",
                                            }}
                                        >
                                            <option value="left">{t.alignmentLeft || "Left"}</option>
                                            <option value="center">{t.alignmentCenter || "Center"}</option>
                                            <option value="right">{t.alignmentRight || "Right"}</option>
                                            <option value="tight">{t.alignmentTight || "Tight"}</option>
                                        </select>
                                    </div>
                                    <div>
                                        <label
                                            style={{
                                                display: "block",
                                                fontSize: "0.85rem",
                                                fontWeight: 600,
                                                color: "var(--weekly-settings-label)",
                                                marginBottom: "8px",
                                            }}
                                        >
                                            {t.dateVerticalAlign || "Date Vertical Alignment"}
                                        </label>
                                        <select
                                            value={profile.dateVerticalAlign || "middle"}
                                            onChange={(e) =>
                                                saveField("dateVerticalAlign", e.target.value)
                                            }
                                            className="weekly-input"
                                            style={{
                                                width: "100%",
                                                padding: "8px",
                                                fontSize: "0.9rem",
                                                border: "1px solid var(--weekly-settings-input-border)",
                                                borderRadius: "4px",
                                                background: "var(--weekly-settings-input-bg)",
                                                color: "var(--weekly-settings-text)",
                                            }}
                                        >
                                            <option value="top">{t.alignTop || "Top"}</option>
                                            <option value="middle">{t.alignMiddle || "Middle"}</option>
                                            <option value="bottom">{t.alignBottom || "Bottom"}</option>
                                        </select>
                                    </div>
                                </div>
                                {/* Day / Weekday Gap */}
                                <div
                                    style={{
                                        background: "var(--weekly-settings-item-bg)",
                                        padding: "12px",
                                        borderRadius: "8px",
                                        marginBottom: "12px",
                                    }}
                                >
                                    <label
                                        style={{
                                            display: "block",
                                            fontSize: "0.85rem",
                                            fontWeight: 600,
                                            color: "var(--weekly-settings-label)",
                                            marginBottom: "8px",
                                        }}
                                    >
                                        {t.dayWeekdayGap}
                                    </label>
                                    <input
                                        type="text"
                                        value={profile.dayHeaderGap || "0.35em"}
                                        onChange={(e) =>
                                            saveFieldDebounced("dayHeaderGap", e.target.value)
                                        }
                                        placeholder="0.35em"
                                        className="weekly-input"
                                        style={{
                                            width: "100%",
                                            padding: "8px",
                                            fontSize: "0.9rem",
                                            border: "1px solid var(--weekly-settings-input-border)",
                                            borderRadius: "4px",
                                            background: "var(--weekly-settings-input-bg)",
                                            color: "var(--weekly-settings-text)",
                                        }}
                                    />
                                </div>

                                {/* Day Names */}
                                <div
                                    style={{
                                        background: "var(--weekly-settings-item-bg)",
                                        padding: "12px",
                                        borderRadius: "8px",
                                        marginBottom: "12px",
                                    }}
                                >
                                    <label
                                        style={{
                                            display: "block",
                                            fontSize: "0.85rem",
                                            fontWeight: 600,
                                            color: "var(--weekly-settings-label)",
                                            marginBottom: "8px",
                                        }}
                                    >
                                        {t.weekdayFont}
                                    </label>
                                    <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
                                        <div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
                                            <input
                                                type="color"
                                                value={profile.weekdayColor || "#888888"}
                                                onChange={(e) => saveFieldDebounced("weekdayColor", e.target.value)}
                                                style={{ width: "28px", height: "28px", border: "1px solid var(--weekly-settings-input-border)", borderRadius: "4px", cursor: "pointer", padding: 0, flexShrink: 0 }}
                                            />
                                            <select
                                                value={isCustomFont(profile.headlineFont || "") || profile.headlineFont === "__custom__" ? "__custom__" : (profile.headlineFont || "Inter")}
                                                onChange={(e) => {
                                                    const val = e.target.value === "__custom__" ? "__custom__" : e.target.value;
                                                    saveField("headlineFont", val);
                                                }}
                                                className="weekly-input"
                                                style={{ flex: 1, padding: "8px", fontSize: "0.9rem", border: "1px solid var(--weekly-settings-input-border)", borderRadius: "4px", background: "var(--weekly-settings-input-bg)", color: "var(--weekly-settings-text)" }}
                                            >
                                                {AVAILABLE_FONTS.map((font) => (
                                                    <option key={font.value} value={font.value} style={{ fontFamily: font.value }}>{font.name}</option>
                                                ))}
                                            </select>
                                        </div>
                                        {(isCustomFont(profile.headlineFont || "") || profile.headlineFont === "__custom__") && (
                                            <input
                                                type="text"
                                                value={profile.headlineFont === "__custom__" ? "" : (profile.headlineFont || "")}
                                                onChange={(e) => saveFieldDebounced("headlineFont", e.target.value || "__custom__")}
                                                placeholder={t.fontPlaceholder}
                                                className="weekly-input"
                                                style={{ width: "100%", padding: "8px", fontSize: "0.85rem", border: "1px solid var(--weekly-settings-input-border)", borderRadius: "4px", background: "var(--weekly-settings-input-bg)", color: "var(--weekly-settings-text)" }}
                                            />
                                        )}
                                        <div style={{ display: "flex", gap: "8px" }}>
                                            <input
                                                type="text"
                                                value={profile.headlineFontSize || "1.25rem"}
                                                onChange={(e) => saveFieldDebounced("headlineFontSize", e.target.value)}
                                                placeholder={t.fontSizePlaceholder}
                                                className="weekly-input"
                                                style={{ flex: 1, padding: "8px", fontSize: "0.85rem", border: "1px solid var(--weekly-settings-input-border)", borderRadius: "4px", background: "var(--weekly-settings-input-bg)", color: "var(--weekly-settings-text)" }}
                                            />
                                            <select
                                                value={profile.headlineFontWeight || "900"}
                                                onChange={(e) => saveField("headlineFontWeight", e.target.value)}
                                                className="weekly-input"
                                                style={{ flex: 1, padding: "8px", fontSize: "0.9rem", border: "1px solid var(--weekly-settings-input-border)", borderRadius: "4px", background: "var(--weekly-settings-input-bg)", color: "var(--weekly-settings-text)" }}
                                            >
                                                <option value="300">{t.weightLight}</option>
                                                <option value="400">{t.weightNormal}</option>
                                                <option value="500">{t.weightMedium}</option>
                                                <option value="600">{t.weightSemi}</option>
                                                <option value="700">{t.weightBold}</option>
                                                <option value="900">{t.weightBlack}</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                {/* Dates */}
                                <div
                                    style={{
                                        background: "var(--weekly-settings-item-bg)",
                                        padding: "12px",
                                        borderRadius: "8px",
                                        marginBottom: "12px",
                                    }}
                                >
                                    <label
                                        style={{
                                            display: "block",
                                            fontSize: "0.85rem",
                                            fontWeight: 600,
                                            color: "var(--weekly-settings-label)",
                                            marginBottom: "8px",
                                        }}
                                    >
                                        {t.dateFont}
                                    </label>
                                    <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
                                        <div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
                                            <input
                                                type="color"
                                                value={profile.dateColor || "#888888"}
                                                onChange={(e) => saveFieldDebounced("dateColor", e.target.value)}
                                                style={{ width: "28px", height: "28px", border: "1px solid var(--weekly-settings-input-border)", borderRadius: "4px", cursor: "pointer", padding: 0, flexShrink: 0 }}
                                            />
                                            <select
                                                value={isCustomFont(profile.dateFontFamily || "") || profile.dateFontFamily === "__custom__" ? "__custom__" : (profile.dateFontFamily || "Inter")}
                                                onChange={(e) => {
                                                    const val = e.target.value === "__custom__" ? "__custom__" : e.target.value;
                                                    saveField("dateFontFamily", val);
                                                }}
                                                className="weekly-input"
                                                style={{ flex: 1, padding: "8px", fontSize: "0.9rem", border: "1px solid var(--weekly-settings-input-border)", borderRadius: "4px", background: "var(--weekly-settings-input-bg)", color: "var(--weekly-settings-text)" }}
                                            >
                                                {AVAILABLE_FONTS.map((font) => (
                                                    <option key={font.value} value={font.value} style={{ fontFamily: font.value }}>{font.name}</option>
                                                ))}
                                            </select>
                                        </div>
                                        {(isCustomFont(profile.dateFontFamily || "") || profile.dateFontFamily === "__custom__") && (
                                            <input
                                                type="text"
                                                value={profile.dateFontFamily === "__custom__" ? "" : (profile.dateFontFamily || "")}
                                                onChange={(e) => saveFieldDebounced("dateFontFamily", e.target.value || "__custom__")}
                                                placeholder={t.fontPlaceholder}
                                                className="weekly-input"
                                                style={{ width: "100%", padding: "8px", fontSize: "0.85rem", border: "1px solid var(--weekly-settings-input-border)", borderRadius: "4px", background: "var(--weekly-settings-input-bg)", color: "var(--weekly-settings-text)" }}
                                            />
                                        )}
                                        <div style={{ display: "flex", gap: "8px" }}>
                                            <input
                                                type="text"
                                                value={profile.dateFontSize || "0.65rem"}
                                                onChange={(e) => saveFieldDebounced("dateFontSize", e.target.value)}
                                                placeholder="0.65rem"
                                                className="weekly-input"
                                                style={{ flex: 1, padding: "8px", fontSize: "0.9rem", border: "1px solid var(--weekly-settings-input-border)", borderRadius: "4px", background: "var(--weekly-settings-input-bg)", color: "var(--weekly-settings-text)" }}
                                            />
                                            <select
                                                value={profile.dateFontWeight || "400"}
                                                onChange={(e) => saveField("dateFontWeight", e.target.value)}
                                                className="weekly-input"
                                                style={{ flex: 1, padding: "8px", fontSize: "0.9rem", border: "1px solid var(--weekly-settings-input-border)", borderRadius: "4px", background: "var(--weekly-settings-input-bg)", color: "var(--weekly-settings-text)" }}
                                            >
                                                <option value="300">{t.weightLight}</option>
                                                <option value="400">{t.weightNormal}</option>
                                                <option value="500">{t.weightMedium}</option>
                                                <option value="600">{t.weightSemi}</option>
                                                <option value="700">{t.weightBold}</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                {/* Tasks */}
                                <div
                                    style={{
                                        background: "var(--weekly-settings-item-bg)",
                                        padding: "12px",
                                        borderRadius: "8px",
                                        marginBottom: "12px",
                                    }}
                                >
                                    <label
                                        style={{
                                            display: "block",
                                            fontSize: "0.85rem",
                                            fontWeight: 600,
                                            color: "var(--weekly-settings-label)",
                                            marginBottom: "8px",
                                        }}
                                    >
                                        {t.taskFont}
                                    </label>
                                    <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
                                        <div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
                                            <input
                                                type="color"
                                                value={profile.taskColor || "#333333"}
                                                onChange={(e) => saveFieldDebounced("taskColor", e.target.value)}
                                                style={{ width: "28px", height: "28px", border: "1px solid var(--weekly-settings-input-border)", borderRadius: "4px", cursor: "pointer", padding: 0, flexShrink: 0 }}
                                            />
                                            <select
                                                value={isCustomFont(profile.taskFontFamily || "") || profile.taskFontFamily === "__custom__" ? "__custom__" : (profile.taskFontFamily || "Inter")}
                                                onChange={(e) => {
                                                    const val = e.target.value === "__custom__" ? "__custom__" : e.target.value;
                                                    saveField("taskFontFamily", val);
                                                    saveField("timeTaskFontFamily", val);
                                                }}
                                                className="weekly-input"
                                                style={{ flex: 1, padding: "8px", fontSize: "0.9rem", border: "1px solid var(--weekly-settings-input-border)", borderRadius: "4px", background: "var(--weekly-settings-input-bg)", color: "var(--weekly-settings-text)" }}
                                            >
                                                {AVAILABLE_FONTS.map((font) => (
                                                    <option key={font.value} value={font.value} style={{ fontFamily: font.value }}>{font.name}</option>
                                                ))}
                                            </select>
                                        </div>
                                        {(isCustomFont(profile.taskFontFamily || "") || profile.taskFontFamily === "__custom__") && (
                                            <input
                                                type="text"
                                                value={profile.taskFontFamily === "__custom__" ? "" : (profile.taskFontFamily || "")}
                                                onChange={(e) => {
                                                    const val = e.target.value || "__custom__";
                                                    saveFieldDebounced("taskFontFamily", val);
                                                    saveFieldDebounced("timeTaskFontFamily", val);
                                                }}
                                                placeholder={t.fontPlaceholder}
                                                className="weekly-input"
                                                style={{ width: "100%", padding: "8px", fontSize: "0.85rem", border: "1px solid var(--weekly-settings-input-border)", borderRadius: "4px", background: "var(--weekly-settings-input-bg)", color: "var(--weekly-settings-text)" }}
                                            />
                                        )}
                                        <div style={{ display: "flex", gap: "8px" }}>
                                            <input
                                                type="text"
                                                value={profile.taskFontSize || "0.9rem"}
                                                onChange={(e) => {
                                                    saveFieldDebounced("taskFontSize", e.target.value);
                                                    saveFieldDebounced("timeTaskFontSize", e.target.value);
                                                }}
                                                placeholder="0.9rem"
                                                className="weekly-input"
                                                style={{ flex: 1, padding: "8px", fontSize: "0.9rem", border: "1px solid var(--weekly-settings-input-border)", borderRadius: "4px", background: "var(--weekly-settings-input-bg)", color: "var(--weekly-settings-text)" }}
                                            />
                                            <select
                                                value={profile.taskFontWeight || "400"}
                                                onChange={(e) => {
                                                    saveField("taskFontWeight", e.target.value);
                                                    saveField("timeTaskFontWeight", e.target.value);
                                                }}
                                                className="weekly-input"
                                                style={{ flex: 1, padding: "8px", fontSize: "0.9rem", border: "1px solid var(--weekly-settings-input-border)", borderRadius: "4px", background: "var(--weekly-settings-input-bg)", color: "var(--weekly-settings-text)" }}
                                            >
                                                <option value="300">{t.weightLight}</option>
                                                <option value="400">{t.weightNormal}</option>
                                                <option value="500">{t.weightMedium}</option>
                                                <option value="600">{t.weightSemi}</option>
                                                <option value="700">{t.weightBold}</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                {/* Calendar Event Font */}
                                <div
                                    style={{
                                        background: "var(--weekly-settings-item-bg)",
                                        padding: "12px",
                                        borderRadius: "8px",
                                        marginBottom: "12px",
                                    }}
                                >
                                    <label
                                        style={{
                                            display: "block",
                                            fontSize: "0.85rem",
                                            fontWeight: 600,
                                            color: "var(--weekly-settings-label)",
                                            marginBottom: "8px",
                                        }}
                                    >
                                        Calendar Event Font
                                    </label>
                                    <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
                                        <select
                                            value={isCustomFont(profile.eventFontFamily || "") || profile.eventFontFamily === "__custom__" ? "__custom__" : (profile.eventFontFamily || "Inter")}
                                            onChange={(e) => {
                                                const val = e.target.value === "__custom__" ? "__custom__" : e.target.value;
                                                saveField("eventFontFamily", val);
                                            }}
                                            className="weekly-input"
                                            style={{ width: "100%", padding: "8px", fontSize: "0.9rem", border: "1px solid var(--weekly-settings-input-border)", borderRadius: "4px", background: "var(--weekly-settings-input-bg)", color: "var(--weekly-settings-text)" }}
                                        >
                                            {AVAILABLE_FONTS.map((font) => (
                                                <option key={font.value} value={font.value} style={{ fontFamily: font.value }}>{font.name}</option>
                                            ))}
                                        </select>
                                        {(isCustomFont(profile.eventFontFamily || "") || profile.eventFontFamily === "__custom__") && (
                                            <input
                                                type="text"
                                                value={profile.eventFontFamily === "__custom__" ? "" : (profile.eventFontFamily || "")}
                                                onChange={(e) => saveFieldDebounced("eventFontFamily", e.target.value || "__custom__")}
                                                placeholder={t.fontPlaceholder}
                                                className="weekly-input"
                                                style={{ width: "100%", padding: "8px", fontSize: "0.85rem", border: "1px solid var(--weekly-settings-input-border)", borderRadius: "4px", background: "var(--weekly-settings-input-bg)", color: "var(--weekly-settings-text)" }}
                                            />
                                        )}
                                        <div style={{ display: "flex", gap: "8px" }}>
                                            <input
                                                type="text"
                                                value={profile.eventFontSize || "0.85rem"}
                                                onChange={(e) => saveFieldDebounced("eventFontSize", e.target.value)}
                                                placeholder="0.85rem"
                                                className="weekly-input"
                                                style={{ flex: 1, padding: "8px", fontSize: "0.9rem", border: "1px solid var(--weekly-settings-input-border)", borderRadius: "4px", background: "var(--weekly-settings-input-bg)", color: "var(--weekly-settings-text)" }}
                                            />
                                            <select
                                                value={profile.eventFontWeight || "400"}
                                                onChange={(e) => saveField("eventFontWeight", e.target.value)}
                                                className="weekly-input"
                                                style={{ flex: 1, padding: "8px", fontSize: "0.9rem", border: "1px solid var(--weekly-settings-input-border)", borderRadius: "4px", background: "var(--weekly-settings-input-bg)", color: "var(--weekly-settings-text)" }}
                                            >
                                                <option value="300">{t.weightLight}</option>
                                                <option value="400">{t.weightNormal}</option>
                                                <option value="500">{t.weightMedium}</option>
                                                <option value="600">{t.weightSemi}</option>
                                                <option value="700">{t.weightBold}</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                {/* Goal Font */}
                                <div
                                    style={{
                                        background: "var(--weekly-settings-item-bg)",
                                        padding: "12px",
                                        borderRadius: "8px",
                                        marginBottom: "12px",
                                    }}
                                >
                                    <label
                                        style={{
                                            display: "block",
                                            fontSize: "0.85rem",
                                            fontWeight: 600,
                                            color: "var(--weekly-settings-label)",
                                            marginBottom: "8px",
                                        }}
                                    >
                                        Goal Font
                                    </label>
                                    <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
                                        <select
                                            value={isCustomFont(profile.goalFontFamily || "") || profile.goalFontFamily === "__custom__" ? "__custom__" : (profile.goalFontFamily || "Inter")}
                                            onChange={(e) => {
                                                const val = e.target.value === "__custom__" ? "__custom__" : e.target.value;
                                                saveField("goalFontFamily", val);
                                            }}
                                            className="weekly-input"
                                            style={{ width: "100%", padding: "8px", fontSize: "0.9rem", border: "1px solid var(--weekly-settings-input-border)", borderRadius: "4px", background: "var(--weekly-settings-input-bg)", color: "var(--weekly-settings-text)" }}
                                        >
                                            {AVAILABLE_FONTS.map((font) => (
                                                <option key={font.value} value={font.value} style={{ fontFamily: font.value }}>{font.name}</option>
                                            ))}
                                        </select>
                                        {(isCustomFont(profile.goalFontFamily || "") || profile.goalFontFamily === "__custom__") && (
                                            <input
                                                type="text"
                                                value={profile.goalFontFamily === "__custom__" ? "" : (profile.goalFontFamily || "")}
                                                onChange={(e) => saveFieldDebounced("goalFontFamily", e.target.value || "__custom__")}
                                                placeholder={t.fontPlaceholder}
                                                className="weekly-input"
                                                style={{ width: "100%", padding: "8px", fontSize: "0.85rem", border: "1px solid var(--weekly-settings-input-border)", borderRadius: "4px", background: "var(--weekly-settings-input-bg)", color: "var(--weekly-settings-text)" }}
                                            />
                                        )}
                                        <div style={{ display: "flex", gap: "8px" }}>
                                            <input
                                                type="text"
                                                value={profile.goalFontSize || "1rem"}
                                                onChange={(e) => saveFieldDebounced("goalFontSize", e.target.value)}
                                                placeholder="1rem"
                                                className="weekly-input"
                                                style={{ flex: 1, padding: "8px", fontSize: "0.9rem", border: "1px solid var(--weekly-settings-input-border)", borderRadius: "4px", background: "var(--weekly-settings-input-bg)", color: "var(--weekly-settings-text)" }}
                                            />
                                            <select
                                                value={profile.goalFontWeight || "400"}
                                                onChange={(e) => saveField("goalFontWeight", e.target.value)}
                                                className="weekly-input"
                                                style={{ flex: 1, padding: "8px", fontSize: "0.9rem", border: "1px solid var(--weekly-settings-input-border)", borderRadius: "4px", background: "var(--weekly-settings-input-bg)", color: "var(--weekly-settings-text)" }}
                                            >
                                                <option value="300">{t.weightLight}</option>
                                                <option value="400">{t.weightNormal}</option>
                                                <option value="500">{t.weightMedium}</option>
                                                <option value="600">{t.weightSemi}</option>
                                                <option value="700">{t.weightBold}</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>



                                {/* Calendar Week Font */}
                                <div
                                    style={{
                                        background: "var(--weekly-settings-item-bg)",
                                        padding: "12px",
                                        borderRadius: "8px",
                                        marginBottom: "12px",
                                    }}
                                >
                                    <label
                                        style={{
                                            display: "block",
                                            fontSize: "0.85rem",
                                            fontWeight: 600,
                                            color: "var(--weekly-settings-label)",
                                            marginBottom: "8px",
                                        }}
                                    >
                                        Calendar Week (KW)
                                    </label>
                                    <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
                                        <div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
                                            <input
                                                type="color"
                                                value={profile.cwColor || "#333333"}
                                                onChange={(e) => saveFieldDebounced("cwColor", e.target.value)}
                                                style={{ width: "28px", height: "28px", border: "1px solid var(--weekly-settings-input-border)", borderRadius: "4px", cursor: "pointer", padding: 0, flexShrink: 0 }}
                                            />
                                            <select
                                                value={isCustomFont(profile.cwFontFamily || "") || profile.cwFontFamily === "__custom__" ? "__custom__" : (profile.cwFontFamily || "Inter")}
                                                onChange={(e) => {
                                                    const val = e.target.value === "__custom__" ? "__custom__" : e.target.value;
                                                    saveField("cwFontFamily", val);
                                                }}
                                                className="weekly-input"
                                                style={{ flex: 1, padding: "8px", fontSize: "0.9rem", border: "1px solid var(--weekly-settings-input-border)", borderRadius: "4px", background: "var(--weekly-settings-input-bg)", color: "var(--weekly-settings-text)" }}
                                            >
                                                {AVAILABLE_FONTS.map((font) => (
                                                    <option key={font.value} value={font.value} style={{ fontFamily: font.value }}>{font.name}</option>
                                                ))}
                                            </select>
                                        </div>
                                        {(isCustomFont(profile.cwFontFamily || "") || profile.cwFontFamily === "__custom__") && (
                                            <input
                                                type="text"
                                                value={profile.cwFontFamily === "__custom__" ? "" : (profile.cwFontFamily || "")}
                                                onChange={(e) => saveFieldDebounced("cwFontFamily", e.target.value || "__custom__")}
                                                placeholder={t.fontPlaceholder}
                                                className="weekly-input"
                                                style={{ width: "100%", padding: "8px", fontSize: "0.85rem", border: "1px solid var(--weekly-settings-input-border)", borderRadius: "4px", background: "var(--weekly-settings-input-bg)", color: "var(--weekly-settings-text)" }}
                                            />
                                        )}
                                        <div style={{ display: "flex", gap: "8px" }}>
                                            <input
                                                type="text"
                                                value={profile.cwFontSize || "1.125rem"}
                                                onChange={(e) => saveFieldDebounced("cwFontSize", e.target.value)}
                                                placeholder="1.125rem"
                                                className="weekly-input"
                                                style={{ flex: 1, padding: "8px", fontSize: "0.9rem", border: "1px solid var(--weekly-settings-input-border)", borderRadius: "4px", background: "var(--weekly-settings-input-bg)", color: "var(--weekly-settings-text)" }}
                                            />
                                            <select
                                                value={profile.cwFontWeight || "700"}
                                                onChange={(e) => saveField("cwFontWeight", e.target.value)}
                                                className="weekly-input"
                                                style={{ flex: 1, padding: "8px", fontSize: "0.9rem", border: "1px solid var(--weekly-settings-input-border)", borderRadius: "4px", background: "var(--weekly-settings-input-bg)", color: "var(--weekly-settings-text)" }}
                                            >
                                                <option value="300">{t.weightLight}</option>
                                                <option value="400">{t.weightNormal}</option>
                                                <option value="500">{t.weightMedium}</option>
                                                <option value="600">{t.weightSemi}</option>
                                                <option value="700">{t.weightBold}</option>
                                                <option value="900">{t.weightBlack}</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                                {/* Year Font */}
                                <div
                                    style={{
                                        background: "var(--weekly-settings-item-bg)",
                                        padding: "12px",
                                        borderRadius: "8px",
                                        marginBottom: "12px",
                                    }}
                                >
                                    <label
                                        style={{
                                            display: "block",
                                            fontSize: "0.85rem",
                                            fontWeight: 600,
                                            color: "var(--weekly-settings-label)",
                                            marginBottom: "8px",
                                        }}
                                    >
                                        Year
                                    </label>
                                    <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
                                        <div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
                                            <input
                                                type="color"
                                                value={profile.yearColor || "#333333"}
                                                onChange={(e) => saveFieldDebounced("yearColor", e.target.value)}
                                                style={{ width: "28px", height: "28px", border: "1px solid var(--weekly-settings-input-border)", borderRadius: "4px", cursor: "pointer", padding: 0, flexShrink: 0 }}
                                            />
                                            <select
                                                value={isCustomFont(profile.yearFontFamily || "") || profile.yearFontFamily === "__custom__" ? "__custom__" : (profile.yearFontFamily || "Inter")}
                                                onChange={(e) => {
                                                    const val = e.target.value === "__custom__" ? "__custom__" : e.target.value;
                                                    saveField("yearFontFamily", val);
                                                }}
                                                className="weekly-input"
                                                style={{ flex: 1, padding: "8px", fontSize: "0.9rem", border: "1px solid var(--weekly-settings-input-border)", borderRadius: "4px", background: "var(--weekly-settings-input-bg)", color: "var(--weekly-settings-text)" }}
                                            >
                                                {AVAILABLE_FONTS.map((font) => (
                                                    <option key={font.value} value={font.value} style={{ fontFamily: font.value }}>{font.name}</option>
                                                ))}
                                            </select>
                                        </div>
                                        {(isCustomFont(profile.yearFontFamily || "") || profile.yearFontFamily === "__custom__") && (
                                            <input
                                                type="text"
                                                value={profile.yearFontFamily === "__custom__" ? "" : (profile.yearFontFamily || "")}
                                                onChange={(e) => saveFieldDebounced("yearFontFamily", e.target.value || "__custom__")}
                                                placeholder={t.fontPlaceholder}
                                                className="weekly-input"
                                                style={{ width: "100%", padding: "8px", fontSize: "0.85rem", border: "1px solid var(--weekly-settings-input-border)", borderRadius: "4px", background: "var(--weekly-settings-input-bg)", color: "var(--weekly-settings-text)" }}
                                            />
                                        )}
                                        <div style={{ display: "flex", gap: "8px" }}>
                                            <input
                                                type="text"
                                                value={profile.yearFontSize || "1.125rem"}
                                                onChange={(e) => saveFieldDebounced("yearFontSize", e.target.value)}
                                                placeholder="1.125rem"
                                                className="weekly-input"
                                                style={{ flex: 1, padding: "8px", fontSize: "0.9rem", border: "1px solid var(--weekly-settings-input-border)", borderRadius: "4px", background: "var(--weekly-settings-input-bg)", color: "var(--weekly-settings-text)" }}
                                            />
                                            <select
                                                value={profile.yearFontWeight || "700"}
                                                onChange={(e) => saveField("yearFontWeight", e.target.value)}
                                                className="weekly-input"
                                                style={{ flex: 1, padding: "8px", fontSize: "0.9rem", border: "1px solid var(--weekly-settings-input-border)", borderRadius: "4px", background: "var(--weekly-settings-input-bg)", color: "var(--weekly-settings-text)" }}
                                            >
                                                <option value="300">{t.weightLight}</option>
                                                <option value="400">{t.weightNormal}</option>
                                                <option value="500">{t.weightMedium}</option>
                                                <option value="600">{t.weightSemi}</option>
                                                <option value="700">{t.weightBold}</option>
                                                <option value="900">{t.weightBlack}</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>

                            </div>

                            {/* Terminal Theme Import/Export */}
                            <div
                                style={{
                                    background: "var(--weekly-settings-item-bg)",
                                    padding: "16px",
                                    borderRadius: "8px",
                                    marginBottom: "12px",
                                    border: "1px solid var(--weekly-border)",
                                }}
                            >
                                <label
                                    style={{
                                        display: "block",
                                        fontSize: "0.95rem",
                                        fontWeight: 700,
                                        color: "var(--weekly-settings-title)",
                                        marginBottom: "8px",
                                    }}
                                >
                                    Terminal Color Theme
                                </label>
                                <p style={{ fontSize: "0.8rem", color: "var(--weekly-settings-label)", marginBottom: "16px" }}>
                                    Import or Export standard Terminal 16-color JSON themes (e.g. Gogh, terminal.sexy) to completely change the app colors.
                                </p>
                                
                                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "16px" }}>
                                    {/* Light Theme */}
                                    <div style={{ display: "flex", flexDirection: "column", gap: "8px", padding: "12px", background: "rgba(0,0,0,0.03)", borderRadius: "6px" }}>
                                        <label style={{ fontSize: "0.85rem", fontWeight: 600, color: "var(--weekly-settings-title)" }}>☀️ Light Mode Theme</label>
                                        <div style={{ display: "flex", gap: "8px" }}>
                                            <label className="weekly-btn-secondary" style={{ flex: 1, textAlign: "center", cursor: "pointer", fontSize: "0.8rem", padding: "6px" }}>
                                                Import JSON
                                                <input 
                                                    type="file" 
                                                    accept=".json" 
                                                    style={{ display: "none" }} 
                                                    onChange={(e) => {
                                                        const file = e.target.files?.[0];
                                                        if (!file) return;
                                                        const reader = new FileReader();
                                                        reader.onload = async (evt) => {
                                                            try {
                                                                const text = evt.target?.result as string;
                                                                let json = JSON.parse(text);
                                                                
                                                                // Normalizing standard terminal formats to a consistent internal format
                                                                const normalized: any = {
                                                                    background: json.background,
                                                                    foreground: json.foreground,
                                                                    cursorColor: json.cursorColor || json.cursor,
                                                                };
                                                                
                                                                // Handle Tabby-style colors array
                                                                if (Array.isArray(json.colors)) {
                                                                    json.colors.forEach((c: string, i: number) => {
                                                                        normalized[`color${i}`] = c;
                                                                    });
                                                                } else {
                                                                    // Handle Gogh/terminal.sexy color0...color15 keys
                                                                    for (let i = 0; i < 16; i++) {
                                                                        if (json[`color${i}`]) normalized[`color${i}`] = json[`color${i}`];
                                                                    }
                                                                }
                                                                
                                                                saveField("lightTheme", normalized);
                                                            } catch (err) {
                                                                alert("Invalid JSON format.");
                                                            }
                                                        };
                                                        reader.readAsText(file);
                                                        e.target.value = '';
                                                    }}
                                                />
                                            </label>
                                            <button 
                                                className="weekly-btn-outline" 
                                                onClick={() => {
                                                    // Fix: access profile from state properly
                                                    const currentTheme = (profile as any).lightTheme || {};
                                                    const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(currentTheme, null, 2));
                                                    const anchor = document.createElement("a");
                                                    anchor.href = dataStr;
                                                    anchor.download = "light-theme.json";
                                                    anchor.click();
                                                }}
                                                style={{ flex: 1, fontSize: "0.8rem", padding: "6px" }}
                                            >
                                                Export
                                            </button>
                                        </div>
                                            {((profile as any).lightTheme) && (
                                                <button 
                                                    onClick={() => saveField("lightTheme", null)}
                                                style={{ fontSize: "0.75rem", color: "#dc2626", background: "none", border: "none", cursor: "pointer", textAlign: "left", marginTop: "4px" }}
                                            >
                                                Clear Light Theme
                                            </button>
                                        )}
                                        {/* Color 16-grid Preview */}
                                        {(profile as any).lightTheme && (
                                            <div style={{ display: "grid", gridTemplateColumns: "repeat(8, 1fr)", gap: "2px", marginTop: "8px" }}>
                                                {[...Array(16)].map((_, i) => (
                                                    <div key={i} title={`color${i}`} style={{ width: "100%", height: "12px", background: (profile as any).lightTheme[`color${i}`] || "#ccc", borderRadius: "2px" }} />
                                                ))}
                                            </div>
                                        )}
                                    </div>

                                    {/* Dark Theme */}
                                    <div style={{ display: "flex", flexDirection: "column", gap: "8px", padding: "12px", background: "rgba(0,0,0,0.2)", borderRadius: "6px" }}>
                                        <label style={{ fontSize: "0.85rem", fontWeight: 600, color: "var(--weekly-settings-title)" }}>🌙 Dark Mode Theme</label>
                                        <div style={{ display: "flex", gap: "8px" }}>
                                            <label className="weekly-btn-secondary" style={{ flex: 1, textAlign: "center", cursor: "pointer", fontSize: "0.8rem", padding: "6px" }}>
                                                Import JSON
                                                <input 
                                                    type="file" 
                                                    accept=".json" 
                                                    style={{ display: "none" }} 
                                                    onChange={(e) => {
                                                        const file = e.target.files?.[0];
                                                        if (!file) return;
                                                        const reader = new FileReader();
                                                        reader.onload = async (evt) => {
                                                            try {
                                                                const text = evt.target?.result as string;
                                                                let json = JSON.parse(text);
                                                                
                                                                const normalized: any = {
                                                                    background: json.background,
                                                                    foreground: json.foreground,
                                                                    cursorColor: json.cursorColor || json.cursor,
                                                                };
                                                                
                                                                if (Array.isArray(json.colors)) {
                                                                    json.colors.forEach((c: string, i: number) => {
                                                                        normalized[`color${i}`] = c;
                                                                    });
                                                                } else {
                                                                    for (let i = 0; i < 16; i++) {
                                                                        if (json[`color${i}`]) normalized[`color${i}`] = json[`color${i}`];
                                                                    }
                                                                }

                                                                saveField("darkTheme", normalized);
                                                            } catch (err) {
                                                                alert("Invalid JSON format.");
                                                            }
                                                        };
                                                        reader.readAsText(file);
                                                        e.target.value = '';
                                                    }}
                                                />
                                            </label>
                                            <button 
                                                className="weekly-btn-outline" 
                                                onClick={() => {
                                                    const currentTheme = (profile as any).darkTheme || {};
                                                    const dataStr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(currentTheme, null, 2));
                                                    const anchor = document.createElement("a");
                                                    anchor.href = dataStr;
                                                    anchor.download = "dark-theme.json";
                                                    anchor.click();
                                                }}
                                                style={{ flex: 1, fontSize: "0.8rem", padding: "6px" }}
                                            >
                                                Export
                                            </button>
                                        </div>
                                        {((profile as any).darkTheme) && (
                                            <button 
                                                onClick={() => saveField("darkTheme", null)}
                                                style={{ fontSize: "0.75rem", color: "#ef4444", background: "none", border: "none", cursor: "pointer", textAlign: "left", marginTop: "4px" }}
                                            >
                                                Clear Dark Theme
                                            </button>
                                        )}
                                        {/* Color 16-grid Preview */}
                                        {(profile as any).darkTheme && (
                                            <div style={{ display: "grid", gridTemplateColumns: "repeat(8, 1fr)", gap: "2px", marginTop: "8px" }}>
                                                {[...Array(16)].map((_, i) => (
                                                    <div key={i} title={`color${i}`} style={{ width: "100%", height: "12px", background: (profile as any).darkTheme[`color${i}`] || "#ccc", borderRadius: "2px" }} />
                                                ))}
                                            </div>
                                        )}
                                    </div>
                                </div>
                            </div>

                            {/* Element Colors */}
                            <div
                                style={{
                                    background: "var(--weekly-settings-item-bg)",
                                    padding: "12px",
                                    borderRadius: "8px",
                                    marginBottom: "12px",
                                }}
                            >
                                <label
                                    style={{
                                        display: "block",
                                        fontSize: "0.85rem",
                                        fontWeight: 600,
                                        color: "var(--weekly-settings-label)",
                                        marginBottom: "8px",
                                    }}
                                >
                                    Element Colors
                                </label>
                                <div
                                    style={{
                                        display: "grid",
                                        gridTemplateColumns: "1fr 1fr",
                                        gap: "12px",
                                    }}
                                >
                                    <div>
                                        <label
                                            style={{
                                                display: "block",
                                                fontSize: "0.75rem",
                                                color: "var(--weekly-settings-label)",
                                                marginBottom: "4px",
                                            }}
                                        >
                                            Today Highlight
                                        </label>
                                        <input
                                            type="color"
                                            value={profile.todayHighlightColor || "#f0fafa"}
                                            onChange={(e) =>
                                                saveFieldDebounced("todayHighlightColor", e.target.value)
                                            }
                                            style={{
                                                width: "100%",
                                                height: "30px",
                                                cursor: "pointer",
                                                border: "none",
                                                background: "transparent",
                                            }}
                                        />
                                    </div>
                                    <div>
                                        <label
                                            style={{
                                                display: "block",
                                                fontSize: "0.75rem",
                                                color: "var(--weekly-settings-label)",
                                                marginBottom: "4px",
                                            }}
                                        >
                                            Past Days
                                        </label>
                                        <input
                                            type="color"
                                            value={profile.pastDayColor || "#a6a6a7"}
                                            onChange={(e) =>
                                                saveFieldDebounced("pastDayColor", e.target.value)
                                            }
                                            style={{
                                                width: "100%",
                                                height: "30px",
                                                cursor: "pointer",
                                                border: "none",
                                                background: "transparent",
                                            }}
                                        />
                                    </div>
                                </div>
                            </div>

                            {/* Weekend Colors */}
                            <div
                                style={{
                                    background: "var(--weekly-settings-item-bg)",
                                    padding: "12px",
                                    borderRadius: "8px",
                                    marginBottom: "12px",
                                }}
                            >
                                <label
                                    style={{
                                        display: "block",
                                        fontSize: "0.85rem",
                                        fontWeight: 600,
                                        color: "var(--weekly-settings-label)",
                                        marginBottom: "8px",
                                    }}
                                >
                                    Weekend Highlight Colors
                                </label>
                                <div
                                    style={{
                                        display: "grid",
                                        gridTemplateColumns: "1fr 1fr",
                                        gap: "12px",
                                    }}
                                >
                                    <div>
                                        <label
                                            style={{
                                                display: "block",
                                                fontSize: "0.75rem",
                                                color: "var(--weekly-settings-label)",
                                                marginBottom: "4px",
                                            }}
                                        >
                                            Saturday
                                        </label>
                                        <input
                                            type="color"
                                            value={profile.weekendColorSat || "#666666"}
                                            onChange={(e) =>
                                                saveFieldDebounced("weekendColorSat", e.target.value)
                                            }
                                            style={{
                                                width: "100%",
                                                height: "30px",
                                                cursor: "pointer",
                                                border: "none",
                                                background: "transparent",
                                            }}
                                        />
                                    </div>
                                    <div>
                                        <label
                                            style={{
                                                display: "block",
                                                fontSize: "0.75rem",
                                                color: "var(--weekly-settings-label)",
                                                marginBottom: "4px",
                                            }}
                                        >
                                            Sunday
                                        </label>
                                        <input
                                            type="color"
                                            value={profile.weekendColorSun || "#dc2626"}
                                            onChange={(e) =>
                                                saveFieldDebounced("weekendColorSun", e.target.value)
                                            }
                                            style={{
                                                width: "100%",
                                                height: "30px",
                                                cursor: "pointer",
                                                border: "none",
                                                background: "transparent",
                                            }}
                                        />
                                    </div>
                                </div>
                            </div>

                            {/* All styling settings auto-save */}
                        </div>
                    ) : activeTab === "motivation" ? (
                        <div
                            style={{ display: "flex", flexDirection: "column", gap: "24px" }}
                        >
                            {/* Replaced Goal of the Week settings block */}
                            {/* "Do This Now" Toggle */}
                            <div
                                style={{
                                    display: "flex",
                                    alignItems: "center",
                                    gap: "8px",
                                    marginBottom: "8px",
                                }}
                            >
                                <input
                                    type="checkbox"
                                    id="showNextTaskMotivation"
                                    checked={showNextTask}
                                    onChange={(e) => {
                                        const newVal = e.target.checked;
                                        setShowNextTask(newVal);
                                        saveSetting("showNextTask", newVal);
                                    }}
                                    style={{ width: "20px", height: "20px", cursor: "pointer" }}
                                />
                                <label
                                    htmlFor="showNextTaskMotivation"
                                    style={{
                                        fontSize: "1rem",
                                        fontWeight: 500,
                                        color: "var(--weekly-settings-title)",
                                        cursor: "pointer",
                                    }}
                                >
                                    {t.showDoThisNow}
                                </label>
                            </div>

                            {/* Focus Timer Settings moved here */}
                            <div style={{ display: "flex", gap: "16px" }}>
                                <div style={{ flex: 1 }}>
                                    <label
                                        style={{
                                            display: "block",
                                            marginBottom: "8px",
                                            fontSize: "1rem",
                                            fontWeight: 600,
                                            color: "var(--weekly-settings-label)",
                                        }}
                                    >
                                        {t.focusTimer}
                                    </label>
                                    <input
                                        type="number"
                                        min="1"
                                        max="120"
                                        value={profile.focusTimerDuration || 25}
                                        onChange={(e) => saveFieldDebounced("focusTimerDuration", parseInt(e.target.value) || 25)}
                                        className="weekly-input"
                                        style={{
                                            width: "100%",
                                            padding: "12px",
                                            border: "1px solid var(--weekly-border)",
                                            borderRadius: "6px",
                                            fontSize: "1rem",
                                        }}
                                    />
                                </div>
                                <div style={{ flex: 1 }}>
                                    <label
                                        style={{
                                            display: "block",
                                            marginBottom: "8px",
                                            fontSize: "1rem",
                                            fontWeight: 600,
                                            color: "var(--weekly-settings-label)",
                                        }}
                                    >
                                        {t.focusBreak}
                                    </label>
                                    <input
                                        type="number"
                                        min="1"
                                        max="60"
                                        value={profile.focusBreakDuration || 5}
                                        onChange={(e) => saveFieldDebounced("focusBreakDuration", parseInt(e.target.value) || 5)}
                                        className="weekly-input"
                                        style={{
                                            width: "100%",
                                            padding: "12px",
                                            border: "1px solid var(--weekly-border)",
                                            borderRadius: "6px",
                                            fontSize: "1rem",
                                        }}
                                    />
                                </div>
                            </div>

                            {/* Goal Scope Redesign */}
                            <div
                                style={{
                                    background: "var(--weekly-settings-item-bg)",
                                    padding: "20px",
                                    borderRadius: "12px",
                                    border: "1px solid var(--weekly-border)",
                                }}
                            >
                                <h3
                                    style={{
                                        fontSize: "1rem",
                                        fontWeight: 600,
                                        marginBottom: "16px",
                                        color: "var(--weekly-settings-title)",
                                    }}
                                >
                                    {t.goalScopeTitle}
                                </h3>
                                <div
                                    style={{
                                        display: "flex",
                                        background: "var(--weekly-bg)",
                                        padding: "4px",
                                        borderRadius: "8px",
                                        border: "1px solid var(--weekly-border)",
                                    }}
                                >
                                    <button
                                        type="button"
                                        onClick={() => saveField("goalScope", "week")}
                                        style={{
                                            flex: 1,
                                            padding: "10px",
                                            borderRadius: "6px",
                                            border: profile.goalScope === "week" ? "2px solid var(--weekly-teal)" : "none",
                                            background:
                                                profile.goalScope === "week"
                                                    ? "var(--weekly-settings-toggle-active-bg)"
                                                    : "transparent",
                                            color:
                                                profile.goalScope === "week"
                                                    ? "var(--weekly-settings-toggle-active-text)"
                                                    : "var(--weekly-settings-text)",
                                            fontWeight: 700,
                                            boxShadow: profile.goalScope === "week" ? "0 2px 4px rgba(0,0,154,0.1)" : "none",
                                            cursor: "pointer",
                                            transition: "all 0.2s",
                                        }}
                                    >
                                        {t.goalScopeWeek}
                                    </button>
                                    <button
                                        type="button"
                                        onClick={() => saveField("goalScope", "day")}
                                        style={{
                                            flex: 1,
                                            padding: "10px",
                                            borderRadius: "6px",
                                            border: profile.goalScope === "day" ? "2px solid var(--weekly-teal)" : "none",
                                            background:
                                                profile.goalScope === "day"
                                                    ? "var(--weekly-settings-toggle-active-bg)"
                                                    : "transparent",
                                            color:
                                                profile.goalScope === "day"
                                                    ? "var(--weekly-settings-toggle-active-text)"
                                                    : "var(--weekly-settings-text)",
                                            fontWeight: 700,
                                            boxShadow: profile.goalScope === "day" ? "0 2px 4px rgba(0,154,154,0.1)" : "none",
                                            cursor: "pointer",
                                            transition: "all 0.2s",
                                        }}
                                    >
                                        {t.goalScopeDay}
                                    </button>
                                </div>
                            </div>

                            {/* Fallback Section */}
                            <div
                                style={{
                                    background: "var(--weekly-settings-item-bg)",
                                    padding: "20px",
                                    borderRadius: "12px",
                                    border: "1px solid var(--weekly-border)",
                                }}
                            >
                                <h3
                                    style={{
                                        fontSize: "1rem",
                                        fontWeight: 600,
                                        marginBottom: "8px",
                                        color: "var(--weekly-settings-title)",
                                    }}
                                >
                                    {t.goalFallbackTitle}
                                </h3>
                                <div style={{ marginBottom: "12px" }}>
                                    <label
                                        style={{
                                            display: "block",
                                            fontSize: "0.85rem",
                                            color: "var(--weekly-settings-label)",
                                            marginBottom: "8px",
                                        }}
                                    >
                                        {t.goalFallback}
                                    </label>
                                    <select
                                        value={profile.goalFallbackType || "quote"}
                                        onChange={(e) => saveField("goalFallbackType", e.target.value)}
                                        className="weekly-input"
                                        style={{
                                            width: "100%",
                                            padding: "12px",
                                            borderRadius: "6px",
                                            border: "1px solid var(--weekly-border)",
                                            background: "var(--weekly-bg)",
                                            fontSize: "1rem",
                                        }}
                                    >
                                        <option value="quote">
                                            {t.motivationalQuote}
                                        </option>
                                        <option value="next_todo">{t.nextTodo}</option>
                                        <option value="default">{t.defaultText}</option>
                                    </select>
                                </div>
                                {(!profile.goalFallbackType || profile.goalFallbackType === "quote") && (
                                    <div style={{ marginTop: "12px" }}>
                                        <label
                                            style={{
                                                display: "block",
                                                fontSize: "0.9rem",
                                                marginBottom: "4px",
                                                color: "var(--weekly-settings-label)",
                                            }}
                                        >
                                            {t.apiDataSources}
                                        </label>
                                        <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
                                            {(profile.quoteSourceUrls || [profile.quoteSourceUrl || ""]).map((url: string, idx: number) => (
                                                <div key={idx} style={{ display: "flex", gap: "8px" }}>
                                                    <input
                                                        type="text"
                                                        value={url}
                                                        onChange={(e) => {
                                                            const newUrls = [...(profile.quoteSourceUrls || [profile.quoteSourceUrl || ""])];
                                                            newUrls[idx] = e.target.value;
                                                            setProfile((p: any) => ({ ...p, quoteSourceUrls: newUrls }));
                                                            if (debouncedTimers.current["quoteSourceUrls"]) clearTimeout(debouncedTimers.current["quoteSourceUrls"]);
                                                            debouncedTimers.current["quoteSourceUrls"] = setTimeout(() => saveSetting("quoteSourceUrls", newUrls), 500);
                                                        }}
                                                        className="weekly-input"
                                                        placeholder="https://..."
                                                        style={{
                                                            flex: 1,
                                                            padding: "10px",
                                                            fontSize: "0.95rem",
                                                            borderRadius: "6px",
                                                            border: "1px solid var(--weekly-border)",
                                                            background: "var(--weekly-bg)",
                                                        }}
                                                    />
                                                    <button
                                                        type="button"
                                                        onClick={() => {
                                                            const newUrls = (profile.quoteSourceUrls || [profile.quoteSourceUrl || ""]).filter((_val: string, i: number) => i !== idx);
                                                            saveField("quoteSourceUrls", newUrls);
                                                        }}
                                                        style={{
                                                            padding: "8px",
                                                            background: "#fee2e2",
                                                            color: "#ef4444",
                                                            border: "none",
                                                            borderRadius: "6px",
                                                            cursor: "pointer"
                                                        }}
                                                    >
                                                        <Trash2 size={16} />
                                                    </button>
                                                </div>
                                            ))}
                                            <button
                                                type="button"
                                                onClick={() => {
                                                    const newUrls = [...(profile.quoteSourceUrls || [profile.quoteSourceUrl || ""]), ""];
                                                    saveField("quoteSourceUrls", newUrls);
                                                }}
                                                style={{
                                                    alignSelf: "flex-start",
                                                    marginTop: "4px",
                                                    padding: "6px 12px",
                                                    fontSize: "0.85rem",
                                                    background: "var(--weekly-teal)",
                                                    color: "white",
                                                    border: "none",
                                                    borderRadius: "6px",
                                                    cursor: "pointer",
                                                    display: "flex",
                                                    alignItems: "center",
                                                    gap: "4px"
                                                }}
                                            >
                                                <Plus size={14} /> {t.addSource}
                                            </button>
                                        </div>
                                        <p style={{ fontSize: "0.75rem", color: "var(--weekly-text-light)", marginTop: "4px" }}>
                                            {t.urlFormatHelp}
                                        </p>
                                        <p style={{ fontSize: "0.75rem", color: "var(--weekly-settings-label)", marginTop: "8px", fontStyle: "italic" }}>
                                            {t.quoteFallbackDesc}
                                        </p>
                                        <div style={{ marginTop: "12px" }}>
                                            <label
                                                style={{
                                                    display: "block",
                                                    fontSize: "0.9rem",
                                                    marginBottom: "6px",
                                                    color: "var(--weekly-settings-label)",
                                                }}
                                            >
                                                {t.quoteLanguages}
                                            </label>
                                            <div style={{ display: "flex", flexWrap: "wrap", gap: "8px" }}>
                                                {[
                                                    { code: "en", label: "English" },
                                                    { code: "de", label: "Deutsch" },
                                                    { code: "fr", label: "Français" },
                                                    { code: "es", label: "Español" },
                                                    { code: "it", label: "Italiano" },
                                                ].map((lang) => {
                                                    const selected = (profile.quoteLanguages || ["en", "de"]).includes(lang.code);
                                                    return (
                                                        <label
                                                            key={lang.code}
                                                            style={{
                                                                display: "flex",
                                                                alignItems: "center",
                                                                gap: "4px",
                                                                fontSize: "0.85rem",
                                                                cursor: "pointer",
                                                                padding: "4px 10px",
                                                                borderRadius: "6px",
                                                                border: selected ? "1px solid var(--weekly-teal)" : "1px solid var(--weekly-border)",
                                                                background: selected ? "var(--weekly-teal)" : "transparent",
                                                                color: selected ? "white" : "var(--weekly-text)",
                                                                transition: "all 0.15s ease",
                                                            }}
                                                        >
                                                            <input
                                                                type="checkbox"
                                                                checked={selected}
                                                                onChange={() => {
                                                                    const current = profile.quoteLanguages || ["en", "de"];
                                                                    const updated = selected
                                                                        ? current.filter((c: string) => c !== lang.code)
                                                                        : [...current, lang.code];
                                                                    if (updated.length > 0) {
                                                                        saveField("quoteLanguages", updated);
                                                                    }
                                                                }}
                                                                style={{ display: "none" }}
                                                            />
                                                            {lang.label}
                                                        </label>
                                                    );
                                                })}
                                            </div>
                                            <p style={{ fontSize: "0.75rem", color: "var(--weekly-text-light)", marginTop: "4px" }}>
                                                {t.quoteLanguagesDesc}
                                            </p>
                                        </div>
                                    </div>
                                )}
                                {profile.goalFallbackType === "default" && (
                                    <div style={{ marginTop: "12px" }}>
                                        <label
                                            style={{
                                                display: "block",
                                                fontSize: "0.9rem",
                                                marginBottom: "4px",
                                                color: "var(--weekly-settings-label)",
                                            }}
                                        >
                                            {t.defaultText}
                                        </label>
                                        <input
                                            type="text"
                                            value={profile.goalDefaultSentence || ""}
                                            onChange={(e) => saveFieldDebounced("goalDefaultSentence", e.target.value)}
                                            className="weekly-input"
                                            style={{
                                                width: "100%",
                                                padding: "12px",
                                                borderRadius: "6px",
                                                border: "1px solid var(--weekly-border)",
                                            }}
                                            placeholder={t.defaultGoalPlaceholder}
                                        />
                                    </div>
                                )}
                            </div>
                        </div>
                    ) : activeTab === "about" ? (
                        <div
                            style={{ display: "flex", flexDirection: "column", gap: "20px" }}
                        >
                            <div style={{ textAlign: "center", marginBottom: "20px" }}>
                                <h3
                                    style={{
                                        fontSize: "1.2rem",
                                        fontWeight: 700,
                                        marginBottom: "8px",
                                        color: "var(--weekly-settings-title)",
                                    }}
                                >
                                    My Weekly To-Do List
                                </h3>
                                <p
                                    style={{
                                        fontSize: "0.9rem",
                                        color: "var(--weekly-settings-label)",
                                    }}
                                >
                                    Version {process.env.NEXT_PUBLIC_APP_VERSION || "1.8.0"}
                                </p>
                            </div>

                            <button
                                onClick={() => { onRunSetupAssistant?.(); }}
                                style={{
                                    display: "flex", alignItems: "center", justifyContent: "center", gap: "8px",
                                    width: "100%", padding: "12px 20px", borderRadius: "10px",
                                    border: "1px solid var(--weekly-border, #e5e7eb)",
                                    background: "var(--weekly-bg, #fff)",
                                    color: "var(--weekly-text, #333)",
                                    fontSize: "0.9rem", fontWeight: 500, cursor: "pointer",
                                    transition: "all 0.15s",
                                }}
                                onMouseEnter={(e) => { e.currentTarget.style.background = "var(--weekly-hover, #f3f4f6)"; }}
                                onMouseLeave={(e) => { e.currentTarget.style.background = "var(--weekly-bg, #fff)"; }}
                            >
                                <Play size={16} />
                                {t.setupAssistant}
                            </button>
                        </div>
                    ) : (
                        /* Account Tab */
                        <div
                            style={{ display: "flex", flexDirection: "column", gap: "20px" }}
                        >
                            <form
                                onSubmit={handleUpdateProfile}
                                style={{
                                    display: "flex",
                                    flexDirection: "column",
                                    gap: "12px",
                                }}
                            >
                                <div>
                                    <label
                                        style={{
                                            display: "block",
                                            fontSize: "0.9rem",
                                            fontWeight: 600,
                                            marginBottom: "4px",
                                        }}
                                    >
                                        {t.name}
                                    </label>
                                    <input
                                        type="text"
                                        value={profile.name}
                                        onChange={(e) => saveFieldDebounced("name", e.target.value)}
                                        className="weekly-input"
                                        style={{
                                            width: "100%",
                                            padding: "8px",
                                            border: "1px solid #ddd",
                                            borderRadius: "4px",
                                        }}
                                    />
                                </div>
                                <div>
                                    <label
                                        style={{
                                            display: "block",
                                            fontSize: "0.9rem",
                                            fontWeight: 600,
                                            marginBottom: "4px",
                                        }}
                                    >
                                        {t.email}
                                    </label>
                                    <input
                                        type="email"
                                        value={profile.email}
                                        disabled
                                        style={{
                                            width: "100%",
                                            padding: "8px",
                                            border: "1px solid #eee",
                                            borderRadius: "4px",
                                            background: "#f5f5f5",
                                            color: "#555",
                                        }}
                                    />
                                </div>
                                {profile.id && (
                                    <div>
                                        <label
                                            style={{
                                                display: "block",
                                                fontSize: "0.9rem",
                                                fontWeight: 600,
                                                marginBottom: "4px",
                                            }}
                                        >
                                            {t.accountId}
                                        </label>
                                        <input
                                            type="text"
                                            value={profile.id}
                                            readOnly
                                            onClick={(e) => (e.target as HTMLInputElement).select()}
                                            className="weekly-input"
                                            style={{
                                                width: "100%",
                                                padding: "8px",
                                                border: "1px solid #eee",
                                                borderRadius: "4px",
                                                background: "#f5f5f5",
                                                color: "#555",
                                                fontSize: "0.85rem",
                                                fontFamily: "monospace",
                                                cursor: "text",
                                            }}
                                        />
                                        <span style={{ fontSize: "0.75rem", color: "var(--weekly-settings-label)", opacity: 0.7 }}>
                                            {t.accountIdDesc}
                                        </span>
                                    </div>
                                )}
                                {profile.accountNumber && (
                                    <div>
                                        <label
                                            style={{
                                                display: "block",
                                                fontSize: "0.9rem",
                                                fontWeight: 600,
                                                marginBottom: "4px",
                                            }}
                                        >
                                            {t.accountNumberLabel}
                                        </label>
                                        <input
                                            type="text"
                                            value={`#${profile.accountNumber}`}
                                            readOnly
                                            onClick={(e) => (e.target as HTMLInputElement).select()}
                                            className="weekly-input"
                                            style={{
                                                width: "100%",
                                                padding: "8px",
                                                border: "1px solid #eee",
                                                borderRadius: "4px",
                                                background: "#f5f5f5",
                                                color: "#555",
                                                fontSize: "0.85rem",
                                                fontFamily: "monospace",
                                                cursor: "text",
                                            }}
                                        />
                                        <span style={{ fontSize: "0.75rem", color: "var(--weekly-settings-label)", opacity: 0.7 }}>
                                            {t.accountNumberDesc}
                                        </span>
                                    </div>
                                )}
                                <div>
                                    <label
                                        style={{
                                            display: "block",
                                            fontSize: "0.9rem",
                                            fontWeight: 600,
                                            marginBottom: "4px",
                                        }}
                                    >
                                        {t.timezone}
                                    </label>
                                    <select
                                        value={profile.timezone}
                                        onChange={(e) => saveField("timezone", e.target.value)}
                                        style={{
                                            width: "100%",
                                            padding: "8px",
                                            border: "1px solid #ddd",
                                            borderRadius: "4px",
                                        }}
                                    >
                                        <option value="UTC">UTC</option>
                                        <option value="Europe/Berlin">Europe/Berlin</option>
                                        <option value="America/New_York">America/New_York</option>
                                        <option value="Asia/Tokyo">Asia/Tokyo</option>
                                    </select>
                                </div>

                                <div
                                    style={{
                                        borderTop: "1px solid #eee",
                                        paddingTop: "12px",
                                        marginTop: "8px",
                                    }}
                                >
                                    <label
                                        style={{
                                            display: "block",
                                            fontSize: "0.9rem",
                                            fontWeight: 600,
                                            marginBottom: "4px",
                                        }}
                                    >
                                        {t.changePassword}
                                    </label>
                                    <input
                                        type="password"
                                        placeholder={t.newPassword}
                                        value={passwords.new}
                                        onChange={(e) =>
                                            setPasswords({ ...passwords, new: e.target.value })
                                        }
                                        style={{
                                            width: "100%",
                                            padding: "8px",
                                            border: "1px solid #ddd",
                                            borderRadius: "4px",
                                            marginBottom: "8px",
                                        }}
                                    />
                                    <input
                                        type="password"
                                        placeholder={t.confirmPassword}
                                        value={passwords.confirm}
                                        onChange={(e) =>
                                            setPasswords({ ...passwords, confirm: e.target.value })
                                        }
                                        style={{
                                            width: "100%",
                                            padding: "8px",
                                            border: "1px solid #ddd",
                                            borderRadius: "4px",
                                        }}
                                    />
                                    <small
                                        className="help-text"
                                        style={{
                                            fontSize: "0.75rem",
                                            color: "#666",
                                            marginTop: "4px",
                                            display: "block",
                                        }}
                                    >
                                        {translations[profile.language || "en"]?.newPasswordDesc ||
                                            translations["en"].newPasswordDesc}
                                    </small>
                                </div>

                                <div
                                    style={{
                                        marginTop: "16px",
                                        display: "flex",
                                        alignItems: "center",
                                        gap: "12px",
                                    }}
                                >
                                    <button
                                        type="submit"
                                        className="weekly-btn-primary"
                                        style={{ padding: "10px 20px" }}
                                    >
                                        {t.saveChanges}
                                    </button>
                                    {accountMsg && (
                                        <span
                                            style={{
                                                fontSize: "0.9rem",
                                                color: accountMsg.toLowerCase().includes("success")
                                                    ? "#059669"
                                                    : "#dc2626",
                                                fontWeight: 600,
                                            }}
                                        >
                                            {accountMsg}
                                        </span>
                                    )}
                                </div>
                            </form>

                            {/* Data Export Section */}
                            <div
                                style={{
                                    marginTop: "20px",
                                    paddingTop: "20px",
                                    borderTop: "1px solid var(--weekly-border)",
                                }}
                            >
                                <h4
                                    style={{
                                        marginBottom: "10px",
                                        fontSize: "1rem",
                                        fontWeight: 600,
                                        color: "var(--weekly-settings-title)",
                                    }}
                                >
                                    {profile.language === "de" ? "Datenexport" : "Data Export"}
                                </h4>
                                <p
                                    style={{
                                        fontSize: "0.9rem",
                                        color: "var(--weekly-settings-label)",
                                        marginBottom: "15px",
                                    }}
                                >
                                    {profile.language === "de"
                                        ? "Laden Sie eine CSV-Datei Ihrer erledigten Aufgaben herunter."
                                        : "Download a CSV file of your completed tasks."}
                                </p>
                                <div
                                    style={{ display: "flex", gap: "10px", marginBottom: "15px" }}
                                >
                                    <div style={{ flex: 1 }}>
                                        <label
                                            style={{
                                                display: "block",
                                                fontSize: "0.8rem",
                                                fontWeight: 600,
                                                marginBottom: "4px",
                                                color: "var(--weekly-settings-label)",
                                            }}
                                        >
                                            Start
                                        </label>
                                        <input
                                            type="date"
                                            value={exportStartDate}
                                            onChange={(e) => setExportStartDate(e.target.value)}
                                            className="weekly-input"
                                            style={{
                                                width: "100%",
                                                padding: "6px",
                                                border: "1px solid var(--weekly-settings-input-border)",
                                                borderRadius: "4px",
                                                background: "var(--weekly-settings-input-bg)",
                                                color: "var(--weekly-settings-text)",
                                            }}
                                        />
                                    </div>
                                    <div style={{ flex: 1 }}>
                                        <label
                                            style={{
                                                display: "block",
                                                fontSize: "0.8rem",
                                                fontWeight: 600,
                                                marginBottom: "4px",
                                                color: "var(--weekly-settings-label)",
                                            }}
                                        >
                                            End
                                        </label>
                                        <input
                                            type="date"
                                            value={exportEndDate}
                                            onChange={(e) => setExportEndDate(e.target.value)}
                                            className="weekly-input"
                                            style={{
                                                width: "100%",
                                                padding: "6px",
                                                border: "1px solid var(--weekly-settings-input-border)",
                                                borderRadius: "4px",
                                                background: "var(--weekly-settings-input-bg)",
                                                color: "var(--weekly-settings-text)",
                                            }}
                                        />
                                    </div>
                                </div>
                                <a
                                    href={`/api/user/export?startDate=${exportStartDate}&endDate=${exportEndDate}`}
                                    target="_blank"
                                    className="weekly-auth-button w-full justify-center"
                                    style={{
                                        display: "inline-flex",
                                        textDecoration: "none",
                                        background: "var(--weekly-settings-item-bg)",
                                        border: "1px solid var(--weekly-settings-input-border)",
                                        color: "var(--weekly-settings-text)",
                                        padding: "10px",
                                        borderRadius: "4px",
                                        fontWeight: 500,
                                        transition: "background-color 0.2s",
                                    }}
                                >
                                    {profile.language === "de"
                                        ? "Erledigte Aufgaben exportieren (CSV)"
                                        : "Export Completed Tasks (CSV)"}
                                </a>
                            </div>

                            {/* Backup & Restore Section */}
                            <div
                                style={{
                                    marginTop: "20px",
                                    paddingTop: "20px",
                                    borderTop: "1px solid var(--weekly-border)",
                                }}
                            >
                                <h4
                                    style={{
                                        marginBottom: "10px",
                                        fontSize: "1rem",
                                        fontWeight: 600,
                                        color: "var(--weekly-settings-title)",
                                    }}
                                >
                                    {t.backupRestore}
                                </h4>
                                <p
                                    style={{
                                        fontSize: "0.9rem",
                                        color: "var(--weekly-settings-label)",
                                        marginBottom: "15px",
                                    }}
                                >
                                    {t.backupRestoreDesc}
                                </p>

                                {/* Export All Data */}
                                <button
                                    onClick={handleExportAllData}
                                    disabled={isExportingAll}
                                    className="weekly-auth-button w-full justify-center"
                                    style={{
                                        display: "inline-flex",
                                        width: "100%",
                                        padding: "10px",
                                        background: "var(--weekly-settings-item-bg)",
                                        border: "1px solid var(--weekly-settings-input-border)",
                                        color: "var(--weekly-settings-text)",
                                        borderRadius: "4px",
                                        fontWeight: 500,
                                        cursor: isExportingAll ? "wait" : "pointer",
                                        transition: "background-color 0.2s",
                                        marginBottom: "15px",
                                        opacity: isExportingAll ? 0.7 : 1,
                                    }}
                                >
                                    {isExportingAll ? t.exporting : t.exportAllData}
                                </button>

                                {/* Import Section */}
                                <div
                                    style={{
                                        padding: "12px",
                                        border: "1px solid var(--weekly-border)",
                                        borderRadius: "6px",
                                        background: "var(--weekly-settings-item-bg)",
                                    }}
                                >
                                    <label
                                        style={{
                                            display: "block",
                                            fontSize: "0.9rem",
                                            fontWeight: 600,
                                            marginBottom: "10px",
                                            color: "var(--weekly-settings-text)",
                                        }}
                                    >
                                        {t.importData}
                                    </label>

                                    {/* Import Mode Toggle */}
                                    <div style={{ marginBottom: "10px" }}>
                                        <label
                                            style={{
                                                display: "block",
                                                fontSize: "0.8rem",
                                                fontWeight: 600,
                                                marginBottom: "6px",
                                                color: "var(--weekly-settings-label)",
                                            }}
                                        >
                                            {t.importMode}
                                        </label>
                                        <div style={{ display: "flex", gap: "8px" }}>
                                            <button
                                                onClick={() => setImportMode("merge")}
                                                style={{
                                                    flex: 1,
                                                    padding: "8px",
                                                    borderRadius: "4px",
                                                    border: importMode === "merge"
                                                        ? "2px solid var(--weekly-teal)"
                                                        : "1px solid var(--weekly-settings-input-border)",
                                                    background: importMode === "merge"
                                                        ? "rgba(20, 184, 166, 0.1)"
                                                        : "var(--weekly-settings-input-bg)",
                                                    color: "var(--weekly-settings-text)",
                                                    cursor: "pointer",
                                                    fontSize: "0.85rem",
                                                    fontWeight: importMode === "merge" ? 600 : 400,
                                                    transition: "all 0.2s",
                                                }}
                                            >
                                                <div>{t.importModeMerge}</div>
                                                <div style={{ fontSize: "0.75rem", opacity: 0.7, marginTop: "2px" }}>
                                                    {t.importModeMergeDesc}
                                                </div>
                                            </button>
                                            <button
                                                onClick={() => setImportMode("replace")}
                                                style={{
                                                    flex: 1,
                                                    padding: "8px",
                                                    borderRadius: "4px",
                                                    border: importMode === "replace"
                                                        ? "2px solid #ef4444"
                                                        : "1px solid var(--weekly-settings-input-border)",
                                                    background: importMode === "replace"
                                                        ? "rgba(239, 68, 68, 0.1)"
                                                        : "var(--weekly-settings-input-bg)",
                                                    color: importMode === "replace" ? "#ef4444" : "var(--weekly-settings-text)",
                                                    cursor: "pointer",
                                                    fontSize: "0.85rem",
                                                    fontWeight: importMode === "replace" ? 600 : 400,
                                                    transition: "all 0.2s",
                                                }}
                                            >
                                                <div>{t.importModeReplace}</div>
                                                <div style={{ fontSize: "0.75rem", opacity: 0.7, marginTop: "2px" }}>
                                                    {t.importModeReplaceDesc}
                                                </div>
                                            </button>
                                        </div>
                                    </div>

                                    {importMode === "replace" && (
                                        <div
                                            style={{
                                                padding: "8px 10px",
                                                marginBottom: "10px",
                                                borderRadius: "4px",
                                                background: "rgba(239, 68, 68, 0.08)",
                                                border: "1px solid rgba(239, 68, 68, 0.3)",
                                                fontSize: "0.8rem",
                                                color: "#ef4444",
                                                fontWeight: 500,
                                            }}
                                        >
                                            {t.importReplaceWarning}
                                        </div>
                                    )}

                                    {/* File Input */}
                                    <input
                                        id="import-file-input"
                                        type="file"
                                        accept=".json"
                                        onChange={(e) => {
                                            setImportFile(e.target.files?.[0] || null);
                                            setImportMsg("");
                                        }}
                                        className="weekly-input"
                                        style={{
                                            width: "100%",
                                            padding: "6px",
                                            border: "1px solid var(--weekly-settings-input-border)",
                                            borderRadius: "4px",
                                            background: "var(--weekly-settings-input-bg)",
                                            color: "var(--weekly-settings-text)",
                                            marginBottom: "10px",
                                            fontSize: "0.85rem",
                                        }}
                                    />

                                    <button
                                        onClick={handleImportData}
                                        disabled={!importFile || isImporting}
                                        className="weekly-auth-button w-full justify-center"
                                        style={{
                                            display: "inline-flex",
                                            width: "100%",
                                            padding: "10px",
                                            background: !importFile || isImporting
                                                ? "var(--weekly-settings-input-bg)"
                                                : "var(--weekly-teal)",
                                            border: "1px solid var(--weekly-settings-input-border)",
                                            color: !importFile || isImporting
                                                ? "var(--weekly-settings-label)"
                                                : "#fff",
                                            borderRadius: "4px",
                                            fontWeight: 600,
                                            cursor: !importFile || isImporting ? "not-allowed" : "pointer",
                                            transition: "background-color 0.2s",
                                            opacity: !importFile || isImporting ? 0.6 : 1,
                                        }}
                                    >
                                        {isImporting ? t.importing : t.importButton}
                                    </button>

                                    {importMsg && (
                                        <p
                                            style={{
                                                marginTop: "10px",
                                                fontSize: "0.85rem",
                                                fontWeight: 600,
                                                color: importMsg.startsWith("✓")
                                                    ? "#059669"
                                                    : "#dc2626",
                                            }}
                                        >
                                            {importMsg}
                                        </p>
                                    )}
                                </div>
                            </div>

                            <div
                                className="account-danger-zone"
                                style={{
                                    marginTop: "20px",
                                    paddingTop: "20px",
                                    borderTop: "1px solid var(--weekly-border)",
                                }}
                            >
                                {/* Sign Out Button - accessible on mobile */}
                                <button
                                    onClick={() => signOut()}
                                    className="weekly-auth-button w-full justify-center"
                                    style={{
                                        marginBottom: "18px",
                                        padding: "10px",
                                        border: "1px solid var(--weekly-settings-input-border)",
                                        background: "var(--weekly-settings-item-bg)",
                                        color: "var(--weekly-settings-text)",
                                        borderRadius: "4px",
                                        cursor: "pointer",
                                        fontWeight: 500,
                                        transition: "background-color 0.2s",
                                        display: "flex",
                                        alignItems: "center",
                                        gap: "8px",
                                        width: "100%",
                                    }}
                                >
                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                                        <path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"></path>
                                        <polyline points="16 17 21 12 16 7"></polyline>
                                        <line x1="21" y1="12" x2="9" y2="12"></line>
                                    </svg>
                                    {t.signOut}
                                </button>

                                <h3
                                    style={{
                                        fontSize: "1rem",
                                        fontWeight: 600,
                                        marginBottom: "10px",
                                        color: "var(--weekly-settings-title)",
                                    }}
                                >
                                    {t.dataPrivacy}
                                </h3>
                                <div
                                    style={{
                                        display: "flex",
                                        flexDirection: "column",
                                        gap: "10px",
                                    }}
                                >
                                    <button
                                        onClick={handleDownloadData}
                                        className="weekly-auth-button w-full justify-center"
                                        style={{
                                            padding: "10px",
                                            border: "1px solid var(--weekly-settings-input-border)",
                                            background: "var(--weekly-settings-item-bg)",
                                            color: "var(--weekly-settings-text)",
                                            borderRadius: "4px",
                                            cursor: "pointer",
                                            fontWeight: 500,
                                            transition: "background-color 0.2s",
                                        }}
                                    >
                                        {t.downloadData}
                                    </button>
                                    <button
                                        onClick={handleDeleteAccount}
                                        className="weekly-auth-button w-full justify-center"
                                        style={{
                                            padding: "10px",
                                            border: "1px solid #ef4444",
                                            background: "rgba(239, 68, 68, 0.05)",
                                            color: "#ef4444",
                                            borderRadius: "4px",
                                            cursor: "pointer",
                                            fontWeight: 600,
                                            transition: "background-color 0.2s",
                                        }}
                                        onMouseOver={(e) =>
                                        (e.currentTarget.style.background =
                                            "rgba(239, 68, 68, 0.1)")
                                        }
                                        onMouseOut={(e) =>
                                        (e.currentTarget.style.background =
                                            "rgba(239, 68, 68, 0.05)")
                                        }
                                    >
                                        {t.deleteAccount}
                                    </button>
                                </div>
                            </div>
                        </div>
                    )}

                    {/* Apple Calendar (CalDAV) Connection Modal */}
                    {showAppleCalendarModal && (
                        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-[2000]">
                            <div className="bg-white rounded-lg p-6 max-w-md w-full shadow-xl">
                                <h3 className="text-xl font-bold mb-4">
                                    Connect Apple Calendar
                                </h3>

                                <div className="bg-blue-50 border border-blue-200 rounded p-3 mb-4 text-sm text-blue-800">
                                    <p style={{ marginBottom: "6px" }}>
                                        Connect your iCloud Calendar events via CalDAV.
                                    </p>
                                    <p style={{ fontSize: "0.8rem", opacity: 0.85 }}>
                                        This requires an{" "}
                                        <a
                                            href="https://support.apple.com/en-us/102654"
                                            target="_blank"
                                            rel="noopener noreferrer"
                                            style={{ textDecoration: "underline" }}
                                        >
                                            app-specific password
                                        </a>{" "}
                                        generated at appleid.apple.com.
                                    </p>
                                </div>

                                <div className="bg-amber-50 border border-amber-200 rounded p-3 mb-4 text-sm text-amber-800" style={{ display: "flex", gap: "8px", alignItems: "flex-start" }}>
                                    <span style={{ fontSize: "1rem", flexShrink: 0 }}>⚠️</span>
                                    <p style={{ margin: 0, fontSize: "0.8rem", lineHeight: 1.4 }}>
                                        {t.appleRemindersNote}
                                    </p>
                                </div>

                                {appleCalError && (
                                    <div className="bg-red-50 text-red-600 p-3 rounded mb-4 text-sm">
                                        {appleCalError}
                                    </div>
                                )}

                                <div className="space-y-4">
                                    <div>
                                        <label className="block text-sm font-medium text-gray-700 mb-1">
                                            Apple ID (Email)
                                        </label>
                                        <input
                                            type="email"
                                            value={appleCalEmail}
                                            onChange={(e) => setAppleCalEmail(e.target.value)}
                                            className="w-full border border-gray-300 rounded px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
                                            placeholder="name@icloud.com"
                                        />
                                    </div>
                                    <div>
                                        <label className="block text-sm font-medium text-gray-700 mb-1">
                                            App-Specific Password
                                        </label>
                                        <input
                                            type="password"
                                            value={appleCalPassword}
                                            onChange={(e) => setAppleCalPassword(e.target.value)}
                                            className="w-full border border-gray-300 rounded px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
                                            placeholder="xxxx-xxxx-xxxx-xxxx"
                                            onKeyDown={(e) =>
                                                e.key === "Enter" && submitAppleCalendarConnection()
                                            }
                                        />
                                    </div>
                                </div>

                                <div className="flex justify-end gap-3 mt-6">
                                    <button
                                        onClick={() => {
                                            setShowAppleCalendarModal(false);
                                            setAppleCalError("");
                                        }}
                                        className="px-4 py-2 text-gray-600 hover:text-gray-800"
                                        disabled={isConnectingAppleCal}
                                    >
                                        Cancel
                                    </button>
                                    <button
                                        onClick={submitAppleCalendarConnection}
                                        className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:bg-blue-300 flex items-center"
                                        disabled={isConnectingAppleCal}
                                    >
                                        {isConnectingAppleCal ? (
                                            <>
                                                <div className="weekly-spinner weekly-spinner-white -ml-1 mr-2"></div>
                                                Connecting...
                                            </>
                                        ) : (
                                            "Connect"
                                        )}
                                    </button>
                                </div>
                            </div>
                        </div>
                    )}

                    {/* Synology Calendar Connection Modal */}
                    {showSynologyCalendarModal && (
                        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-[2000]">
                            <div className="bg-white rounded-lg p-6 max-w-md w-full shadow-xl">
                                <h3 className="text-xl font-bold mb-4">
                                    Connect Synology Calendar
                                </h3>

                                <div className="bg-blue-50 border border-blue-200 rounded p-3 mb-4 text-sm text-blue-800">
                                    <p style={{ marginBottom: "6px" }}>
                                        Connect your Synology NAS Calendar events.
                                    </p>
                                    <p style={{ fontSize: "0.8rem", opacity: 0.85 }}>
                                        Make sure Synology Calendar is installed and the CalDAV URL is reachable over HTTPS.
                                    </p>
                                </div>

                                {synologyCalError && (
                                    <div className="bg-red-50 text-red-600 p-3 rounded mb-4 text-sm">
                                        {synologyCalError}
                                    </div>
                                )}

                                <div className="space-y-4">
                                    <div>
                                        <label className="block text-sm font-medium text-gray-700 mb-1">
                                            Server URL (CalDAV)
                                        </label>
                                        <input
                                            type="url"
                                            value={synologyCalServerUrl}
                                            onChange={(e) => setSynologyCalServerUrl(e.target.value)}
                                            className="w-full border border-gray-300 rounded px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
                                            placeholder="https://your-synology-nas:5001"
                                        />
                                    </div>
                                    <div>
                                        <label className="block text-sm font-medium text-gray-700 mb-1">
                                            Username
                                        </label>
                                        <input
                                            type="text"
                                            value={synologyCalUsername}
                                            onChange={(e) => setSynologyCalUsername(e.target.value)}
                                            className="w-full border border-gray-300 rounded px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
                                            placeholder="admin"
                                        />
                                    </div>
                                    <div>
                                        <label className="block text-sm font-medium text-gray-700 mb-1">
                                            Password
                                        </label>
                                        <input
                                            type="password"
                                            value={synologyCalPassword}
                                            onChange={(e) => setSynologyCalPassword(e.target.value)}
                                            className="w-full border border-gray-300 rounded px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:outline-none"
                                            onKeyDown={(e) =>
                                                e.key === "Enter" && submitSynologyCalendarConnection()
                                            }
                                        />
                                    </div>
                                </div>

                                <div className="flex justify-end gap-3 mt-6">
                                    <button
                                        onClick={() => {
                                            setShowSynologyCalendarModal(false);
                                            setSynologyCalError("");
                                        }}
                                        className="px-4 py-2 text-gray-600 hover:text-gray-800"
                                        disabled={isConnectingSynologyCal}
                                    >
                                        Cancel
                                    </button>
                                    <button
                                        onClick={submitSynologyCalendarConnection}
                                        className="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 disabled:bg-blue-300 flex items-center"
                                        disabled={isConnectingSynologyCal}
                                    >
                                        {isConnectingSynologyCal ? (
                                            <>
                                                <div className="weekly-spinner weekly-spinner-white -ml-1 mr-2"></div>
                                                Connecting...
                                            </>
                                        ) : (
                                            "Connect"
                                        )}
                                    </button>
                                </div>
                            </div>
                        </div>
                    )}
                </div>
            </div>
        </>
    );
}