css(`
    people- {
        font-family: 'Arial';
    }

    people- h1 {
      font-family: 'Bona';
    }

    people- p {
        color: var(--accent);
    }

    people- p b {
        color: var(--darkbrown);
    }
`)

class People extends Shadow {
    people = "";

    constructor() {
        super()
        this.people = global.currentNetwork.data.members;
    }

    render() {
        VStack(() => {
            h1("People")
                .color("rgb(158 136 105)")
                .textAlign("center")

            if (this.people == "") {
                LoadingCircle()
            } else if (this.people.length > 0) {
                for (let i = 0; i < this.people.length; i++) {
                    HStack(() => {
                        HStack(() => { })
                            .boxSizing("border-box")
                            .height(3.5, em)
                            .width(3.5, em)
                            .padding(0.5, em)
                            .border("1px solid var(--accent)")
                            .borderRadius(100, pct)
                            .background("black")

                        VStack(() => {
                            h3(this.people[i].firstName + " " + this.people[i].lastName)
                                .color("var(--brown)")
                                .fontSize(1.2, em)
                                .fontWeight("bold")
                                .marginVertical(0, em)
                            p("<b>Member since: </b>" + " " + this.convertDate(this.people[i].created))
                        })
                        .verticalAlign("center")
                        .gap(0.5, em)
                    })
                    .height(3.5, em)
                    .padding(0.75, em)
                    .gap(1, em)
                }
            } else {
                h2("No Members")
                    .color("var(--brown)")
                    .fontWeight("bold")
                    .marginTop(7.5, em)
                    .marginBottom(0.5, em)
                    .textAlign("center")
                p("Invite people to this network!")
                    .textAlign("center")
                    .color("var(--darkbrown)")
            }
        })
        .position("relative")
        .boxSizing("border-box")
        .paddingVertical(1, em)
        .height(100, pct)
        .width(100, pct)
    }

    convertDate(rawDate) {
        const date = rawDate.split("-", 1)[0]; // "01.31.2026
        const [mm, dd, yyyy] = date.split(".").map(Number);

        const months = [
            "January", "February", "March", "April", "May", "June",
            "July", "August", "September", "October", "November", "December"
        ];

        const ordinal = (n) => {
            const mod100 = n % 100;
            if (mod100 >= 11 && mod100 <= 13) return `${n}th`;
            switch (n % 10) {
                case 1: return `${n}st`;
                case 2: return `${n}nd`;
                case 3: return `${n}rd`;
                default: return `${n}th`;
            }
        };

        return `${months[mm - 1]} ${ordinal(dd)}, ${yyyy}`;
    }
}

register(People)