<script lang="ts">
  import Screen from '../components/Screen.svelte';
  import { app, logout } from '../lib/app.svelte';
  import { t } from '../lib/i18n/index.svelte';
</script>

<Screen title={t('profile.title')} back="/">
  <div class="page">
    {#if app.profile}
      <div class="name">{app.profile.displayName}</div>
      {#if app.profile.isGuest}<span class="badge">{t('profile.guest')}</span>{/if}
      <dl>
        <dt>{t('profile.language')}</dt>
        <dd>{app.profile.preferredLanguage}</dd>
        <dt>{t('profile.timezone')}</dt>
        <dd>{app.profile.timeZone}</dd>
        <dt>{t('profile.hintBalance')}</dt>
        <dd>{app.profile.hintBalance}</dd>
      </dl>
      <p class="muted">{t('profile.readonly')}</p>
      <button class="logout" onclick={() => logout()}>{t('login.title')} / logout</button>
    {/if}
  </div>
</Screen>

<style>
  .page {
    padding: var(--pad);
  }
  .name {
    font-size: 1.4rem;
    font-weight: 700;
  }
  .badge {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-muted);
    font-size: 0.8rem;
  }
  dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 16px;
    margin: 20px 0;
  }
  dt {
    color: var(--text-muted);
  }
  dd {
    margin: 0;
    text-align: right;
  }
  .muted {
    color: var(--text-muted);
    font-size: 0.9rem;
  }
  .logout {
    margin-top: 16px;
    padding: 8px 14px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius-sm);
  }
</style>
