<!-- #region MaintenanceBannerPage [C:3] [TYPE Page] [SEMANTICS sveltekit, maintenance, settings, events, admin] -->
<!-- @BRIEF Maintenance Banners management page. Composes SettingsPanel and EventsTable from store. -->
<!-- @LAYER Page -->
<!-- @RELATION DEPENDS_ON -> [MaintenanceStore] -->
<!-- @RELATION DEPENDS_ON -> [EXT:frontend:MaintenanceSettingsPanel] -->
<!-- @RELATION DEPENDS_ON -> [EXT:frontend:MaintenanceEventsTable] -->
<!-- @UX_STATE Loading -> Skeleton shown. -->
<!-- @UX_STATE idle -> Full page with settings panel + events table. -->
<!-- @UX_STATE Error -> Error toast shown. -->
<!-- @UX_FEEDBACK Toast via addToast() from $lib/toasts.js -->
<!-- @UX_RECOVERY Refresh via maintenanceStore.loadEvents(). -->
<script lang="ts">
  import { onMount, onDestroy } from "svelte";
  import { maintenanceStore } from "$lib/stores/maintenance.svelte.js";
  import MaintenanceSettingsPanel from "$lib/components/MaintenanceSettingsPanel.svelte";
  import MaintenanceEventsTable from "$lib/components/MaintenanceEventsTable.svelte";
  import StartMaintenanceForm from "$lib/components/StartMaintenanceForm.svelte";
  import { t } from "$lib/i18n/index.svelte.js";

  let pageLoading = $state(true);

  onMount(async () => {
    try {
      await maintenanceStore.init();
    } catch {
      // Error handled by store
    } finally {
      pageLoading = false;
    }
  });

  onDestroy(() => {
    maintenanceStore.disconnectWs();
  });
</script>

<div class="max-w-7xl mx-auto px-4 py-6 space-y-6">
  <!-- Page Header -->
  <div class="flex items-center justify-between">
    <h1 class="text-2xl font-bold text-gray-900">
      {$t.maintenance?.title || "Maintenance Banners"}
    </h1>
    <button
      onclick={() => maintenanceStore.loadEvents()}
      disabled={pageLoading}
      class="inline-flex items-center justify-center rounded-lg border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50"
    >
      {$t.common?.refresh || "Refresh"}
    </button>
  </div>

  {#if pageLoading}
    <!-- Loading skeleton -->
    <div class="space-y-6">
      <div class="rounded-lg border border-gray-200 bg-white p-4">
        <div class="animate-pulse bg-gray-200 h-6 w-40 rounded mb-4"></div>
        <div class="grid grid-cols-2 gap-4">
          <div class="animate-pulse bg-gray-200 h-10 rounded"></div>
          <div class="animate-pulse bg-gray-200 h-10 rounded"></div>
        </div>
        <div class="mt-4 animate-pulse bg-gray-200 h-20 rounded"></div>
      </div>
      <div class="border border-gray-200 rounded-lg overflow-hidden">
        <div class="animate-pulse bg-gray-200 h-8 w-full"></div>
        {#each [1, 2, 3] as _, i (i)}
          <div class="animate-pulse bg-gray-100 h-12 w-full border-t border-gray-200"></div>
        {/each}
      </div>
    </div>
  {:else}
    <!-- Start Maintenance Form -->
    <StartMaintenanceForm onSuccess={() => maintenanceStore.loadEvents()} />

    <!-- Settings Panel -->
    <MaintenanceSettingsPanel />

    <!-- Events Table -->
    <MaintenanceEventsTable />
  {/if}
</div>
<!-- #endregion MaintenanceBannerPage -->
