<script>
  import { onMount } from 'svelte'
  import { api } from './lib/api.js'
  import { currentDate } from './lib/stores.svelte.js'
  import Dashboard from './components/Dashboard.svelte'

  // Every async view handles loading / error / empty states (spec §8.2 rule 4)
  let backend = $state({ loading: true, ok: false, error: null })

  onMount(async () => {
    try {
      await api.health()
      backend = { loading: false, ok: true, error: null }
    } catch (e) {
      backend = { loading: false, ok: false, error: e.message }
    }
  })
</script>

<main>
  <h1>CalCount</h1>

  {#if backend.loading}
    <p>Connecting to backend…</p>
  {:else if backend.error}
    <p role="alert">Backend unreachable: {backend.error}</p>
  {:else}
    <Dashboard date={currentDate.value} />
  {/if}
</main>

<style>
  main {
    max-width: 32rem;
    margin: 0 auto;
    padding: 1rem;
    font-family: system-ui, sans-serif;
  }
</style>
