import { Theme } from "../theme.slint";
import { IconChevronDown } from "icons.slint";

export struct SelectOption {
    label: string,
    value: string,
    disabled: bool,
}

export component NeonSelect {
    in property <string> label: "";
    in property <[SelectOption]> options;
    in-out property <int> selected-index: -1;
    in property <bool> enabled: true;
    in property <bool> has-focus: false;
    callback selected;

    property <bool> is-open: false;
    property <string> display-text: root.selected-index >= 0 ? root.options[root.selected-index].label : "Select...";

    VerticalLayout {
        spacing: Theme.sp-1;
        if (root.label != "") : Text {
            text: root.label;
            font-size: Theme.font-sm;
            color: root.enabled ? Theme.text-muted : Theme.text-dim;
        }
        Rectangle {
            min-height: 36px;
            background: root.enabled ? Theme.bg-surface : Theme.bg-elevated;
            border-radius: Theme.radius-md;
            border-width: 1px;
            border-color: root.is-open ? Theme.border-focus :
                          root.has-focus ? Theme.border-focus : Theme.border;
            opacity: root.enabled ? 1.0 : 0.4;
            HorizontalLayout {
                padding-left: Theme.sp-3;
                padding-right: Theme.sp-3;
                spacing: Theme.sp-2;
                alignment: start;
                Text {
                    text: root.display-text;
                    font-size: Theme.font-base;
                    color: root.selected-index >= 0 ? (root.enabled ? Theme.text-primary : Theme.text-dim) : Theme.text-dim;
                    horizontal-stretch: 1;
                    vertical-alignment: center;
                }
                Rectangle {
                    width: 16px; height: 16px;
                    IconChevronDown { color: root.enabled ? Theme.text-muted : Theme.text-dim; size: 12px; x: 2px; y: 2px; }
                }
            }
            touch := TouchArea {
                clicked => { if (root.enabled) { root.is-open = !root.is-open; } }
                enabled: root.enabled;
                mouse-cursor: root.enabled ? MouseCursor.pointer : MouseCursor.default;
            }
        }
        // Dropdown list
        Rectangle {
            visible: root.is-open && root.enabled;
            width: 100%;
            border-radius: Theme.radius-md;
            border-width: 1px;
            border-color: Theme.border;
            background: Theme.bg-elevated;
            VerticalLayout {
                padding: Theme.sp-1;
                spacing: 2px;
                for opt[idx] in root.options : Rectangle {
                    min-height: 32px;
                    background: idx == root.selected-index ? Theme.bg-selected : (dh.has-hover ? Theme.bg-hover : transparent);
                    border-radius: Theme.radius-sm;
                    HorizontalLayout {
                        padding-left: Theme.sp-2;
                        padding-right: Theme.sp-2;
                        alignment: start;
                        Text {
                            text: opt.label;
                            font-size: Theme.font-sm;
                            color: opt.disabled ? Theme.text-dim : (idx == root.selected-index ? Theme.neon-cyan : Theme.text-primary);
                            opacity: opt.disabled ? 0.4 : 1.0;
                            horizontal-stretch: 1;
                            vertical-alignment: center;
                        }
                    }
                    dh := TouchArea {
                        enabled: !opt.disabled;
                        clicked => {
                            root.selected-index = idx;
                            root.selected();
                            root.is-open = false;
                        }
                        mouse-cursor: MouseCursor.pointer;
                    }
                }
            }
        }
    }
}

export component NeonDatePicker {
    in property <string> label: "";
    in property <int> year: 2026;
    in property <int> month: 5;
    in-out property <int> selected-day: -1;
    in property <bool> enabled: true;
    in property <bool> has-focus: false;
    callback day-selected;

    property <int> days-in-month: root.month == 2 ? (Math.mod(root.year, 4) == 0 && (Math.mod(root.year, 100) != 0 || Math.mod(root.year, 400) == 0) ? 29 : 28) : (root.month == 4 || root.month == 6 || root.month == 9 || root.month == 11 ? 30 : 31);
    // Clamp month to 1-12, year to sane range
    property <int> safe-month: Math.max(1, Math.min(12, root.month));
    property <int> safe-year: Math.max(1, Math.min(9999, root.year));
    property <[string]> month-names: ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    property <[string]> day-headers: ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"];

    // Compute starting day of week (Zeller's approximation, 0=Sun)
    property <int> cal-y: root.year;
    property <int> cal-m: root.safe-month < 3 ? root.safe-month + 12 : root.safe-month;
    property <int> cal-yr: root.month < 3 ? root.cal-y - 1 : root.cal-y;
    property <int> first-dow: Math.mod(1 + 13 * (root.cal-m + 1) / 5 + Math.mod(root.cal-yr, 100) + Math.mod(root.cal-yr, 100) / 4 + root.cal-yr / 400 - 2 * (root.cal-yr / 100) + 700, 7);

    VerticalLayout {
        spacing: Theme.sp-1;
        if (root.label != "") : Text {
            text: root.label;
            font-size: Theme.font-sm;
            color: root.enabled ? Theme.text-muted : Theme.text-dim;
        }
        Rectangle {
            border-radius: Theme.radius-md;
            border-width: 1px;
            border-color: Theme.border;
            background: root.enabled ? Theme.bg-surface : Theme.bg-elevated;
            opacity: root.enabled ? 1.0 : 0.4;
            VerticalLayout {
                padding: Theme.sp-2;
                spacing: Theme.sp-1;
                // Month/Year header
                HorizontalLayout {
                    spacing: Theme.sp-2;
                    alignment: center;
                    Text {
                        text: root.month-names[root.safe-month - 1] + " " + root.year;
                        font-size: Theme.font-sm;
                        font-weight: 600;
                        color: root.enabled ? Theme.text-primary : Theme.text-dim;
                        horizontal-stretch: 1;
                        horizontal-alignment: center;
                    }
                }
                // Day headers
                HorizontalLayout {
                    spacing: 0;
                    for dh in root.day-headers : Rectangle {
                        horizontal-stretch: 1;
                        Text {
                            text: dh;
                            font-size: Theme.font-xs;
                            color: Theme.text-dim;
                            horizontal-alignment: center;
                            vertical-alignment: center;
                        }
                    }
                }
                // Calendar grid - 6 rows x 7 cols = 42 cells
                for row[r] in [1, 2, 3, 4, 5, 6] : HorizontalLayout {
                    spacing: 0;
                    for col[c] in [0, 1, 2, 3, 4, 5, 6] : Rectangle {
                        property <int> day-num: (row - 1) * 7 + col + 1 - root.first-dow;
                        visible: day-num >= 1 && day-num <= root.days-in-month;
                        horizontal-stretch: 1;
                        min-height: 28px;
                        background: day-num == root.selected-day ? (root.enabled ? Theme.neon-cyan : Theme.text-dim) : (dh2.has-hover ? Theme.bg-hover : transparent);
                        border-radius: Theme.radius-sm;
                        Text {
                            text: day-num >= 1 && day-num <= root.days-in-month ? day-num : "";
                            font-size: Theme.font-xs;
                            color: day-num == root.selected-day ? Theme.text-inverse : (root.enabled ? Theme.text-primary : Theme.text-dim);
                            horizontal-alignment: center;
                            vertical-alignment: center;
                        }
                        dh2 := TouchArea {
                            clicked => {
                                if (root.enabled && day-num >= 1 && day-num <= root.days-in-month) {
                                    root.selected-day = day-num;
                                    root.day-selected();
                                }
                            }
                            mouse-cursor: MouseCursor.pointer;
                            enabled: root.enabled && day-num >= 1 && day-num <= root.days-in-month;
                        }
                    }
                }
            }
        }
    }
}
