<script lang="ts">
  import { messages, streaming, connectionState, sendMessage, cancelStream, reconnect, error, chatErrors, dismissError } from '$lib/stores/chat'
  import ChatThread from '$lib/components/ChatThread.svelte'
  import TaskContextPanel from '$lib/components/TaskContextPanel.svelte'

  let { showRail = true }: { showRail?: boolean } = $props()

  // Resizable right rail (session graph). Persisted so it survives reloads.
  const RAIL_MIN = 260
  const RAIL_MAX = 620
  function loadRailWidth(): number {
    if (typeof localStorage === 'undefined') return 320
    const v = Number(localStorage.getItem('oikos-rail-width'))
    return v >= RAIL_MIN && v <= RAIL_MAX ? v : 320
  }
  let railWidth = $state(loadRailWidth())
  let resizing = $state(false)

  function startResize(e: PointerEvent) {
    e.preventDefault()
    resizing = true
    const startX = e.clientX
    const startW = railWidth
    function move(ev: PointerEvent) {
      railWidth = Math.min(RAIL_MAX, Math.max(RAIL_MIN, startW + (startX - ev.clientX)))
    }
    function up() {
      resizing = false
      localStorage.setItem('oikos-rail-width', String(railWidth))
      window.removeEventListener('pointermove', move)
      window.removeEventListener('pointerup', up)
    }
    window.addEventListener('pointermove', move)
    window.addEventListener('pointerup', up)
  }

  const suggestions = [
    'What needs my attention right now?',
    'Summarize fleet health',
    'Any pending approvals or open signals?',
    'What changed in the last hour?'
  ]
</script>

<div class="flex h-full min-h-0">
  <ChatThread
    messages={$messages}
    streaming={$streaming}
    connectionState={$connectionState}
    error={$error}
    chatErrors={$chatErrors}
    onSend={sendMessage}
    onCancel={cancelStream}
    onReconnect={reconnect}
    onDismissError={dismissError}
    {suggestions}
  />

  {#if showRail}
    <div class="hidden shrink-0 xl:flex" style="width: {railWidth}px">
      <button
        type="button"
        class="group/rz relative w-1.5 shrink-0 cursor-col-resize touch-none"
        onpointerdown={startResize}
        aria-label="Resize task panel"
      >
        <span
          class="absolute inset-y-0 left-1/2 w-px -translate-x-1/2 transition-colors {resizing
            ? 'bg-primary/60'
            : 'bg-border group-hover/rz:bg-primary/50'}"
        ></span>
      </button>
      <div class="flex min-w-0 flex-1 flex-col">
        <TaskContextPanel />
      </div>
    </div>
  {/if}
</div>
