"use client";

import React, { useState, useEffect, useRef, useMemo, useCallback } from "react";
import { signOut } from "next-auth/react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faApple, faGoogle, faMicrosoft, faNotion } from "@fortawesome/free-brands-svg-icons";
import { faServer, faFolder } from "@fortawesome/free-solid-svg-icons";
import CalendarSyncRulesPanel from "./CalendarSyncRulesPanel";
import { ViewStyle, KanbanStage, Task } from "./WeeklyView";
import { AVAILABLE_FONTS, isCustomFont } from "../lib/fontConstants";
import { translations } from "../lib/weeklyViewTranslations";
import { WeatherDisplayKey, WEATHER_DISPLAY_DEFAULTS } from "../lib/weeklyViewConstants";
import { EXPORT_FIELDS, type ExportFieldKey } from "../app/api/user/export/route";
import {
    ArrowLeftRight,
    Briefcase,
    Calendar,
    CalendarDays,
    Check,
    FolderOpen,
    Globe,
    Info,
    Kanban,
    Link,
    ListTodo,
    Palette,
    Pencil,
    Play,
    Plus,
    Settings,
    Sparkles,
    Trash2,
    User,
} from "lucide-react";
import IconPicker from "./IconPicker";
import { allIcons } from "./iconRegistry";
import Icon from "@mdi/react";

// Minimal ProjectIcon — resolves an icon name from the unified registry.
function ProjectIcon({ icon, size = 18, color }: { icon?: string | null; size?: number; color?: string }) {
    if (!icon) return <FontAwesomeIcon icon={faFolder} style={{ fontSize: size, color }} />;
    const normalised = icon.startsWith("fa") && icon.length > 2 && icon[2] === icon[2].toUpperCase()
        ? icon.slice(2, 3).toLowerCase() + icon.slice(3)
        : icon;
    const found = allIcons.find((i) => i.name === normalised || i.name === icon);
    if (found) {
        if (found.type === "fa") {
            return <FontAwesomeIcon icon={found.icon as any} style={{ fontSize: size, color }} />;
        }
        return <Icon path={found.icon as string} size={size / 24} color={color} />;
    }
    return <span style={{ fontSize: size, lineHeight: 1 }}>{icon}</span>;
}

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

export type CellDuration = 15 | 20 | 30 | 60;

// 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" | "sync" | "projects";
    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;
}

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" | "sync" | "projects"
    >(initialTab || "general");
    const [isLoading, setIsLoading] = useState(true);
    const [isSyncing, setIsSyncing] = useState(false);
    const [exportStartDate, setExportStartDate] = useState("");
    const [exportEndDate, setExportEndDate] = useState("");
    const [exportFields, setExportFields] = useState<Set<ExportFieldKey>>(
        () => new Set(EXPORT_FIELDS.filter(f => f.defaultOn).map(f => f.key))
    );
    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: "sync", icon: <ArrowLeftRight size={18} />, label: t.calendarSync || "Sync" },
                        { key: "projects", icon: <Briefcase size={18} />, label: t.projects || "Projects" },
                        { 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="current_day">{t.headerDisplayCurrentDay}</option>
                                            <option value="custom">{t.headerDisplayCustom}</option>
                                            <option value="none">{t.headerDisplayNone}</option>
                                        </select>
                                    </div>
                                    {profile.headerDisplay === "current_day" && (
                                        <div className="mt-2">
                                            <label style={{ fontSize: "0.75rem", color: "var(--weekly-settings-label)", display: "block", marginBottom: "4px" }}>
                                                {t.headerCurrentDayFormatLabel}
                                            </label>
                                            <input
                                                type="text"
                                                value={profile.headerCurrentDayFormat || ""}
                                                onChange={(e) => {
                                                    const val = e.target.value;
                                                    setProfile({ ...profile, headerCurrentDayFormat: val });
                                                    saveSetting("headerCurrentDayFormat", val);
                                                }}
                                                placeholder="DDD, DD. MMMM 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: DDDD (Montag), DDD (Mo.), DD (30), MMMM (März), MMM (Mär), MM (03), YYYY (2026)
                                            </div>
                                        </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"
                                                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 (KW), YYYY (Jahr), MMMM (März), MM (03), DD (30), [TODAY] (Heute)
                                            </div>
                                        </div>
                                    )}
                                    {/* Mobile Portrait/Landscape overrides */}
                                    <div className="mt-3 grid grid-cols-2 gap-2">
                                        <div>
                                            <label style={{ fontSize: "0.75rem", color: "var(--weekly-settings-label)", display: "block", marginBottom: "4px" }}>
                                                {t.headerMobilePortrait}
                                            </label>
                                            <select
                                                value={profile.mobilePortraitHeaderDisplay || "current_day"}
                                                onChange={(e) => {
                                                    const val = e.target.value as any;
                                                    setProfile({ ...profile, mobilePortraitHeaderDisplay: val });
                                                    saveSetting("mobilePortraitHeaderDisplay", val);
                                                }}
                                                className="weekly-input w-full p-1.5 text-xs 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="current_day">{t.headerDisplayCurrentDay}</option>
                                                <option value="custom">{t.headerDisplayCustom}</option>
                                                <option value="none">{t.headerDisplayNone}</option>
                                            </select>
                                        </div>
                                        <div>
                                            <label style={{ fontSize: "0.75rem", color: "var(--weekly-settings-label)", display: "block", marginBottom: "4px" }}>
                                                {t.headerMobileLandscape}
                                            </label>
                                            <select
                                                value={profile.mobileLandscapeHeaderDisplay || "kw"}
                                                onChange={(e) => {
                                                    const val = e.target.value as any;
                                                    setProfile({ ...profile, mobileLandscapeHeaderDisplay: val });
                                                    saveSetting("mobileLandscapeHeaderDisplay", val);
                                                }}
                                                className="weekly-input w-full p-1.5 text-xs 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="current_day">{t.headerDisplayCurrentDay}</option>
                                                <option value="custom">{t.headerDisplayCustom}</option>
                                                <option value="none">{t.headerDisplayNone}</option>
                                            </select>
                                        </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>
                                            <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={profile.showTaskCheckboxes || false}
                                            onChange={(e) => {
                                                saveField("showTaskCheckboxes", e.target.checked);
                                                perView.saveViewSetting("showTaskCheckboxes", e.target.checked, false);
                                            }}
                                            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={profile.showProjectIcons || false}
                                            onChange={(e) => {
                                                saveField("showProjectIcons", e.target.checked);
                                                perView.saveViewSetting("showProjectIcons", e.target.checked, false);
                                            }}
                                            style={{ width: "16px", height: "16px" }} />
                                        <label htmlFor="showProjectIcons" style={{ fontSize: "0.9rem", fontWeight: 600 }}>{t.showProjectIcons}</label>
                                    </div>

                                    <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
                                        <input type="checkbox" id="showPriorityIcons"
                                            checked={profile.showPriorityIcons !== false}
                                            onChange={(e) => {
                                                saveField("showPriorityIcons", e.target.checked);
                                                perView.saveViewSetting("showPriorityIcons", e.target.checked, false);
                                            }}
                                            style={{ width: "16px", height: "16px" }} />
                                        <label htmlFor="showPriorityIcons" style={{ fontSize: "0.9rem", fontWeight: 600 }}>
                                            {profile.language === "de" ? "Prioritäts-Icons anzeigen" : "Show Priority Icons"}
                                        </label>
                                    </div>

                                    <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
                                        <label htmlFor="priorityStyle" style={{ fontSize: "0.9rem", fontWeight: 600 }}>
                                            {profile.language === "de" ? "Prioritäts-Stil" : "Priority Style"}
                                        </label>
                                        <select
                                            id="priorityStyle"
                                            value={profile.priorityStyle || "eisenhower"}
                                            onChange={(e) => saveField("priorityStyle", e.target.value)}
                                            className="weekly-input"
                                            style={{ padding: "4px 8px", fontSize: "0.85rem", borderRadius: "6px", border: "1px solid var(--weekly-border, #e5e7eb)" }}
                                        >
                                            <option value="eisenhower">Eisenhower</option>
                                            <option value="abcde">ABCDE</option>
                                            <option value="ivylee">Ivy Lee</option>
                                            <option value="pareto">80/20 (Pareto)</option>
                                        </select>
                                    </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" }}
                        >
                            <h3 style={{ fontSize: "1rem", fontWeight: 600, margin: 0 }}>
                                {t.localisation || "Localisation"}
                            </h3>

                            {/* 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); saveSetting("weekStartDay", 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); saveSetting("weekStartDay", 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.timezone}
                                </label>
                                <div
                                    style={{
                                        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)",
                                        opacity: 0.8,
                                    }}
                                >
                                    {Intl.DateTimeFormat().resolvedOptions().timeZone}
                                </div>
                            </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>

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

                                {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>

                                            {/* Preset sources */}
                                            <div style={{ marginTop: "8px" }}>
                                                <p style={{ fontSize: "0.75rem", color: "var(--weekly-text-light)", marginBottom: "6px" }}>
                                                    {profile.language === "de" ? "Bekannte Quellen (klicken zum Hinzufügen):" : "Known sources (click to add):"}
                                                </p>
                                                <div style={{ display: "flex", flexWrap: "wrap", gap: "6px" }}>
                                                    {[
                                                        { label: "ZenQuotes (EN)", url: "https://zenquotes.io/api/random" },
                                                        { label: "Stoic Quotes (EN)", url: "https://stoic.tekloon.net/stoic-quote" },
                                                        { label: "Quotable (EN)", url: "https://api.quotable.io/quotes/random" },
                                                        { label: "Advice Slip (EN)", url: "https://api.adviceslip.com/advice" },
                                                        { label: "Zitat-Service (DE)", url: "https://api.zitat-service.de/v1/quote?language=de" },
                                                        { label: "Zitat-Service (EN)", url: "https://api.zitat-service.de/v1/quote?language=en" },
                                                        { label: "Zitat-Service (ES)", url: "https://api.zitat-service.de/v1/quote?language=es" },
                                                    ].map(({ label, url }) => {
                                                        const current: string[] = profile.quoteSourceUrls || [];
                                                        const already = current.includes(url);
                                                        return (
                                                            <button
                                                                key={url}
                                                                type="button"
                                                                disabled={already}
                                                                onClick={() => {
                                                                    if (already) return;
                                                                    const newUrls = [...current, url];
                                                                    saveField("quoteSourceUrls", newUrls);
                                                                }}
                                                                style={{
                                                                    padding: "3px 8px",
                                                                    fontSize: "0.72rem",
                                                                    borderRadius: "12px",
                                                                    border: "1px solid var(--weekly-border)",
                                                                    background: already ? "var(--weekly-teal)" : "var(--weekly-bg)",
                                                                    color: already ? "white" : "var(--weekly-text)",
                                                                    cursor: already ? "default" : "pointer",
                                                                    opacity: already ? 0.7 : 1,
                                                                }}
                                                            >
                                                                {already ? "✓ " : "+ "}{label}
                                                            </button>
                                                        );
                                                    })}
                                                </div>
                                                <p style={{ fontSize: "0.72rem", color: "var(--weekly-text-light)", marginTop: "6px", fontStyle: "italic" }}>
                                                    {profile.language === "de"
                                                        ? "DE/EN/ES: auch über Zitat-Service API verfügbar. FR/IT: kuratierte lokale Sammlung."
                                                        : "DE/EN/ES: also available via Zitat-Service API. FR/IT: curated local collection."}
                                                </p>
                                            </div>
                                        </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 === "sync" ? (
                        <CalendarSyncRulesPanel
                            connections={connections}
                            t={t}
                        />
                    ) : activeTab === "projects" ? (
                        <div style={{ display: "flex", flexDirection: "column", gap: "16px" }}>
                            <div>
                                <h3 style={{ fontSize: "1rem", fontWeight: 600, margin: 0, display: "flex", alignItems: "center", gap: "8px" }}>
                                    <FolderOpen size={18} /> {t.projects || "Projects"}
                                </h3>
                                <p style={{ fontSize: "0.8rem", color: "var(--weekly-settings-label)", marginTop: "4px" }}>
                                    {t.projectsDesc || "Organize tasks with color-coded projects"}
                                </p>
                            </div>

                            {/* Existing projects list */}
                            {projects.length === 0 ? (
                                <div style={{ textAlign: "center", padding: "24px 12px", border: "1px dashed var(--weekly-border, #e5e7eb)", borderRadius: "10px" }}>
                                    <ProjectIcon icon="folder" size={28} color="#aaa" />
                                    <p style={{ fontSize: "0.85rem", color: "#aaa", fontStyle: "italic", marginTop: "8px" }}>
                                        {t.noProjects || "No projects yet"}
                                    </p>
                                </div>
                            ) : (
                                <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
                                    {projects.map((p) => (
                                        <div key={p.id} style={{
                                            display: "flex", alignItems: "center", gap: "10px",
                                            padding: "10px 14px", borderRadius: "10px",
                                            background: "var(--weekly-bg-soft, #f9fafb)",
                                            borderLeft: `4px solid ${p.color || "#999"}`,
                                        }}>
                                            {editingProjectId === p.id ? (
                                                <div style={{ display: "flex", flexDirection: "column", gap: "8px", width: "100%" }}>
                                                    <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
                                                        <div style={{ position: "relative" }}>
                                                            <button onClick={() => setShowEditProjectIconPicker(!showEditProjectIconPicker)} style={{ width: "38px", height: "38px", borderRadius: "8px", border: "1px solid var(--weekly-border, #e5e7eb)", background: "var(--weekly-bg, #fff)", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }}>
                                                                <ProjectIcon icon={editProjectIcon} size={16} color="#555" />
                                                            </button>
                                                            {showEditProjectIconPicker && (
                                                                <div style={{ position: "absolute", top: "100%", left: 0, marginTop: "4px", zIndex: 50 }}>
                                                                    <IconPicker selectedIcon={editProjectIcon} onSelect={(name) => { setEditProjectIcon(name); setShowEditProjectIconPicker(false); }} darkMode={false} />
                                                                </div>
                                                            )}
                                                        </div>
                                                        <input
                                                            type="text"
                                                            value={editProjectName}
                                                            onChange={(e) => setEditProjectName(e.target.value)}
                                                            className="weekly-input"
                                                            style={{ flex: 1, padding: "8px 12px", fontSize: "0.9rem" }}
                                                            onKeyDown={(e) => {
                                                                if (e.key === "Enter") {
                                                                    fetch("/api/projects", { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id: p.id, name: editProjectName, color: editProjectColor, icon: editProjectIcon }) })
                                                                        .then(() => { onProjectsChanged(); setEditingProjectId(null); });
                                                                }
                                                                if (e.key === "Escape") setEditingProjectId(null);
                                                            }}
                                                            autoFocus
                                                        />
                                                    </div>
                                                    <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
                                                        <input type="color" value={editProjectColor} onChange={(e) => setEditProjectColor(e.target.value)} style={{ width: "30px", height: "30px", border: "none", cursor: "pointer", padding: 0, borderRadius: "6px" }} />
                                                        <span style={{ fontSize: "0.8rem", color: "var(--weekly-settings-label)" }}>{profile.language === "de" ? "Farbe" : "Color"}</span>
                                                        <div style={{ flex: 1 }} />
                                                        <button onClick={() => setEditingProjectId(null)} style={{ padding: "6px 12px", fontSize: "0.8rem", background: "none", border: "1px solid var(--weekly-border, #ddd)", borderRadius: "8px", cursor: "pointer" }}>
                                                            {profile.language === "de" ? "Abbrechen" : "Cancel"}
                                                        </button>
                                                        <button
                                                            onClick={() => {
                                                                fetch("/api/projects", { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ id: p.id, name: editProjectName, color: editProjectColor, icon: editProjectIcon }) })
                                                                    .then(() => { onProjectsChanged(); setEditingProjectId(null); });
                                                            }}
                                                            className="weekly-btn-primary"
                                                            style={{ padding: "6px 12px", fontSize: "0.8rem", display: "inline-flex", alignItems: "center", gap: "4px" }}
                                                        >
                                                            <Check size={14} /> {profile.language === "de" ? "Speichern" : "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" }}>{p.name}</span>
                                                    </div>
                                                    <button
                                                        onClick={() => {
                                                            setEditingProjectId(p.id);
                                                            setEditProjectName(p.name);
                                                            setEditProjectColor(p.color || "#3b82f6");
                                                            setEditProjectIcon(p.icon || "folder");
                                                            setShowEditProjectIconPicker(false);
                                                        }}
                                                        style={{ padding: "6px", opacity: 0.6, cursor: "pointer", background: "none", border: "none", borderRadius: "6px" }}
                                                        title={profile.language === "de" ? "Bearbeiten" : "Edit"}
                                                    >
                                                        <Pencil size={14} />
                                                    </button>
                                                    <button
                                                        onClick={() => {
                                                            const msg = profile.language === "de" ? `Projekt "${p.name}" löschen?` : `Delete project "${p.name}"?`;
                                                            if (confirm(msg)) {
                                                                fetch(`/api/projects?id=${p.id}`, { method: "DELETE" }).then(() => onProjectsChanged());
                                                            }
                                                        }}
                                                        style={{ padding: "6px", opacity: 0.6, cursor: "pointer", color: "#ef4444", background: "none", border: "none", borderRadius: "6px" }}
                                                        title={profile.language === "de" ? "Löschen" : "Delete"}
                                                    >
                                                        <Trash2 size={14} />
                                                    </button>
                                                </>
                                            )}
                                        </div>
                                    ))}
                                </div>
                            )}

                            {/* Add new project form */}
                            <div style={{ borderTop: "1px solid var(--weekly-border, #e5e7eb)", paddingTop: "16px" }}>
                                <p style={{ fontSize: "0.8rem", fontWeight: 600, color: "var(--weekly-settings-label)", marginBottom: "10px" }}>
                                    {profile.language === "de" ? "Projekt hinzufügen" : "Add Project"}
                                </p>
                                <div style={{ display: "flex", gap: "8px", alignItems: "center" }}>
                                    <div style={{ position: "relative" }}>
                                        <button onClick={() => setShowNewProjectIconPicker(!showNewProjectIconPicker)} style={{ width: "38px", height: "38px", borderRadius: "8px", border: "1px solid var(--weekly-border, #e5e7eb)", background: "var(--weekly-bg, #fff)", cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center" }}>
                                            <ProjectIcon icon={newProjectIcon} size={16} color="#555" />
                                        </button>
                                        {showNewProjectIconPicker && (
                                            <div style={{ position: "absolute", bottom: "100%", left: 0, marginBottom: "4px", zIndex: 50 }}>
                                                <IconPicker selectedIcon={newProjectIcon} onSelect={(name) => { setNewProjectIcon(name); setShowNewProjectIconPicker(false); }} darkMode={false} />
                                            </div>
                                        )}
                                    </div>
                                    <input type="color" value={newProjectColor} onChange={(e) => setNewProjectColor(e.target.value)} style={{ width: "30px", height: "30px", border: "none", cursor: "pointer", padding: 0, borderRadius: "6px" }} />
                                    <input
                                        type="text"
                                        value={newProjectName}
                                        onChange={(e) => setNewProjectName(e.target.value)}
                                        placeholder={profile.language === "de" ? "Name" : "Name"}
                                        className="weekly-input"
                                        style={{ flex: 1, padding: "8px 12px", fontSize: "0.9rem" }}
                                        onKeyDown={(e) => {
                                            if (e.key === "Enter" && newProjectName.trim()) {
                                                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"); });
                                            }
                                        }}
                                    />
                                    <button
                                        onClick={() => {
                                            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"); });
                                        }}
                                        className="weekly-btn-primary"
                                        style={{ padding: "8px 14px", fontSize: "0.85rem", display: "inline-flex", alignItems: "center", gap: "4px", whiteSpace: "nowrap" }}
                                    >
                                        <Plus size={14} /> {profile.language === "de" ? "Hinzufügen" : "Add"}
                                    </button>
                                </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)",
                                }}
                            >
                                <h3
                                    style={{
                                        marginBottom: "10px",
                                        fontSize: "1rem",
                                        fontWeight: 600,
                                        color: "var(--weekly-settings-title)",
                                    }}
                                >
                                    {profile.language === "de" ? "Datenexport" : "Data Export"}
                                </h3>
                                <p style={{ fontSize: "0.85rem", color: "var(--weekly-settings-label)", marginBottom: "14px" }}>
                                    {profile.language === "de"
                                        ? "CSV-Arbeitsbericht erledigter Aufgaben — nach Kalenderwochen gruppiert. Wähle Felder, Zeitraum und lade die Datei herunter."
                                        : "CSV work report of completed tasks grouped by calendar week. Choose fields, date range and download."}
                                </p>

                                {/* Date range */}
                                <div style={{ display: "flex", gap: "10px", marginBottom: "14px" }}>
                                    <div style={{ flex: 1 }}>
                                        <label style={{ display: "block", fontSize: "0.78rem", fontWeight: 600, marginBottom: "4px", color: "var(--weekly-settings-label)" }}>
                                            {profile.language === "de" ? "Von" : "From"}
                                        </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.78rem", fontWeight: 600, marginBottom: "4px", color: "var(--weekly-settings-label)" }}>
                                            {profile.language === "de" ? "Bis" : "To"}
                                        </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>

                                {/* Quick date presets */}
                                <div style={{ display: "flex", gap: "6px", flexWrap: "wrap", marginBottom: "16px" }}>
                                    {[
                                        { label: profile.language === "de" ? "Diese Woche" : "This week", days: 7 },
                                        { label: profile.language === "de" ? "Dieser Monat" : "This month", days: 30 },
                                        { label: profile.language === "de" ? "Letzter Monat" : "Last month", days: 60, offset: 30 },
                                        { label: profile.language === "de" ? "Dieses Jahr" : "This year", days: 365 },
                                    ].map(({ label, days, offset }) => (
                                        <button
                                            key={label}
                                            onClick={() => {
                                                const end = new Date();
                                                if (offset) end.setDate(end.getDate() - offset);
                                                const start = new Date(end);
                                                start.setDate(start.getDate() - days + (offset ? 0 : 0));
                                                // Simpler: this month = first day of month
                                                if (label.includes("Monat") || label.includes("month")) {
                                                    if (offset) {
                                                        // last month
                                                        const now = new Date();
                                                        const s = new Date(now.getFullYear(), now.getMonth() - 1, 1);
                                                        const e = new Date(now.getFullYear(), now.getMonth(), 0);
                                                        setExportStartDate(s.toISOString().split("T")[0]);
                                                        setExportEndDate(e.toISOString().split("T")[0]);
                                                        return;
                                                    } else {
                                                        const now = new Date();
                                                        const s = new Date(now.getFullYear(), now.getMonth(), 1);
                                                        setExportStartDate(s.toISOString().split("T")[0]);
                                                        setExportEndDate(new Date().toISOString().split("T")[0]);
                                                        return;
                                                    }
                                                }
                                                if (label.includes("Jahr") || label.includes("year")) {
                                                    const now = new Date();
                                                    setExportStartDate(`${now.getFullYear()}-01-01`);
                                                    setExportEndDate(now.toISOString().split("T")[0]);
                                                    return;
                                                }
                                                // This week
                                                const now = new Date();
                                                const day = now.getDay() || 7;
                                                const mon = new Date(now); mon.setDate(now.getDate() - day + 1);
                                                setExportStartDate(mon.toISOString().split("T")[0]);
                                                setExportEndDate(now.toISOString().split("T")[0]);
                                            }}
                                            style={{ fontSize: "0.75rem", padding: "3px 9px", borderRadius: "5px", border: "1px solid var(--weekly-settings-input-border)", background: "var(--weekly-settings-input-bg)", color: "var(--weekly-settings-label)", cursor: "pointer" }}
                                        >
                                            {label}
                                        </button>
                                    ))}
                                </div>

                                {/* Field picker */}
                                <div style={{ marginBottom: "14px" }}>
                                    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "8px" }}>
                                        <span style={{ fontSize: "0.78rem", fontWeight: 600, color: "var(--weekly-settings-label)" }}>
                                            {profile.language === "de" ? "Spalten auswählen:" : "Select columns:"}
                                        </span>
                                        <div style={{ display: "flex", gap: "6px" }}>
                                            <button
                                                onClick={() => setExportFields(new Set(EXPORT_FIELDS.map(f => f.key)))}
                                                style={{ fontSize: "0.72rem", padding: "2px 7px", borderRadius: "4px", border: "1px solid var(--weekly-settings-input-border)", background: "transparent", color: "var(--weekly-settings-label)", cursor: "pointer" }}
                                            >
                                                {profile.language === "de" ? "Alle" : "All"}
                                            </button>
                                            <button
                                                onClick={() => setExportFields(new Set(EXPORT_FIELDS.filter(f => f.defaultOn).map(f => f.key)))}
                                                style={{ fontSize: "0.72rem", padding: "2px 7px", borderRadius: "4px", border: "1px solid var(--weekly-settings-input-border)", background: "transparent", color: "var(--weekly-settings-label)", cursor: "pointer" }}
                                            >
                                                {profile.language === "de" ? "Standard" : "Default"}
                                            </button>
                                        </div>
                                    </div>
                                    <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "5px 12px" }}>
                                        {EXPORT_FIELDS.map(f => {
                                            const checked = exportFields.has(f.key);
                                            const label = profile.language === "de" ? f.labelDe : f.labelEn;
                                            return (
                                                <label
                                                    key={f.key}
                                                    style={{ display: "flex", alignItems: "center", gap: "7px", fontSize: "0.82rem", color: "var(--weekly-settings-text)", cursor: "pointer", padding: "3px 0" }}
                                                >
                                                    <input
                                                        type="checkbox"
                                                        checked={checked}
                                                        onChange={() => {
                                                            setExportFields(prev => {
                                                                const next = new Set(prev);
                                                                if (next.has(f.key)) next.delete(f.key);
                                                                else next.add(f.key);
                                                                return next;
                                                            });
                                                        }}
                                                        style={{ accentColor: "#6366f1", width: "14px", height: "14px", flexShrink: 0 }}
                                                    />
                                                    {label}
                                                </label>
                                            );
                                        })}
                                    </div>
                                </div>

                                {/* Download buttons */}
                                <div style={{ display: "flex", gap: "8px" }}>
                                    <a
                                        href={`/api/user/export?startDate=${exportStartDate}&endDate=${exportEndDate}&lang=${profile.language || 'de'}&fields=${Array.from(exportFields).join(',')}`}
                                        target="_blank"
                                        style={{ flex: 1, display: "inline-flex", alignItems: "center", justifyContent: "center", gap: "6px", textDecoration: "none", background: "var(--weekly-settings-item-bg)", border: "1px solid var(--weekly-settings-input-border)", color: "var(--weekly-settings-text)", padding: "9px 12px", borderRadius: "4px", fontWeight: 500, fontSize: "0.85rem", transition: "background-color 0.2s" }}
                                    >
                                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><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="12" y1="18" x2="12" y2="12"/><line x1="9" y1="15" x2="15" y2="15"/></svg>
                                        CSV
                                    </a>
                                    <a
                                        href={`/api/user/export-pdf?startDate=${exportStartDate}&endDate=${exportEndDate}&lang=${profile.language || 'de'}&fields=${Array.from(exportFields).join(',')}`}
                                        target="_blank"
                                        style={{ flex: 1, display: "inline-flex", alignItems: "center", justifyContent: "center", gap: "6px", textDecoration: "none", background: "#6366f1", border: "none", color: "#fff", padding: "9px 12px", borderRadius: "4px", fontWeight: 600, fontSize: "0.85rem", transition: "background-color 0.2s" }}
                                    >
                                        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2"><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"/><rect x="8" y="13" width="8" height="6" rx="1"/></svg>
                                        PDF
                                    </a>
                                </div>
                            </div>

                            {/* Backup & Restore Section */}
                            <div
                                style={{
                                    marginTop: "20px",
                                    paddingTop: "20px",
                                    borderTop: "1px solid var(--weekly-border)",
                                }}
                            >
                                <h3
                                    style={{
                                        marginBottom: "10px",
                                        fontSize: "1rem",
                                        fontWeight: 600,
                                        color: "var(--weekly-settings-title)",
                                    }}
                                >
                                    {t.backupRestore}
                                </h3>
                                <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" aria-hidden="true"></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" aria-hidden="true"></div>
                                                Connecting...
                                            </>
                                        ) : (
                                            "Connect"
                                        )}
                                    </button>
                                </div>
                            </div>
                        </div>
                    )}
                </div>
            </div>
        </>
    );
}

export default SettingsSidebar;