ostrakon

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const below = await next(e)
    if (e.props.hasSurvey) return below
    const el = $.ui.resolve(e) as Elements['terminal']
    const { Box } = el
    const columns = e.props.bodyColumns
    const run = (work: Promise<unknown>) => {
      work.catch(error => reportStorage($, error))
    }
    const proposals = await proposalsOf($)
    const opener = openerOf(project.name)
    const look = { isWorking: e.props.isWorking, fresh: await read($, fresh) }
    const handlers: BandHandlers = {
      chip: (n, id) => run(serially(() => pocketChip($, n, id))),
      keep: id => run(serially(() => keep($, [id]))),
      keepAll: ids => run(serially(() => keep($, ids))),
      open: () => serially(() => openPane($, 'browse')).catch(error => reportStorage($, error)),
    }
    let row: JSX.Element
    if (proposals.length > 0) {
      const hasHint = (await read($, harvest))?.turnId === (await read($, harvestHint))
      row = (
        <HarvestRow
          el={el}
          proposals={proposals}
          harvest={harvestOf(proposals, columns, opener)}
          look={look}
          hasHint={hasHint}
          columns={columns}
          handlers={handlers}
        />
      )
    } else {
      const all = pocketOptions.isOn ? Object.values(await read($, notes)) : []
      row = <PocketRow el={el} pocket={pocketOf(all, project.key, pocketOptions.max, columns, opener)} opener={opener} look={look} handlers={handlers} />
    }
    return (
      <Box flexDirection='column'>
        {below}
        {row}
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    geometry.bodyRows = e.props.scroll.bodyRows
    geometry.width = Math.max(20, e.props.bodyColumns - 1)
    geometry.isInline = e.props.placement === 'inline'
    geometry.isFocused = e.props.isFocused
    const el = $.ui.resolve(e) as Elements['terminal']
    const view = await viewOf($)
    const run = (work: Promise<unknown>) => {
      work.catch(error => reportStorage($, error))
    }
    // Typing goes straight to state; everything else waits its turn (serially).
    const handlers: Handlers = {
      action: action => run(serially(() => act($, action))),
      digit: n => run(serially(() => digit($, n))),
      pressSlot: slot => run(serially(() => pressSlot($, slot))),
      searchInput: value => run(searchInput($, value)),
      searchSubmit: value => run(serially(() => searchSubmit($, value))),
      captureInput: value => run(setPane($, state => ({ ...state, capture: { ...state.capture, draft: value } }))),
      captureSubmit: value => run(serially(() => captureSubmit($, value))),
      editInput: value => run(setPane($, state => ({ ...state, edit: state.edit ? { ...state.edit, draft: value } : null }))),
      editSubmit: value => run(serially(() => editSubmit($, value))),
      editCancel: () => run(serially(() => act($, 'back'))),
      moveTo: value => run(serially(() => moveTo($, value))),
    }
    return <Pane el={el} view={view} handlers={handlers} hasHub={hubOptions.url !== ''} hasHarvest={false} bundleRows={view.bundleRows} />
  })

export const Pane = ({
  el,
  view,
  handlers,
  hasHub,
  hasHarvest,
  bundleRows,
}: {
  el: E
  view: PaneView
  handlers: Handlers
  hasHub: boolean
  hasHarvest: boolean
  bundleRows: number
}) => {
  const { Box } = el
  const { pane } = view
  const hasNotes = view.lines.some(line => line.kind !== 'group')
  const body = () => {
    if (pane.mode === 'capture') return <Capture el={el} view={view} />
    if (pane.mode === 'bundle') return <Bundle el={el} view={view} handlers={handlers} rows={bundleRows} />
    // A storage problem's row stays above the no-match line.
    if (isNoMatch(view)) return [view.lines.length > 0 && <Rows el={el} view={view} handlers={handlers} />, <NoMatch el={el} view={view} />]
    if (view.lines.length === 0 && pane.query.trim() === '') return <Empty el={el} view={view} hasHub={hasHub} hasHarvest={hasHarvest} />
    return <Rows el={el} view={view} handlers={handlers} />
  }
  const showPreview = hasPreview(view) && (pane.mode === 'browse' || pane.mode === 'sheet' || pane.mode === 'move' || pane.mode === 'edit') && hasNotes
  const middle = [
    body(),
    pane.mode === 'move' && <Move el={el} view={view} handlers={handlers} />,
    showPreview && (view.preview ? <Preview el={el} view={view} note={view.preview} /> : <Box height={PREVIEW_ROWS} />),
  ]
  // With the key sheet up the pane takes the whole body and the footer its last row, so the sheet,
  // paged to the rows between, never covers the footer or runs past a short inline pane. What it
  // sits over is cut at those rows: in a short body the rows and the preview run taller than the
  // room, and squeezed the footer out.
  const isSheet = pane.mode === 'sheet'
  const footerRows = view.isInline ? FOOTER_ROWS : 1 + FOOTER_ROWS
  return (
    <Box flexDirection='column' width={view.width} height={isSheet ? view.bodyRows : undefined}>
      {pane.mode === 'bundle' ? null : pane.mode === 'capture' ? (
        <CaptureRow el={el} view={view} handlers={handlers} />
      ) : (
        <SearchRow el={el} view={view} handlers={handlers} />
      )}
      {pane.mode !== 'bundle' && !view.isInline && <Box height={1} />}
      {isSheet ? (
        <Box flexDirection='column' flexShrink={0} height={Math.max(0, view.bodyRows - sheetTop(view.isInline) - footerRows)} overflow='hidden'>
          <Box flexDirection='column' flexShrink={0}>
            {middle}
          </Box>
        </Box>
      ) : (
        middle
      )}
      <Footer el={el} view={view} />
      {isSheet && <KeySheet el={el} view={view} />}
      <ActionLayer el={el} view={view} handlers={handlers} />
    </Box>
  )
}

const CaptureRow = ({ el, view, handlers }: { el: E; view: PaneView; handlers: Handlers }) => {
  const { Box, Text, Input } = el
  const isFramed = !view.isInline
  const inner = view.width - (isFramed ? 4 : 0)
  const lead = `${GLYPH.capture} ${TEXT.captureLabel} `
  return (
    <Box width={view.width} borderStyle={isFramed ? 'round' : undefined} borderColor={isFramed ? COLOUR.accent : undefined} paddingX={isFramed ? 1 : 0}>
      <Box flexShrink={0}>
        <Text color={COLOUR.accent} bold>
          {lead}
        </Text>
      </Box>
      {/* An explicit width: left to flex, the field's own "⏎ save" hint wraps onto a second row. */}
      <Box width={Math.max(10, inner - cells(lead) - 1 - cells(cut(view.captureLabel, WIDTH.label)))}>
        <Input
          key={CAPTURE_KEY}
          placeholder='write a note'
          value={view.pane.capture.draft}
          submitLabel=''
          autoFocus
          onInput={value => handlers.captureInput(value)}
          onSubmit={value => handlers.captureSubmit(value)}
        />
      </Box>
      <Box flexShrink={0}>
        <Text color={isFramed ? COLOUR.accent : undefined} dimColor={!isFramed}>
          {' '}
          {cut(view.captureLabel, WIDTH.label)}
        </Text>
      </Box>
    </Box>
  )
}

const SearchRow = ({ el, view, handlers }: { el: E; view: PaneView; handlers: Handlers }) => {
  const { Box, Text, Input } = el
  const isFocused = view.focus.kind === 'search' || view.focus.kind === 'empty'
  const right = rightText(view, Math.max(10, Math.floor(view.width / 2)))
  return (
    <Box width={view.width}>
      <Text color={isFocused ? COLOUR.accent : COLOUR.history} bold>
        {GLYPH.search}{' '}
      </Text>
      {/* An explicit width, as capture's: left to flex, the field's "⏎ to list" wraps onto a second row. */}
      <Box width={searchWidth(view)}>
        <Input
          key={SEARCH_KEY}
          placeholder={TEXT.placeholder}
          value={view.pane.query}
          submitLabel={isNoMatch(view) ? '' : TEXT.toList}
          autoFocus={view.pane.mode === 'browse' ? true : undefined}
          onInput={value => handlers.searchInput(value)}
          onSubmit={value => handlers.searchSubmit(value)}
        />
      </Box>
      <Box flexGrow={1} />
      <Text dimColor> {right}</Text>
    </Box>
  )
}

const Capture = ({ el, view }: { el: E; view: PaneView }) => {
  const { Box, Text } = el
  const { capture } = view.pane
  const keep = view.isInline ? WIDTH.savedInline : WIDTH.savedDocked
  const draft = capture.draft.trim() === '' ? [] : draftLines(capture.draft, view.width, view.isInline ? 1 : WIDTH.previewLines)
  return (
    <Box flexDirection='column' paddingY={view.isInline ? 0 : 1}>
      {draft.map(line => (
        <Text>{line === '' ? ' ' : line}</Text>
      ))}
      {draft.length > 0 && !view.isInline && <Box height={1} />}
      {/* The newest save is bright; earlier ones step back. */}
      {capture.saved.slice(-keep).map((text, i, saved) => (
        <Text>
          <Text color={i === saved.length - 1 ? COLOUR.saved : COLOUR.history}>{GLYPH.saved} </Text>
          <Text dimColor={i !== saved.length - 1}>{cut(oneLine(text), view.width - 14)}</Text>
          <Text dimColor> · just now</Text>
        </Text>
      ))}
      {capture.error !== null ? (
        <Text color={COLOUR.problem}>{cut(capture.error, view.width)}</Text>
      ) : (
        <Text dimColor>{TEXT.captureHint(view.captureLabel)}</Text>
      )}
    </Box>
  )
}