<!-- #region MaintenanceBannerPage [C:3] [TYPE Page] [SEMANTICS sveltekit, maintenance, settings, events, admin] -->
<!-- @ingroup Routes -->
<!-- @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";
  import { Skeleton } from "$lib/ui";

  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-text">
      {$t.maintenance?.title || "Maintenance Banners"}
    </h1>
    <button
      onclick={() => maintenanceStore.loadEvents()}
      disabled={pageLoading}
      class="inline-flex items-center justify-center rounded-lg border border-border-strong bg-surface-card px-4 py-2 text-sm font-medium text-text hover:bg-surface-muted disabled:opacity-50"
    >
      {$t.common?.refresh || "Refresh"}
    </button>
  </div>

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

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

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