code-modernization

  on('ui.render', { component: 'Pane' }, async ($, e, next) => {
    const host = state.host

    if (host === null || (e.requestId !== PANE_ID && e.requestId !== SIGN_ID)) {
      return next(e)
    }

    const table = $.ui.resolve(e)
    const kit: Kit = {
      Box: table.Box,
      Text: table.Text,
      Button: table.Button,
      ...('Raster' in table && { Raster: table.Raster }),
      ...('Code' in table && { Code: table.Code }),
      ...('Input' in table && { Input: table.Input }),
      ...('Select' in table && { Select: table.Select }),
    }

    const columns = Math.max(24, wholeOf(e.props.bodyColumns) - 1)

    if (e.requestId === SIGN_ID) {
      return signView(
        kit,
        state.sign,
        state.snapshot?.system ?? '',
        state.snapshot?.brief?.openQuestions ?? 0,
        columns,
        signActionsOf(host),
      )
    }

    // A squeezed pane (a dialog or another panel has its rows) can report a body of no rows at all.
    const rows = wholeOf(e.props.scroll.bodyRows)

    state.pane.isOpen = true
    state.pane.isWaiting = false
    state.pane.bodyColumns = columns
    state.pane.bodyRows = rows
    state.pane.placement = e.props.placement

    const snapshot = state.snapshot

    const plan = planOf(rows, e.props.placement, {
      phases: snapshot?.brief?.phases.length ?? 0,
      modules: snapshot?.modules.length ?? 0,
      attention:
        (snapshot?.attention.length ?? 0) +
        [...state.fleet.signatures.values()].filter(signature => signature.agents.size >= 3).length,
      hasMap: snapshot !== null && snapshot.estate !== null && kit.Raster !== undefined,
      headerRows: headerRowsOf(snapshot, columns),
      nextRows: nextRowsOf(snapshot, state, columns),
      legendRows: legendRowsOf(snapshot, columns),
    })

    let estate: { cells: string; columns: number; rows: number; tiles: State['estate'] extends infer T ? (T extends { tiles: infer U } ? U : never) : never } | null = null

    // The plan sheds the map first when the body is too short; a Raster of no rows is refused.
    if (snapshot !== null && snapshot.estate !== null && kit.Raster !== undefined && plan.estate >= 1 && columns >= 1) {
      const mapRows = Math.min(256, plan.estate)
      const held = state.estate

      const tiles =
        held !== null && held.columns === columns && held.rows === mapRows && held.tiles.length > 0
          ? held.tiles
          : tilesOf(snapshot, columns, mapRows)

      state.estate = { tiles, columns, rows: mapRows, isMounted: true }

      const painted = paint(tiles, columns, mapRows, state.touches, nowMs())

      estate = { cells: painted.cells, columns, rows: mapRows, tiles }

      if (painted.isAnimating) {
        animate(host)
      }
    } else {
      // No map drawn: nothing for the frame timer to repaint.
      state.estate = null
    }

    return paneView(
      kit,
      state,
      { columns, rows, placement: e.props.placement, nowMs: nowMs(), estate, plan },
      paneActionsOf(host),
    )
  })

export function signView(
  kit: Kit,
  sign: SignState,
  system: string,
  openQuestions: number,
  columns: number,
  actions: SignActions,
): RenderElement {
  const { Box, Text, Button, Input } = kit
  const width = Math.max(30, columns)

  return (
    <Box flexDirection="column" width={width}>
      <Text bold color={HEAD}>Sign the brief</Text>
      <Text dimColor wrap="wrap">
        {`Records who approved the plan in analysis/${system}/MODERNIZATION_BRIEF.md, and how much of it. Nothing is built until it is signed.`}
      </Text>
      {openQuestions > 0 ? (
        <Text color={WARN} wrap="wrap">{`${openQuestions} open question${openQuestions === 1 ? '' : 's'} in the brief ${openQuestions === 1 ? 'is' : 'are'} still unticked.`}</Text>
      ) : null}
      <Box marginTop={1} flexDirection="column">
        {Input !== undefined ? (
          <Input
            key="signer"
            label="Approved by"
            placeholder="name, role"
            value={sign.name}
            submitLabel="sign"
            autoFocus
            onInput={actions.name}
            onSubmit={value => {
              actions.name(value)
              actions.sign()
            }}
          />
        ) : (
          <Text>{`Approved by: ${sign.name}`}</Text>
        )}
      </Box>
      <Box marginTop={1} columnGap={2}>
        <Text dimColor>Covers:</Text>
        <Button key="phase1" plain onPress={() => actions.covers('phase-1')}>
          {`${sign.covers === 'phase-1' ? '◉' : '○'} Phase 1 only`}
        </Button>
        <Button key="full" plain onPress={() => actions.covers('full')}>
          {`${sign.covers === 'full' ? '◉' : '○'} Full plan`}
        </Button>
      </Box>
      {sign.error !== null ? <Text color={BAD} wrap="wrap">{sign.error}</Text> : null}
      <Box marginTop={1} columnGap={2}>
        <Button key="do-sign" onPress={actions.sign}>sign</Button>
        <Button key="cancel" dimColor onPress={actions.cancel}>cancel</Button>
      </Box>
      <Box>
        <Text dimColor>enter signs · tab moves · esc cancels</Text>
      </Box>
    </Box>
  )
}

export function paneView(
  kit: Kit,
  state: State,
  frame: PaneFrame,
  actions: PaneActions,
): RenderElement {
  const { Box, Text } = kit
  const width = Math.max(20, frame.columns)
  const snapshot = state.snapshot

  if (snapshot === null) {
    return (
      <Box flexDirection="column" paddingRight={1} rowGap={1}>
        <Text bold>Modernization</Text>
        {state.readError !== null ? (
          <Text dimColor wrap="wrap">{`could not read the workspace: ${state.readError}`}</Text>
        ) : (
          <Box flexDirection="column">
            <Text wrap="wrap">Nothing to show yet: no legacy code under legacy/ and no analysis under analysis/.</Text>
            <Text wrap="wrap">
              <Text>To begin, type </Text>
              <Text bold color={ACCENT}>{frontDoorOf(state.options.commandPrefix)}</Text>
              <Text>. It asks what you want done with your code, finds it, and gives you the first step.</Text>
            </Text>
          </Box>
        )}
      </Box>
    )
  }

  const plan = frame.plan

  return (
    <Box flexDirection="column" paddingRight={1} rowGap={plan.gap}>
      {header(kit, snapshot, width, actions)}
      {estate(kit, snapshot, frame, width)}
      {plan.phases > 0 ? phases(kit, snapshot, width, plan.phases) : null}
      {plan.modules > 0 ? modules(kit, snapshot, width, plan.modules) : null}
      {nextBlock(kit, snapshot, actions, state, width, plan.hasHint)}
      {plan.attention > 0 ? attention(kit, state, snapshot, width, plan.attention) : null}
      {session(kit, state, frame, width, plan.session)}
    </Box>
  )
}

function header(kit: Kit, snapshot: Snapshot, width: number, actions: PaneActions): RenderChildren {
  const { Box, Text, Button } = kit
  const target = snapshot.brief?.target
  const percent = snapshot.percent
  const right = percent === null ? '' : `${(percent * 100).toFixed(percent < 0.1 ? 1 : 0)}% done`
  const left = `${snapshot.system}${target !== undefined ? ` → ${target}` : ''}`
  const bar = barOf(percent ?? 0, Math.max(4, width - right.length - 1))
  const summary = estateLine(snapshot)
  const at = snapshot.systems.indexOf(snapshot.system)
  const many = snapshot.systems.length > 1

  return (
    <Box flexDirection="column">
      <Box justifyContent="space-between">
        <Text bold wrap="truncate-end">{clip(`${left} · ${TRACK_LABELS[snapshot.track]}`, Math.max(8, width - (many ? 22 : 9)))}</Text>
        <Box columnGap={1}>
          {many ? <Button key="system" dimColor onPress={actions.system}>{`system ${at + 1}/${snapshot.systems.length}`}</Button> : null}
          <Button key="hide" dimColor onPress={actions.close}>hide</Button>
        </Box>
      </Box>
      <Box flexWrap="wrap">
        {snapshot.stages.map(stage => (
          <Text color={stage.isDone ? GOOD : undefined} dimColor={!stage.isDone}>
            {`${stage.isDone ? '✓' : '·'} ${stage.label} `}
          </Text>
        ))}
      </Box>
      {summary !== '' ? <Text dimColor wrap="truncate-end">{clip(summary, width)}</Text> : null}
      {percent !== null ? (
        <Box>
          <Text color={GOOD}>{bar.full}</Text>
          <Text dimColor>{bar.rest}</Text>
          <Text>{` ${right}`}</Text>
        </Box>
      ) : null}
    </Box>
  )
}

function estate(kit: Kit, snapshot: Snapshot, frame: PaneFrame, width: number): RenderChildren {
  const { Box, Text, Raster } = kit

  if (frame.estate === null || Raster === undefined) {
    return null
  }

  const counts = countsOf(frame.estate.tiles)

  return (
    <Box flexDirection="column">
      <Raster
        key={RASTER_KEY}
        columns={frame.estate.columns}
        rows={frame.estate.rows}
        cells={frame.estate.cells}
      />
      <Box flexWrap="wrap" width={width}>
        {counts.map(entry => (
          <Text>
            <Text color={hexOf(STATE_COLORS[entry.state])}>■</Text>
            <Text dimColor>{` ${stateWord(snapshot.track, entry.state)} ${entry.count}  `}</Text>
          </Text>
        ))}
        {proofCountsOf(frame.estate.tiles).map(entry => (
          <Text>
            <Text color={entry.kind === 'proven' ? GOOD : entry.kind === 'partly' ? WARN : BAD} bold>{PROOF_MARKS[entry.kind]}</Text>
            <Text dimColor>{` ${entry.kind === 'proven' ? 'proven' : entry.kind === 'partly' ? 'partly proven' : 'not proven'} ${entry.count}  `}</Text>
          </Text>
        ))}
      </Box>
    </Box>
  )
}

function phases(kit: Kit, snapshot: Snapshot, width: number, max: number): RenderChildren {
  const { Box, Text } = kit
  const brief = snapshot.brief

  if (brief === null || brief.phases.length === 0) {
    return null
  }

  const isDone = (ids: readonly string[]) =>
    ids.length > 0 &&
    ids.every(id => {
      const module = snapshot.byNode.get(id)

      return module !== undefined && isUnitDone(snapshot, module)
    })

  const ordered = [...brief.phases].sort((a, b) => a.number - b.number)
  const currentIndex = Math.max(0, ordered.findIndex(phase => !isDone(phase.modules)))
  const start = Math.max(0, Math.min(currentIndex - 1, ordered.length - max))
  const shown = ordered.slice(start, start + max)
  const doneCount = ordered.filter(phase => isDone(phase.modules)).length

  return (
    <Box flexDirection="column">
      {rule(kit, 'Phases', width, `${doneCount}/${ordered.length}`)}
      {shown.map(phase => {
        const done = isDone(phase.modules)
        const isCurrent = ordered[currentIndex] === phase && !done
        const ticked = phase.criteria.filter(criterion => criterion.isTicked).length
        const right = phase.criteria.length > 0 ? `${ticked}/${phase.criteria.length} checks` : ''
        const label = `${done ? '✓' : isCurrent ? '▸' : '·'} P${phase.number} ${phase.title}`

        return (
          <Box>
            <Text
              color={done ? GOOD : isCurrent ? HEAD : undefined}
              bold={isCurrent}
              dimColor={!done && !isCurrent}
            >
              {pad(clip(label, width - right.length - 1), width - right.length - 1)}
            </Text>
            <Text dimColor>{` ${right}`}</Text>
          </Box>
        )
      })}
      {ordered.length > shown.length ? (
        <Text dimColor>{`  … ${ordered.length - shown.length} more phases`}</Text>
      ) : null}
    </Box>
  )
}