class DesktopSettingsSidebar extends Shadow {
    constructor(activeSection, onSectionChange) {
        super()
        this.activeSection = activeSection
        this.onSectionChange = onSectionChange
    }

    render() {
        VStack(() => {
            VStack(() => {
                p("Settings")
                    .fontFamily("Laandbrau")
                    .margin(0).fontSize(1.8, em).fontWeight("700").color("var(--headertext)")
                p(global.currentNetwork.name)
                    .margin(0).marginTop(0.2, em).fontSize(0.72, em)
                    .color("var(--headertext)").opacity(0.38)
            })
            .marginTop(30, px)
            .paddingHorizontal(1.1, em).paddingTop(1.2, em).paddingBottom(0.9, em)

            VStack(() => {}).height(1, px).background("var(--divider)").marginHorizontal(1, em)

            VStack(() => {
                this.sectionLabel("MANAGE")
                this.navItem("🎭", "Roles & Apps", "roles")
            })
            .paddingTop(0.75, em)

            VStack(() => {}).height(1, px).background("var(--divider)").marginHorizontal(1, em).marginVertical(0.5, em)

            VStack(() => {
                this.sectionLabel("INTEGRATIONS")
                this.navItem("💳", "Stripe", "integrations")
            })

            VStack(() => {}).flex(1)

            VStack(() => {
                p("NETWORK")
                    .margin(0).marginBottom(0.4, em)
                    .fontSize(0.6, em).fontWeight("700").letterSpacing("0.07em")
                    .color("var(--headertext)").opacity(0.35)

                VStack(() => {
                    this.infoRow("ID", String(global.currentNetwork.id))
                    this.infoRow("Slug", global.currentNetwork.abbreviation)
                })
                .background("var(--darkaccent)").border("1px solid var(--divider)")
                .borderRadius(0.5, em).gap(0)
            })
            .paddingHorizontal(0.75, em).paddingBottom(1.1, em).flexShrink(0)
        })
        .width(230, px).height(100, pct)
        .borderRight("1px solid var(--divider)")
        .flexShrink(0).overflowY("auto").boxSizing("border-box")
    }

    navItem(icon, label, sectionId) {
        const isActive = this.activeSection === sectionId
        HStack(() => {
            p(icon).margin(0).fontSize(0.9, em).lineHeight("1").flexShrink(0)
            p(label).margin(0).fontSize(0.88, em)
                .fontWeight(isActive ? "600" : "400")
                .color("var(--headertext)").opacity(isActive ? 1 : 0.65)
        })
        .gap(0.62, em).paddingHorizontal(0.85, em).paddingVertical(0.45, em)
        .marginHorizontal(0.4, em).borderRadius(0.45, em)
        .background(isActive ? "var(--app)" : "transparent")
        .cursor("pointer").alignItems("center")
        .width("calc(100% - 0.8em)").boxSizing("border-box")
        .onClick((done) => { if (done) this.onSectionChange(sectionId) })
    }

    sectionLabel(text) {
        p(text)
            .margin(0).marginBottom(0.28, em).paddingHorizontal(1.1, em)
            .fontSize(0.62, em).fontWeight("700").letterSpacing("0.07em")
            .color("var(--headertext)").opacity(0.35)
    }

    infoRow(label, value) {
        HStack(() => {
            p(label)
                .margin(0).fontSize(0.68, em).color("var(--headertext)").opacity(0.4)
                .width(4, em).flexShrink(0)
            p(value)
                .margin(0).fontSize(0.72, em).fontWeight("600").color("var(--headertext)")
        })
        .paddingVertical(0.3, em).paddingHorizontal(0.65, em)
        .borderBottom("1px solid var(--divider)")
        .alignItems("center").gap(0.4, em)
    }
}

register(DesktopSettingsSidebar)