<script lang="ts">
  import Screen from '../components/Screen.svelte';
  import TabBar from '../components/TabBar.svelte';
  import Settings from './Settings.svelte';
  import Profile from './Profile.svelte';
  import Friends from './Friends.svelte';
  import About from './About.svelte';
  import { app } from '../lib/app.svelte';
  import { t, type MessageKey } from '../lib/i18n/index.svelte';

  // The Settings hub: a single nav bar + bottom tab bar hosting the Settings / Profile /
  // Friends / About bodies. Tabs switch in place (no navigation), so the back control
  // always returns to the lobby. Guests have no social surface, so the Friends tab hides.
  type SettingsTab = 'settings' | 'profile' | 'friends' | 'about';
  let { initialTab = 'settings' }: { initialTab?: SettingsTab } = $props();

  const guest = $derived(app.profile?.isGuest ?? true);
  // The active tab is seeded once from the entry route's tab and then owned locally;
  // the hub is keyed by route in App.svelte, so initialTab is constant for its lifetime.
  // svelte-ignore state_referenced_locally
  let tab = $state<SettingsTab>(initialTab);
  // A guest who deep-links to the Friends tab falls back to Settings.
  $effect(() => {
    if (guest && tab === 'friends') tab = 'settings';
  });

  const titleKey: Record<SettingsTab, MessageKey> = {
    settings: 'settings.title',
    profile: 'profile.title',
    friends: 'friends.title',
    about: 'about.title',
  };
</script>

<Screen title={t(titleKey[tab])} back="/">
  {#if tab === 'settings'}
    <Settings />
  {:else if tab === 'profile'}
    <Profile />
  {:else if tab === 'friends'}
    <Friends />
  {:else}
    <About />
  {/if}

  {#snippet tabbar()}
    <TabBar>
      <button class="tab" class:active={tab === 'settings'} onclick={() => (tab = 'settings')} aria-label={t('settings.title')}>
        <span class="sq">⚙️</span>
      </button>
      <button class="tab" class:active={tab === 'profile'} onclick={() => (tab = 'profile')} aria-label={t('profile.title')}>
        <span class="sq">👤</span>
      </button>
      {#if !guest}
        <button class="tab" class:active={tab === 'friends'} onclick={() => (tab = 'friends')} aria-label={t('friends.title')}>
          <span class="sq">🤝{#if app.notifications > 0}<span class="badge">{app.notifications}</span>{/if}</span>
        </button>
      {/if}
      <button class="tab" class:active={tab === 'about'} onclick={() => (tab = 'about')} aria-label={t('about.title')}>
        <span class="sq">ℹ️</span>
      </button>
    </TabBar>
  {/snippet}
</Screen>
