import { Theme } from "../theme.slint";
import { IconChevronRight, IconChevronDown, IconFolder, IconFile } from "icons.slint";

export struct TreeItem {
    label: string,
    depth: int,
    expanded: bool,
    has-children: bool,
    icon: string,
    selected: bool,
}

export component NeonTreeView {
    in property <[TreeItem]> items;
    in-out property <int> selected-index: -1;
    in property <bool> has-focus: false;
    callback item-clicked(int);

    VerticalLayout {
        spacing: 2px;
        padding: Theme.sp-1;
        // Focus ring wrapper
        Rectangle {
            border-radius: Theme.radius-sm;
            border-width: root.has-focus ? 1px : 0px;
            border-color: root.has-focus ? Theme.border-focus : transparent;
            VerticalLayout {
                spacing: 2px;
                for item[idx] in root.items : Rectangle {
            min-height: 32px;
            background: idx == root.selected-index ? Theme.bg-selected : (th.has-hover ? Theme.bg-hover : transparent);
            border-radius: Theme.radius-sm;
            HorizontalLayout {
                spacing: 0;
                // Indentation — computed width en lugar de fixed array
                Rectangle {
                    width: item.depth * Theme.sp-5;
                    height: 100%;
                }
                // Expand/collapse icon
                Rectangle {
                    visible: item.has-children;
                    width: 20px;
                    height: 20px;
                    if (item.expanded) : IconChevronDown { color: Theme.text-muted; size: 12px; x: 4px; y: 4px; }
                    if (!item.expanded) : IconChevronRight { color: Theme.text-muted; size: 12px; x: 4px; y: 4px; }
                }
                // Spacer for items without children (maintain alignment)
                Rectangle {
                    visible: !item.has-children;
                    width: 20px;
                }
                // Icon
                Text {
                    text: item.icon;
                    font-size: Theme.font-base;
                    color: Theme.text-primary;
                    min-width: 20px;
                    horizontal-alignment: center;
                    vertical-alignment: center;
                }
                // Label text
                Text {
                    text: item.label;
                    font-size: Theme.font-sm;
                    color: idx == root.selected-index ? Theme.neon-cyan : Theme.text-primary;
                    font-weight: idx == root.selected-index ? 600 : 400;
                    overflow: elide;
                    horizontal-stretch: 1;
                    vertical-alignment: center;
                }
            }
            th := TouchArea {
                clicked => {
                    root.selected-index = idx;
                    root.item-clicked(idx);
                }
                mouse-cursor: MouseCursor.pointer;
            }
            }
            }
        }
    }
}
