<script lang="ts">
  import { onMount, onDestroy, setContext } from "svelte";
  import { goto } from "$app/navigation";
  import { isAuthenticated, isLoading as isAuthLoading } from "$lib/stores/auth";
  import { useScrollGuard } from "$lib/composables/useScrollGuard";
  import AppHeader from "$lib/components/AppHeader.svelte";
  import BottomUi from "$lib/components/BottomUi.svelte";
  import SleepTimerModal from "$lib/components/player/SleepTimerModal.svelte";

  // Scroll guard prevents accidental taps on library cards during/after scrolling (Android)
  const scrollGuard = useScrollGuard(300);
  setContext("scrollGuard", scrollGuard);

  let { children } = $props();

  let showSleepTimerModal = $state(false);

  onMount(() => {
    return () => {
      scrollGuard.cleanup();
    };
  });

  // Redirect to login if not authenticated
  $effect(() => {
    if (!$isAuthLoading && !$isAuthenticated) {
      goto("/");
    }
  });

  // Search lives in AppHeader (see HeaderSearch.svelte) so the same bar renders
  // here and on /search — this layout no longer owns any search state.
</script>

{#if $isAuthLoading}
  <div class="min-h-full flex items-center justify-center">
    <div class="w-8 h-8 border-2 border-[var(--color-jellyfin)] border-t-transparent rounded-full animate-spin"></div>
  </div>
{:else if $isAuthenticated}
  <div class="h-full flex flex-col overflow-hidden">
    <!-- Header (shared across all authenticated chrome; it owns the search bar) -->
    <AppHeader />

    <!-- Main content. The BottomUi below is an in-flow flex sibling, so this
         scroller is physically bounded above it and its last row can never
         render behind the nav — no measurement, no reserved padding. -->
    <main
      class="flex-1 overflow-y-auto p-4 min-h-0"
      style="overscroll-behavior: contain"
      onscroll={scrollGuard.onScroll}
    >
      {@render children()}
    </main>

    <!-- Bottom UI (mini player + nav), in-flow below the scroller. -->
    <BottomUi />

    <!-- Sleep Timer Modal -->
    <SleepTimerModal
      isOpen={showSleepTimerModal}
      onClose={() => showSleepTimerModal = false}
    />
  </div>
{/if}
