sea

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    if (e.props.hasSurvey) return next(e)

    // 電源が切れているあいだは、戻すための 1 行だけを残す
    if (!isOn) {
      if (label !== 'off') {
        label = 'off'
        $.ui.status('🌊 停止中')
      }
      if (barClosed) return next(e) // [×] で閉じた: 何も出さない (/sea で戻る)
      return powerOffRow($.ui.resolve(e))
    }
    if (e.props.maxRows < 4) return next(e)

    // 操作行 (1 行) を絵の下に付ける。高さか幅が足りなければ絵だけ
    const showControls = e.props.maxRows >= 5 && e.props.bodyColumns >= CONTROLS_MIN_COLS
    rows = Math.min(ROWS, e.props.maxRows - (showControls ? 1 : 0))
    const now = await $.clock.now()
    if (now - lastFrameAt > FRAME_STALE_MS || now - lastControlAt > CONTROL_STALE_MS) restartTimers?.() // 止まっていたら張り直す

    if (e.surface === 'terminal') {
      const el = $.ui.resolve(e)
      const { Raster, Box } = el
      const cols = Math.max(8, Math.min(512, e.props.bodyColumns))
      const paint = paintSea(Math.max(1, cols >> 1), rows, now, pinned)
      const cells = toCells(paint, cols, actorsAt(now, cols, rows, pinned, forced))
      if (paint.label !== label) {
        label = paint.label
        $.ui.status(`🌊 ${label}`)
      }

      if (!showControls) return <Raster key={KEY} columns={cols} rows={rows} cells={cells} />
      return (
        <Box flexDirection="column">
          <Raster key={KEY} columns={cols} rows={rows} cells={cells} />
          {controlRow(el, soundOn, volume, pinned ?? -1, now < gate.busyUntil)}
        </Box>
      )
    }

    // デスクトップ: Raster が無いので Svg で描く
    const el = $.ui.resolve(e)
    const { Svg, Box } = el
    const paint = paintSea(DESKTOP_DOTS, rows, now, pinned)
    const actors = actorsAt(now, DESKTOP_DOTS * 2, rows, pinned, forced)
    if (paint.label !== label) {
      label = paint.label
      $.ui.status(`🌊 ${label}`)
    }

    const svg = <Svg source={toSvg(paint, DESKTOP_DOT_PX, actors)} alt={`海 (${paint.label})`} />
    if (!showControls) return svg
    return (
      <Box flexDirection="column">
        {svg}
        {controlRow(el, soundOn, volume, pinned ?? -1, now < gate.busyUntil)}
      </Box>
    )
  })

function powerOffRow(El: Els) {
  const { Box, Text, Button } = El
  return (
    <Box flexDirection="row" gap={1}>
      <Button key="sea-power" plain label="[⏻ OFF]" onPress={noop} />
      <Text bold>海は停止中です。押すと全セッションに海と音が戻ります (/sea でも戻せます)</Text>
      <Button key="sea-close" plain role="dismiss" label="[×]" onPress={noop} />
    </Box>
  )
}

function controlRow(El: Els, soundOn: boolean, volume: number, scene: number, busy: boolean) {
  const { Box, Text, Button } = El
  const sceneName = scene >= 0 ? SCENES[scene].label.replace('の海', '') : '自動'
  if (busy) {
    // 準備中でも電源は押せる
    return (
      <Box flexDirection="row" gap={1}>
        <Button key="sea-power" plain label="[⏻ ON]" onPress={noop} />
        <Text bold>{soundOn ? '音 準備中…' : '音 停止中…'}</Text>
        <Text bold>{`音量 ${volume}`}</Text>
        <Text bold>{`場面:${sceneName}`}</Text>
      </Box>
    )
  }
  return (
    <Box flexDirection="row" gap={1}>
      <Button key="sea-power" plain label="[⏻ ON]" onPress={noop} />
      <Button key="sea-sound" plain label={soundOn ? '[音 ON]' : '[音 OFF]'} onPress={noop} />
      <Button key="sea-vol-down" plain label="[-]" onPress={noop} />
      <Text bold>{`音量 ${volume}`}</Text>
      <Button key="sea-vol-up" plain label="[+]" onPress={noop} />
      <Button key="sea-scene" plain label={`[場面:${sceneName}]`} onPress={noop} />
      <Button key="sea-help" plain label="[?]" onPress={noop} />
    </Box>
  )
}