<script lang="ts">
  // The soft "update available" nudge (the soft version tier). A non-blocking banner: play continues.
  // Shown only while online — the hard "update required" notice is an offline state, so it naturally
  // supersedes this — and only until the user dismisses it for the session. Rendered at the bottom of
  // the lobby (above the tab bar), so it never covers a game in progress.
  import { netState } from '../lib/netstate.svelte';
  import { updateRecommended, dismissUpdateNudge, openUpdate } from '../lib/update.svelte';
  import { t } from '../lib/i18n/index.svelte';

  const show = $derived(netState.online && updateRecommended.active && !updateRecommended.dismissed);
</script>

{#if show}
  <div class="nudge" role="status">
    <span class="msg">{t('update.available')}</span>
    <button class="upd" type="button" onclick={openUpdate}>{t('update.action')}</button>
    <button class="x" type="button" onclick={dismissUpdateNudge} aria-label={t('common.close')}>×</button>
  </div>
{/if}

<style>
  .nudge {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.9rem;
    border-top: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font-size: 0.9rem;
  }
  .msg {
    flex: 1 1 auto;
    min-width: 0;
  }
  .upd {
    flex: 0 0 auto;
    font: inherit;
    padding: 0.3rem 0.8rem;
    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--accent-text);
    cursor: pointer;
  }
  .x {
    flex: 0 0 auto;
    font-size: 1.2rem;
    line-height: 1;
    padding: 0.2rem 0.4rem;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
  }
</style>
