---
import { Authentication } from "../../scripts/pocketbase/Authentication";
import { Get } from "../../scripts/pocketbase/Get";
import EventRequestForm from "./Officer_EventRequestForm/EventRequestForm";
import UserEventRequests from "./Officer_EventRequestForm/UserEventRequests";
import { Collections } from "../../schemas/pocketbase/schema";

// Import the EventRequest type from UserEventRequests to ensure consistency
import type { EventRequest as UserEventRequest } from "./Officer_EventRequestForm/UserEventRequests";

// Use the imported type
type EventRequest = UserEventRequest;

// Get instances
const get = Get.getInstance();
const auth = Authentication.getInstance();

// Initialize variables for user's submissions
let userEventRequests: EventRequest[] = [];
let error: string | null = null;

// Fetch user's event request submissions if authenticated
// This provides initial data for server-side rendering
// Client-side will use IndexedDB for data management
if (auth.isAuthenticated()) {
    try {
        const userId = auth.getUserId();
        if (userId) {
            userEventRequests = await get.getAll<EventRequest>(
                Collections.EVENT_REQUESTS,
                `requested_user="${userId}"`,
                "-created"
            );
        }
    } catch (err) {
        console.error("Failed to fetch user event requests:", err);
        error = "Failed to load your event requests. Please try again later.";
    }
}
---

<div class="w-full max-w-6xl mx-auto py-8 px-4">
    <div class="mb-8">
        <h1 class="text-3xl font-bold text-white mb-2">Event Request Form</h1>
        <p class="text-gray-300 mb-4">
            Submit your event request at least 6 weeks before your event. After
            submitting, please notify PR and/or Coordinators in the #-events
            Slack channel.
        </p>
        <div class="bg-base-300/50 p-4 rounded-lg text-sm text-gray-300">
            <p class="font-medium mb-2">This form includes sections for:</p>
            <ul class="list-disc list-inside space-y-1 ml-2">
                <li>PR Materials (if needed)</li>
                <li>Event Details</li>
                <li>TAP Form Information</li>
                <li>AS Funding (if needed)</li>
            </ul>
            <p class="mt-3">
                Your progress is automatically saved as you fill out the form.
            </p>
        </div>
    </div>

    <!-- Tabs -->
    <div class="tabs tabs-boxed mb-6">
        <a class="tab tab-lg tab-active" id="form-tab">Submit Event Request</a>
        <a class="tab tab-lg" id="submissions-tab">View Your Submissions</a>
    </div>

    <!-- Form Tab Content -->
    <div
        id="form-content"
        class="bg-base-200 rounded-lg shadow-xl overflow-hidden"
    >
        <div class="p-6">
            <EventRequestForm client:load />
        </div>
    </div>

    <!-- Submissions Tab Content -->
    <div id="submissions-content" class="hidden">
        <div class="bg-base-200 rounded-lg shadow-xl overflow-hidden p-6">
            <h2 class="text-2xl font-bold text-white mb-4">
                Your Event Request Submissions
            </h2>

            {
                error && (
                    <div class="alert alert-error mb-6">
                        <svg
                            xmlns="http://www.w3.org/2000/svg"
                            class="h-6 w-6 stroke-current shrink-0"
                            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>{error}</span>
                    </div>
                )
            }

            {
                !error && (
                    <UserEventRequests
                        client:load
                        eventRequests={userEventRequests}
                    />
                )
            }
        </div>
    </div>
</div>

<div class="dashboard-section hidden" id="eventRequestFormSection">
    <!-- ... existing code ... -->
</div>

<script>
    // Import the DataSyncService for client-side use
    import { DataSyncService } from "../../scripts/database/DataSyncService";
    import { Collections } from "../../schemas/pocketbase/schema";
    import { Authentication } from "../../scripts/pocketbase/Authentication";

    // Tab switching logic
    document.addEventListener("DOMContentLoaded", async () => {
        // Initialize DataSyncService for client-side
        const dataSync = DataSyncService.getInstance();
        const auth = Authentication.getInstance();

        // Prefetch data into IndexedDB if authenticated
        if (auth.isAuthenticated()) {
            try {
                const userId = auth.getUserId();
                if (userId) {
                    // Force sync to ensure we have the latest data
                    await dataSync.syncCollection(
                        Collections.EVENT_REQUESTS,
                        `requested_user="${userId}"`,
                        "-created"
                    );
                    console.log(
                        "Initial data sync complete for user event requests"
                    );
                }
            } catch (err) {
                console.error("Error during initial data sync:", err);
            }
        }

        const formTab = document.getElementById("form-tab");
        const submissionsTab = document.getElementById("submissions-tab");
        const formContent = document.getElementById("form-content");
        const submissionsContent = document.getElementById(
            "submissions-content"
        );

        // Function to switch tabs
        const switchTab = (
            activeTab: HTMLElement,
            activeContent: HTMLElement,
            inactiveTab: HTMLElement,
            inactiveContent: HTMLElement
        ) => {
            // Update tab classes
            activeTab.classList.add("tab-active");
            inactiveTab.classList.remove("tab-active");

            // Show/hide content
            activeContent.classList.remove("hidden");
            inactiveContent.classList.add("hidden");

            // Dispatch event to refresh submissions when switching to submissions tab
            if (activeTab.id === "submissions-tab") {
                // Dispatch a custom event that the UserEventRequests component listens for
                document.dispatchEvent(new CustomEvent("dashboardTabVisible"));
            }
        };

        // Add click event listeners to tabs
        formTab?.addEventListener("click", (e) => {
            e.preventDefault();
            if (formContent && submissionsContent && submissionsTab) {
                switchTab(
                    formTab,
                    formContent,
                    submissionsTab,
                    submissionsContent
                );
            }
        });

        submissionsTab?.addEventListener("click", (e) => {
            e.preventDefault();
            if (formContent && submissionsContent && formTab) {
                switchTab(
                    submissionsTab,
                    submissionsContent,
                    formTab,
                    formContent
                );
            }
        });

        // Listen for visibility changes
        document.addEventListener("visibilitychange", () => {
            if (document.visibilityState === "visible") {
                // Dispatch custom event that components can listen for
                document.dispatchEvent(new CustomEvent("dashboardTabVisible"));
            }
        });
    });
</script>