<script lang="ts">
  // "What should Nomos do?" — the desktop's centerpiece. Extracted from the
  // old Overview page hero so both the desktop surface and the Tasks app
  // window can mount it; startTask() (see $lib/stores/chat.ts) begins the
  // stream immediately and hands back the session id once the backend
  // assigns one, which is the earliest point a task window can be opened.
  import { startTask } from '$lib/stores/chat'
  import { openTaskWindow } from '$lib/stores/windows'
  import { truncateMiddle } from '$lib/utils'
  import { Textarea } from '$lib/components/ui/textarea'
  import { Button } from '$lib/components/ui/button'
  import ArrowUpIcon from '@lucide/svelte/icons/arrow-up'

  let { compact = false, onStarted }: { compact?: boolean; onStarted?: () => void } = $props()

  let input = $state('')

  function submit() {
    const text = input.trim()
    if (!text) return
    input = ''
    startTask(text, (sessionId) => openTaskWindow(sessionId, truncateMiddle(text, 60)))
    onStarted?.()
  }

  function handleKeydown(e: KeyboardEvent) {
    if (e.key === 'Enter' && !e.shiftKey) {
      e.preventDefault()
      submit()
    }
  }
</script>

<div class="w-full max-w-2xl text-center">
  {#if !compact}
    <h1 class="mb-1 text-2xl font-semibold tracking-tight">What should Nomos do?</h1>
    <p class="mb-4 text-sm text-muted-foreground">
      Describe a goal — Nomos will plan it, execute it, and report the outcome.
    </p>
  {/if}
  <form
    class="relative rounded-2xl border bg-card/70 shadow-lg backdrop-blur focus-within:border-primary/60"
    onsubmit={(e) => {
      e.preventDefault()
      submit()
    }}
  >
    <Textarea
      bind:value={input}
      onkeydown={handleKeydown}
      placeholder="e.g. Roll the staging database back to last night's snapshot and verify the app is healthy…"
      rows={compact ? 2 : 3}
      class="max-h-52 min-h-24 resize-none field-sizing-fixed border-0 bg-transparent px-4 py-3.5 text-base shadow-none focus-visible:ring-0"
    />
    <div class="flex items-center justify-between px-3 pb-3">
      <span class="text-[11px] text-muted-foreground">Enter to start · Shift+Enter for newline</span>
      <Button type="submit" size="icon" disabled={!input.trim()} aria-label="Start task">
        <ArrowUpIcon />
      </Button>
    </div>
  </form>
</div>
