import server from "/@server/server.js"
import calendarUtil from "../calendarUtil.js"
import "./EventForm.js"
import "../../components/BottomSheet.js"
import "../../components/BackButton.js"
import "../../components/Avatar.js"

css(`
    eventdetails- {
        display: flex;
        flex-direction: column;
        height: 100%;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    eventdetails- ::-webkit-scrollbar { display: none; width: 0; height: 0; }
    eventdetails- ::-webkit-scrollbar-thumb { background: transparent; }
    eventdetails- ::-webkit-scrollbar-track { background: transparent; }
    #eventdetails-toast-wrap {
        transition: max-height 0.25s ease, opacity 0.22s ease, padding-top 0.25s ease;
    }
`)

class EventDetails extends Shadow {
    attachmentsOpen = false;
    selectedCalendars = [];
    _pendingCalendars = null;
    _prevCalendars = null;

    constructor(calendars, event = null, onEventEdited = null, onEventDeleted = null) {
        super()
        this.calendars = calendars;
        this.event = event;
        this.onEventEdited = onEventEdited;
        this.onEventDeleted = onEventDeleted;
        this.selectedCalendars = calendars.filter(c => event?.calendars?.includes(c.id));
    }

    render() {
        this.editSheet = BottomSheet(100) // separate sheet for the edit form, layered above this one

        const isOwner = this.event?.creator_id === global.profile?.id;

        VStack(() => {
            this.renderHeader(isOwner)

            // ── Error toast ───────────────────────────────────────
            VStack(() => {
                p("")
                    .attr({ id: "eventdetails-toast" })
                    .margin(0)
                    .padding("0.55em 1.1em")
                    .background("var(--quillred)")
                    .color("white")
                    .fontSize(0.85, em)
                    .fontWeight("500")
                    .fontFamily("Arial")
                    .borderRadius("0.5em")
                    .boxShadow("0 2px 10px rgba(0,0,0,0.15)")
                    .whiteSpace("nowrap")
            })
            .attr({ id: "eventdetails-toast-wrap" })
            .alignItems("center")
            .overflow("hidden")
            .maxHeight(0)
            .opacity(0)
            .flexShrink(0)

            // ── Scrollable body ───────────────────────────────────
            VStack(() => {
                if (!this.event) return

                // VStack(() => {}).height(0.85, em).flexShrink(0)

                // ── Calendar / Location / Notes card ──────────────
                VStack(() => {

                    // Calendar row — tappable to expand
                    HStack(() => {
                        p("Calendar")
                            .margin(0).fontSize(0.92, em).color("var(--headertext)").flexShrink(0)

                        HStack(() => {
                            this.selectedCalendars.forEach(cal => {
                                HStack(() => {
                                    p("").width(0.6, em).height(0.6, em)
                                        .background(cal.color)
                                        .borderRadius(50, pct)
                                        .flexShrink(0)
                                    p(cal.name)
                                        .margin(0)
                                        .fontSize(0.82, em)
                                        .fontWeight("600")
                                        .color("var(--text)")
                                        .whiteSpace("nowrap")
                                })
                                .gap(0.3, em)
                                .alignItems("center")
                            })
                        })
                        .attr({ id: "calendar-display" })
                        .flex(1)
                        .justifyContent("flex-end")
                        .flexWrap("wrap")
                        .gap(0.5, em)

                        let chevron = p("›")
                        chevron
                            .attr({ id: "cal-chevron" })
                            .margin(0).opacity(0.3).fontSize(1.1, em).flexShrink(0)
                            .transition("transform 0.25s ease")
                            .state(chevron.parentElement, "open", function (value) {
                                if(value === "true") {
                                    this.style.transform = "rotate(90deg)"
                                } else {
                                    console.log("no trans")
                                    this.style.transform = ""
                                }
                            })
                    })
                    .attr({id: "calendar-row"})
                    .paddingHorizontal(1, em).paddingVertical(0.78, em)
                    .alignItems("center").gap(0.5, em)
                    .borderBottom("1px solid var(--divider)").cursor("pointer")
                    .onTap(function () {
                        const isOpen = this.getAttribute("open") === "true"
                        if (isOpen) {
                            this.setAttribute("open", "false")
                        } else {
                            this.setAttribute("open", "true")
                        }
                    })

                    // Calendar Expandable List
                    VStack(() => {
                        this.calendars.forEach(cal => {
                            const isSelected = this.selectedCalendars.some(c => c.id === cal.id)
                            HStack(() => {
                                HStack(() => {
                                    p("").width(0.65, em).height(0.65, em)
                                        .background(cal.color).borderRadius(50, pct).flexShrink(0)
                                    p(cal.name)
                                        .margin(0).fontSize(0.9, em).color("var(--text)").fontFamily("Arial")
                                })
                                .gap(0.45, em).alignItems("center").flex(1)

                                p("✓")
                                    .attr({ id: `cal-check-${cal.id}` })
                                    .margin(0).fontSize(0.88, em)
                                    .color("var(--quillred)").fontWeight("700")
                                    .display(isSelected ? "" : "none")
                            })
                            .paddingHorizontal(1.25, em).paddingVertical(0.72, em)
                            .alignItems("center")
                            .borderBottom("1px solid var(--divider)")
                            .cursor("pointer")
                            .onTap(() => {
                                const prevCalendars = [...this.selectedCalendars]
                                const i = this.selectedCalendars.findIndex(c => c.id === cal.id)
                                if (i >= 0) {
                                    if (this.selectedCalendars.length > 1) {
                                        this.selectedCalendars.splice(i, 1)
                                        const check = this.$(`#cal-check-${cal.id}`)
                                        if (check) check.style.display = "none"
                                    }
                                } else {
                                    this.selectedCalendars.push(cal)
                                    const check = this.$(`#cal-check-${cal.id}`)
                                    if (check) check.style.display = ""
                                }
                                this.updateCalendarDisplay()
                                this.saveCalendars(prevCalendars)
                            })
                        })
                    })
                    .state(this.$("#calendar-row"), "open", function (value) {
                        if(value === "false") {
                            this.style.maxHeight = "0"
                        } else {
                            this.style.maxHeight = this.scrollHeight + "px"
                        }
                    })
                    .attr({ id: "cal-picker"})
                    .overflow("hidden").maxHeight(0)
                    .transition("max-height 0.3s ease")

                    // Location row
                    if (this.event.location) {
                        HStack(() => {
                            p("📍").margin(0).fontSize(0.85, em).flexShrink(0)
                            p(this.event.location)
                                .margin(0).fontSize(0.9, em).color("var(--text)").fontFamily("Arial")
                        })
                        .paddingHorizontal(1, em).paddingVertical(0.78, em)
                        .alignItems("center").gap(0.65, em)
                        .borderBottom("1px solid var(--divider)")
                    }

                    // Notes row
                    if (this.event.description) {
                        HStack(() => {
                            p("📝").margin(0).fontSize(0.85, em).flexShrink(0).alignSelf("flex-start").paddingTop(0.1, em)
                            p(this.event.description)
                                .margin(0).fontSize(0.9, em).color("var(--text)").fontFamily("Arial")
                                .whiteSpace("pre-wrap").lineHeight("1.45")
                        })
                        .paddingHorizontal(1, em).paddingVertical(0.78, em)
                        .alignItems("flex-start").gap(0.65, em)
                    }
                })
                .background("var(--darkaccent)").border("1px solid var(--divider)")
                .borderRadius(12, px).marginHorizontal(1, em).overflow("hidden").flexShrink(0)

                // ── Attachments card ──────────────────────────────
                if (this.event.attachments?.length > 0) {
                    // VStack(() => {}).height(0.85, em).flexShrink(0)
                    VStack(() => {
                        HStack(() => {
                            p("📎").margin(0).fontSize(0.85, em).flexShrink(0)
                            p("Attachments")
                                .margin(0).fontSize(0.92, em).color("var(--headertext)").flex(1)
                            p("▼")
                                .attr({ id: "attachments-chevron" })
                                .margin(0).fontSize(0.7, em).color("var(--text)").opacity(0.5)
                                .display("inline-block")
                                .transition("transform 0.3s ease")
                                .transform(this.attachmentsOpen ? "rotate(180deg)" : "rotate(0deg)")
                        })
                        .paddingHorizontal(1, em).paddingVertical(0.78, em)
                        .alignItems("center").gap(0.65, em).cursor("pointer")
                        .onTap(() => this.toggleAttachments())

                        VStack(() => {
                            VStack(() => {
                                this.event.attachments.forEach(file => this.renderFile(file))
                            })
                            .gap(0.75, em).width(100, pct)
                            .padding("0 1em 0.75em").boxSizing("border-box")
                        })
                        .attr({ id: "attachments-content" })
                        .overflow("hidden").maxHeight("0")
                        .transition("max-height 0.5s ease")
                    })
                    .background("var(--darkaccent)").border("1px solid var(--divider)")
                    .borderRadius(12, px).marginHorizontal(1, em).overflow("hidden").flexShrink(0)
                }
            })
            .overflowY("scroll").flex(1).minHeight(0).paddingTop(0.85, em).paddingBottom(1.5, em).gap(0.85, em)

            // ── Footer: creator avatar + timestamps ───────────────
            if (this.event) {
                const members = global.currentNetwork.data?.members || []
                const creator = members.find(m => m.id === this.event.creator_id)
                if (creator) {
                    HStack(() => {
                        Avatar(creator, 2)
                        VStack(() => {
                            p(`Created ${calendarUtil.timeAgo(this.event.created)} by ${creator.first_name}`)
                                .margin(0).fontSize(0.9, em).color("var(--headertext)").opacity(0.5)
                            if (this.event.updated_at && this.event.updated_at !== this.event.created) {
                                p(`Last updated ${calendarUtil.timeAgo(this.event.updated_at)}`)
                                    .margin(0).fontSize(0.9, em).color("var(--headertext)").opacity(0.4)
                            }
                        })
                        .gap(0.15, em)
                    })
                    .paddingHorizontal(1, em)
                    .paddingVertical(0.65, em)
                    .alignItems("center")
                    .gap(0.5, em)
                    .flexShrink(0)
                }
            }

        })
        .height(100, pct)
    }

    renderHeader(isOwner) {
        VStack(() => {
            HStack(() => {
                BackButton(false, true, () => $("bottomsheet-").toggle())
                if (isOwner) {
                    HStack(() => {
                        // ── Delete button ─────────────────────────────────
                        button("Delete")
                            .attr({ type: "button" })
                            .padding(0.4, rem)
                            .fontSize(1.25, em)
                            .boxSizing("border-box")
                            .outline("none")
                            .border("none")
                            .background("transparent")
                            .color("var(--quillred)")
                            .onTap(() => this.handleDelete())

                        button("Edit")
                            .padding(0.4, rem)
                            .fontSize(1.25, em)
                            .color("var(--darkaccent)")
                            .boxSizing("border-box")
                            .outline("none")
                            .border("none")
                            .zIndex(3)
                            .onTap((e) => {
                                e.preventDefault()
                                let formEl
                                const closeForm = () => {
                                    this.editSheet._closeOverride = null
                                    this.editSheet.setSheet(false)
                                }
                                const onSaveError = () => {
                                    this.editSheet._closeOverride = () => this.editSheet.forceClose()
                                }
                                this.editSheet.show(() => {
                                    // For override rows, attach template dates so scope='all' anchors correctly
                                    let eventForForm = this.event;
                                    if (this.event.recurrence_parent_id && !this.event._templateStart) {
                                        const template = global.currentNetwork.data.events.find(e => e.id === this.event.recurrence_parent_id);
                                        if (template) {
                                            eventForForm = {
                                                ...this.event,
                                                _templateStart: new Date(template.time_start),
                                                _templateEnd:   new Date(template.time_end)
                                            };
                                        }
                                    }
                                    formEl = EventForm(
                                        this.calendars,
                                        (updateResult) => {
                                            closeForm()
                                            const updatedEvent = updateResult?.scope ? updateResult.event : updateResult;
                                            this.event = { ...updatedEvent, time_start: new Date(updatedEvent.time_start), time_end: new Date(updatedEvent.time_end) }
                                            this.selectedCalendars = this.calendars.filter(c => updatedEvent.calendars?.includes(c.id))
                                            setTimeout(() => {
                                                this.onEventEdited(updateResult)
                                                this.rerender()
                                            }, 300)
                                        },
                                        eventForForm,
                                        closeForm,
                                        (deleteResult) => {
                                            closeForm()
                                            $("bottomsheet-").toggle()
                                            this.onEventDeleted(deleteResult)
                                        },
                                        null,
                                        onSaveError
                                    )
                                })
                                this.editSheet._closeOverride = () => {
                                    this.editSheet.setSheet(true)
                                    formEl?.handleBack()
                                }
                            })
                    })
                    .fontFamily("Arial")
                    .cursor("pointer")
                    .paddingHorizontal(0.8, rem)
                    .gap(0.4, rem)
                }
            })
            .width(100, pct)
            .justifyContent("space-between")
            .alignItems("center")

            VStack(() => {
                h2(this.event?.title ?? "")
                    .color("var(--headertext)")
                    .fontFamily("Arial")
                    .margin(0)
                    .fontSize(1.4, em)
                p(this.event ? calendarUtil.formatEventTime(this.event) : "")
                    .margin(0)
                    .color("var(--headertext)")
                    .opacity(0.7)
                    .fontSize(0.85, em)
            })
            .paddingHorizontal(1, em)
            .paddingBottom(1, em)
            .gap(0.3, em)
            .alignItems("flex-start")
        })
        .width(100, pct)
        .background(util.darkMode() ? "var(--darkred)" : "var(--sidebottombars)")
        .borderTopLeftRadius("10px").borderTopRightRadius("10px")
        .border("1px solid var(--divider)")
        .boxSizing("border-box").flexShrink(0)
        .alignItems("flex-start")
    }

    updateCalendarDisplay() {
        const el = this.$("#calendar-display")
        if (!el) return
        el.innerHTML = this.selectedCalendars.map(cal => `
            <div style="display:flex;align-items:center;gap:0.3em;">
                <div style="width:0.6em;height:0.6em;background:${cal.color};border-radius:50%;flex-shrink:0;"></div>
                <p style="font-size:0.82em;font-weight:600;margin:0;color:var(--text);white-space:nowrap;">${cal.name}</p>
            </div>
        `).join('')
    }

    showError(msg) {
        const wrap = this.$("#eventdetails-toast-wrap")
        const toast = this.$("#eventdetails-toast")
        if (!wrap || !toast) return
        clearTimeout(this._errorTimer)
        if (msg) {
            toast.innerText = msg
            wrap.style.maxHeight = "3em"
            wrap.style.opacity = "1"
            wrap.style.paddingTop = "0.85em"
            this._errorTimer = setTimeout(() => this.hideError(), 3500)
        } else {
            this.hideError()
        }
    }

    hideError() {
        const wrap = this.$("#eventdetails-toast-wrap")
        if (!wrap) return
        clearTimeout(this._errorTimer)
        wrap.style.maxHeight = "0"
        wrap.style.opacity = "0"
        wrap.style.paddingTop = "0"
    }

    saveCalendars(prevCalendars) {
        const event = this.event;
        const newCalendars = this.selectedCalendars.map(c => c.id);
        const isRecurring = !!(event._isOccurrence || event.recurrence_parent_id || event.recurrence_id);

        this._prevCalendars = prevCalendars;
        this._pendingCalendars = newCalendars;

        if (isRecurring) {
            $('actionsheetpopup-').show(
                "Edit Recurring Event",
                [
                    { label: "Edit just this event",        onTap: () => this.performCalendarSave('single'), destructive: false },
                    { label: "Edit this and future events", onTap: () => this.performCalendarSave('future'), destructive: false },
                    { label: "Edit all events in series",   onTap: () => this.performCalendarSave('all'),    destructive: false },
                ],
                () => {
                    this._pendingCalendars = null;
                    this._revertCalendars(prevCalendars);
                }
            );
            return;
        }

        this.performCalendarSave(null);
    }

    _revertCalendars(prev) {
        this.selectedCalendars = prev;
        this.calendars.forEach(cal => {
            const check = this.$(`#cal-check-${cal.id}`);
            if (check) check.style.display = prev.some(c => c.id === cal.id) ? "" : "none";
        });
        this.updateCalendarDisplay();
    }

    async performCalendarSave(scope) {
        const event = this.event;
        const newCalendars = this._pendingCalendars ?? this.selectedCalendars.map(c => c.id);
        this._pendingCalendars = null;
        const prevCalendars = this._prevCalendars;

        try {
            if (scope) {
                const isOverride     = !!event.recurrence_parent_id;
                const templateId     = isOverride ? event.recurrence_parent_id : event.id;
                const occurrenceDate = isOverride
                    ? (event.recurrence_exception_date instanceof Date
                        ? event.recurrence_exception_date.toISOString()
                        : event.recurrence_exception_date) ?? null
                    : event._occurrenceDate?.toISOString() ?? null;
                const serverEventId  = (scope === 'single' && isOverride) ? event.id : templateId;

                const result = await server.editEvent(serverEventId, {
                    title:          event.title,
                    description:    event.description ?? null,
                    location:       event.location ?? null,
                    time_start:     event.time_start instanceof Date ? event.time_start.toISOString() : event.time_start,
                    time_end:       event.time_end   instanceof Date ? event.time_end.toISOString()   : event.time_end,
                    all_day:        event.all_day,
                    calendars:      newCalendars,
                    scope,
                    exception_date: occurrenceDate
                }, global.currentNetwork.id);

                if (result.status === 200) {
                    const editResult = {
                        scope,
                        event:         { ...result.event, calendars: newCalendars, attachments: event.attachments ?? [] },
                        templateId,
                        occurrenceDate
                    };
                    this.event = { ...editResult.event, time_start: new Date(result.event.time_start), time_end: new Date(result.event.time_end) };
                    this.selectedCalendars = this.calendars.filter(c => newCalendars.includes(c.id));
                    this._prevCalendars = null;
                    $("bottomsheet-")._closeOverride = null;
                    this.onEventEdited(editResult);
                } else {
                    this._revertCalendars(prevCalendars);
                    this.showError(result.error ?? "Failed to update calendars.");
                    $("bottomsheet-")._closeOverride = () => $("bottomsheet-").forceClose();
                }
            } else {
                const result = await server.editEvent(event.id, { ...event, calendars: newCalendars }, global.currentNetwork.id);
                if (result.status === 200) {
                    this.event = { ...event, calendars: newCalendars };
                    this._prevCalendars = null;
                    $("bottomsheet-")._closeOverride = null;
                    this.onEventEdited(this.event);
                } else {
                    this._revertCalendars(prevCalendars);
                    this.showError(result.error ?? "Failed to update calendars.");
                    $("bottomsheet-")._closeOverride = () => $("bottomsheet-").forceClose();
                }
            }
        } catch (err) {
            console.error("Failed to update calendars:", err);
            this._revertCalendars(prevCalendars);
            this.showError("Failed to update calendars.");
            $("bottomsheet-")._closeOverride = () => $("bottomsheet-").forceClose();
        }
    }

    handleDelete() {
        const event = this.event;
        const isRecurring = !!(event?._isOccurrence || event?.recurrence_parent_id || event?.recurrence_id);
        if (isRecurring) {
            $('actionsheetpopup-').show(
                "Delete Recurring Event",
                [
                    { label: "Delete just this event",        onTap: () => this.performDelete('single') },
                    { label: "Delete this and future events", onTap: () => this.performDelete('future') },
                    { label: "Delete all events in series",   onTap: () => this.performDelete('all') },
                ],
                () => {}
            )
            return;
        }
        this.performDelete(null);
    }

    async performDelete(scope) {
        const event = this.event;
        const isOverride = !!event.recurrence_parent_id;
        const templateId = isOverride ? event.recurrence_parent_id : event.id;
        const occurrenceDate = isOverride
            ? (event.recurrence_exception_date instanceof Date
                ? event.recurrence_exception_date.toISOString()
                : event.recurrence_exception_date) ?? null
            : event._occurrenceDate?.toISOString() ?? null;
        const serverEventId = (scope === 'single' && isOverride) ? event.id : templateId;

        try {
            const result = await server.deleteEvent(serverEventId, global.currentNetwork.id, scope, occurrenceDate)
            if (result.status === 200) {
                $("bottomsheet-").toggle()
                const deleteResult = { scope: scope ?? 'all', templateId, occurrenceDate, overrideId: isOverride ? event.id : null };
                setTimeout(() => this.onEventDeleted(deleteResult), 300)
            } else {
                this.showError(result.error ?? "Failed to delete event.")
                $("bottomsheet-")._closeOverride = () => $("bottomsheet-").forceClose()
            }
        } catch (err) {
            console.error("Failed to delete event:", err)
            this.showError("Failed to delete event.")
            $("bottomsheet-")._closeOverride = () => $("bottomsheet-").forceClose()
        }
    }

    renderFile(file) {
        const isImage = file.type?.startsWith("image/");
        const url = `${config.SERVER}/db/images/events/${file.name}`;

        if (isImage) {
            img(url, "100%", "100%")
                .borderRadius(8, px).display("block").boxSizing("border-box")
                .cursor("pointer")
                .onTap(() => $("filepreview-")?.open(file, url))
        } else {
            HStack(() => {
                p("📎").margin(0).fontSize(1, em)
                p(file.original_name ?? file.name)
                    .margin(0).color("var(--text)").fontSize(0.9, em)
                    .overflow("hidden").whiteSpace("nowrap").textOverflow("ellipsis")
            })
            .gap(0.5, em).alignItems("center")
            .padding(0.5, em)
            .background("var(--searchbackground)")
            .borderRadius(8, px).boxSizing("border-box")
            .cursor("pointer")
            .onTap(() => $("filepreview-")?.open(file, url))
        }
    }

    toggleAttachments() {
        this.attachmentsOpen = !this.attachmentsOpen;
        const content = this.$("#attachments-content");
        const chevron = this.$("#attachments-chevron");
        if (content) content.style.maxHeight = this.attachmentsOpen ? content.scrollHeight + "px" : "0";
        if (chevron) chevron.style.transform = this.attachmentsOpen ? "rotate(180deg)" : "rotate(0deg)";
    }

}

register(EventDetails)