<script>
  import { initAuth, getLoading, getUser, getNeedsCountry } from './lib/auth/userStore.svelte.js';
  import LoginOverlay from './lib/auth/LoginOverlay.svelte';
  import CountryPicker from './lib/auth/CountryPicker.svelte';
  import Layout from './lib/layout/Layout.svelte';
  import WorldMap from './lib/world-map/WorldMap.svelte';
  import StatsPanel from './lib/world-map/StatsPanel.svelte';
  import TimelineView from './lib/TimelineView.svelte';

  let screen = $state('worldmap');

  function onNavigate(s) {
    screen = s;
  }

  $effect(() => {
    initAuth();
  });

  let loading = $derived(getLoading());
  let user = $derived(getUser());
  let needsCountry = $derived(getNeedsCountry());
</script>

{#if loading}
  <div class="loading-screen">
    <span class="loading-text">Loading...</span>
  </div>
{:else}
  <Layout {screen} {onNavigate}>
    {#if screen === 'worldmap'}
      <div class="worldmap-page">
        <div class="map-area"><WorldMap /></div>
        <StatsPanel />
      </div>
    {:else}
      <TimelineView />
    {/if}
  </Layout>

  {#if !user}
    <LoginOverlay />
  {:else if needsCountry}
    <CountryPicker />
  {/if}
{/if}

<style>
  .loading-screen {
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0f172a;
  }

  .loading-text {
    font: 400 18px/1.4 sans-serif;
    color: #94a3b8;
  }

  .worldmap-page {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: 100%;
  }

  .map-area {
    flex: 1;
    overflow: hidden;
  }
</style>
