<script lang="ts">
  // The terminal account-deleted screen. While app.accountDeleted is set, App.svelte renders
  // only this and all push/poll is stopped; the screen makes no network calls. Reopening the
  // app just creates a fresh account. The Close button closes the host Mini App (Telegram /
  // VK); a plain browser has nothing to close, so the button is hidden there.
  import { closeDeletedApp } from '../lib/app.svelte';
  import { insideTelegram } from '../lib/telegram';
  import { insideVK } from '../lib/vk';
  import { t } from '../lib/i18n/index.svelte';

  const canClose = insideTelegram() || insideVK();
</script>

<div class="deleted">
  <div class="card">
    <h1>{t('deleted.title')}</h1>
    <p class="msg">{t('deleted.body')}</p>
    {#if canClose}
      <button class="close" onclick={closeDeletedApp}>{t('common.close')}</button>
    {/if}
  </div>
</div>

<style>
  .deleted {
    height: 100%;
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--bg);
  }
  .card {
    max-width: 28rem;
    text-align: center;
    color: var(--text);
  }
  h1 {
    margin: 0 0 0.75rem;
    font-size: 1.25rem;
  }
  .msg {
    margin: 0;
    color: var(--text-muted);
  }
  .close {
    margin-top: 1.5rem;
    padding: 10px 20px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: var(--radius-sm);
  }
</style>
