class Dashboard extends Shadow {

    gridStyle() {
        return {
            table: {
                'background-color': 'var(--window)',
                'color': 'var(--accent)',
                'box-shadow': 'none',
                'font-size': '0.9em',
                'max-width': '90%'
            },
            th: {
                'background-color': 'var(--window)',
                'color': 'var(--accent)',
                'border': 'none',
                'border-bottom': '1px solid var(--divider)'
            },
            td: {
                'background-color': 'var(--window)',
                'color': 'var(--accent)',
                'border': 'none',
                'border-bottom': '1px solid var(--divider)'
            }
        }
    }

    gridCSS() {
        css(`
            input.gridjs-input {
                background-color: var(--window);
                color: var(--accent);
                border: none;
                border-bottom: 1px solid var(--divider);
                border-radius: 0;
                margin-left: 5em
            }

            .gridjs-wrapper {
                box-shadow: none;
                padding-left: 4em;
                max-width: 100%;
                overflow-x: auto;
            }
        `)
    }

    render() {
        VStack(() => {

            if(window.location.pathname.startsWith("/my")) {
                h1(global.profile.first_name + " " + global.profile.last_name);
                return
            }
            else if(!window.location.pathname.includes("comalyr")) {
                return
            }

            h1("Website Inquiries")
                .paddingLeft(5, pct)

            VStack(() => {
                VStack(() => {
                    p("Contact Us")
                        .marginBottom(2, vh)
                        .marginLeft(5, em)
                        .fontStyle("italic")

                    ZStack(() => {
                        new gridjs.Grid({
                            columns: [
                                {
                                    name: "Time",
                                    sort: {
                                         compare: (a, b) => {
                                            const parse = (str) => {
                                                const [datePart, timePart] = str.trim().split(/\s+/);
                                                const [month, day, year] = datePart.split('.');
                                                const normalized = timePart.replace(/(\d+):(\d+)(am|pm)/i, (_, h, m, meridiem) => {
                                                    let hours = parseInt(h);
                                                    if (meridiem.toLowerCase() === 'pm' && hours !== 12) hours += 12;
                                                    if (meridiem.toLowerCase() === 'am' && hours === 12) hours = 0;
                                                    return `${String(hours).padStart(2, '0')}:${m}:00`;
                                                });
                                                return new Date(`${year}-${month}-${day}T${normalized}`);
                                            }
                                            return parse(a) - parse(b);
                                        }
                                    }
                                }, 
                                "First", "Last", "Email", "Phone",
                                {
                                    name: "Message",
                                    formatter: (cell) => gridjs.html(`
                                        <div class="messageCell" style="
                                            display: -webkit-box;
                                            -webkit-line-clamp: 1;
                                            -webkit-box-orient: vertical;
                                            overflow: hidden;
                                            cursor: pointer;
                                            max-width: 300px;
                                        " data-message="${cell.replace(/"/g, '&quot;')}">
                                            ${cell}
                                        </div>
                                    `)
                                },
                                "County"
                            ],                            
                            data: global.currentNetwork.data.contact.map(e => [
                                e.time.replace(/:\d{6}(?=am|pm)/i, '')
                                    .replace('-', '   ')
                                    .replace(/(\d{1,2}:\d{2})(am|pm)/i, (_, time, meridiem) => {
                                        const [h, m] = time.split(':');
                                        return `${h.padStart(2, '0')}:${m}${meridiem.toLowerCase()}`;
                                    }),
                                e.fname,
                                e.lname,
                                e.email,
                                e.phone,
                                e.message,
                                e.county ?? "Not Specified"
                            ]),
                            sort: {
                                multiColumn: false,
                                initialState: {
                                    columnIndex: 0,
                                    direction: "desc"
                                }
                            },
                            search: true,
                            style: this.gridStyle()
                        }).render(quill.rendering.last)

                        this.gridCSS()
                    })
                    .overflow("hidden")
                })
                .gap(0.5, em)

                VStack(() => {
                    p("Join")
                        .marginBottom(2, vh)
                        .marginLeft(5, em)
                        .fontStyle("italic")

                    ZStack(() => {
                        new gridjs.Grid({
                            columns: [
                                {
                                    name: "Time",
                                    sort: {
                                         compare: (a, b) => {
                                            const parse = (str) => {
                                                const [datePart, timePart] = str.trim().split(/\s+/);
                                                const [month, day, year] = datePart.split('.');
                                                const normalized = timePart.replace(/(\d+):(\d+)(am|pm)/i, (_, h, m, meridiem) => {
                                                    let hours = parseInt(h);
                                                    if (meridiem.toLowerCase() === 'pm' && hours !== 12) hours += 12;
                                                    if (meridiem.toLowerCase() === 'am' && hours === 12) hours = 0;
                                                    return `${String(hours).padStart(2, '0')}:${m}:00`;
                                                });
                                                return new Date(`${year}-${month}-${day}T${normalized}`);
                                            }
                                            return parse(a) - parse(b);
                                        }
                                    }
                                },
                                "First", "Last", "Email", "Phone", "County"
                            ],
                            data: global.currentNetwork.data.join.map(e => [
                                e.time.replace(/:\d{6}(?=am|pm)/i, '')
                                    .replace('-', '   ')
                                    .replace(/(\d{1,2}:\d{2})(am|pm)/i, (_, time, meridiem) => {
                                        const [h, m] = time.split(':');
                                        return `${h.padStart(2, '0')}:${m}${meridiem.toLowerCase()}`;
                                    }),
                                e.fname,
                                e.lname,
                                e.email,
                                e.phone,
                                e.county ?? "Not Specified"
                            ]),
                            sort: true,
                            search: true,
                            style: this.gridStyle()
                        }).render(quill.rendering.last)

                        this.gridCSS()
                    })
                    .marginBottom(3, em)
                    .overflow("hidden")
                })
                .gap(0.5, em)
            })
            .gap(4, em)
        })
        .gap(0.5, em)
        .paddingTop(4, pct)
        .width(100, pct)
        .height(100, pct);
    }
}

register(Dashboard)