import "../../components/Avatar.js"

class DesktopPeopleList extends Shadow {
    constructor(people, selectedId, onSelect) {
        super()
        this.people = people
        this.selectedId = selectedId
        this.onSelect = onSelect
    }

    render() {
        VStack(() => {
            if (this.people.length === 0) {
                VStack(() => {
                    p("No members match your search")
                        .margin(0).fontSize(0.88, em)
                        .color("var(--headertext)").opacity(0.35).textAlign("center")
                })
                .flex(1).justifyContent("center").alignItems("center")
                return;
            }

            this.people.forEach(person => this.renderRow(person))
        })
        .gap(0).overflowY("auto").height(100, pct)
        .paddingVertical(0.5, em).boxSizing("border-box")
    }

    renderRow(person) {
        const isSelected = person.id === this.selectedId;
        const isOnline = person._online;
        const isAdmin = (person.roles || []).includes("admin");

        HStack(() => {
            // Avatar
            ZStack(() => {
                Avatar(person, 2.6)

                // Online indicator
                VStack(() => {})
                    .width(0.62, em).height(0.62, em)
                    .borderRadius(50, pct)
                    .background(isOnline ? "#22c55e" : "var(--divider)")
                    .boxSizing("border-box")
                    .position("absolute").bottom(0).right(0)
            })
            .position("relative")
            .width(2.6, em).height(2.6, em).flexShrink(0)

            // Info
            VStack(() => {
                HStack(() => {
                    p(`${person.first_name} ${person.last_name}`)
                        .margin(0).fontSize(0.88, em).fontWeight("600")
                        .color("var(--headertext)").flex(1).minWidth(0)
                        .overflow("hidden").whiteSpace("nowrap").textOverflow("ellipsis")

                    if (isAdmin) {
                        p("Admin")
                            .margin(0).paddingHorizontal(0.42, em).paddingVertical(0.1, em)
                            .background("rgba(239,68,68,0.12)").borderRadius(100, px)
                            .fontSize(0.62, em).fontWeight("700").color("#ef4444")
                            .flexShrink(0)
                    }
                })
                .alignItems("center").gap(0.4, em).width(100, pct)

                HStack(() => {
                    p(person.title || person.email)
                        .margin(0).fontSize(0.75, em)
                        .color("var(--headertext)").opacity(0.45)
                        .flex(1).minWidth(0)
                        .overflow("hidden").whiteSpace("nowrap").textOverflow("ellipsis")

                    if (person.plan_name?.includes("Patron")) {
                        p("Patron")
                            .margin(0).paddingHorizontal(0.42, em).paddingVertical(0.1, em)
                            .background("rgba(245,158,11,0.12)").borderRadius(100, px)
                            .fontSize(0.62, em).fontWeight("700").color("#d97706")
                            .flexShrink(0)
                    }
                })
                .alignItems("center").gap(0.4, em).width(100, pct).marginTop(0.15, em)
            })
            .flex(1).minWidth(0)
        })
        .gap(0.7, em).paddingHorizontal(0.9, em).paddingVertical(0.62, em)
        .marginHorizontal(0.4, em)
        .borderRadius(0.55, em)
        .background(isSelected ? "var(--accent)" : "transparent")
        .cursor("pointer").alignItems("center")
        .width("calc(100% - 0.8em)").boxSizing("border-box")
        .onClick((done) => {
            if(done)
                this.onSelect(person.id)
        })
    }

}

register(DesktopPeopleList)