<script lang="ts">
    import {router} from 'svelte-spa-router'
    import {auth} from './lib/stores/auth.svelte'
    import TopBar from './lib/components/TopBar.svelte'
    import BottomNav from './lib/components/BottomNav.svelte'

    import Login from './routes/Login.svelte'
    import Signup from './routes/Signup.svelte'
    import HuntList from './routes/hunter/HuntList.svelte'
    import HuntLobby from './routes/hunter/HuntLobby.svelte'
    import HuntPlay from './routes/hunter/HuntPlay.svelte'
    import Leaderboard from './routes/hunter/Leaderboard.svelte'
    import AdminHome from './routes/admin/AdminHome.svelte'
    import HuntCreate from './routes/admin/HuntCreate.svelte'
    import HuntManage from './routes/admin/HuntManage.svelte'
    import PhotoReview from './routes/admin/PhotoReview.svelte'

    const routes = {
    '/':                               HuntList,
    '/login':                          Login,
    '/signup':                         Signup,
    '/hunt/:huntId':                   HuntLobby,
    '/hunt/:huntId/play':              HuntPlay,
    '/hunt/:huntId/leaderboard':       Leaderboard,
    '/admin':                          AdminHome,
    '/admin/hunt/create':              HuntCreate,
    '/admin/hunt/:huntId':             HuntManage,
    '/admin/hunt/:huntId/review':      PhotoReview,
  }

  const publicRoutes = ['/login', '/signup']
  const isPublicRoute = $derived(publicRoutes.includes(router.location))
  const showShell = $derived(auth.isLoggedIn && !isPublicRoute)
  const showBottomNav = $derived(showShell && !auth.isAdmin)
</script>

<div class="min-h-screen bg-base-200" class:pb-16={showBottomNav}>
  {#if showShell}
    <TopBar />
  {/if}

  <Router {routes} />

  {#if showBottomNav}
    <BottomNav />
  {/if}
</div>
