<script lang="ts">
  // Floating-window content for a task/session — the per-window counterpart
  // to the main Chat page (thread + rail), fully self-contained per
  // sessionId via chat.ts's chatFor()/loadSessionChat()/sendSessionMessage()
  // and workspace.ts's workspaceFor()/startSessionWorkspace(), so several of
  // these can be open (and independently live) at once without the "which
  // one's on screen" guarding the main page's singleton stores need.
  import { onDestroy, onMount } from 'svelte'
  import { Pane, Splitpanes } from 'svelte-splitpanes'
  import { chatFor, loadSessionChat, sendSessionMessage, cancelSessionStream, stopSessionPolling, dismissError, chatErrors } from '$lib/stores/chat'
  import ChatThread from '$lib/components/ChatThread.svelte'
  import TaskContextPanel from '$lib/components/TaskContextPanel.svelte'

  let { sessionId }: { sessionId: string } = $props()

  // Svelte's `$store` auto-subscription only works on a plain identifier
  // bound directly to a store, not a member expression — chatFor() returns
  // an object of stores, so pull each one out into its own identifier here.
  const chat = chatFor(sessionId)
  const chatMessages = chat.messages
  const chatStreaming = chat.streaming
  const chatConnectionState = chat.connectionState
  const chatError = chat.error
  const chatNotFound = chat.notFound
  let loading = $state(true)

  onMount(async () => {
    await loadSessionChat(sessionId)
    loading = false
  })

  onDestroy(() => stopSessionPolling(sessionId))

  // Resizable right rail — sized smaller by default since task windows open
  // narrower than the full page.
  let railSize = $state(24)
</script>

<div class="flex h-full min-h-0">
  {#if loading}
    <div class="flex flex-1 items-center justify-center text-xs text-muted-foreground">Loading…</div>
  {:else if $chatNotFound}
    <div class="flex flex-1 flex-col items-center justify-center gap-1 p-6 text-center">
      <p class="text-sm text-muted-foreground">Task not found.</p>
      <p class="text-xs text-muted-foreground/70">It may have been deleted.</p>
    </div>
  {:else}
    <Splitpanes theme="oikos-theme" dblClickSplitter={false}>
      <Pane>
        <ChatThread
          messages={$chatMessages}
          streaming={$chatStreaming}
          connectionState={$chatConnectionState}
          error={$chatError}
          chatErrors={$chatErrors}
          onSend={(text) => sendSessionMessage(sessionId, text)}
          onCancel={() => cancelSessionStream(sessionId)}
          onReconnect={() => loadSessionChat(sessionId)}
          onDismissError={dismissError}
        />
      </Pane>
      <Pane bind:size={railSize} minSize={18} maxSize={40}>
        <TaskContextPanel {sessionId} />
      </Pane>
    </Splitpanes>
  {/if}
</div>
