class DesktopFilesToolbar extends Shadow {
    constructor(title, viewMode, searchText, onViewChange, onSearch, onUpload) {
        super()
        this.title = title
        this.viewMode = viewMode
        this.searchText = searchText
        this.onViewChange = onViewChange
        this.onSearch = onSearch
        this.onUpload = onUpload
    }

    render() {
        const self = this
        HStack(() => {
            // Title
            p(this.title)
                .margin(0)
                .fontSize(1.05, em)
                .fontWeight("700")
                .color("var(--headertext)")
                .flex(1)
                .minWidth(0)

            // Search
            HStack(() => {
                p("🔍")
                    .margin(0)
                    .fontSize(0.8, em)
                    .opacity(0.38)
                    .flexShrink(0)
                input("", "200px")
                    .attr({ type: "text", placeholder: "Search files…", value: this.searchText })
                    .border("none")
                    .outline("none")
                    .background("transparent")
                    .color("var(--headertext)")
                    .fontSize(0.85, em)
                    .onInput((e) => this.onSearch(e.target.value))
            })
            .gap(0.5, em)
            .paddingHorizontal(0.8, em)
            .paddingVertical(0.52, em)
            .background("var(--darkaccent)")
            .border("1px solid var(--divider)")
            .borderRadius(0.5, em)
            .alignItems("center")

            // View toggle
            HStack(() => {
                this.viewBtn("list", "☰")
                this.viewBtn("grid", "⊞")
            })
            .background("var(--darkaccent)")
            .border("1px solid var(--divider)")
            .borderRadius(0.5, em)
            .overflow("hidden")

            // Upload
            button("+ Upload")
                .paddingHorizontal(1, em)
                .paddingVertical(0.52, em)
                .background("var(--quillred)")
                .color("white")
                .border("none")
                .borderRadius(0.5, em)
                .fontSize(0.85, em)
                .fontWeight("600")
                .cursor("pointer")
                .flexShrink(0)
                .onClick(function(done){ if(done){ self.onUpload() } })
        })
        .gap(0.65, em)
        .paddingHorizontal(1.5, em)
        .paddingVertical(0.85, em)
        .borderBottom("1px solid var(--divider)")
        .alignItems("center")
        .width(100, pct)
        .boxSizing("border-box")
        .flexShrink(0)
    }

    viewBtn(mode, icon) {
        const self = this
        const isActive = this.viewMode === mode;
        button(icon)
            .paddingHorizontal(0.65, em)
            .paddingVertical(0.45, em)
            .background(isActive ? "var(--app)" : "transparent")
            .color("var(--headertext)")
            .border("none")
            .cursor("pointer")
            .fontSize(0.95, em)
            .opacity(isActive ? 1 : 0.45)
            .onClick(function(done){ if(done){ self.onViewChange(mode) } })
    }
}

register(DesktopFilesToolbar)