---
import { Authentication } from "../../scripts/pocketbase/Authentication";
import { Get } from "../../scripts/pocketbase/Get";
import { toast } from "react-hot-toast";
import EventRequestManagementTable from "./Officer_EventRequestManagement/EventRequestManagementTable";
import type { EventRequest } from "../../schemas/pocketbase";
import { Collections } from "../../schemas/pocketbase/schema";
import { Icon } from "astro-icon/components";

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

// Extended EventRequest interface with additional properties needed for this component
interface ExtendedEventRequest extends EventRequest {
  requested_user_expand?: {
    name: string;
    email: string;
  };
  expand?: {
    requested_user?: {
      id: string;
      name: string;
      email: string;
      [key: string]: any;
    };
    [key: string]: any;
  };
  [key: string]: any; // For other optional properties
}

// Initialize variables for all event requests
let allEventRequests: ExtendedEventRequest[] = [];
let error = null;

try {
  // Don't check authentication here - let the client component handle it
  // The server-side check is causing issues when the token is valid client-side but not server-side

  // console.log("Fetching event requests in Astro component...");
  // Expand the requested_user field to get user details
  allEventRequests = await get
    .getAll<ExtendedEventRequest>(Collections.EVENT_REQUESTS, "", "-created", {
      expand: ["requested_user"],
    })
    .catch((err) => {
      console.error("Error in get.getAll:", err);
      // Return empty array instead of throwing
      return [];
    });

  // console.log(
  //   `Fetched ${allEventRequests.length} event requests in Astro component`,
  // );

  // Process the event requests to add the requested_user_expand property
  allEventRequests = allEventRequests.map((request) => {
    const requestWithExpand = { ...request };

    // Add the requested_user_expand property if the expand data is available
    if (
      request.expand &&
      request.expand.requested_user &&
      request.expand.requested_user.name &&
      request.expand.requested_user.email
    ) {
      requestWithExpand.requested_user_expand = {
        name: request.expand.requested_user.name,
        email: request.expand.requested_user.email,
      };
    }

    return requestWithExpand;
  });
} catch (err) {
  console.error("Error fetching event requests:", err);
  error = err;
}
---

<div class="w-full max-w-7xl mx-auto py-8 px-4">
  <style>
    .event-table-container {
      min-height: 600px;
      height: auto !important;
      max-height: none !important;
    }
    .event-table-container table {
      height: auto !important;
    }
    .event-table-container .overflow-x-auto {
      max-height: none !important;
    }
  </style>

  <div class="mb-8">
    <h1 class="text-3xl font-bold text-white mb-2">Event Request Management</h1>
    <p class="text-gray-300 mb-4">
      Review and manage event requests submitted by officers. Update status and
      coordinate with the team.
    </p>
    <div class="bg-base-300/50 p-4 rounded-lg text-sm text-gray-300">
      <p class="font-medium mb-2">As an executive officer, you can:</p>
      <ul class="list-disc list-inside space-y-1 ml-2">
        <li>View all submitted event requests</li>
        <li>Update the status of requests (Pending, Completed, Declined)</li>
        <li>Filter and sort requests by various criteria</li>
      </ul>
    </div>
  </div>

  {
    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 && (
      <div class="bg-base-200 rounded-lg shadow-xl min-h-[600px] event-table-container">
        <div class="p-4 md:p-6 h-auto">
          <EventRequestManagementTable
            client:load
            eventRequests={allEventRequests}
          />
        </div>
      </div>
    )
  }
</div>

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

  // Remove the visibilitychange event listener that causes full page refresh
  // Instead, we'll use a more efficient approach to refresh data only when needed
  document.addEventListener("visibilitychange", () => {
    if (document.visibilityState === "visible") {
      // Instead of reloading the entire page, dispatch a custom event
      // that components can listen for to refresh their data
      document.dispatchEvent(new CustomEvent("dashboardTabVisible"));
    }
  });

  // Handle authentication errors
  document.addEventListener("DOMContentLoaded", async () => {
    // Initialize DataSyncService for client-side
    const dataSync = DataSyncService.getInstance();

    // Prefetch data into IndexedDB
    try {
      await dataSync.syncCollection(
        Collections.EVENT_REQUESTS,
        "",
        "-created",
        { expand: "requested_user" },
      );
      // console.log("Initial data sync complete");
    } catch (err) {
      // console.error("Error during initial data sync:", err);
    }

    // Check for error message in the UI
    const errorElement = document.querySelector(".alert-error span");
    if (
      errorElement &&
      errorElement.textContent?.includes("Authentication error")
    ) {
      // console.log(
      //   "Authentication error detected in UI, redirecting to login...",
      // );
      // Redirect to login page after a short delay
      setTimeout(() => {
        window.location.href = "/login";
      }, 3000);
      return;
    }

    // Also check if we have any event requests
    const tableContainer = document.querySelector(".event-table-container");
    if (tableContainer) {
      // console.log(
      //   "Event table container found, component should load normally",
      // );
    } else {
      // console.log(
      //   "Event table container not found, might be an issue with rendering",
      // );
    }
  });
</script>
