<script lang="ts">
  import Header from '../../lib/components/layout/Header.svelte';
  import ThreadList from '../../lib/modules/threads/ThreadList.svelte';
  import CreateThreadForm from '../../lib/modules/threads/CreateThreadForm.svelte';
  import { sessionManager } from '../../lib/services/auth/session-manager.js';
  import { nostrClient } from '../../lib/services/nostr/nostr-client.js';
  import { onMount } from 'svelte';

  let showCreateForm = $state(false);

  onMount(async () => {
    await nostrClient.initialize();
  });
</script>

<Header />

<main class="container mx-auto px-4 py-8">
  <div class="mb-4">
    <h1 class="text-2xl font-bold mb-4 text-fog-text dark:text-fog-dark-text">Threads</h1>
    {#if sessionManager.isLoggedIn()}
      <button
        onclick={() => (showCreateForm = !showCreateForm)}
        class="mb-4 px-4 py-2 bg-fog-accent dark:bg-fog-dark-accent hover:bg-fog-text dark:hover:bg-fog-dark-text text-white transition-colors rounded"
      >
        {showCreateForm ? 'Cancel' : 'Create Thread'}
      </button>
      {#if showCreateForm}
        <CreateThreadForm />
      {/if}
    {/if}
  </div>

  <ThreadList />
</main>

<style>
  main {
    max-width: var(--content-width);
    margin: 0 auto;
  }
</style>
