import { SidebarRowSurface, SidebarStyle } from "sidebar-row.slint";
import { CalendarDay, CalendarEventRow, CalendarSourceRow, CalendarWeekDay } from "../models.slint";
import { Button } from "button.slint";
import { IconButton, ToolbarIconButton } from "controls.slint";
import { CalendarDetailsDialog } from "../dialogs/calendar-details-dialog.slint";
import { ConfirmationDialog } from "confirmation-dialog.slint";
import { HorizontalBox, ListView, ScrollView, VerticalBox } from "std-widgets.slint";
import { TypeScale } from "../typography.slint";
import { LayoutMetrics } from "../design-system.slint";
import { CollapsibleWorkspaceSidebar, CompactPageHeader, WorkspaceMiniHeading } from "workspace-layout.slint";
import { CalendarAgenda, CalendarAgendaFilter } from "calendar-agenda.slint";
import { CalendarAgendaRow, CalendarAgendaFilterRow } from "../models.slint";
import { ScrollFade } from "scroll-fade.slint";
import { WindowControlsClearance } from "../window-chrome.slint";
import { TabSwitcherButton } from "tab-overview.slint";
import { TabsUi } from "tabs-ui.slint";

export component CalendarEvent inherits Rectangle {
    in property <string> title;
    in property <string> detail;
    in property <color> fill-color;
    in property <color> event-border-color;
    in property <color> title-color;
    in property <color> detail-color;
    in property <bool> compact: false;
    callback clicked;

    border-radius: 7px;
    border-width: 1px;
    border-color: root.event-border-color;
    background: event-hit.has-hover ? root.fill-color.brighter(8%) : root.fill-color;
    clip: true;

    Rectangle {
        x: 0px;
        width: 3px;
        height: parent.height;
        background: root.event-border-color;
    }
    event-title := Text {
        x: 9px;
        y: root.compact ? 3px : 7px;
        width: parent.width - 15px;
        height: root.compact ? parent.height - 6px : max(18px, self.preferred-height);
        text: root.title;
        color: root.title-color;
        font-size: root.compact ? TypeScale.caption : TypeScale.secondary;
        font-weight: 700;
        overflow: elide;
        vertical-alignment: center;
    }
    Text {
        visible: !root.compact;
        x: 9px;
        y: event-title.y + event-title.height + 2px;
        width: parent.width - 15px;
        height: max(15px, self.preferred-height);
        text: root.detail;
        color: root.detail-color;
        font-size: TypeScale.caption;
        overflow: elide;
    }
    event-hit := TouchArea {
        accessible-role: button;
        accessible-label: @tr("View details for {}", root.title);
        accessible-action-default => { root.clicked(); }
        clicked => { root.clicked(); }
        mouse-cursor: pointer;
    }
}

// Data-driven calendar surface. Dates and event placement come from Rust's
// chrono-backed local state; the UI is intentionally service-agnostic.
export component FunctionalCalendarSidebar inherits CollapsibleWorkspaceSidebar {
    in property <bool> active: true;
    private property <length> source-scroll-y: 0px;
    in property <[CalendarDay]> days: [];
    in property <[CalendarSourceRow]> sources: [];
    in property <string> month-title;
    in property <color> title-color;
    in property <color> body-color;
    in property <color> secondary-color;
    in property <color> muted-color;
    in property <color> subtle-border-color;
    in property <color> control-color;
    in property <color> control-hover-color;
    in property <color> accent-color;
    in property <color> accent-background;
    callback navigate-month(int);
    callback select-date(string);
    callback new-event;
    callback source-clicked(CalendarSourceRow);
    callback source-toggled(int, bool);

    pure function calendar-color(index: int) -> color {
        return index == 0 ? #3478f6
            : index == 1 ? #8b5cf6
            : index == 2 ? #e87924
            : #26a269;
    }

    divider-color: root.subtle-border-color;

    if root.active && !root.collapsed: Rectangle {
        x: 0px;
        y: 0px;
        width: parent.width;
        height: parent.height;
        Button {
            x: LayoutMetrics.sidebar-inset;
            y: LayoutMetrics.sidebar-action-top;
            width: max(0px, parent.width - 2 * LayoutMetrics.sidebar-inset);
            height: LayoutMetrics.sidebar-action-height;
            text: @tr("New event");
            icon: @image-url("../icons/lucide/filled/calendar-add.svg");
            has-icon: true;
            primary: true;
            clicked => { root.new-event(); }
        }

        Text {
            x: LayoutMetrics.sidebar-inset;
            y: 60px;
            width: parent.width - 84px;
            height: 30px;
            text: root.month-title;
            color: root.title-color;
            font-size: TypeScale.body-large;
            font-weight: 700;
            vertical-alignment: center;
        }

        IconButton {
            x: parent.width - 72px;
            y: 69px;
            width: 28px;
            height: 28px;
            icon-size: 14px;
            icon: @image-url("../icons/lucide/outline/chevron-left.svg");
            icon-color: root.secondary-color;
            idle-background: transparent;
            hover-background: root.control-hover-color;
            tooltip-text: @tr("Previous month");
            clicked => { root.navigate-month(-1); }
        }

        IconButton {
            x: parent.width - 42px;
            y: 69px;
            width: 28px;
            height: 28px;
            icon-size: 14px;
            icon: @image-url("../icons/lucide/outline/chevron-right.svg");
            icon-color: root.secondary-color;
            idle-background: transparent;
            hover-background: root.control-hover-color;
            tooltip-text: @tr("Next month");
            clicked => { root.navigate-month(1); }
        }

        for name[index] in [
            @tr("Monday initial" => "M"),
            @tr("Tuesday initial" => "T"),
            @tr("Wednesday initial" => "W"),
            @tr("Thursday initial" => "T"),
            @tr("Friday initial" => "F"),
            @tr("Saturday initial" => "S"),
            @tr("Sunday initial" => "S")
        ]: Text {
            x: LayoutMetrics.sidebar-inset + index * ((root.width - 2 * LayoutMetrics.sidebar-inset) / 7);
            y: 94px;
            width: (root.width - 2 * LayoutMetrics.sidebar-inset) / 7;
            height: max(18px, self.preferred-height);
            text: name;
            color: root.muted-color;
            font-size: TypeScale.caption;
            font-weight: 700;
            horizontal-alignment: center;
            vertical-alignment: center;
        }
        for day[index] in root.days: Rectangle {
            x: LayoutMetrics.sidebar-inset + mod(index, 7) * ((root.width - 2 * LayoutMetrics.sidebar-inset) / 7);
            y: 114px + floor(index / 7) * 28px;
            width: (root.width - 2 * LayoutMetrics.sidebar-inset) / 7;
            height: 26px;
            background: transparent;
            Rectangle {
                x: (parent.width - 26px) / 2;
                width: 26px;
                height: 26px;
                border-radius: 13px;
                background: day.is-selected ? root.accent-color : mini-day-hit.has-hover ? root.accent-background : transparent;
                Text {
                    text: day.day;
                    color: day.is-selected ? white : day.outside-month ? root.muted-color : root.body-color;
                    font-size: TypeScale.caption;
                    font-weight: day.is-today || day.is-selected ? 700 : 500;
                    horizontal-alignment: center;
                    vertical-alignment: center;
                }

                Rectangle {
                    visible: day.has-events && !day.is-selected;
                    x: (parent.width - 3px) / 2;
                    y: parent.height - 4px;
                    width: 3px;
                    height: 3px;
                    border-radius: 2px;
                    background: root.accent-color;
                }

                mini-day-hit := TouchArea {
                    accessible-role: button;
                    accessible-label: @tr("Select {}", day.date-label);
                    accessible-checked: day.is-selected;
                    accessible-action-default => { root.select-date(day.iso-date); }
                    clicked => { root.select-date(day.iso-date); }
                    mouse-cursor: pointer;
                }
            }
        }
        Rectangle {
            x: LayoutMetrics.sidebar-inset;
            y: 292px;
            width: parent.width - 2 * LayoutMetrics.sidebar-inset;
            height: 1px;
            background: root.subtle-border-color;
        }

        WorkspaceMiniHeading {
            x: LayoutMetrics.sidebar-inset;
            y: 308px;
            width: parent.width - 2 * LayoutMetrics.sidebar-inset;
            label: @tr("MY CALENDARS");
            label-color: root.muted-color;
        }

        source-scroll := ListView {
            // Keep a direct ListView repeater; Slint does not
            // virtualize through a wrapper or inherited ListView.
            content-width: self.visible-width;
            horizontal-scrollbar-policy: always-off;
            x: 0px;
            y: 330px;
            width: parent.width - LayoutMetrics.divider-width;
            height: max(0px, parent.height - self.y);
            content-y <=> root.source-scroll-y;
            for calendar in root.sources: Rectangle {
                width: max(0px, source-scroll.visible-width - LayoutMetrics.sidebar-scrollbar-gutter);
                private property <length> row-y: calendar.group-start ? 26px : 0px;
                height: row-y + 34px;
                if calendar.group-start: Text {
                    x: 12px;
                    y: 3px;
                    width: parent.width - 24px;
                    height: 18px;
                    text: calendar.email != "" ? calendar.email : calendar.account-name;
                    color: root.muted-color;
                    font-size: TypeScale.micro;
                    font-weight: 600;
                    overflow: elide;
                    vertical-alignment: center;
                }
                row-background := SidebarRowSurface {
                    x: 4px;
                    y: parent.row-y;
                    width: parent.width - 8px;
                    height: 32px;
                    hover-background: root.control-hover-color;
                    hovered: calendar-hit.has-hover;
                    calendar-hit := TouchArea {
                        accessible-role: button;
                        accessible-label: @tr("View details for {}", calendar.name != "" ? calendar.name : @tr("Calendar"));
                        accessible-action-default => { root.source-clicked(calendar); }
                        clicked => { root.source-clicked(calendar); }
                        mouse-cursor: pointer;
                    }

                    Text {
                        x: 34px;
                        width: parent.width - 62px;
                        height: parent.height;
                        text: calendar.name != "" ? calendar.name : @tr("Calendar");
                        color: root.body-color;
                        opacity: calendar.enabled ? 1 : 0.55;
                        font-size: SidebarStyle.label-size;
                        font-weight: calendar.is-default ? SidebarStyle.selected-weight : SidebarStyle.normal-weight;
                        overflow: elide;
                        vertical-alignment: center;
                    }

                    Text {
                        visible: calendar-hit.has-hover;
                        x: parent.width - 25px;
                        width: 17px;
                        height: parent.height;
                        text: "⋯";
                        color: root.muted-color;
                        font-size: TypeScale.secondary;
                        horizontal-alignment: center;
                        vertical-alignment: center;
                    }

                    Rectangle {
                        x: 10px;
                        y: 9px;
                        width: 14px;
                        height: 14px;
                        border-radius: 4px;
                        border-width: calendar.enabled ? 0px : 2px;
                        border-color: root.calendar-color(calendar.color-index);
                        background: calendar.enabled ? root.calendar-color(calendar.color-index) : transparent;
                    }

                    toggle-hit := TouchArea {
                        x: 2px;
                        width: 30px;
                        height: parent.height;
                        accessible-role: checkbox;
                        accessible-label: calendar.enabled
                            ? @tr("Hide {}", calendar.name != "" ? calendar.name : @tr("Calendar"))
                            : @tr("Show {}", calendar.name != "" ? calendar.name : @tr("Calendar"));
                        accessible-checked: calendar.enabled;
                        accessible-action-default => { root.source-toggled(calendar.id, !calendar.enabled); }
                        clicked => { root.source-toggled(calendar.id, !calendar.enabled); }
                        mouse-cursor: pointer;
                    }
                }
            }
        }

        ScrollFade {
            x: source-scroll.x;
            y: source-scroll.y;
            width: source-scroll.visible-width;
            height: source-scroll.visible-height;
            surface-color: root.surface-color;
            content-y: source-scroll.content-y;
            content-height: source-scroll.content-height;
            visible-height: source-scroll.visible-height;
        }

        Rectangle {
            x: 0px;
            y: 330px;
            width: parent.width;
            visible: root.sources.length == 0;
            height: root.sources.length == 0 ? 88px : 0px;
            Text {
                x: 14px;
                width: parent.width - 28px;
                height: parent.height;
                text: @tr("No calendars yet. Connect Google Calendar, Outlook or any CalDAV server in Settings.");
                color: root.muted-color;
                font-size: TypeScale.secondary;
                wrap: word-wrap;
                horizontal-alignment: center;
                vertical-alignment: center;
            }
        }
    }
}

export component FunctionalCalendarView inherits Rectangle {
    private property <bool> toolbar-roomy: true;
    in property <bool> active: true;
    in property <bool> compact: false;
    in-out property <bool> sidebar-collapsed: false;
    in property <bool> dark-mode: false;
    in property <[CalendarDay]> month-days: [];
    in property <[CalendarWeekDay]> week-days: [];
    in property <[CalendarEventRow]> events: [];
    in property <[CalendarAgendaRow]> agenda-rows: [];
    in property <[CalendarAgendaFilterRow]> agenda-filters: [];
    in property <int> agenda-filter-count: 0;
    in property <int> agenda-event-count: 0;
    in property <float> agenda-anchor: 0;
    in property <int> agenda-scroll-request: 0;
    in property <string> timezone;
    in property <[CalendarSourceRow]> sources: [];
    in property <string> month-title;
    in property <string> period-title;
    in property <string> week-label;
    in property <string> selected-date;
    in property <string> selected-date-label;
    in property <bool> selected-date-has-events: false;
    // The week view's ruler labels for 08:00 through 18:00.
    in property <[string]> hour-labels: ["08:00", "09:00", "10:00", "11:00", "12:00", "13:00", "14:00", "15:00", "16:00", "17:00", "18:00"];
    in property <string> view-mode: "week";
    in property <color> background-color;
    in property <color> sidebar-color;
    in property <color> surface-color;
    in property <color> ui-border-color;
    in property <color> subtle-border-color;
    in property <color> title-color;
    in property <color> body-color;
    in property <color> secondary-color;
    in property <color> muted-color;
    in property <color> control-color;
    in property <color> control-hover-color;
    in property <color> accent-color;
    in property <color> accent-background;
    callback navigate(string, int);
    callback select-date(string);
    callback set-view(string);
    callback today;
    callback new-event;
    callback open-link(string);
    callback set-source-enabled(int, bool);
    callback toggle-agenda-filter(int, bool);
    callback clear-agenda-filters;
    callback edit-event(int);
    callback delete-event(int);

    private property <bool> detail-open: false;
    private property <string> detail-kind: "event";
    private property <string> detail-title: "";
    private property <string> detail-subtitle: "";
    private property <string> detail-provider: "local";
    private property <string> detail-date-time: "";
    private property <string> detail-calendar: "";
    private property <string> detail-account: "";
    private property <string> detail-location: "";
    private property <string> detail-organizer: "";
    private property <string> detail-access: "";
    private property <string> detail-sync: "";
    private property <string> detail-status: "";
    private property <string> detail-rsvp: "";
    private property <string> detail-recurrence: "";
    private property <string> detail-attendees: "";
    private property <string> detail-description: "";
    private property <string> detail-join-url: "";
    private property <int> detail-event-id: 0;
    private property <bool> detail-event-editable: false;
    private property <bool> delete-confirmation-open: false;

    function show-source(source: CalendarSourceRow) {
        root.detail-kind = "calendar";
        root.detail-title = source.name != "" ? source.name : @tr("Calendar");
        root.detail-subtitle = source.account-name != "" ? source.account-name : source.email;
        root.detail-provider = source.provider;
        root.detail-date-time = "";
        root.detail-calendar = "";
        root.detail-account = source.account-name == "" || source.account-name == source.email
            ? source.email : source.account-name + " · " + source.email;
        root.detail-location = "";
        root.detail-organizer = "";
        root.detail-access = source.read-only ? @tr("Read only") : @tr("Read and write");
        root.detail-sync = source.last-synced != "" ? @tr("Last synced {}", source.last-synced) : @tr("Not synced yet");
        root.detail-status = (source.enabled ? @tr("Enabled") : @tr("Paused"))
            + (source.is-default ? " · " + @tr("Default calendar") : "")
            + (source.color != "" ? " · " + source.color : "");
        root.detail-rsvp = "";
        root.detail-recurrence = "";
        root.detail-attendees = "";
        root.detail-description = "";
        root.detail-join-url = "";
        root.detail-event-id = 0;
        root.detail-event-editable = false;
        root.detail-open = true;
    }

    function show-event(event: CalendarEventRow) {
        root.detail-kind = "event";
        root.detail-title = event.title;
        root.detail-subtitle = event.source == "local" ? @tr("Created in Flectar Mail") : @tr("Synced provider event");
        root.detail-provider = event.provider;
        root.detail-date-time = event.date-label + " · " + event.detail;
        root.detail-calendar = event.calendar != "" ? event.calendar : @tr("Default calendar");
        root.detail-account = event.account;
        root.detail-location = event.location;
        root.detail-organizer = event.organizer;
        root.detail-access = "";
        root.detail-sync = "";
        root.detail-status = event.status;
        root.detail-rsvp = event.rsvp-status;
        root.detail-recurrence = event.recurrence;
        root.detail-attendees = event.attendees;
        root.detail-description = event.description;
        root.detail-join-url = event.join-url;
        root.detail-event-id = event.id;
        root.detail-event-editable = event.editable;
        root.detail-open = true;
    }

    private property <length> main-x: root.compact ? 0px : calendar-sidebar.current-width;
    private property <length> main-width: max(0px, root.width - root.main-x);
    // The time gutter fits its widest label in the platform font and language.
    private property <length> time-gutter: max(58px, max(local-label-width.preferred-width, max(all-day-label-width.preferred-width, hour-label-width.preferred-width + 6px)) + 14px);
    private property <length> column-width: max(1px, (root.main-width - root.time-gutter) / 7);
    // All-day events show one caption line that grows with the platform font.
    private property <length> all-day-height: max(30px, all-day-line.preferred-height + 12px);
    private property <length> grid-top: 112px + root.all-day-height;
    private property <length> hour-height: max(36px, (root.height - root.grid-top) / 10);
    background: root.background-color;

    local-label-width := Text { visible: false; text: @tr("LOCAL"); font-size: TypeScale.caption; }
    all-day-label-width := Text { visible: false; text: @tr("ALL DAY"); font-size: TypeScale.caption; }
    all-day-line := Text { visible: false; text: "Ag"; font-size: TypeScale.caption; font-weight: 700; }
    hour-label-width := Text { visible: false; text: root.hour-labels[2]; font-size: TypeScale.caption; }

    calendar-sidebar := FunctionalCalendarSidebar {
        active: root.active && !root.compact;
        visible: !root.compact;
        x: 0px;
        y: 0px;
        height: parent.height;
        collapsed <=> root.sidebar-collapsed;
        days: root.month-days;
        sources: root.sources;
        month-title: root.month-title;
        surface-color: root.sidebar-color;
        title-color: root.title-color;
        body-color: root.body-color;
        secondary-color: root.secondary-color;
        muted-color: root.muted-color;
        subtle-border-color: root.subtle-border-color;
        control-color: root.control-color;
        control-hover-color: root.control-hover-color;
        accent-color: root.accent-color;
        accent-background: root.accent-background;
        navigate-month(direction) => { root.navigate("month", direction); }
        select-date(date) => { root.select-date(date); }
        new-event => { root.new-event(); }
        source-clicked(source) => { root.show-source(source); }
        source-toggled(calendar-id, enabled) => { root.set-source-enabled(calendar-id, enabled); }
    }
    Rectangle {
        visible: !root.compact;
        x: root.main-x;
        y: 0px;
        width: root.main-width;
        height: parent.height;
        background: root.surface-color;

        Rectangle {
            x: 0px;
            y: 0px;
            width: parent.width;
            height: LayoutMetrics.desktop-mail-toolbar-height;
            background: root.surface-color;
            z: 20;
            // Integrated window controls can cover the trailing corner; the
            // period title and week number give way before the view buttons.
            private property <bool> roomy-now: self.width
                - max(LayoutMetrics.content-inset, toolbar-clearance.leading)
                - max(LayoutMetrics.content-inset, toolbar-clearance.trailing) >= 640px;
            changed roomy-now => { root.toolbar-roomy = self.roomy-now; }
            init => { root.toolbar-roomy = self.roomy-now; }
            toolbar-clearance := WindowControlsClearance { width: parent.width; height: parent.height; }
            HorizontalBox {
                padding-left: max(LayoutMetrics.content-inset, toolbar-clearance.leading);
                padding-right: max(LayoutMetrics.content-inset, toolbar-clearance.trailing);
                spacing: 6px;
                cross-axis-alignment: center;

                ToolbarIconButton {
                    icon: @image-url("../icons/lucide/outline/sidebar-collapse.svg");
                    icon-color: root.secondary-color;
                    hover-background: root.control-hover-color;
                    active-background: root.accent-background;
                    tooltip-text: root.sidebar-collapsed ? @tr("Show calendars") : @tr("Hide calendars");
                    accessible-id: "calendar-sidebar-button";
                    clicked => { root.sidebar-collapsed = !root.sidebar-collapsed; }
                }
                Text { horizontal-stretch: 1; min-width: root.toolbar-roomy ? 120px : 0px; text: root.period-title; color: root.title-color; font-size: TypeScale.heading-small; font-weight: 600; vertical-alignment: center; overflow: elide; }
                Text { visible: root.view-mode == "week" && root.toolbar-roomy; width: self.visible ? max(42px, self.preferred-width) : 0px; text: root.week-label; color: root.muted-color; font-size: TypeScale.caption; font-weight: 700; vertical-alignment: center; }
                ToolbarIconButton {
                    visible: root.sidebar-collapsed;
                    width: root.sidebar-collapsed ? LayoutMetrics.desktop-icon-button-size : 0px;
                    icon: @image-url("../icons/lucide/filled/calendar-add.svg");
                    primary: true;
                    tooltip-text: @tr("New event");
                    accessible-id: "calendar-new-event-desktop";
                    clicked => { root.new-event(); }
                }
                ToolbarIconButton { icon: @image-url("../icons/lucide/outline/chevron-left.svg"); icon-color: root.secondary-color; hover-background: root.control-hover-color; tooltip-text: @tr("Previous period"); clicked => { root.navigate("period", -1); } }
                ToolbarIconButton { icon: @image-url("../icons/lucide/outline/chevron-right.svg"); icon-color: root.secondary-color; hover-background: root.control-hover-color; tooltip-text: @tr("Next period"); clicked => { root.navigate("period", 1); } }
                Button { width: max(66px, self.content-width); height: LayoutMetrics.sidebar-action-height; text: @tr("Week"); selected: root.view-mode == "week"; clicked => { root.set-view("week"); } }
                Button { width: max(72px, self.content-width); height: LayoutMetrics.sidebar-action-height; text: @tr("Month"); selected: root.view-mode == "month"; clicked => { root.set-view("month"); } }
                Button { width: max(78px, self.content-width); height: LayoutMetrics.sidebar-action-height; text: @tr("Agenda"); selected: root.view-mode == "agenda"; clicked => { root.set-view("agenda"); } }
                Button { width: max(72px, self.content-width); height: LayoutMetrics.sidebar-action-height; text: @tr("Today"); clicked => { root.today(); } }
            }
        }
        Rectangle { x: 0px; y: LayoutMetrics.desktop-mail-toolbar-height - LayoutMetrics.divider-width; height: LayoutMetrics.divider-width; width: parent.width; background: root.ui-border-color; z: 21; }

        if root.view-mode == "agenda": HorizontalBox {
            y: LayoutMetrics.desktop-mail-toolbar-height;
            width: parent.width;
            height: 44px;
            padding-left: LayoutMetrics.content-inset;
            padding-right: LayoutMetrics.content-inset;
            spacing: 10px;
            cross-axis-alignment: center;
            Text { text: @tr("Local time · {}", root.timezone); color: root.muted-color; font-size: TypeScale.caption; overflow: elide; horizontal-stretch: 1; }
            Text { text: @tr("{n} event" | "{n} events" % root.agenda-event-count); color: root.secondary-color; font-size: TypeScale.caption; }
            CalendarAgendaFilter {
                filters: root.agenda-filters;
                filter-count: root.agenda-filter-count;
                toggled(id, checked) => { root.toggle-agenda-filter(id, checked); }
                cleared => { root.clear-agenda-filters(); }
            }
        }

        if root.view-mode == "week" : Rectangle {
            x: 0px;
            y: LayoutMetrics.desktop-mail-toolbar-height;
            width: parent.width;
            height: parent.height - LayoutMetrics.desktop-mail-toolbar-height;
            background: root.surface-color;

            Rectangle {
                x: 0px;
                y: 0px;
                height: 48px;
                width: parent.width;
                Text { x: 12px; width: root.time-gutter - 14px; height: parent.height; text: @tr("LOCAL"); color: root.muted-color; font-size: TypeScale.caption; vertical-alignment: center; }
                for day[index] in root.week-days : Rectangle {
                    x: root.time-gutter + index * root.column-width;
                    width: root.column-width;
                    height: parent.height;
                    background: day.is-today ? root.accent-background : transparent;
                    Text { text: day.weekday + "\n" + day.day; color: day.is-today ? root.accent-color : root.secondary-color; font-size: TypeScale.caption; font-weight: day.is-today ? 700 : 600; horizontal-alignment: center; vertical-alignment: center; }
                    TouchArea { accessible-role: button; accessible-label: @tr("Select {}", day.date-label); accessible-action-default => { root.select-date(day.iso-date); } clicked => { root.select-date(day.iso-date); } mouse-cursor: pointer; }
                }
            }
            Rectangle { y: 47px; width: parent.width; height: 1px; background: root.ui-border-color; }
            Rectangle {
                x: 0px;
                y: 48px;
                width: parent.width;
                height: root.all-day-height;
                Text { x: 12px; width: root.time-gutter - 14px; height: parent.height; text: @tr("ALL DAY"); color: root.muted-color; font-size: TypeScale.caption; vertical-alignment: center; }
                for event in root.events : CalendarEvent {
                    visible: event.all-day;
                    x: root.time-gutter + event.day-index * root.column-width + 4px;
                    y: 3px;
                    width: root.column-width - 8px;
                    height: root.all-day-height - 6px;
                    title: event.title;
                    detail: event.detail;
                    compact: true;
                    fill-color: event.color-index == 0 ? (root.dark-mode ? #1b2e46 : #e9f3ff) : event.color-index == 1 ? (root.dark-mode ? #31234b : #f2eaff) : (root.dark-mode ? #352518 : #fff1df);
                    event-border-color: event.color-index == 0 ? #3478f6 : event.color-index == 1 ? #8b5cf6 : #e87924;
                    title-color: root.title-color;
                    detail-color: root.secondary-color;
                    clicked => { root.show-event(event); }
                }
            }
            Rectangle { y: 47px + root.all-day-height; width: parent.width; height: 1px; background: root.ui-border-color; }
            hour-grid := Rectangle {
                x: 0px;
                y: 48px + root.all-day-height;
                width: parent.width;
                height: parent.height - self.y;
                clip: true;
                for hour[index] in root.hour-labels : Rectangle {
                    y: index * root.hour-height;
                    width: parent.width;
                    height: 1px;
                    background: root.subtle-border-color;
                    // Labels center on their line but stay inside the grid.
                    Text { x: 10px; y: min(max(-self.height / 2, -parent.y), hour-grid.height - parent.y - self.height); width: root.time-gutter - 20px; height: max(16px, self.preferred-height); text: hour; color: root.muted-color; font-size: TypeScale.caption; horizontal-alignment: right; vertical-alignment: center; }
                }
                for marker in [0, 1, 2, 3, 4, 5, 6, 7] : Rectangle { x: root.time-gutter + marker * root.column-width; width: 1px; height: parent.height; background: root.subtle-border-color; }
                for event in root.events : CalendarEvent {
                    visible: !event.all-day;
                    x: root.time-gutter + event.day-index * root.column-width + 5px;
                    y: (event.start-minutes - 480) / 60 * root.hour-height;
                    width: root.column-width - 10px;
                    // A timed event ends in its own day column. Synced events can
                    // span weeks, past what the software renderer can paint (#35).
                    height: max(44px, min(event.duration-minutes, 1440 - event.start-minutes) / 60 * root.hour-height);
                    title: event.title;
                    detail: event.detail;
                    fill-color: event.color-index == 0 ? (root.dark-mode ? #1b2e46 : #e9f3ff) : event.color-index == 1 ? (root.dark-mode ? #31234b : #f2eaff) : event.color-index == 2 ? (root.dark-mode ? #352518 : #fff1df) : (root.dark-mode ? #173528 : #e7f8ef);
                    event-border-color: event.color-index == 0 ? #3478f6 : event.color-index == 1 ? #8b5cf6 : event.color-index == 2 ? #e87924 : #26a269;
                    title-color: root.title-color;
                    detail-color: root.secondary-color;
                    clicked => { root.show-event(event); }
                }
            }
        }

        if root.view-mode == "month" : Rectangle {
            x: 0px;
            y: LayoutMetrics.desktop-mail-toolbar-height;
            width: parent.width;
            height: parent.height - LayoutMetrics.desktop-mail-toolbar-height;
            background: root.surface-color;
            for name[index] in [@tr("Mon"), @tr("Tue"), @tr("Wed"), @tr("Thu"), @tr("Fri"), @tr("Sat"), @tr("Sun")] : Text {
                x: index * parent.width / 7;
                y: 0px;
                width: parent.width / 7;
                height: 34px;
                text: name;
                color: root.muted-color;
                font-size: TypeScale.caption;
                font-weight: 700;
                horizontal-alignment: center;
                vertical-alignment: center;
            }
            for day[index] in root.month-days : Rectangle {
                x: mod(index, 7) * parent.width / 7;
                y: 34px + floor(index / 7) * (parent.height - 34px) / 6;
                width: parent.width / 7;
                height: (parent.height - 34px) / 6;
                border-width: 1px;
                border-color: root.subtle-border-color;
                background: day.is-selected ? root.accent-background : root.surface-color;
                Text { x: 9px; y: 6px; width: 28px; height: 24px; text: day.day; color: day.is-today ? root.accent-color : day.outside-month ? root.muted-color : root.body-color; font-size: TypeScale.secondary; font-weight: day.is-today ? 700 : 500; }
                Rectangle { visible: day.is-today; x: 7px; y: 5px; width: 25px; height: 25px; border-radius: 13px; border-width: 1px; border-color: root.accent-color; background: transparent; }
                TouchArea { accessible-role: button; accessible-label: @tr("Select {}", day.date-label); accessible-checked: day.is-selected; accessible-action-default => { root.select-date(day.iso-date); } clicked => { root.select-date(day.iso-date); } mouse-cursor: pointer; }
            }
            for event in root.events : Rectangle {
                x: mod(event.month-index, 7) * parent.width / 7 + 7px;
                y: 34px + floor(event.month-index / 7) * (parent.height - 34px) / 6 + 34px;
                width: parent.width / 7 - 14px;
                height: max(20px, chip-title.preferred-height);
                border-radius: 4px;
                background: event.color-index == 0 ? (root.dark-mode ? #1b2e46 : #e9f3ff) : event.color-index == 1 ? (root.dark-mode ? #31234b : #f2eaff) : event.color-index == 2 ? (root.dark-mode ? #352518 : #fff1df) : (root.dark-mode ? #173528 : #e7f8ef);
                chip-title := Text { x: 6px; width: parent.width - 10px; height: parent.height; text: event.title; color: root.body-color; font-size: TypeScale.caption; font-weight: 600; overflow: elide; vertical-alignment: center; }
                TouchArea {
                    accessible-role: button;
                    accessible-label: @tr("View details for {}", event.title);
                    accessible-action-default => { root.show-event(event); }
                    clicked => { root.show-event(event); }
                    mouse-cursor: pointer;
                }
            }
        }
    }

    // Phone calendar: a tappable month strip above an agenda. A seven-column
    // time grid is not legible at phone width, while this preserves every date
    // and event action without horizontal scrolling.
    Rectangle {
        visible: root.compact;
        x: 0px;
        y: 0px;
        width: parent.width;
        height: parent.height;
        background: root.surface-color;

        CompactPageHeader {
            x: 0px;
            y: 0px;
            width: parent.width;
            title: root.month-title;
            // Line the month up with the view switcher below. Narrow phones
            // also fit the tab switcher by setting the month a size smaller.
            leading-inset: 16px;
            title-font-size: TabsUi.enabled && root.width < 390px ? TypeScale.heading : TypeScale.title-small;
            background-color: root.surface-color;
            IconButton { width: LayoutMetrics.touch-target; height: LayoutMetrics.touch-target; icon: @image-url("../icons/lucide/outline/chevron-left.svg"); icon-color: root.secondary-color; idle-background: root.control-color; hover-background: root.control-hover-color; tooltip-text: @tr("Previous month"); accessible-id: "calendar-previous-month"; clicked => { root.navigate(root.view-mode == "agenda" ? "period" : "month", -1); } }
            IconButton { width: LayoutMetrics.touch-target; height: LayoutMetrics.touch-target; icon: @image-url("../icons/lucide/outline/chevron-right.svg"); icon-color: root.secondary-color; idle-background: root.control-color; hover-background: root.control-hover-color; tooltip-text: @tr("Next month"); accessible-id: "calendar-next-month"; clicked => { root.navigate(root.view-mode == "agenda" ? "period" : "month", 1); } }
            IconButton { width: LayoutMetrics.touch-target; height: LayoutMetrics.touch-target; icon: @image-url("../icons/lucide/filled/calendar-add.svg"); primary: true; tooltip-text: @tr("New event"); accessible-id: "calendar-new-event"; clicked => { root.new-event(); } }
            if TabsUi.enabled && TabsUi.compact : TabSwitcherButton {}
        }

        HorizontalBox {
            x: 16px;
            y: 64px;
            width: parent.width - 32px;
            height: LayoutMetrics.touch-target;
            padding: 0px;
            spacing: 8px;
            cross-axis-alignment: center;
            Button { text: @tr("Month"); height: LayoutMetrics.touch-target; selected: root.view-mode != "agenda"; clicked => { root.set-view("month"); } }
            Button { text: @tr("Agenda"); height: LayoutMetrics.touch-target; selected: root.view-mode == "agenda"; clicked => { root.set-view("agenda"); } }
            Rectangle { horizontal-stretch: 1; }
            Button { text: @tr("Today"); height: LayoutMetrics.touch-target; clicked => { root.today(); } }
        }
        if root.view-mode == "agenda": HorizontalBox {
            x: 16px;
            y: 112px;
            width: parent.width - 32px;
            height: 48px;
            padding: 0px;
            spacing: 8px;
            cross-axis-alignment: center;
            Text { text: @tr("Local time · {}", root.timezone); color: root.muted-color; font-size: TypeScale.caption; overflow: elide; horizontal-stretch: 1; }
            CalendarAgendaFilter {
                compact: true;
                filters: root.agenda-filters;
                filter-count: root.agenda-filter-count;
                toggled(id, checked) => { root.toggle-agenda-filter(id, checked); }
                cleared => { root.clear-agenda-filters(); }
            }
        }
        if root.view-mode != "agenda": Rectangle {
            y: 116px;
            width: parent.width;
            height: max(0px, parent.height - 116px);
        Rectangle {
            x: 8px;
            y: 0px;
            width: parent.width - 16px;
            height: 264px;
            for name[index] in [@tr("Monday initial" => "M"), @tr("Tuesday initial" => "T"), @tr("Wednesday initial" => "W"), @tr("Thursday initial" => "T"), @tr("Friday initial" => "F"), @tr("Saturday initial" => "S"), @tr("Sunday initial" => "S")] : Text {
                x: index * parent.width / 7;
                y: 0px;
                width: parent.width / 7;
                height: 24px;
                text: name;
                color: root.muted-color;
                font-size: TypeScale.caption;
                font-weight: 700;
                horizontal-alignment: center;
                vertical-alignment: center;
            }
            for day[index] in root.month-days : Rectangle {
                x: mod(index, 7) * parent.width / 7;
                y: 24px + floor(index / 7) * 40px;
                width: parent.width / 7;
                height: 40px;
                background: transparent;
                Rectangle {
                    x: (parent.width - 36px) / 2;
                    y: 2px;
                    width: 36px;
                    height: 36px;
                    border-radius: 18px;
                    background: day.is-selected ? root.accent-color : day-hit.has-hover ? root.accent-background : transparent;
                    Text { text: day.day; color: day.is-selected ? white : day.outside-month ? root.muted-color : day.is-today ? root.accent-color : root.body-color; font-size: TypeScale.body; font-weight: day.is-selected || day.is-today ? 700 : 500; horizontal-alignment: center; vertical-alignment: center; }
                    Rectangle { visible: day.has-events && !day.is-selected; x: 16px; y: 31px; width: 4px; height: 4px; border-radius: 2px; background: root.accent-color; }
                    day-hit := TouchArea {
                        mouse-cursor: pointer;
                        accessible-role: button;
                        accessible-label: @tr("Select {}", day.date-label);
                        accessible-checked: day.is-selected;
                        accessible-action-default => { root.select-date(day.iso-date); }
                        accessible-id: "calendar-day-" + day.iso-date;
                        clicked => { root.select-date(day.iso-date); }
                    }
                }
            }
        }

        Rectangle { x: 14px; y: 270px; width: parent.width - 28px; height: 1px; background: root.subtle-border-color; }
        Text { x: 16px; y: 278px; width: parent.width - 32px; height: 28px; text: @tr("Agenda · {}", root.selected-date-label); color: root.secondary-color; font-size: TypeScale.secondary; font-weight: 700; vertical-alignment: center; }

        agenda-scroll := ScrollView {
            x: 8px;
            y: 306px;
            width: parent.width - 16px;
            height: max(0px, parent.height - 314px);
            content-width: self.visible-width;
            horizontal-scrollbar-policy: always-off;
            mouse-drag-pan-enabled: true;
            VerticalBox {
                width: agenda-scroll.visible-width;
                padding-right: 4px;
                spacing: 7px;
                for event in root.events : Rectangle {
                    visible: event.iso-date == root.selected-date;
                    height: event.iso-date == root.selected-date ? agenda-detail.y + agenda-detail.height + 10px : 0px;
                    border-radius: 9px;
                    border-width: 1px;
                    border-color: event.color-index == 0 ? #3478f6 : event.color-index == 1 ? #8b5cf6 : event.color-index == 2 ? #e87924 : #26a269;
                    background: event.color-index == 0 ? (root.dark-mode ? #1b2e46 : #e9f3ff) : event.color-index == 1 ? (root.dark-mode ? #31234b : #f2eaff) : event.color-index == 2 ? (root.dark-mode ? #352518 : #fff1df) : (root.dark-mode ? #173528 : #e7f8ef);
                    Rectangle { x: 0px; width: 4px; height: parent.height; border-radius: 2px; background: parent.border-color; }
                    agenda-title := Text { x: 14px; y: 8px; width: parent.width - 28px; height: max(24px, self.preferred-height); text: event.title; color: root.title-color; font-size: TypeScale.body-large; font-weight: 700; overflow: elide; vertical-alignment: center; }
                    agenda-detail := Text { x: 14px; y: agenda-title.y + agenda-title.height + 2px; width: parent.width - 28px; height: max(20px, self.preferred-height); text: event.detail; color: root.secondary-color; font-size: TypeScale.secondary; overflow: elide; vertical-alignment: center; }
                    TouchArea {
                        accessible-role: button;
                        accessible-label: @tr("View details for {}", event.title);
                        accessible-action-default => { root.show-event(event); }
                        clicked => { root.show-event(event); }
                        mouse-cursor: pointer;
                    }
                }
                Rectangle {
                    visible: !root.selected-date-has-events;
                    height: 110px;
                    Text { x: 20px; width: parent.width - 40px; height: parent.height; text: @tr("No events for this date"); color: root.muted-color; font-size: TypeScale.body; horizontal-alignment: center; vertical-alignment: center; }
                }
            }
        }
        }
    }

    if root.view-mode == "agenda": CalendarAgenda {
        x: root.main-x;
        y: root.compact ? 160px : LayoutMetrics.desktop-mail-toolbar-height + 44px;
        width: root.main-width;
        height: max(0px, root.height - self.y);
        compact: root.compact;
        rows: root.agenda-rows;
        event-count: root.agenda-event-count;
        filter-count: root.agenda-filter-count;
        anchor: root.agenda-anchor;
        scroll-request: root.agenda-scroll-request;
        selected-date: root.selected-date;
        period-title: root.month-title;
        event-clicked(event) => { root.show-event(event); }
        new-event => { root.new-event(); }
        clear-filters => { root.clear-agenda-filters(); }
    }

    CalendarDetailsDialog {
        x: 0px;
        y: 0px;
        width: parent.width;
        height: parent.height;
        open <=> root.detail-open;
        compact: root.compact;
        kind: root.detail-kind;
        title: root.detail-title;
        subtitle: root.detail-subtitle;
        provider: root.detail-provider;
        date-time: root.detail-date-time;
        calendar: root.detail-calendar;
        account: root.detail-account;
        location: root.detail-location;
        organizer: root.detail-organizer;
        access: root.detail-access;
        sync: root.detail-sync;
        status: root.detail-status;
        rsvp: root.detail-rsvp;
        recurrence: root.detail-recurrence;
        attendees: root.detail-attendees;
        description: root.detail-description;
        join-url: root.detail-join-url;
        editable: root.detail-event-editable;
        accent: root.accent-color;
        accent-soft: root.accent-background;
        border: root.ui-border-color;
        border-subtle: root.subtle-border-color;
        muted-text: root.muted-color;
        surface: root.surface-color;
        title-color: root.title-color;
        open-link(url) => { root.open-link(url); }
        edit-event => {
            root.detail-open = false;
            root.edit-event(root.detail-event-id);
        }
        delete-event => { root.delete-confirmation-open = true; }
    }

    ConfirmationDialog {
        width: parent.width;
        height: parent.height;
        open <=> root.delete-confirmation-open;
        title: @tr("Delete this event?");
        description: @tr("This event will be removed from your calendar.");
        detail: @tr("This action cannot be undone.");
        confirm-label: @tr("Delete event");
        cancel-label: @tr("Keep event");
        icon: @image-url("../icons/lucide/outline/trash.svg");
        surface: root.surface-color;
        dialog-border-color: root.subtle-border-color;
        title-color: root.title-color;
        body-color: root.body-color;
        muted-color: root.secondary-color;
        confirmed => {
            root.detail-open = false;
            root.delete-event(root.detail-event-id);
        }
    }
}