class SettingsIntegrationsSection extends Shadow {
    constructor(stripeDetails, basePath, callbacks, loading = false) {
        super()
        this.stripeDetails = stripeDetails
        this.basePath = basePath
        this.loading = loading
        this.onConnectStripe = callbacks.onConnectStripe
    }

    render() {
        VStack(() => {
            this.backHeader("Integrations", () => window.navigateTo(this.basePath))

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

            if (this.loading) { LoadingCircle(); return }

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

                if (this.stripeDetails?.email) {
                    HStack(() => {
                        VStack(() => {})
                            .width(8, px).height(8, px).borderRadius(50, pct)
                            .background("#10b981").flexShrink(0)
                        VStack(() => {
                            p("Connected").margin(0).fontSize(0.9, em).fontWeight("600").color("var(--headertext)")
                            p(this.stripeDetails.email)
                                .margin(0).marginTop(0.15, em).fontSize(0.72, em)
                                .color("var(--headertext)").opacity(0.42)
                        })
                        .gap(0).flex(1)
                    })
                    .gap(0.65, em).alignItems("center").paddingVertical(0.85, em)
                } else {
                    VStack(() => {
                        p("Stripe is not connected to this network.")
                            .margin(0).fontSize(0.82, em).color("var(--headertext)").opacity(0.5)
                            .marginBottom(1, em)
                        button("Connect Stripe →")
                            .paddingHorizontal(1.2, em).paddingVertical(0.65, em)
                            .border("none").borderRadius(0.5, em)
                            .background("var(--quillred)").color("white")
                            .fontSize(0.85, em).fontWeight("600").cursor("pointer")
                            .onTap(() => this.onConnectStripe())
                    })
                    .paddingVertical(0.85, em).gap(0)
                }
            })
            .paddingHorizontal(1, em).paddingTop(1, em)
            .flex(1).overflowY("auto")
        })
        .height(100, pct).overflow("hidden")
    }

    backHeader(title, onBack) {
        HStack(() => {
            button("‹")
                .border("none").background("transparent")
                .color("var(--headertext)").fontSize(1.4, em)
                .lineHeight("1").paddingVertical(0.2, em).paddingRight(0.3, em)
                .cursor("pointer").flexShrink(0)
                .onTap(onBack)
            p(title)
                .margin(0).fontSize(1.05, em).fontWeight("700").color("var(--headertext)")
                .flex(1).overflow("hidden").whiteSpace("nowrap").textOverflow("ellipsis")
        })
        .gap(0.25, em).alignItems("center")
        .paddingHorizontal(0.85, em).paddingTop(1.25, em).paddingBottom(0.85, em)
        .flexShrink(0)
    }
}

register(SettingsIntegrationsSection)