dagyard

  on('ui.render', { component: 'AbovePrompt' }, async ($, e, next) => {
    const below = await next(e)
    const v = view
    if (!project || e.props.hasSurvey || e.props.isWorking || hidden) return below
    if (!v) {
      if (!loading && !lastError) void refresh($)
      const { Box: B, Text: T } = $.ui.resolve(e)
      return (
        <B flexDirection="column">
          <T color={MUTED}>{s.offline(base, lastError || s.loading)}</T>
          {below}
        </B>
      )
    }

    const { Box, Button, Text } = $.ui.resolve(e)
    const list: Item[] = [...v.waiting, ...v.startable]

    const head = (
      <Text wrap="truncate-end">
        <Text color={BLUE}>◆ dagyard </Text>
        <Text bold>{v.project}</Text>
        <Text color={MUTED}>{s.progress(v.done, v.total, v.now)} · </Text>
        <Text color={v.waiting.length ? AMBER : MUTED}>{s.waitingCount(v.waiting.length)}</Text>
        <Text color={MUTED}> · </Text>
        <Text color={v.startable.length ? BLUE : MUTED}>{s.startableCount(v.startable.length)}</Text>
      </Text>
    )

    let body = null
    const w = working
    if (busy) {
      body = <Text color={MUTED}>…</Text>
    } else if (w) {
      body = (
        <Box flexDirection="column">
          <Text wrap="truncate-end">
            <Text color={BLUE}>{s.workingOn}</Text>
            <Text bold>{w.title}</Text>
          </Text>
          <Box flexWrap="wrap">
            <Button key="dy-done" label={s.done} hotkey="h" variant="primary" onPress={() => void patchWorking($, w, { status: 'done' }, s.isDone(w.title))} />
            <Button key="dy-release" label={s.release} hotkey="l" onPress={() => void patchWorking($, w, { status: 'pending', team: null, progress: 0 }, '')} />
            <Button key="dy-open" label={s.openSky} hotkey="o" dimColor onPress={() => void openSky($, w.id)} />
          </Box>
        </Box>
      )
    } else if (list.length > 0) {
      const i = cursor % list.length
      const it = list[i]!
      const more =
        list.length > 1 ? (
          <Button key="dy-next" label={s.other(i + 1, list.length)} hotkey="s" dimColor onPress={() => void skip($)} />
        ) : null
      if (it.kind === 'waiting') {
        const b = it.blocker
        const label = s.waitingLabel(b.kind)
        const buttons =
          b.kind === 'access'
            ? [<Button key="dy-sky" label={s.grantInSky} hotkey="o" variant="primary" onPress={() => void openSky($, it.node.id)} />]
            : b.options.slice(0, 3).map((opt, k) => (
                <Button key={`dy-opt-${k}`} label={opt} hotkey={String(k + 1)} variant={k === 0 ? 'primary' : undefined} onPress={() => void resolve($, it, k, '')} />
              ))
        body = (
          <Box flexDirection="column">
            <Text wrap="truncate-end">
              <Text color={AMBER}>{label} · </Text>
              <Text bold>{it.node.title}</Text>
              <Text color={MUTED}> — {b.kind === 'access' ? b.accessLabel ?? b.question : b.question}</Text>
            </Text>
            <Box flexWrap="wrap">
              {buttons}
              {more}
              <Button key="dy-menu" label={s.seeAll} hotkey="m" dimColor onPress={() => void openMenu($)} />
            </Box>
          </Box>
        )
      } else {
        const n = it.node
        body = (
          <Box flexDirection="column">
            <Text wrap="truncate-end">
              <Text color={BLUE}>{s.readyToTake}</Text>
              <Text bold>{n.title}</Text>
              {n.goal ? <Text color={MUTED}> — /goal {n.goal}</Text> : null}
            </Text>
            <Box flexWrap="wrap">
              <Button key="dy-take" label={s.workOnThis} hotkey="t" variant="primary" onPress={() => void take($, n)} />
              {more}
              <Button key="dy-menu" label={s.seeAll} hotkey="m" dimColor onPress={() => void openMenu($)} />
            </Box>
          </Box>
        )
      }
    }

    return (
      <Box flexDirection="column">
        {head}
        {body}
        {below}
      </Box>
    )
  })

  on('ui.render', { component: 'Pane', requestId: MENU }, async ($, e) => {
    const els = $.ui.resolve(e)
    const { Box, Button, Text } = els
    // «Qué cambiarías» se escribe donde la superficie tiene campo de texto (el celular no lo dibuja);
    // donde no, «Pedir cambios» se manda sin nota en vez de dejar un «Cancelar» solo
    const Input = e.surface !== 'mobile' && 'Input' in els ? els.Input : null
    const v = view
    if (!v) {
      return (
        <Box flexDirection="column">
          <Text color={MUTED}>{s.offlineMenu(base, lastError || s.loading)}</Text>
          <Button key="mn-retry" label={s.retry} onPress={() => void refresh($)} />
        </Box>
      )
    }
    const w = working
    const rows: any[] = []

    rows.push(
      <Text key="mn-head" wrap="truncate-end">
        <Text bold>{v.project}</Text>
        <Text color={MUTED}>{s.progress(v.done, v.total, v.now)}</Text>
      </Text>,
    )

    if (w) {
      rows.push(<Text key="mn-w-sec" color={BLUE}>{'\n'}{s.working}</Text>)
      rows.push(
        <Box key="mn-w" flexDirection="column">
          <Text bold>{w.title}</Text>
          <Box flexWrap="wrap">
            <Button key="mn-w-done" label={s.done} variant="primary" onPress={() => void patchWorking($, w, { status: 'done' }, s.isDone(w.title))} />
            <Button key="mn-w-release" label={s.release} onPress={() => void patchWorking($, w, { status: 'pending', team: null, progress: 0 }, '')} />
          </Box>
        </Box>,
      )
    }

    rows.push(<Text key="mn-wait-sec" color={v.waiting.length ? AMBER : MUTED}>{'\n'}{s.waitingSection(v.waiting.length)}</Text>)
    if (v.waiting.length === 0) rows.push(<Text key="mn-wait-none" color={MUTED}>{s.nothingWaiting}</Text>)
    v.waiting.forEach(it => {
      if (it.kind !== 'waiting') return
      const b = it.blocker
      const kind = s.kindName(b.kind)
      const id = b.id
      let actions: any
      if (b.kind === 'access') {
        actions = <Button key={`mn-${id}-sky`} label={s.grantInSky} variant="primary" onPress={() => void openSky($, it.node.id)} />
      } else if (commenting === id && Input) {
        const k = b.options.findIndex(o => REQUEST_CHANGES.test(o))
        actions = (
          <Box flexDirection="column">
            <Input key={`mn-${id}-note`} label={s.whatWouldYouChange} placeholder={s.oneLine} submitLabel={s.send} autoFocus onSubmit={(value: string) => void resolve($, it, k < 0 ? b.options.length - 1 : k, value)} />
            <Button key={`mn-${id}-cancel`} label={s.cancel} dimColor onPress={() => void comment($, null)} />
          </Box>
        )
      } else {
        actions = (
          <Box flexWrap="wrap">
            {b.options.map((opt, k) =>
              b.kind === 'review' && Input && REQUEST_CHANGES.test(opt) ? (
                <Button key={`mn-${id}-${k}`} label={opt} onPress={() => void comment($, id)} />
              ) : (
                <Button key={`mn-${id}-${k}`} label={opt} variant={k === 0 ? 'primary' : undefined} onPress={() => void resolve($, it, k, '')} />
              ),
            )}
          </Box>
        )
      }
      rows.push(
        <Box key={`mn-${id}`} flexDirection="column">
          <Text wrap="wrap">
            <Text color={AMBER}>{kind} · </Text>
            <Text bold>{it.node.title}</Text>
          </Text>
          <Text wrap="wrap" color={MUTED}>{b.kind === 'access' ? `${b.question} (${b.accessLabel ?? s.access})` : b.question}</Text>
          {actions}
        </Box>,
      )
    })

    rows.push(<Text key="mn-take-sec" color={v.startable.length ? BLUE : MUTED}>{'\n'}{s.startableSection(v.startable.length)}</Text>)
    if (v.startable.length === 0) rows.push(<Text key="mn-take-none" color={MUTED}>{s.nothingStartable}</Text>)
    v.startable.forEach(it => {
      const n = it.node
      rows.push(
        <Box key={`mn-t-${n.id}`} flexDirection="column">
          <Text bold>{n.title}</Text>
          {n.goal ? <Text wrap="wrap" color={MUTED}>/goal {n.goal}</Text> : null}
          <Button key={`mn-t-${n.id}-take`} label={s.workOnThis} variant="primary" onPress={() => void take($, n)} />
        </Box>,
      )
    })

    rows.push(
      <Box key="mn-foot">
        <Text>{'\n'}</Text>
        <Button key="mn-sky" label={s.openSky} dimColor onPress={() => void openSky($, w?.id)} />
        <Button key="mn-band" label={hidden ? s.showBand : s.hideBand} dimColor onPress={() => void toggleBand($)} />
      </Box>,
    )

    return <Box flexDirection="column">{rows}</Box>
  })