<script>
  import { liveQuery } from 'dexie'
  import { db } from '../db.js'

  let { session } = $props()

  const attendees = liveQuery(() => db.attendees.toArray())
  const event = liveQuery(() => db.event.get(1))

  const total = $derived(($attendees ?? []).length)
  const checkedIn = $derived(($attendees ?? []).filter(a => a.checked_in).length)
  const remaining = $derived(total - checkedIn)
  const pct = $derived(total > 0 ? Math.round((checkedIn / total) * 100) : 0)
</script>

<div class="page">
  <div class="page-header">
    <h1 class="page-title">{$event?.name ?? 'Event'}</h1>
    {#if $event?.venue}
      <span class="text-muted">{$event.venue}</span>
    {/if}
  </div>

  {#if $event?.start_date}
    <p class="text-muted" style="margin-bottom:1.5rem">
      {$event.start_date}{$event.end_date !== $event.start_date ? ` – ${$event.end_date}` : ''}
      {#if $event.timezone} · {$event.timezone}{/if}
    </p>
  {/if}

  <div class="stats">
    <div class="stat">
      <div class="stat-label">Total</div>
      <div class="stat-value">{total}</div>
    </div>
    <div class="stat">
      <div class="stat-label">Checked in</div>
      <div class="stat-value" style="color:var(--c-success)">{checkedIn}</div>
    </div>
    <div class="stat">
      <div class="stat-label">Remaining</div>
      <div class="stat-value">{remaining}</div>
    </div>
    <div class="stat">
      <div class="stat-label">Progress</div>
      <div class="stat-value">{pct}%</div>
    </div>
  </div>

  {#if total > 0}
    <div class="card" style="margin-bottom:1rem">
      <div style="height:8px;background:var(--c-border);border-radius:99px;overflow:hidden">
        <div style="height:100%;width:{pct}%;background:var(--c-success);border-radius:99px;transition:width 0.4s ease"></div>
      </div>
    </div>
  {/if}

  <p class="text-muted" style="font-size:0.85rem">
    Welcome, <strong style="color:var(--c-text)">{session?.user?.username}</strong>
    · <span class="badge badge-role">{session?.user?.role}</span>
  </p>
</div>
