---
import { Icon } from "astro-icon/components";
import { Get } from "../pocketbase/Get";
import { Authentication } from "../pocketbase/Authentication";
import { Update } from "../pocketbase/Update";
import { FileManager } from "../pocketbase/FileManager";
import { SendLog } from "../pocketbase/SendLog";
import FilePreview from "../modals/FilePreview";

// Get instances
const get = Get.getInstance();
const auth = Authentication.getInstance();
const update = Update.getInstance();
const fileManager = FileManager.getInstance();
const sendLog = SendLog.getInstance();

// Interface for Event type
interface Event {
    id: string;
    event_name: string;
    event_description: string;
    event_code: string;
    location: string;
    files: string[];
    points_to_reward: number;
    start_date: string;
    end_date: string;
    published: boolean;
    has_food: boolean;
    attendees: AttendeeEntry[];
}

interface AttendeeEntry {
    user_id: string;
    time_checked_in: string;
    food: string;
}

interface ListResponse<T> {
    page: number;
    perPage: number;
    totalItems: number;
    totalPages: number;
    items: T[];
}

// Initialize variables
let eventResponse: ListResponse<Event> = {
    page: 1,
    perPage: 5,
    totalItems: 0,
    totalPages: 0,
    items: [],
};
let upcomingEvents: Event[] = [];

// Fetch events
try {
    if (auth.isAuthenticated()) {
        eventResponse = await get.getList<Event>(
            "events",
            1,
            5,
            "",
            "-start_date"
        );
        upcomingEvents = eventResponse.items;
    }
} catch (error) {
    console.error("Failed to fetch events:", error);
}

const totalEvents = eventResponse.totalItems;
const totalPages = eventResponse.totalPages;
const currentPage = eventResponse.page;

// Add type declaration for window
declare global {
    interface Window {
        [key: string]: any;
        openEditModal: (event?: any) => void;
        deleteFile: (eventId: string, filename: string) => void;
        previewFile: (url: string, filename: string) => void;
        openDetailsModal: (event: Event) => void;
        showFilePreview: (file: {
            url: string;
            type: string;
            name: string;
        }) => void;
        backToFileList: () => void;
        handlePreviewError: () => void;
        showLoading: () => void;
        hideLoading: () => void;
        deleteEvent: (eventId: string, eventName: string) => Promise<void>;
        resetAndCloseModal: () => void;
        previewFileInEditModal: (url: string, filename: string) => void;
    }
}
---

<div id="eventManagementSection" class="dashboard-section hidden">
    <div class="mb-6 flex justify-between items-center">
        <div>
            <h2 class="text-2xl font-bold">Event Management</h2>
            <p class="opacity-70">Manage and create IEEE UCSD events</p>
        </div>
        <button class="btn btn-primary gap-2" onclick="window.openEditModal()">
            <Icon name="heroicons:plus" class="h-5 w-5" />
            Add New Event
        </button>
    </div>

    <!-- Stats Cards -->
    <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
        <div
            class="stats shadow-lg bg-base-100 rounded-2xl border border-base-200 hover:border-primary transition-all duration-300 hover:-translate-y-1 transform"
        >
            <div class="stat">
                <div class="stat-title font-medium opacity-80">
                    Total Events
                </div>
                <div class="stat-value text-primary" id="totalEvents">-</div>
                <div class="stat-desc flex items-center gap-2 mt-1">
                    <div class="badge badge-primary badge-sm" id="quarterLabel">
                        Current Academic Term
                    </div>
                </div>
            </div>
        </div>
        <div
            class="stats shadow-lg bg-base-100 rounded-2xl border border-base-200 hover:border-secondary transition-all duration-300 hover:-translate-y-1 transform"
        >
            <div class="stat">
                <div class="stat-title font-medium opacity-80">
                    Unique Attendees
                </div>
                <div class="stat-value text-secondary" id="uniqueAttendees">
                    -
                </div>
                <div class="stat-desc flex items-center gap-2 mt-1">
                    <div class="badge badge-secondary badge-sm">
                        Current Academic Term
                    </div>
                </div>
            </div>
        </div>
        <div
            class="stats shadow-lg bg-base-100 rounded-2xl border border-base-200 hover:border-accent transition-all duration-300 hover:-translate-y-1 transform"
        >
            <div class="stat">
                <div class="stat-title font-medium opacity-80">
                    Recurring Attendees
                </div>
                <div class="stat-value text-accent" id="recurringAttendees">
                    -
                </div>
                <div class="stat-desc flex items-center gap-2 mt-1">
                    <div class="badge badge-accent badge-sm">
                        Current Quarter (<span id="quarterName">-</span>)
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Events List -->
    <div
        class="card bg-base-100 shadow-lg border border-base-200 hover:border-primary transition-all duration-300"
    >
        <div class="card-body">
            <h3 class="card-title text-xl font-bold flex items-center gap-3">
                <div class="badge badge-primary p-3">
                    <Icon name="heroicons:calendar" class="h-5 w-5" />
                </div>
                Events List
            </h3>
            <div class="divider"></div>

            <!-- Filter Controls -->
            <div class="mb-4">
                <!-- All Filters in One Line -->
                <div class="flex flex-wrap items-end gap-4">
                    <div class="form-control">
                        <label class="label">
                            <span class="label-text font-medium"
                                >Time Filter</span
                            >
                        </label>
                        <div class="join m-1">
                            <input
                                type="radio"
                                name="timeFilter"
                                value="all"
                                class="join-item btn btn-sm"
                                checked
                                aria-label="All Years"
                            />
                            <input
                                type="radio"
                                name="timeFilter"
                                value="upcoming"
                                class="join-item btn btn-sm"
                                aria-label="Upcoming"
                            />
                            <input
                                type="radio"
                                name="timeFilter"
                                value="past"
                                class="join-item btn btn-sm"
                                aria-label="Past"
                            />
                        </div>
                    </div>

                    <div class="form-control">
                        <label class="label">
                            <span class="label-text font-medium">Year</span>
                        </label>
                        <div class="dropdown">
                            <label
                                tabindex="0"
                                class="btn btn-sm m-1 w-[180px] justify-between"
                            >
                                <span id="yearFilterLabel">All Years</span>
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    class="h-4 w-4"
                                    viewBox="0 0 20 20"
                                    fill="currentColor"
                                >
                                    <path
                                        fill-rule="evenodd"
                                        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                                        clip-rule="evenodd"></path>
                                </svg>
                            </label>
                            <div
                                tabindex="0"
                                class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52"
                            >
                                <div class="form-control">
                                    <label class="label cursor-pointer">
                                        <span class="label-text">All Years</span
                                        >
                                        <input
                                            type="checkbox"
                                            class="checkbox"
                                            value="all"
                                            checked
                                        />
                                    </label>
                                </div>
                                <div id="yearCheckboxes" class="space-y-1">
                                    <!-- Year checkboxes will be populated dynamically -->
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-control">
                        <label class="label">
                            <span class="label-text font-medium">Quarter</span>
                        </label>
                        <div class="dropdown">
                            <label
                                tabindex="0"
                                class="btn btn-sm m-1 w-[180px] justify-between"
                            >
                                <span id="quarterFilterLabel">All Quarters</span
                                >
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    class="h-4 w-4"
                                    viewBox="0 0 20 20"
                                    fill="currentColor"
                                >
                                    <path
                                        fill-rule="evenodd"
                                        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                                        clip-rule="evenodd"></path>
                                </svg>
                            </label>
                            <div
                                tabindex="0"
                                id="quarterDropdownContent"
                                class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52"
                            >
                                <div class="form-control">
                                    <label class="label cursor-pointer">
                                        <span class="label-text"
                                            >All Quarters</span
                                        >
                                        <input
                                            type="checkbox"
                                            class="checkbox"
                                            value="all"
                                            checked
                                        />
                                    </label>
                                </div>
                                <div class="form-control">
                                    <label class="label cursor-pointer">
                                        <span class="label-text">Fall</span>
                                        <input
                                            type="checkbox"
                                            class="checkbox"
                                            value="fall"
                                        />
                                    </label>
                                </div>
                                <div class="form-control">
                                    <label class="label cursor-pointer">
                                        <span class="label-text">Winter</span>
                                        <input
                                            type="checkbox"
                                            class="checkbox"
                                            value="winter"
                                        />
                                    </label>
                                </div>
                                <div class="form-control">
                                    <label class="label cursor-pointer">
                                        <span class="label-text">Spring</span>
                                        <input
                                            type="checkbox"
                                            class="checkbox"
                                            value="spring"
                                        />
                                    </label>
                                </div>
                                <div class="form-control">
                                    <label class="label cursor-pointer">
                                        <span class="label-text">Summer</span>
                                        <input
                                            type="checkbox"
                                            class="checkbox"
                                            value="summer"
                                        />
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-control">
                        <label class="label">
                            <span class="label-text font-medium">Published</span
                            >
                        </label>
                        <div class="dropdown">
                            <label
                                tabindex="0"
                                class="btn btn-sm m-1 w-[140px] justify-between"
                            >
                                <span id="publishedFilterLabel">All</span>
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    class="h-4 w-4"
                                    viewBox="0 0 20 20"
                                    fill="currentColor"
                                >
                                    <path
                                        fill-rule="evenodd"
                                        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                                        clip-rule="evenodd"></path>
                                </svg>
                            </label>
                            <div
                                tabindex="0"
                                class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52"
                            >
                                <div class="form-control">
                                    <label class="label cursor-pointer">
                                        <span class="label-text">All</span>
                                        <input
                                            type="radio"
                                            name="publishedFilter"
                                            class="radio"
                                            value="all"
                                            checked
                                        />
                                    </label>
                                </div>
                                <div class="form-control">
                                    <label class="label cursor-pointer">
                                        <span class="label-text">Yes</span>
                                        <input
                                            type="radio"
                                            name="publishedFilter"
                                            class="radio"
                                            value="yes"
                                        />
                                    </label>
                                </div>
                                <div class="form-control">
                                    <label class="label cursor-pointer">
                                        <span class="label-text">No</span>
                                        <input
                                            type="radio"
                                            name="publishedFilter"
                                            class="radio"
                                            value="no"
                                        />
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-control">
                        <label class="label">
                            <span class="label-text font-medium">Has Files</span
                            >
                        </label>
                        <div class="dropdown">
                            <label
                                tabindex="0"
                                class="btn btn-sm m-1 w-[140px] justify-between"
                            >
                                <span id="hasFilesFilterLabel">All</span>
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    class="h-4 w-4"
                                    viewBox="0 0 20 20"
                                    fill="currentColor"
                                >
                                    <path
                                        fill-rule="evenodd"
                                        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                                        clip-rule="evenodd"></path>
                                </svg>
                            </label>
                            <div
                                tabindex="0"
                                class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52"
                            >
                                <div class="form-control">
                                    <label class="label cursor-pointer">
                                        <span class="label-text">All</span>
                                        <input
                                            type="radio"
                                            name="hasFilesFilter"
                                            class="radio"
                                            value="all"
                                            checked
                                        />
                                    </label>
                                </div>
                                <div class="form-control">
                                    <label class="label cursor-pointer">
                                        <span class="label-text">Yes</span>
                                        <input
                                            type="radio"
                                            name="hasFilesFilter"
                                            class="radio"
                                            value="yes"
                                        />
                                    </label>
                                </div>
                                <div class="form-control">
                                    <label class="label cursor-pointer">
                                        <span class="label-text">No</span>
                                        <input
                                            type="radio"
                                            name="hasFilesFilter"
                                            class="radio"
                                            value="no"
                                        />
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="form-control">
                        <label class="label">
                            <span class="label-text font-medium">Has Food</span>
                        </label>
                        <div class="dropdown">
                            <label
                                tabindex="0"
                                class="btn btn-sm m-1 w-[140px] justify-between"
                            >
                                <span id="hasFoodFilterLabel">All</span>
                                <svg
                                    xmlns="http://www.w3.org/2000/svg"
                                    class="h-4 w-4"
                                    viewBox="0 0 20 20"
                                    fill="currentColor"
                                >
                                    <path
                                        fill-rule="evenodd"
                                        d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
                                        clip-rule="evenodd"></path>
                                </svg>
                            </label>
                            <div
                                tabindex="0"
                                class="dropdown-content z-[1] menu p-2 shadow bg-base-100 rounded-box w-52"
                            >
                                <div class="form-control">
                                    <label class="label cursor-pointer">
                                        <span class="label-text">All</span>
                                        <input
                                            type="radio"
                                            name="hasFoodFilter"
                                            class="radio"
                                            value="all"
                                            checked
                                        />
                                    </label>
                                </div>
                                <div class="form-control">
                                    <label class="label cursor-pointer">
                                        <span class="label-text">Yes</span>
                                        <input
                                            type="radio"
                                            name="hasFoodFilter"
                                            class="radio"
                                            value="yes"
                                        />
                                    </label>
                                </div>
                                <div class="form-control">
                                    <label class="label cursor-pointer">
                                        <span class="label-text">No</span>
                                        <input
                                            type="radio"
                                            name="hasFoodFilter"
                                            class="radio"
                                            value="no"
                                        />
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- Search and Per Page Controls -->
            <div class="flex flex-col md:flex-row gap-4 mb-4">
                <div class="form-control flex-1">
                    <div class="join w-full">
                        <div
                            class="join-item bg-base-200 flex items-center px-3"
                        >
                            <svg
                                xmlns="http://www.w3.org/2000/svg"
                                class="h-5 w-5 opacity-70"
                                viewBox="0 0 20 20"
                                fill="currentColor"
                            >
                                <path
                                    fill-rule="evenodd"
                                    d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
                                    clip-rule="evenodd"></path>
                            </svg>
                        </div>
                        <input
                            type="text"
                            id="searchInput"
                            placeholder="Search events..."
                            class="input input-bordered join-item w-full"
                        />
                    </div>
                </div>
                <div class="form-control w-full md:w-auto">
                    <div class="join">
                        <div
                            class="join-item bg-base-200 flex items-center px-3"
                        >
                            Per Page
                        </div>
                        <select
                            id="perPageSelect"
                            class="select select-bordered join-item"
                        >
                            <option value="5">5</option>
                            <option value="10">10</option>
                            <option value="25">25</option>
                            <option value="50">50</option>
                        </select>
                    </div>
                </div>
            </div>

            <!-- Event Items -->
            <div class="space-y-4" id="eventsList">
                <div class="text-center py-8 text-base-content/70">
                    <Icon
                        name="heroicons:calendar"
                        class="h-12 w-12 mx-auto mb-4 opacity-50"
                    />
                    <p>Loading events...</p>
                </div>
            </div>

            <!-- Pagination -->
            <div class="flex justify-center mt-6" id="paginationContainer">
                <div class="join">
                    <button class="join-item btn btn-sm" id="firstPageBtn"
                        >«</button
                    >
                    <button class="join-item btn btn-sm" id="prevPageBtn"
                        >‹</button
                    >
                    <button class="join-item btn btn-sm"
                        >Page <span id="currentPageNumber">1</span></button
                    >
                    <button class="join-item btn btn-sm" id="nextPageBtn"
                        >›</button
                    >
                    <button class="join-item btn btn-sm" id="lastPageBtn"
                        >»</button
                    >
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Edit Event Modal -->
<dialog id="editEventModal" class="modal">
    <div class="modal-box max-w-2xl">
        <!-- Main Edit Form Section -->
        <div id="editFormSection">
            <h3 class="font-bold text-lg mb-4" id="editModalTitle">
                Edit Event
            </h3>
            <form id="editEventForm" class="space-y-4">
                <input type="hidden" id="editEventId" />

                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                    <!-- Event Name -->
                    <div class="form-control">
                        <label class="label">
                            <span class="label-text">Event Name</span>
                            <span class="label-text-alt text-error">*</span>
                        </label>
                        <input
                            type="text"
                            id="editEventName"
                            name="editEventName"
                            class="input input-bordered"
                            required
                        />
                    </div>

                    <!-- Event Code -->
                    <div class="form-control">
                        <label class="label">
                            <span class="label-text">Event Code</span>
                            <span class="label-text-alt text-error">*</span>
                        </label>
                        <input
                            type="text"
                            id="editEventCode"
                            name="editEventCode"
                            class="input input-bordered"
                            required
                        />
                    </div>

                    <!-- Location -->
                    <div class="form-control">
                        <label class="label">
                            <span class="label-text">Location</span>
                            <span class="label-text-alt text-error">*</span>
                        </label>
                        <input
                            type="text"
                            id="editEventLocation"
                            name="editEventLocation"
                            class="input input-bordered"
                            required
                        />
                    </div>

                    <!-- Points to Reward -->
                    <div class="form-control">
                        <label class="label">
                            <span class="label-text">Points to Reward</span>
                            <span class="label-text-alt text-error">*</span>
                        </label>
                        <input
                            type="number"
                            id="editEventPoints"
                            name="editEventPoints"
                            class="input input-bordered"
                            min="0"
                            required
                        />
                    </div>

                    <!-- Start Date -->
                    <div class="form-control">
                        <label class="label">
                            <span class="label-text">Start Date</span>
                            <span class="label-text-alt text-error">*</span>
                        </label>
                        <input
                            type="datetime-local"
                            id="editEventStartDate"
                            name="editEventStartDate"
                            class="input input-bordered"
                            required
                        />
                    </div>

                    <!-- End Date -->
                    <div class="form-control">
                        <label class="label">
                            <span class="label-text">End Date</span>
                            <span class="label-text-alt text-error">*</span>
                        </label>
                        <input
                            type="datetime-local"
                            id="editEventEndDate"
                            name="editEventEndDate"
                            class="input input-bordered"
                            required
                        />
                    </div>
                </div>

                <!-- Description -->
                <div class="form-control">
                    <label class="label">
                        <span class="label-text">Description</span>
                        <span class="label-text-alt text-error">*</span>
                    </label>
                    <textarea
                        id="editEventDescription"
                        name="editEventDescription"
                        class="textarea textarea-bordered"
                        rows="3"
                        required></textarea>
                </div>

                <!-- Files -->
                <div class="form-control">
                    <label class="label">
                        <span class="label-text">Upload Files</span>
                    </label>
                    <input
                        type="file"
                        id="editEventFiles"
                        class="file-input file-input-bordered"
                        multiple
                    />
                    <div class="mt-4 space-y-2">
                        <div id="newFiles" class="space-y-2">
                            <!-- New files will be listed here -->
                        </div>
                        <div class="divider">Current Files</div>
                        <div id="currentFiles" class="space-y-2">
                            <!-- Current files will be listed here -->
                        </div>
                    </div>
                </div>

                <!-- Published -->
                <div class="form-control">
                    <label class="label cursor-pointer justify-start gap-4">
                        <input
                            type="checkbox"
                            id="editEventPublished"
                            name="editEventPublished"
                            class="toggle"
                        />
                        <span class="label-text">Publish Event</span>
                    </label>
                    <label class="label">
                        <span class="label-text-alt text-info"
                            >This has to be clicked if you want to make this
                            event available to the public</span
                        >
                    </label>
                </div>

                <!-- Has Food -->
                <div class="form-control">
                    <label class="label cursor-pointer justify-start gap-4">
                        <input
                            type="checkbox"
                            id="editEventHasFood"
                            name="editEventHasFood"
                            class="toggle"
                        />
                        <span class="label-text">Has Food</span>
                    </label>
                    <label class="label">
                        <span class="label-text-alt text-info"
                            >Check this if food will be provided at the event</span
                        >
                    </label>
                </div>
            </form>
        </div>

        <div class="modal-action">
            <button type="submit" class="btn btn-primary" form="editEventForm"
                >Save Changes</button
            >
            <button type="button" class="btn" onclick="editEventModal.close()"
                >Cancel</button
            >
        </div>
    </div>
    <form method="dialog" class="modal-backdrop">
        <button>close</button>
    </form>
</dialog>

<!-- Event Details Modal -->
<dialog id="eventDetailsModal" class="modal">
    <div class="modal-box max-w-4xl">
        <div class="flex justify-between items-center mb-4">
            <h3 class="font-bold text-lg">Event Details</h3>
            <button
                class="btn btn-circle btn-ghost"
                onclick="eventDetailsModal.close()"
            >
                <svg
                    xmlns="http://www.w3.org/2000/svg"
                    class="h-6 w-6"
                    fill="none"
                    viewBox="0 0 24 24"
                    stroke="currentColor"
                >
                    <path
                        stroke-linecap="round"
                        stroke-linejoin="round"
                        stroke-width="2"
                        d="M6 18L18 6M6 6l12 12"></path>
                </svg>
            </button>
        </div>

        <div class="tabs tabs-boxed mb-4">
            <button class="tab tab-active" data-tab="files">Files</button>
            <button class="tab" data-tab="attendees">Attendees</button>
        </div>

        <div id="filesContent" class="space-y-4">
            <!-- Files list will be populated here -->
        </div>

        <div id="attendeesContent" class="space-y-4 hidden">
            <div class="flex justify-between items-center mb-4">
                <h3 class="text-lg font-semibold">Event Attendees</h3>
                <button
                    id="downloadAttendeesCSV"
                    class="btn btn-primary btn-sm gap-2"
                >
                    <svg
                        xmlns="http://www.w3.org/2000/svg"
                        class="h-4 w-4"
                        viewBox="0 0 20 20"
                        fill="currentColor"
                    >
                        <path
                            fill-rule="evenodd"
                            d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z"
                            clip-rule="evenodd"></path>
                    </svg>
                    Download CSV
                </button>
            </div>
            <!-- Attendees list will be populated here -->
        </div>
    </div>
    <form method="dialog" class="modal-backdrop">
        <button>close</button>
    </form>
</dialog>

<!-- Universal File Preview Modal -->
<dialog id="filePreviewModal" class="modal">
    <div class="modal-box max-w-4xl">
        <div class="flex justify-between items-center mb-4">
            <div class="flex items-center gap-3">
                <button
                    class="btn btn-ghost btn-sm"
                    onclick="window.closeFilePreview()"
                >
                    ← Back
                </button>
                <h3 class="font-bold text-lg truncate" id="previewFileName">
                </h3>
            </div>
        </div>
        <div class="relative" id="previewContainer">
            <div
                id="previewLoadingSpinner"
                class="absolute inset-0 flex items-center justify-center bg-base-200 bg-opacity-50 hidden"
            >
                <span class="loading loading-spinner loading-lg"></span>
            </div>
            <div id="previewContent" class="w-full">
                <FilePreview
                    client:load
                    url=""
                    filename=""
                    id="universalFilePreview"
                />
            </div>
        </div>
    </div>
    <form method="dialog" class="modal-backdrop">
        <button>close</button>
    </form>
</dialog>

<script>
    import { Get } from "../pocketbase/Get";
    import { Authentication } from "../pocketbase/Authentication";
    import { Update } from "../pocketbase/Update";
    import { FileManager } from "../pocketbase/FileManager";
    import { SendLog } from "../pocketbase/SendLog";
    import FilePreview from "../modals/FilePreview";

    // Add file storage
    const selectedFileStorage = new Map<string, File>();

    interface AttendeeEntry {
        user_id: string;
        time_checked_in: string;
        food: string;
    }

    interface Event {
        id: string;
        event_name: string;
        event_description: string;
        event_code: string;
        location: string;
        files: string[];
        points_to_reward: number;
        start_date: string;
        end_date: string;
        published: boolean;
        has_food: boolean;
        attendees: AttendeeEntry[];
    }

    const get = Get.getInstance();
    const auth = Authentication.getInstance();
    const update = Update.getInstance();
    const fileManager = FileManager.getInstance();
    const sendLog = SendLog.getInstance();

    let currentPage = 1;
    let totalPages = 0;
    let searchQuery = "";
    let perPage = 5;
    let quarterlyStats = {
        totalEvents: 0,
        uniqueAttendees: 0,
        recurringAttendees: 0,
    };

    // Add filter state
    let filterState = {
        time: "all",
        year: ["all"],
        quarter: ["all"],
        published: "all",
        hasFiles: "all",
        hasFood: "all",
    };

    // Add cache for events
    let cachedEvents: Event[] = [];
    let lastCacheUpdate = 0; // Will force a refresh on page load
    const CACHE_DURATION = 5 * 60 * 1000; // 5 minutes in milliseconds

    // Function to refresh cache
    async function refreshCache() {
        try {
            const now = Date.now();

            if (
                lastCacheUpdate === 0 ||
                now - lastCacheUpdate >= CACHE_DURATION ||
                cachedEvents.length === 0
            ) {
                auth.setUpdating(true);
                const response = await get.getAll<Event>("events");
                cachedEvents = response.map((event) =>
                    Get.convertUTCToLocal(event)
                );
                lastCacheUpdate = now;

                // Initialize year filter options from cache
                const years = new Set<number>();
                cachedEvents.forEach((event) => {
                    const year = new Date(event.start_date).getFullYear();
                    years.add(year);
                });

                const yearCheckboxes =
                    document.getElementById("yearCheckboxes");
                if (yearCheckboxes) {
                    const sortedYears = Array.from(years).sort((a, b) => b - a);
                    yearCheckboxes.innerHTML = sortedYears
                        .map(
                            (year) => `
                            <label class="label cursor-pointer">
                                <span class="label-text">${year}</span>
                                <input type="checkbox" class="checkbox" value="${year}" />
                            </label>
                        `
                        )
                        .join("");

                    // Add event listeners to checkboxes
                    const allYearsCheckbox = document.querySelector(
                        'input[type="checkbox"][value="all"]'
                    ) as HTMLInputElement;
                    const yearInputs = Array.from(
                        yearCheckboxes.querySelectorAll(
                            'input[type="checkbox"]'
                        )
                    ) as HTMLInputElement[];

                    if (allYearsCheckbox) {
                        allYearsCheckbox.addEventListener("change", (e) => {
                            const target = e.target as HTMLInputElement;
                            yearInputs.forEach((input) => {
                                input.checked = false;
                            });
                            if (target.checked) {
                                filterState.year = ["all"];
                                document.getElementById(
                                    "yearFilterLabel"
                                )!.textContent = "All Years";
                            }
                            currentPage = 1;
                            fetchEvents();
                        });
                    }

                    yearInputs.forEach((input) => {
                        input.addEventListener("change", () => {
                            const checkedYears = yearInputs
                                .filter((inp) => inp.checked)
                                .map((inp) => inp.value);

                            if (checkedYears.length === 0) {
                                allYearsCheckbox.checked = true;
                                filterState.year = ["all"];
                                document.getElementById(
                                    "yearFilterLabel"
                                )!.textContent = "All Years";
                            } else {
                                allYearsCheckbox.checked = false;
                                filterState.year = checkedYears;
                                document.getElementById(
                                    "yearFilterLabel"
                                )!.textContent =
                                    checkedYears.length === 1
                                        ? checkedYears[0]
                                        : `${checkedYears.length} Years Selected`;
                            }
                            currentPage = 1;
                            fetchEvents();
                        });
                    });
                }
            }
        } catch (error) {
            console.error("Failed to refresh cache:", error);
            throw error;
        } finally {
            auth.setUpdating(false);
        }
    }

    // Helper function to determine current academic term
    function getCurrentTerm(): { start: Date; end: Date } {
        const now = new Date();
        const year = now.getFullYear();
        let start: Date, end: Date;

        // If we're before September, term started last year
        if (now.getMonth() < 8) {
            // Before September
            start = new Date(year - 1, 8, 1); // Sept 1 of last year
            end = new Date(year, 8, 0); // Aug 31 of current year
        } else {
            start = new Date(year, 8, 1); // Sept 1 of current year
            end = new Date(year + 1, 8, 0); // Aug 31 of next year
        }

        return { start, end };
    }

    // Helper function to determine current quarter
    function getCurrentQuarter(): { start: Date; end: Date } {
        const now = new Date();
        const year = now.getFullYear();
        const month = now.getMonth();
        let start: Date, end: Date;

        // Determine quarter (0-based months: 0-11)
        // Q1: Sept-Dec (8-11)
        // Q2: Jan-Mar (0-2)
        // Q3: Mar-Jun (2-5)
        // Q4: Jun-Sept (5-8)

        if (month >= 8) {
            // Q1: Sept-Dec
            start = new Date(year, 8, 1);
            end = new Date(year, 11, 31);
        } else if (month < 2) {
            // Q2: Jan-Mar
            start = new Date(year, 0, 1);
            end = new Date(year, 2, 31);
        } else if (month < 5) {
            // Q3: Mar-Jun
            start = new Date(year, 2, 1);
            end = new Date(year, 5, 30);
        } else {
            // Q4: Jun-Sept
            start = new Date(year, 5, 1);
            end = new Date(year, 8, 0); // End on Aug 31
        }

        return { start, end };
    }

    // Helper function to get quarter name
    function getQuarterName(): string {
        const month = new Date().getMonth();

        if (month >= 8) {
            // Sept-Dec
            return "Fall";
        } else if (month < 2) {
            // Jan-Mar
            return "Winter";
        } else if (month < 5) {
            // Mar-Jun
            return "Spring";
        } else {
            // Jun-Sept
            return "Summer";
        }
    }

    // Function to apply filters to cached data
    function filterEvents(events: Event[]): Event[] {
        return events.filter((event) => {
            const now = new Date().toISOString();

            // Time filter
            if (filterState.time === "upcoming" && event.start_date < now)
                return false;
            if (filterState.time === "past" && event.start_date >= now)
                return false;

            // Year filter
            if (!filterState.year.includes("all")) {
                const eventYear = new Date(event.start_date)
                    .getFullYear()
                    .toString();
                if (!filterState.year.includes(eventYear)) return false;
            }

            // Quarter filter
            if (!filterState.quarter.includes("all")) {
                const eventDate = new Date(event.start_date);
                const month = eventDate.getMonth();
                let isInSelectedQuarter = false;

                for (const quarter of filterState.quarter) {
                    let isInQuarter = false;
                    switch (quarter) {
                        case "fall":
                            isInQuarter = month >= 8 && month <= 11; // Sept-Dec
                            break;
                        case "winter":
                            isInQuarter = month >= 0 && month <= 2; // Jan-Mar
                            break;
                        case "spring":
                            isInQuarter = month >= 2 && month <= 5; // Mar-Jun
                            break;
                        case "summer":
                            isInQuarter = month >= 5 && month <= 8; // Jun-Sept
                            break;
                    }
                    if (isInQuarter) {
                        isInSelectedQuarter = true;
                        break;
                    }
                }
                if (!isInSelectedQuarter) return false;
            }

            // Published filter
            if (filterState.published !== "all") {
                if ((filterState.published === "yes") !== event.published)
                    return false;
            }

            // Has Files filter
            if (filterState.hasFiles !== "all") {
                const hasFiles = event.files && event.files.length > 0;
                if ((filterState.hasFiles === "yes") !== hasFiles) return false;
            }

            // Has Food filter
            if (filterState.hasFood !== "all") {
                if ((filterState.hasFood === "yes") !== event.has_food)
                    return false;
            }

            // Search query
            if (searchQuery) {
                const searchLower = searchQuery.toLowerCase();
                const searchTerms = searchLower.split(/\s+/).filter(Boolean);

                return (
                    searchTerms.length === 0 || // If no search terms, return true
                    searchTerms.every(
                        (term) =>
                            event.event_name.toLowerCase().includes(term) ||
                            event.event_code.toLowerCase().includes(term) ||
                            event.location.toLowerCase().includes(term) ||
                            event.event_description.toLowerCase().includes(term)
                    )
                );
            }

            return true;
        });
    }

    // Fetch and display events using cached data
    async function fetchEvents() {
        const eventsList = document.getElementById("eventsList");
        const paginationContainer = document.getElementById(
            "paginationContainer"
        );
        if (!eventsList || !paginationContainer) return;

        try {
            if (!auth.isAuthenticated()) {
                eventsList.innerHTML = `
          <div class="text-center py-8 text-base-content/70">
            <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-4 opacity-50" viewBox="0 0 20 20" fill="currentColor">
              <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
            </svg>
            <p>Please log in to view events</p>
          </div>
        `;
                paginationContainer.classList.add("hidden");
                return;
            }

            // Refresh cache if needed
            await refreshCache();

            // Apply filters to cached data
            const filteredEvents = filterEvents(cachedEvents);

            // Sort events by start date (newest first)
            filteredEvents.sort(
                (a, b) =>
                    new Date(b.start_date).getTime() -
                    new Date(a.start_date).getTime()
            );

            // Calculate pagination
            const totalItems = filteredEvents.length;
            totalPages = Math.ceil(totalItems / perPage);
            const startIndex = (currentPage - 1) * perPage;
            const endIndex = startIndex + perPage;
            const paginatedEvents = filteredEvents.slice(startIndex, endIndex);

            // Update pagination UI
            const firstPageBtn = document.getElementById(
                "firstPageBtn"
            ) as HTMLButtonElement;
            const prevPageBtn = document.getElementById(
                "prevPageBtn"
            ) as HTMLButtonElement;
            const nextPageBtn = document.getElementById(
                "nextPageBtn"
            ) as HTMLButtonElement;
            const lastPageBtn = document.getElementById(
                "lastPageBtn"
            ) as HTMLButtonElement;
            const currentPageNumber =
                document.getElementById("currentPageNumber");

            if (firstPageBtn) firstPageBtn.disabled = currentPage <= 1;
            if (prevPageBtn) prevPageBtn.disabled = currentPage <= 1;
            if (nextPageBtn) nextPageBtn.disabled = currentPage >= totalPages;
            if (lastPageBtn) lastPageBtn.disabled = currentPage >= totalPages;
            if (currentPageNumber)
                currentPageNumber.textContent = currentPage.toString();

            // Show/hide pagination based on total pages
            if (totalPages <= 1) {
                paginationContainer.classList.add("hidden");
            } else {
                paginationContainer.classList.remove("hidden");
            }

            // Update events list
            if (paginatedEvents.length === 0) {
                eventsList.innerHTML = `
            <div class="text-center py-8 text-base-content/70">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-12 w-12 mx-auto mb-4 opacity-50" viewBox="0 0 20 20" fill="currentColor">
                <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
              </svg>
              <p>No events found</p>
            </div>
          `;
                return;
            }

            eventsList.innerHTML = paginatedEvents
                .map((event) => {
                    // Safely parse and format the date
                    let dateStr = "Invalid date";
                    try {
                        const date = new Date(event.start_date);
                        if (!isNaN(date.getTime())) {
                            dateStr = date.toLocaleDateString("en-US", {
                                month: "long",
                                day: "numeric",
                                year: "numeric",
                                hour: "2-digit",
                                minute: "2-digit",
                            });
                        }
                    } catch (e) {
                        console.error("Error formatting date:", e);
                    }

                    const locationStr = event.location
                        ? `${event.location}`
                        : "";
                    const codeStr = event.event_code
                        ? `${event.event_code}`
                        : "";
                    const detailsStr = [locationStr, codeStr]
                        .filter(Boolean)
                        .join(" | code: ");

                    // Store event data in a global map using the event ID as key
                    const eventDataId = `event_${event.id}`;
                    window[eventDataId] = event;

                    return `
              <div class="flex items-center justify-between p-4 bg-base-200 rounded-xl hover:bg-base-300 transition-all duration-300">
                <div class="flex items-center gap-4">
                  <div class="badge badge-lg p-3 badge-primary">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                      <path d="M10 2a6 6 0 00-6 6v3.586l-.707.707A1 1 0 004 14h12a1 1 0 00.707-1.707L16 11.586V8a6 6 0 00-6-6zM10 18a3 3 0 01-3-3h6a3 3 0 01-3 3z" />
                    </svg>
                  </div>
                  <div>
                    <h4 class="font-semibold">${event.event_name}</h4>
                    <p class="text-sm opacity-70">${dateStr}${detailsStr ? ` • ${detailsStr}` : ""}</p>
                  </div>
                </div>
                <div class="flex gap-2">
                  <button class="btn btn-ghost btn-sm" onclick="window.openDetailsModal(window['${eventDataId}'])">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                      <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
                      <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd" />
                    </svg>
                  </button>
                  <button class="btn btn-ghost btn-sm" onclick="window.openEditModal(window['${eventDataId}'])">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                      <path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" />
                    </svg>
                  </button>
                  <button class="btn btn-ghost btn-sm text-error" onclick="window.deleteEvent('${event.id}', '${event.event_name.replace(/'/g, "\\'")}')">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                      <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" />
                    </svg>
                  </button>
                </div>
              </div>
            `;
                })
                .join("");

            // Calculate and update stats using cached data
            await calculateQuarterlyStats();
        } catch (error) {
            console.error("Failed to fetch events:", error);
            eventsList.innerHTML = `
        <div class="alert alert-error">
          <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
          </svg>
          <span>Failed to load events. Please try refreshing the page.</span>
        </div>
      `;
            paginationContainer.classList.add("hidden");
        }
    }

    // Calculate quarterly stats using cached data
    async function calculateQuarterlyStats() {
        try {
            const { start: termStart, end: termEnd } = getCurrentTerm();
            const { start: quarterStart, end: quarterEnd } =
                getCurrentQuarter();

            // Update quarter name in UI
            const quarterNameEl = document.getElementById("quarterName");
            if (quarterNameEl) {
                quarterNameEl.textContent = getQuarterName();
            }

            // Filter events for current term and quarter
            const termEvents = cachedEvents.filter((event) => {
                const eventDate = new Date(event.start_date);
                return eventDate >= termStart && eventDate <= termEnd;
            });

            const quarterEvents = cachedEvents.filter((event) => {
                const eventDate = new Date(event.start_date);
                return eventDate >= quarterStart && eventDate <= quarterEnd;
            });

            // Calculate stats
            quarterlyStats.totalEvents = termEvents.length;

            const termAttendees = new Map<string, number>();
            termEvents.forEach((event) => {
                event.attendees?.forEach((attendee) => {
                    const count = termAttendees.get(attendee.user_id) || 0;
                    termAttendees.set(attendee.user_id, count + 1);
                });
            });

            quarterlyStats.uniqueAttendees = termAttendees.size;

            const quarterAttendees = new Map<string, number>();
            quarterEvents.forEach((event) => {
                event.attendees?.forEach((attendee) => {
                    const count = quarterAttendees.get(attendee.user_id) || 0;
                    quarterAttendees.set(attendee.user_id, count + 1);
                });
            });

            quarterlyStats.recurringAttendees = Array.from(
                quarterAttendees.values()
            ).filter((count) => count > 1).length;

            // Update the UI
            const totalEventsEl = document.getElementById("totalEvents");
            const uniqueAttendeesEl =
                document.getElementById("uniqueAttendees");
            const recurringAttendeesEl =
                document.getElementById("recurringAttendees");

            if (totalEventsEl)
                totalEventsEl.textContent =
                    quarterlyStats.totalEvents.toString();
            if (uniqueAttendeesEl)
                uniqueAttendeesEl.textContent =
                    quarterlyStats.uniqueAttendees.toString();
            if (recurringAttendeesEl)
                recurringAttendeesEl.textContent =
                    quarterlyStats.recurringAttendees.toString();
        } catch (error) {
            console.error("Failed to calculate quarterly stats:", error);
        }
    }

    // Add pagination event listeners
    document.getElementById("firstPageBtn")?.addEventListener("click", () => {
        if (currentPage > 1) {
            currentPage = 1;
            fetchEvents();
        }
    });

    document.getElementById("prevPageBtn")?.addEventListener("click", () => {
        if (currentPage > 1) {
            currentPage--;
            fetchEvents();
        }
    });

    document.getElementById("nextPageBtn")?.addEventListener("click", () => {
        if (currentPage < totalPages) {
            currentPage++;
            fetchEvents();
        }
    });

    document.getElementById("lastPageBtn")?.addEventListener("click", () => {
        if (currentPage < totalPages) {
            currentPage = totalPages;
            fetchEvents();
        }
    });

    // Add filter event listeners
    // Time filter
    document.querySelectorAll('input[name="timeFilter"]').forEach((radio) => {
        radio.addEventListener("change", (e) => {
            const target = e.target as HTMLInputElement;
            filterState.time = target.value;
            currentPage = 1;
            fetchEvents();
        });
    });

    // Year filter
    document
        .getElementById("yearCheckboxes")
        ?.addEventListener("change", () => {
            const checkedYears = Array.from(
                document.querySelectorAll('input[type="checkbox"]:checked')
            ).map((inp) => (inp as HTMLInputElement).value);

            if (checkedYears.length === 0 || checkedYears.includes("all")) {
                document.getElementById("yearFilterLabel")!.textContent =
                    "All Years";
                filterState.year = ["all"];
            } else {
                document.getElementById("yearFilterLabel")!.textContent =
                    checkedYears.length === 1
                        ? checkedYears[0]
                        : `${checkedYears.length} Years Selected`;
                filterState.year = checkedYears;
            }
            currentPage = 1;
            fetchEvents();
        });

    // Quarter filter
    document
        .getElementById("quarterDropdownContent")
        ?.addEventListener("change", (e) => {
            const target = e.target as HTMLInputElement;
            if (!target.matches('input[type="checkbox"]')) return;

            const allQuartersCheckbox = target
                .closest("#quarterDropdownContent")
                ?.querySelector(
                    'input[type="checkbox"][value="all"]'
                ) as HTMLInputElement;

            const quarterInputs = Array.from(
                target
                    .closest("#quarterDropdownContent")
                    ?.querySelectorAll('input[type="checkbox"]') || []
            ).filter(
                (inp) => (inp as HTMLInputElement).value !== "all"
            ) as HTMLInputElement[];

            if (target.value === "all" && target.checked) {
                quarterInputs.forEach((input) => {
                    input.checked = false;
                });
                filterState.quarter = ["all"];
                document.getElementById("quarterFilterLabel")!.textContent =
                    "All Quarters";
            } else {
                const checkedQuarters = quarterInputs
                    .filter((inp) => inp.checked)
                    .map((inp) => inp.value);

                if (checkedQuarters.length === 0) {
                    allQuartersCheckbox.checked = true;
                    filterState.quarter = ["all"];
                    document.getElementById("quarterFilterLabel")!.textContent =
                        "All Quarters";
                } else {
                    allQuartersCheckbox.checked = false;
                    filterState.quarter = checkedQuarters;
                    document.getElementById("quarterFilterLabel")!.textContent =
                        checkedQuarters.length === 1
                            ? checkedQuarters[0].charAt(0).toUpperCase() +
                              checkedQuarters[0].slice(1)
                            : `${checkedQuarters.length} Quarters Selected`;
                }
            }
            currentPage = 1;
            fetchEvents();
        });

    // Published filter
    document
        .querySelectorAll('input[name="publishedFilter"]')
        .forEach((radio: Element) => {
            (radio as HTMLInputElement).addEventListener("change", (e) => {
                const target = e.target as HTMLInputElement;
                filterState.published = target.value;
                document.getElementById("publishedFilterLabel")!.textContent =
                    target.parentElement?.querySelector(".label-text")
                        ?.textContent || "All";
                currentPage = 1;
                fetchEvents();
            });
        });

    // Has Files filter
    document
        .querySelectorAll('input[name="hasFilesFilter"]')
        .forEach((radio: Element) => {
            (radio as HTMLInputElement).addEventListener("change", (e) => {
                const target = e.target as HTMLInputElement;
                filterState.hasFiles = target.value;
                document.getElementById("hasFilesFilterLabel")!.textContent =
                    target.parentElement?.querySelector(".label-text")
                        ?.textContent || "All";
                currentPage = 1;
                fetchEvents();
            });
        });

    // Has Food filter
    document
        .querySelectorAll('input[name="hasFoodFilter"]')
        .forEach((radio: Element) => {
            (radio as HTMLInputElement).addEventListener("change", (e) => {
                const target = e.target as HTMLInputElement;
                filterState.hasFood = target.value;
                document.getElementById("hasFoodFilterLabel")!.textContent =
                    target.parentElement?.querySelector(".label-text")
                        ?.textContent || "All";
                currentPage = 1;
                fetchEvents();
            });
        });

    // Search input with instant search (no debounce needed for cached data)
    const searchInput = document.getElementById("searchInput");
    if (searchInput) {
        // Add input event for instant search
        searchInput.addEventListener("input", (e) => {
            const target = e.target as HTMLInputElement;
            searchQuery = target.value.trim();
            currentPage = 1;
            fetchEvents();
        });

        // Clear search on Escape key
        searchInput.addEventListener("keydown", (e) => {
            if (e.key === "Escape") {
                (e.target as HTMLInputElement).value = "";
                searchQuery = "";
                currentPage = 1;
                fetchEvents();
            }
        });
    }

    // Per page select
    document
        .getElementById("perPageSelect")
        ?.addEventListener("change", (e) => {
            const target = e.target as HTMLSelectElement;
            perPage = parseInt(target.value);
            currentPage = 1;
            fetchEvents();
        });

    // Initial setup
    if (typeof window !== "undefined") {
        window.addEventListener("DOMContentLoaded", () => {
            // Reset all filters to defaults
            const timeFilterAll = document.querySelector(
                'input[name="timeFilter"][value="all"]'
            ) as HTMLInputElement;
            if (timeFilterAll) {
                // Ensure the radio button is properly checked
                timeFilterAll.checked = true;
                filterState.time = "all";
            }

            // Reset year filter
            const yearAllCheckbox = document.querySelector(
                'input[type="checkbox"][value="all"]'
            ) as HTMLInputElement;
            const yearCheckboxes = document.querySelectorAll(
                '#yearCheckboxes input[type="checkbox"]'
            );
            if (yearAllCheckbox && yearCheckboxes) {
                yearAllCheckbox.checked = true;
                yearCheckboxes.forEach((checkbox: Element) => {
                    (checkbox as HTMLInputElement).checked = false;
                });
                filterState.year = ["all"];
                document.getElementById("yearFilterLabel")!.textContent =
                    "All Years";
            }

            // Reset quarter filter
            const quarterAllCheckbox = document.querySelector(
                '#quarterDropdownContent input[type="checkbox"][value="all"]'
            ) as HTMLInputElement;
            const quarterCheckboxes = document.querySelectorAll(
                '#quarterDropdownContent input[type="checkbox"]:not([value="all"])'
            );
            if (quarterAllCheckbox && quarterCheckboxes) {
                quarterAllCheckbox.checked = true;
                quarterCheckboxes.forEach((checkbox: Element) => {
                    (checkbox as HTMLInputElement).checked = false;
                });
                filterState.quarter = ["all"];
                document.getElementById("quarterFilterLabel")!.textContent =
                    "All Quarters";
            }

            const publishedFilter = document.getElementById(
                "publishedFilter"
            ) as HTMLSelectElement;
            if (publishedFilter) publishedFilter.value = "all";

            const hasFilesFilter = document.getElementById(
                "hasFilesFilter"
            ) as HTMLSelectElement;
            if (hasFilesFilter) hasFilesFilter.value = "all";

            const hasFoodFilter = document.getElementById(
                "hasFoodFilter"
            ) as HTMLSelectElement;
            if (hasFoodFilter) hasFoodFilter.value = "all";

            const searchInput = document.getElementById(
                "searchInput"
            ) as HTMLInputElement;
            if (searchInput) searchInput.value = "";

            const perPageSelect = document.getElementById(
                "perPageSelect"
            ) as HTMLSelectElement;
            if (perPageSelect) perPageSelect.value = "5";

            // Reset variables
            searchQuery = "";
            perPage = 5;
            currentPage = 1;

            // Reset filter state
            filterState = {
                time: "all",
                year: ["all"],
                quarter: ["all"],
                published: "all",
                hasFiles: "all",
                hasFood: "all",
            };

            // Fetch events with reset filters
            fetchEvents();
        });
    }

    // Initial fetch
    fetchEvents();

    // Add openEditModal function
    window.openEditModal = async function (event?: any) {
        const modal = document.getElementById(
            "editEventModal"
        ) as HTMLDialogElement;
        const form = document.getElementById(
            "editEventForm"
        ) as HTMLFormElement;
        const modalTitle = document.getElementById("editModalTitle");
        const currentFiles = document.getElementById("currentFiles");
        const newFiles = document.getElementById("newFiles");

        if (!modal || !form) return;

        try {
            // Clear previous form data
            form.reset();
            if (currentFiles) currentFiles.innerHTML = "";
            if (newFiles) newFiles.innerHTML = "";

            // Set modal title based on whether we're editing or creating
            if (modalTitle) {
                modalTitle.textContent = event ? "Edit Event" : "Add New Event";
            }

            if (event) {
                // Fetch fresh data from PocketBase for the event
                const freshEventData = await get.getOne<Event>(
                    "events",
                    event.id
                );

                // Populate form with fresh data
                const idInput = document.getElementById(
                    "editEventId"
                ) as HTMLInputElement;
                const nameInput = document.getElementById(
                    "editEventName"
                ) as HTMLInputElement;
                const codeInput = document.getElementById(
                    "editEventCode"
                ) as HTMLInputElement;
                const locationInput = document.getElementById(
                    "editEventLocation"
                ) as HTMLInputElement;
                const pointsInput = document.getElementById(
                    "editEventPoints"
                ) as HTMLInputElement;
                const startDateInput = document.getElementById(
                    "editEventStartDate"
                ) as HTMLInputElement;
                const endDateInput = document.getElementById(
                    "editEventEndDate"
                ) as HTMLInputElement;
                const descriptionInput = document.getElementById(
                    "editEventDescription"
                ) as HTMLTextAreaElement;
                const publishedInput = document.getElementById(
                    "editEventPublished"
                ) as HTMLInputElement;
                const hasFoodInput = document.getElementById(
                    "editEventHasFood"
                ) as HTMLInputElement;

                if (idInput) idInput.value = freshEventData.id;
                if (nameInput) nameInput.value = freshEventData.event_name;
                if (codeInput) codeInput.value = freshEventData.event_code;
                if (locationInput)
                    locationInput.value = freshEventData.location;
                if (pointsInput)
                    pointsInput.value =
                        freshEventData.points_to_reward.toString();
                if (startDateInput)
                    startDateInput.value = new Date(freshEventData.start_date)
                        .toISOString()
                        .slice(0, 16);
                if (endDateInput)
                    endDateInput.value = new Date(freshEventData.end_date)
                        .toISOString()
                        .slice(0, 16);
                if (descriptionInput)
                    descriptionInput.value = freshEventData.event_description;
                if (publishedInput)
                    publishedInput.checked = freshEventData.published;
                if (hasFoodInput)
                    hasFoodInput.checked = freshEventData.has_food;

                // Display current files if any
                if (
                    currentFiles &&
                    freshEventData.files &&
                    freshEventData.files.length > 0
                ) {
                    currentFiles.innerHTML = updateFilePreviewButtons(
                        freshEventData.files,
                        freshEventData.id
                    );
                }
            }

            // Show the modal
            modal.showModal();
        } catch (error) {
            console.error("Failed to open edit modal:", error);
            // Show error toast or alert
        }
    };

    // Update the previewFileInEditModal function
    window.previewFileInEditModal = async function (
        url: string,
        filename: string
    ) {
        const editFormSection = document.getElementById("editFormSection");
        const previewSection = document.getElementById(
            "editModalPreviewSection"
        );
        const editFilePreview = document.getElementById("editFilePreview");
        const previewFileName = document.getElementById("editPreviewFileName");
        const loadingSpinner = document.getElementById("editLoadingSpinner");

        if (
            !editFormSection ||
            !previewSection ||
            !editFilePreview ||
            !previewFileName ||
            !loadingSpinner
        )
            return;

        // Hide form and show preview section
        editFormSection.classList.add("hidden");
        previewSection.classList.remove("hidden");
        previewFileName.textContent = filename;

        // Show loading spinner
        loadingSpinner.classList.remove("hidden");

        try {
            // Dispatch a custom event to update the FilePreview
            const event = new CustomEvent("updateFilePreview", {
                detail: { url, filename },
            });
            editFilePreview.dispatchEvent(event);
        } finally {
            // Hide loading spinner
            loadingSpinner.classList.add("hidden");
        }
    };

    // Update the showFilePreview function
    window.showFilePreview = function (file: { url: string; name: string }) {
        const fileListSection = document.getElementById("filesContent");
        const previewSection = document.getElementById("filePreviewSection");
        const mainFilePreview = document.getElementById("mainFilePreview");
        const previewFileName = document.getElementById("previewFileName");

        if (
            !fileListSection ||
            !previewSection ||
            !mainFilePreview ||
            !previewFileName
        )
            return;

        // Hide file list and show preview section
        fileListSection.classList.add("hidden");
        previewSection.classList.remove("hidden");
        previewFileName.textContent = file.name;

        // Dispatch a custom event to update the FilePreview
        const event = new CustomEvent("updateFilePreview", {
            detail: { url: file.url, filename: file.name },
        });
        mainFilePreview.dispatchEvent(event);
    };

    // Add backToEditForm function
    window.backToEditForm = function () {
        const editFormSection = document.getElementById("editFormSection");
        const previewSection = document.getElementById(
            "editModalPreviewSection"
        );
        const editFilePreview = document.getElementById("editFilePreview");
        const previewFileName = document.getElementById("editPreviewFileName");

        if (
            editFormSection &&
            previewSection &&
            editFilePreview &&
            previewFileName
        ) {
            editFormSection.classList.remove("hidden");
            previewSection.classList.add("hidden");
            // Reset the preview
            const event = new CustomEvent("updateFilePreview", {
                detail: { url: "", filename: "" },
            });
            editFilePreview.dispatchEvent(event);
            previewFileName.textContent = "";
        }
    };

    // Universal file preview function
    window.previewFile = function (url: string, filename: string) {
        const modal = document.getElementById(
            "filePreviewModal"
        ) as HTMLDialogElement;
        const previewFileName = document.getElementById("previewFileName");
        const filePreview = document.getElementById("universalFilePreview");
        const loadingSpinner = document.getElementById("previewLoadingSpinner");

        if (!modal || !previewFileName || !filePreview || !loadingSpinner)
            return;

        // Show modal and update filename
        modal.showModal();
        previewFileName.textContent = filename;

        // Show loading spinner
        loadingSpinner.classList.remove("hidden");

        try {
            // Update the FilePreview component
            const event = new CustomEvent("updateFilePreview", {
                detail: { url, filename },
            });
            filePreview.dispatchEvent(event);
        } finally {
            // Hide loading spinner
            loadingSpinner.classList.add("hidden");
        }
    };

    // Close file preview
    window.closeFilePreview = function () {
        const modal = document.getElementById(
            "filePreviewModal"
        ) as HTMLDialogElement;
        const filePreview = document.getElementById("universalFilePreview");

        if (modal && filePreview) {
            // Reset the preview
            const event = new CustomEvent("updateFilePreview", {
                detail: { url: "", filename: "" },
            });
            filePreview.dispatchEvent(event);
            modal.close();
        }
    };

    // Update all file preview buttons to use the universal preview
    function updateFilePreviewButtons(files: string[], eventId: string) {
        return files
            .map(
                (filename) => `
            <div class="flex items-center justify-between p-2 bg-base-200 rounded-lg">
                <span class="truncate">${filename}</span>
                <div class="flex gap-2">
                    <button type="button" class="btn btn-ghost btn-xs" onclick="window.previewFile('${fileManager.getFileUrl("events", eventId, filename)}', '${filename}')">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                            <path d="M10 12a2 2 0 100-4 2 2 0 000 4z"/>
                            <path fill-rule="evenodd" d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z" clip-rule="evenodd"/>
                        </svg>
                    </button>
                    <button type="button" class="btn btn-ghost btn-xs text-error" onclick="window.deleteFile('${eventId}', '${filename}')">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"/>
                        </svg>
                    </button>
                </div>
            </div>
        `
            )
            .join("");
    }

    // Update the openDetailsModal function to use the universal preview
    window.openDetailsModal = function (event: Event) {
        const modal = document.getElementById(
            "eventDetailsModal"
        ) as HTMLDialogElement;
        const filesContent = document.getElementById("filesContent");
        const attendeesContent = document.getElementById("attendeesContent");

        if (!modal || !filesContent || !attendeesContent) return;

        // Show modal
        modal.showModal();

        // Update files list
        if (event.files && event.files.length > 0) {
            filesContent.innerHTML = `
                <div class="space-y-2">
                    ${updateFilePreviewButtons(event.files, event.id)}
                </div>
            `;
        } else {
            filesContent.innerHTML = `
                <div class="text-center py-8 text-base-content/70">
                    <p>No files attached to this event</p>
                </div>
            `;
        }
    };

    // Add file input change handler to show selected files
    document
        .getElementById("editEventFiles")
        ?.addEventListener("change", function (e) {
            const fileInput = e.target as HTMLInputElement;
            const newFiles = document.getElementById("newFiles");

            if (newFiles && fileInput.files) {
                // Get existing files if any
                const existingFiles = newFiles.querySelectorAll(".file-item");
                const existingFilesArray = Array.from(existingFiles).map(
                    (item) => {
                        const nameSpan = item.querySelector(".file-name");
                        return nameSpan ? nameSpan.textContent : "";
                    }
                );

                // Store new files in the storage and update UI
                Array.from(fileInput.files)
                    .filter((file) => !existingFilesArray.includes(file.name))
                    .forEach((file) => {
                        selectedFileStorage.set(file.name, file);
                        const fileDiv = document.createElement("div");
                        fileDiv.className =
                            "flex items-center justify-between p-2 bg-base-200 rounded-lg file-item";
                        fileDiv.innerHTML = `
                            <span class="truncate file-name">${file.name}</span>
                            <div class="flex gap-2">
                                <div class="badge badge-primary">New</div>
                                <button type="button" class="btn btn-ghost btn-xs text-error" onclick="this.closest('.file-item').remove(); selectedFileStorage.delete('${file.name}');">
                                    <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor">
                                        <path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd"/>
                                    </svg>
                                </button>
                            </div>
                        `;
                        newFiles.appendChild(fileDiv);
                    });
            }

            // Clear the file input
            fileInput.value = "";
        });

    // Modify form submission handler to use selectedFileStorage
    document
        .getElementById("editEventForm")
        ?.addEventListener("submit", async function (e) {
            e.preventDefault();

            const form = e.target as HTMLFormElement;
            // Get the submit and cancel buttons from the modal-action div
            const modalAction = document.querySelector(".modal-action");
            const submitButton = modalAction?.querySelector(
                ".btn-primary"
            ) as HTMLButtonElement;
            const cancelButton = modalAction?.querySelector(
                ".btn:not(.btn-primary)"
            ) as HTMLButtonElement;

            if (!submitButton || !cancelButton) {
                console.error("Could not find submit or cancel buttons");
                return;
            }

            const originalText = submitButton.innerHTML;

            try {
                const formData = new FormData(form);
                const eventId = (
                    document.getElementById("editEventId") as HTMLInputElement
                )?.value;

                // Get files from storage
                const selectedFiles = Array.from(selectedFileStorage.values());

                // Disable buttons and show loading state
                submitButton.disabled = true;
                cancelButton.disabled = true;
                submitButton.innerHTML = `
                    <div class="flex items-center gap-2">
                        <span class="loading loading-spinner loading-sm"></span>
                        <span>Saving...</span>
                    </div>
                `;
                window.showLoading?.();

                // Prepare event data
                const eventData = {
                    event_name: formData.get("editEventName"),
                    event_code: formData.get("editEventCode"),
                    event_description: formData.get("editEventDescription"),
                    location: formData.get("editEventLocation"),
                    points_to_reward: Number(formData.get("editEventPoints")),
                    start_date: new Date(
                        formData.get("editEventStartDate") as string
                    ).toISOString(),
                    end_date: new Date(
                        formData.get("editEventEndDate") as string
                    ).toISOString(),
                    published: formData.get("editEventPublished") === "on",
                    has_food: formData.get("editEventHasFood") === "on",
                };

                let updatedEvent;

                try {
                    if (eventId) {
                        // Update existing event
                        submitButton.innerHTML = `
                            <div class="flex items-center gap-2">
                                <span class="loading loading-spinner loading-sm"></span>
                                <span>Updating event...</span>
                            </div>
                        `;
                        updatedEvent = await update.updateFields(
                            "events",
                            eventId,
                            eventData
                        );

                        // Handle file uploads if any
                        if (selectedFiles.length > 0) {
                            submitButton.innerHTML = `
                                <div class="flex items-center gap-2">
                                    <span class="loading loading-spinner loading-sm"></span>
                                    <span>Uploading files (0/${selectedFiles.length})...</span>
                                </div>
                            `;
                            await fileManager.appendFiles(
                                "events",
                                eventId,
                                "files",
                                selectedFiles
                            );
                        }

                        await sendLog.send(
                            "update",
                            "event",
                            `Updated event: ${eventData.event_name}`
                        );
                    } else {
                        // Create new event
                        submitButton.innerHTML = `
                            <div class="flex items-center gap-2">
                                <span class="loading loading-spinner loading-sm"></span>
                                <span>Creating event...</span>
                            </div>
                        `;
                        const pb = auth.getPocketBase();
                        const newEvent = await pb
                            .collection("events")
                            .create(eventData);

                        // Handle file uploads if any
                        if (selectedFiles.length > 0) {
                            submitButton.innerHTML = `
                                <div class="flex items-center gap-2">
                                    <span class="loading loading-spinner loading-sm"></span>
                                    <span>Uploading files (0/${selectedFiles.length})...</span>
                                </div>
                            `;
                            await fileManager.uploadFiles(
                                "events",
                                newEvent.id,
                                "files",
                                selectedFiles
                            );
                        }

                        await sendLog.send(
                            "create",
                            "event",
                            `Created event: ${eventData.event_name}`
                        );
                    }

                    // Show success state briefly
                    submitButton.innerHTML = `
                        <div class="flex items-center gap-2 text-success">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
                            </svg>
                            <span>Saved!</span>
                        </div>
                    `;
                    await new Promise((resolve) => setTimeout(resolve, 1000));

                    // Close modal and refresh events list
                    const modal = document.getElementById(
                        "editEventModal"
                    ) as HTMLDialogElement;
                    modal?.close();

                    // Force cache refresh and update events list
                    lastCacheUpdate = 0; // Reset cache timestamp to force refresh
                    await refreshCache(); // Refresh the cache
                    await fetchEvents(); // Update the UI

                    // Clear form inputs
                    const formFileInput = document.getElementById(
                        "editEventFiles"
                    ) as HTMLInputElement;
                    const newFiles = document.getElementById("newFiles");
                    if (formFileInput) formFileInput.value = "";
                    if (newFiles) newFiles.innerHTML = "";

                    // Clear storage after successful upload
                    selectedFileStorage.clear();
                } catch (error) {
                    throw error; // Re-throw to be caught by outer try-catch
                }
            } catch (error) {
                console.error("Failed to save event:", error);
                // Show error message in the button with icon
                submitButton.innerHTML = `
                    <div class="flex items-center gap-2 text-error">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
                            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
                        </svg>
                        <span>Failed</span>
                    </div>
                `;
                await new Promise((resolve) => setTimeout(resolve, 2000));
                // Show detailed error to user
                alert("Failed to save event. Please try again.");
            } finally {
                // Reset button state
                submitButton.disabled = false;
                cancelButton.disabled = false;
                submitButton.innerHTML = originalText;
                window.hideLoading?.();
            }
        });

    // Clear storage when modal is closed
    document.getElementById("editEventModal")?.addEventListener("close", () => {
        selectedFileStorage.clear();
    });

    // Add delete file handler
    window.deleteFile = async function (eventId: string, filename: string) {
        if (!confirm("Are you sure you want to delete this file?")) return;

        try {
            window.showLoading?.();
            const pb = auth.getPocketBase();

            // Get current event data
            const event = await pb.collection("events").getOne(eventId);

            // Filter out the file to delete
            const updatedFiles = event.files.filter(
                (f: string) => f !== filename
            );

            // Update the event with the new files array
            await pb.collection("events").update(eventId, {
                files: updatedFiles,
            });

            await sendLog.send(
                "delete",
                "event_file",
                `Deleted file ${filename} from event ${event.event_name}`
            );

            // Refresh the current files display
            const currentFiles = document.getElementById("currentFiles");
            if (currentFiles && updatedFiles.length > 0) {
                currentFiles.innerHTML = updateFilePreviewButtons(
                    updatedFiles,
                    eventId
                );
            } else if (currentFiles) {
                currentFiles.innerHTML = `
                    <div class="text-center py-4 text-base-content/70">
                        <p>No files attached</p>
                    </div>
                `;
            }
        } catch (error) {
            console.error("Failed to delete file:", error);
            alert("Failed to delete file. Please try again.");
        } finally {
            window.hideLoading?.();
        }
    };
</script>