<script lang="ts">
  import { page, navigating } from '$app/stores';
  import '../styles/app.scss';
  import Spinner from '$lib/Spinner.svelte';
  import type { Snippet } from 'svelte';
  let { children }: { children: Snippet } = $props();

  // Resolve active path optimistically — use the destination during navigation
  // so the nav link highlights immediately on click, not after load completes.
  const activePath = $derived($navigating?.to?.url?.pathname ?? $page.url.pathname);

  const navLabel = $derived(
    activePath === '/portfolio'         ? 'Loading portfolio…' :
    activePath?.startsWith('/calls')    ? 'Loading market calls…' :
    activePath === '/safe-buys'         ? 'Screening safe buys…' :
    'Loading…'
  );
</script>

<div class="shell">
  <nav>
    <span class="brand">📊 Market Screener</span>
    <div class="links">
      <a href="/" class:active={activePath === '/'}>Screener</a>
      <a href="/portfolio" class:active={activePath === '/portfolio'}>Portfolio</a>
      <a href="/calls" class:active={activePath?.startsWith('/calls')}>Market Calls</a>
      <a href="/safe-buys" class:active={activePath === '/safe-buys'}>🛡 Safe Buys</a>
    </div>
  </nav>

  <!-- Thin progress bar at top of screen — always visible even on first nav -->
  {#if $navigating}
    <div class="nav-progress">
      <div class="nav-bar"></div>
    </div>
  {/if}

  <main>
    {#if $navigating}
      <!-- Replace old page content immediately — old page disappears, spinner takes over -->
      <div class="nav-overlay">
        <Spinner size="lg" label={navLabel} />
      </div>
    {:else}
      {@render children()}
    {/if}
  </main>
</div>

<!-- All layout styles live in src/styles/_layout.css (global) -->
