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

export struct NavItem {
    icon: string,
    label: string,
    badge-count: int,
    disabled: bool,
}

export component NeonSidebar {
    in property <[NavItem]> items;
    in-out property <int> selected-index: -1;
    in property <bool> collapsed: false;
    callback item-clicked(int);

    width: root.collapsed ? 60px : 240px;

    Rectangle {
        background: Theme.bg-elevated;
        Rectangle { width: 1px; background: Theme.border; x: parent.width - 1px; height: 100%; }
        VerticalLayout { padding-top: Theme.sp-2;
            for item[idx] in root.items : Rectangle {
                min-height: 44px;
                padding-left: root.collapsed ? 0 : Theme.sp-4;
                padding-right: root.collapsed ? 0 : Theme.sp-3;
                background: idx == root.selected-index ? Theme.bg-selected : (touch.has-hover ? Theme.bg-hover : transparent);
                HorizontalLayout {
                    spacing: Theme.sp-3;
                    alignment: center;
                    padding-left: root.collapsed ? 18px : 0;
                    Text {
                        text: item.icon; font-size: Theme.font-lg;
                        color: idx == root.selected-index ? Theme.neon-cyan : Theme.text-muted;
                        opacity: item.disabled ? 0.4 : 1.0;
                    }
                    if (!root.collapsed) : Text {
                        text: item.label; font-size: Theme.font-base; font-weight: 500;
                        color: idx == root.selected-index ? Theme.neon-cyan : Theme.text-primary;
                        opacity: item.disabled ? 0.4 : 1.0;
                        horizontal-stretch: 1; vertical-alignment: center;
                    }
                    if (!root.collapsed && item.badge-count > 0) : Rectangle {
                        width: 20px; height: 20px; border-radius: 10px;
                        background: Theme.neon-magenta;
                        Text { text: Math.min(item.badge-count, 99); font-size: Theme.font-xs; font-weight: 700; color: Theme.text-inverse; horizontal-alignment: center; vertical-alignment: center; }
                    }
                }
                touch := TouchArea {
                    clicked => { root.selected-index = idx; root.item-clicked(idx); }
                    mouse-cursor: MouseCursor.pointer;
                }
            }
            Rectangle { vertical-stretch: 1; }
        }
    }
}

export component NeonTopBar {
    in property <string> title: "";
    callback menu-clicked;

    min-height: 48px;

    Rectangle {
        background: Theme.bg-elevated;
        Rectangle { height: 1px; background: Theme.border; y: parent.height - 1px; width: 100%; }
        HorizontalLayout {
            spacing: Theme.sp-3;
            alignment: start;
            padding-left: Theme.sp-3;
            padding-right: Theme.sp-4;
            Rectangle {
                width: 32px; height: 32px; border-radius: Theme.radius-md;
                background: touch.has-hover ? Theme.bg-hover : transparent;
                VerticalLayout { spacing: 4px; alignment: center;
                    Rectangle { width: 16px; height: 2px; background: Theme.text-muted; }
                    Rectangle { width: 16px; height: 2px; background: Theme.text-muted; }
                    Rectangle { width: 16px; height: 2px; background: Theme.text-muted; }
                }
                touch := TouchArea { clicked => { root.menu-clicked(); } mouse-cursor: MouseCursor.pointer; }
            }
            Text { text: root.title; color: Theme.text-primary; font-size: Theme.font-lg; font-weight: 600; vertical-alignment: center; horizontal-stretch: 1; }
            @children
        }
    }
}

export component NeonTabBar {
    in property <[string]> tabs;
    in-out property <int> selected-index: 0;
    callback tab-clicked(int);

    min-height: 36px;
    Rectangle {
        Rectangle { height: 1px; background: Theme.border; y: parent.height - 1px; width: 100%; }
        HorizontalLayout {
            spacing: 0;
            for tab[idx] in root.tabs : Rectangle {
                horizontal-stretch: 1;
                Text { text: tab; font-size: Theme.font-sm; color: idx == root.selected-index ? Theme.neon-cyan : Theme.text-muted; font-weight: idx == root.selected-index ? 600 : 400; horizontal-alignment: center; vertical-alignment: center; }
                touch := TouchArea { clicked => { root.selected-index = idx; root.tab-clicked(idx); } mouse-cursor: MouseCursor.pointer; }
                if (idx == root.selected-index) : Rectangle { height: 2px; background: Theme.neon-cyan; y: parent.height - 2px; width: parent.width; }
            }
        }
    }
}
