<script lang="ts">
  import Header from '../../lib/components/layout/Header.svelte';
  import DiscussionList from '../../lib/modules/discussions/DiscussionList.svelte';
  import UnifiedSearch from '../../lib/components/layout/UnifiedSearch.svelte';
  import { nostrClient } from '../../lib/services/nostr/nostr-client.js';
  import { onMount } from 'svelte';

  let filterResult = $state<{ type: 'event' | 'pubkey' | 'text' | null; value: string | null }>({ type: null, value: null });

  function handleFilterChange(result: { type: 'event' | 'pubkey' | 'text' | null; value: string | null }) {
    filterResult = result;
  }

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

<Header />

<main class="container mx-auto px-4 py-8">
  <div class="discussions-content">
    <div class="discussions-header mb-4">
      <div>
        <h1 class="font-bold mb-6 text-fog-text dark:text-fog-dark-text font-mono" style="font-size: 1.5em;">/Discussions</h1>
        <p class="mb-4 text-fog-text dark:text-fog-dark-text">Decentralized discussion board on Nostr.</p>
      </div>
      <a href="/write?kind=11" class="write-button" title="Write a new thread">
        <span class="emoji emoji-grayscale">✍️</span>
      </a>
    </div>

    <div class="search-section mb-6">
      <UnifiedSearch mode="filter" onFilterChange={handleFilterChange} placeholder="Filter by pubkey, p, q tags, or content..." />
    </div>

    <DiscussionList filterResult={filterResult} />
  </div>
</main>

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

  .discussions-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0 1rem;
    position: sticky;
    top: 0;
    background: var(--fog-bg, #ffffff);
    z-index: 10;
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--fog-border, #e5e7eb);
  }

  :global(.dark) .discussions-header {
    background: var(--fog-dark-bg, #0f172a);
    border-bottom-color: var(--fog-dark-border, #1e293b);
  }

  .search-section {
    padding: 0 1rem;
    display: flex;
    justify-content: flex-start;
    position: sticky;
    top: 0;
    background: var(--fog-bg, #ffffff);
    z-index: 9;
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--fog-border, #e5e7eb);
  }

  :global(.dark) .search-section {
    background: var(--fog-dark-bg, #0f172a);
    border-bottom-color: var(--fog-dark-border, #1e293b);
  }

  .search-section :global(.unified-search-container) {
    max-width: 100%;
    width: 100%;
  }

  .search-section :global(.search-input) {
    max-width: 100%;
    width: 100%;
  }
</style>
