waypoint

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const els = $.ui.resolve(e)
    const { Box, Text } = els
    const off = await read($, offReason)
    if (off !== null) return <Text color="yellow">Waypoint is off: {off}</Text>
    const list = await read($, checkpoints)
    const n = await read($, selected)
    const msg = await read($, message)
    const working = await read($, isWorking)
    const width = e.props.bodyColumns

    const top = (
      <Box flexDirection="column">
        {msg !== null && <Text color="green">{msg}</Text>}
        {working && <Text color="yellow">Claude is working: restores wait until the turn ends.</Text>}
      </Box>
    )

    if (n !== null) {
      const cp = list.find(c => c.n === n)
      if (cp !== undefined) {
        return (
          <Box flexDirection="column" width={width}>
            {top}
            {detailView($, els, cp, await read($, detail), list, await read($, action))}
          </Box>
        )
      }
    }
    const at = await read($, cursor)
    return (
      <Box flexDirection="column" width={width}>
        {top}
        {listView($, els, list, width, at)}
      </Box>
    )
  })

function detailView(
  $: EngineInterface,
  { Box, Text, Button, Code }: Els,
  cp: WaypointCheckpoint,
  d: WaypointDetail | null,
  list: readonly WaypointCheckpoint[],
  focused: string | null,
) {
  const kind = cp.kind === 'safety' ? 'Safety checkpoint' : cp.kind === 'manual' ? 'Saved by hand' : 'Prompt'
  const after = cp.after
  const isPrompt = cp.kind === 'prompt'

  // The options, in the order shown: a, b, c. A safety or hand-saved checkpoint has one snapshot, so no "before".
  type Option = { key: string; id: string; hotkey: string; label: string; help: string; run: () => unknown }
  const options: Option[] = []
  if (after !== undefined) {
    options.push({
      key: 'restore-after',
      id: 'after',
      hotkey: 'a',
      label: isPrompt ? `Restore to AFTER #${cp.n}` : `Restore #${cp.n}`,
      help: isPrompt
        ? `Every file goes back to how it was right after prompt #${cp.n} finished. Keeps what #${cp.n} did, undoes everything after it.`
        : `Every file goes back to how it was when checkpoint #${cp.n} was taken.`,
      run: () => confirmRestore($, after, isPrompt ? `after #${cp.n}` : `#${cp.n}`, cp, list),
    })
  }
  if (isPrompt) {
    options.push({
      key: 'restore-before',
      id: 'before',
      hotkey: 'b',
      label: `Restore to BEFORE #${cp.n}`,
      help: `Every file goes back to how it was just before you sent prompt #${cp.n}. Undoes #${cp.n} and everything after it.`,
      run: () => confirmRestore($, cp.before, `before #${cp.n}`, cp, list),
    })
  }
  options.push({
    key: 'back',
    id: 'back',
    hotkey: 'c',
    label: 'Back to the list',
    help: 'Goes back to the list of checkpoints. Nothing is changed.',
    run: () => select($, null),
  })
  const here = options.find(o => o.id === focused) ?? options[0]!

  return (
    <Box flexDirection="column">
      <Text bold>
        {kind} #{cp.n} · {clock(cp.at)} {day(cp.at)}
      </Text>
      <Text wrap="truncate-end">{oneLine(cp.label, 300)}</Text>

      <Box flexDirection="column" marginTop={1} borderStyle="round" borderColor="cyan" paddingX={1}>
        <Text bold>What do you want to do?</Text>
        {options.map((o, i) => (
          <Button
            key={o.key}
            plain
            hotkey={o.hotkey}
            {...(i === 0 ? { autoFocus: true as const } : {})}
            {...(o.id === here.id ? {} : { dimColor: true })}
            label={`${o.id === here.id ? '❯' : ' '} ${o.label}`}
            onPress={o.run}
          />
        ))}
        <Text color="cyan" wrap="wrap">
          {'→ '}
          {here.help}
        </Text>
        {here.id !== 'back' && (
          <Text dimColor wrap="wrap">
            You are asked to confirm, and your current files are saved first as a ⟲ safety checkpoint, so this can be undone.
          </Text>
        )}
        <Text dimColor wrap="truncate-end">
          ↑↓ or a / b / c, Enter to choose. No keys? Type /waypoints-restore {cp.n}
          {isPrompt ? ` (or /waypoints-restore ${cp.n} before)` : ''}
        </Text>
      </Box>

      {isPrompt && (
        <Box marginTop={1}>
          <Text bold>
            What prompt #{cp.n} changed <Text dimColor>({rowStats(cp) || 'still running, or it never finished'})</Text>
          </Text>
        </Box>
      )}
      {isPrompt && d === null && <Text dimColor>Loading the changes…</Text>}
      {isPrompt && d !== null && d.files.length === 0 && <Text dimColor>This prompt changed no files.</Text>}
      {isPrompt &&
        d !== null &&
        d.files.map(f => (
          <Box key={`file-${f.path}`} flexDirection="column" marginTop={1}>
            <Text bold>
              {f.path} <Text color="green">+{f.added}</Text> <Text color="red">−{f.removed}</Text>
            </Text>
            {f.isBinary ? (
              <Text dimColor>binary file changed</Text>
            ) : f.hunks === '' ? (
              <Text dimColor>no line changes (renamed, emptied or mode change)</Text>
            ) : (
              <Code source={f.hunks} format="diff" path={f.path} wrap="truncate-end" />
            )}
          </Box>
        ))}
      {isPrompt && d !== null && d.more > 0 && <Text dimColor>…and {d.more} more files not shown.</Text>}
    </Box>
  )
}

function listView($: EngineInterface, { Box, Text, Button }: Els, list: readonly WaypointCheckpoint[], width: number, at: number | null) {
  if (list.length === 0) {
    return (
      <Box flexDirection="column">
        <Text bold>Waypoint</Text>
        <Text dimColor>No checkpoints yet. One is taken before every prompt you send.</Text>
      </Box>
    )
  }
  const rows = [...list].reverse()
  return (
    <Box flexDirection="column">
      <Text bold>
        Waypoint · {list.length} checkpoints <Text dimColor>(newest first)</Text>
      </Text>
      <Text dimColor wrap="truncate-end">
        ↑↓ to move, Enter to open, Esc to close. No keys? Press Ctrl+X then Tab, or type /waypoints-open {rows[0]!.n}
      </Text>
      {rows.map(cp => {
        const isHere = cp.n === (at ?? rows[0]!.n)
        return (
          <Button
            key={`cp-${cp.n}`}
            plain
            {...(isHere ? { autoFocus: true as const } : { dimColor: cp.kind === 'safety' })}
            label={`${isHere ? '❯' : ' '} ${rowLabel(cp, width - 2)}`}
            onPress={() => select($, cp.n)}
          />
        )
      })}
    </Box>
  )
}