<!--
  BottomUi — the app's bottom UI (mini player stacked over the bottom nav).

  Rendered as an IN-FLOW flex child at the bottom of a full-height flex column,
  NOT a fixed overlay. This is the whole point: because it is a normal flex
  sibling below the scroll container (which is `flex-1 min-h-0 overflow-y-auto`),
  the scroller is physically bounded above it and can never render behind it.

  This replaces the old ResizeObserver + `bottomUiHeight` + padding-reservation
  scheme, which started at 0, updated async, and repeatedly regressed into the
  "last row hidden behind the nav" bug. There is nothing to measure or reserve:
  the browser's flex layout does it exactly, every frame.

  The Android navigation/gesture bar is cleared via `--safe-bottom` (see
  app.css). The padding sits INSIDE this element's `bg-surface` box on purpose,
  so the surface colour extends behind the gesture bar instead of leaving a
  strip of page background under the nav.

  Never pad from a bare CSS `env()` safe-area value here: Android WebView does
  not report the system bars that way, so it is always 0 and the nav ends up
  under the navigation bar (UR-066).

  TRACES: UR-005, UR-066 | DR-009, DR-112
-->
<script lang="ts">
  import { goto } from "$app/navigation";
  import { currentMedia, isPlaying, playbackPosition, playbackDuration } from "$lib/stores/player";
  import { isShuffle, repeatMode, hasNext, hasPrevious } from "$lib/stores/queue";
  import { showSleepTimerModal } from "$lib/stores/appState";
  import MiniPlayer from "$lib/components/player/MiniPlayer.svelte";
  import BottomNav from "$lib/components/BottomNav.svelte";

  let {
    showMiniPlayer = true,
    showNav = true,
    onExpand,
  }: {
    showMiniPlayer?: boolean;
    showNav?: boolean;
    // Where "expand mini player" goes. Defaults to the full player route.
    onExpand?: () => void;
  } = $props();

  function expand() {
    if (onExpand) return onExpand();
    if ($currentMedia) goto(`/player/${$currentMedia.id}`);
  }
</script>

<!-- flex-shrink-0 so it keeps its natural height; the scroller sibling flexes. -->
<div class="flex-shrink-0 pb-[var(--safe-bottom)] bg-[var(--color-surface)]">
  {#if showMiniPlayer}
    <MiniPlayer
      media={$currentMedia}
      isPlaying={$isPlaying}
      position={$playbackPosition}
      duration={$playbackDuration}
      shuffle={$isShuffle}
      repeat={$repeatMode}
      hasNext={$hasNext}
      hasPrevious={$hasPrevious}
      className="flex-shrink-0"
      onExpand={expand}
      onSleepTimerClick={() => showSleepTimerModal.set(true)}
    />
  {/if}

  {#if showNav}
    <BottomNav className="flex-shrink-0" />
  {/if}
</div>
