<script lang="ts">
  // Shown on a dedicated Mini App entry (/telegram/ or /vk/) opened without a valid launch — instead of
  // bouncing to the marketing landing (Telegram) or silently proceeding as a guest (VK). It states the
  // problem plainly and renders a compact, privacy-safe diagnostic snapshot (app.launchError, taken at
  // the moment of failure) sized to fit one screenshot, with a Share button (the OS share sheet, or a
  // clipboard copy on desktop) so a stuck user can send it to the developer to pinpoint why the launch
  // carried no sign-in data. The snapshot carries only presence / identification signals and field
  // NAMES, never the signed launch data itself, nor an IP. Retry is shown only where a late-arriving
  // launch can still succeed (Telegram initData); VK delivers its signed parameters in the URL at load,
  // so it offers Share only.
  import { app, retryTelegramLaunch } from '../lib/app.svelte';
  import { shareText } from '../lib/share';
  import { t } from '../lib/i18n/index.svelte';

  const diag = $derived(app.launchError);
  // The title names the platform the entry belongs to; the body and the report are platform-neutral.
  const title = $derived(t(diag?.platform === 'vk' ? 'launch.errorTitleVk' : 'launch.errorTitle'));

  let retrying = $state(false);
  async function retry(): Promise<void> {
    if (retrying) return;
    retrying = true;
    try {
      await retryTelegramLaunch();
    } finally {
      retrying = false;
    }
  }

  let copied = $state(false);
  let copyTimer: ReturnType<typeof setTimeout> | undefined;
  async function share(): Promise<void> {
    if (!diag) return;
    const r = await shareText(diag.report, title);
    // The OS share sheet is its own feedback; a desktop clipboard copy is silent, so confirm it.
    if (r === 'copied') {
      copied = true;
      clearTimeout(copyTimer);
      copyTimer = setTimeout(() => (copied = false), 1500);
    }
  }
</script>

{#if diag}
  <div class="boot">
    <div class="card">
      <h1>{title}</h1>
      <p class="msg">{t('launch.errorBody')}</p>
      <pre class="diag">{diag.report}</pre>
      <div class="actions">
        <button class="share" onclick={share}>{copied ? t('launch.copied') : t('launch.share')}</button>
        {#if diag.retry}
          <button class="retry" onclick={retry} disabled={retrying}>{t('common.retry')}</button>
        {/if}
      </div>
    </div>
  </div>
{/if}

<style>
  .boot {
    height: 100%;
    display: grid;
    place-items: center;
    padding: 16px;
    background: var(--bg);
  }
  .card {
    max-width: 32rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    text-align: center;
    color: var(--text);
  }
  h1 {
    margin: 0;
    font-size: 1.1rem;
  }
  .msg {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
  }
  .diag {
    margin: 0;
    text-align: left;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11px;
    line-height: 1.4;
    color: var(--text);
    background: var(--bg-elev);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
  }
  .actions {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
  }
  .share,
  .retry {
    padding: 8px 16px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--accent);
  }
  .share {
    background: var(--accent);
    color: var(--accent-text);
  }
  .retry {
    background: transparent;
    color: var(--accent);
  }
  .retry:disabled {
    opacity: 0.5;
  }
</style>
