observe

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const p = await activeProvider($)
    const snap = (await read($, snapshots))[p.id] ?? EMPTY
    const flags = await read($, toggles)
    const isOn = (key: string) => flags[`${p.id}.${key}`] === true
    const view = p.view(snap, isOn)

    return tabPane($.ui.resolve(e), e.viewport, {
      tabs: providers.map(({ id, title }) => ({ id, title })),
      activeTab: p.id,
      onTab: id => {
        const picked = findProvider(id)
        if (picked) void update($, tab, () => picked.id).then(() => poll($))
      },
      summary: view.summary,
      context: snap.context,
      actions: [
        ...(p.toggles?.(snap) ?? []).map(t => ({
          key: t.key,
          label: isOn(t.key) ? t.on : t.off,
          isActive: isOn(t.key),
          onPress: () => void update($, toggles, all => ({ ...all, [`${p.id}.${t.key}`]: !isOn(t.key) })),
        })),
        { key: 'refresh', label: 'Refresh', onPress: () => void poll($, true) },
      ],
      error: snap.error,
      notes: snap.notes,
      checkedAt: snap.checkedAt,
      empty: snap.unavailable ?? view.empty,
      rows: view.rows,
      onCopy: (text, surface) => void copy($, text, surface),
      columns: e.props.bodyColumns,
      onRowAction: (row, key) => {
        const kind = DETAILS.find(d => d === key)
        const target = targetOf(p, row)
        if (kind && target) void openDetail($, kind, target)
      },
      footer: [`every ${Math.round(p.intervalMs(snap) / 1000)}s`, p.footnote].filter(Boolean).join(' · '),
    })
  })

export function tabPane(ui: ElementTable, viewport: RenderViewport | undefined, m: PaneModel) {
  const { Box, Text, Button, Link } = ui
  const notes = m.notes ?? []
  const shown = fitRows(m.rows, (viewport?.rows ?? 24) - CHROME_ROWS - notes.length - (m.error ? 1 : 0))
  const hidden = m.rows.slice(shown.length).filter(r => !r.heading).length
  const items = shown.filter(r => !r.heading) // headlines take no part in the columns
  const labelWidth = widest(items.map(r => r.label ?? ''), MAX_TITLE_PAD)
  const marks = items.some(r => r.highlight)
  // Everything on a row's line but its title.
  const rest = (r: Row) =>
    (marks ? 2 : 0) +
    (r.label === undefined ? 1 : labelWidth) +
    1 +
    (r.tags ?? []).reduce((n, t) => n + 1 + t.text.length, 0) +
    (r.age ? 1 + r.age.length : 0) +
    (r.copyText !== undefined ? 'copy'.length + BUTTON_CHROME : 0) +
    (r.actions ?? []).reduce((n, a) => n + a.label.length + BUTTON_CHROME, 0)
  const room = m.columns === undefined ? Infinity : Math.max(MIN_TITLE, m.columns - Math.max(0, ...items.map(rest)))
  const titleWidth = Math.min(room, widest(items.map(r => r.title), MAX_TITLE_PAD))
  const title = (r: Row) => (r.title.length > room ? truncate(r.title, room) : r.title).padEnd(titleWidth)

  return (
    <Box flexDirection="column">
      {m.tabs.length > 1 && (
        <Box flexDirection="row" gap={1}>
          {m.tabs.map(t => (
            <Button key={`tab:${t.id}`} variant={t.id === m.activeTab ? 'primary' : 'secondary'} onPress={() => m.onTab(t.id)}>
              {t.title}
            </Button>
          ))}
        </Box>
      )}
      <Box flexDirection="row" gap={1}>
        <Text bold>
          {m.summary}
          {m.context && <Text dimColor> · {m.context}</Text>}
        </Text>
        {(m.actions ?? []).map(a => (
          <Button key={a.key} variant={a.isActive ? 'primary' : 'secondary'} onPress={a.onPress}>
            {a.label}
          </Button>
        ))}
      </Box>
      {m.error && <Text color="red">{m.error}</Text>}
      {notes.map(n => (
        <Text dimColor>{n}</Text>
      ))}
      {m.checkedAt === undefined && !m.error && <Text dimColor>Checking…</Text>}
      {m.checkedAt !== undefined && !m.error && m.rows.length === 0 && <Text dimColor>{m.empty}</Text>}
      {shown.map(r => {
        if (r.heading) {
          return (
            <Box flexDirection="row" gap={1}>
              <Text bold wrap="truncate-end">
                {r.link ? <Link href={r.link}>{r.title}</Link> : r.title}
              </Text>
              {r.copyText !== undefined && (
                <Button key={`copy:${r.id}`} dimColor onPress={press => m.onCopy(r.copyText!, press.surface)}>
                  copy
                </Button>
              )}
            </Box>
          )
        }
        const color = r.state && STATE_COLORS[r.state]
        return (
          <Box flexDirection="column">
            <Box flexDirection="row" gap={1}>
              <Text wrap="truncate-end">
                {marks && <Text color="cyan">{r.highlight ? '› ' : '  '}</Text>}
                <Text color={color} dimColor={!color} bold={r.state !== 'idle'}>
                  {r.label === undefined ? DOT : r.label.padEnd(labelWidth)}
                </Text>{' '}
                {title(r)}
                {(r.tags ?? []).map(t => (
                  <Text color={t.color} dimColor={t.dimColor} bold={t.bold}>
                    {' '}
                    {t.text}
                  </Text>
                ))}
                {r.age && <Text dimColor> {r.age}</Text>}
              </Text>
              {r.copyText !== undefined && (
                <Button key={`copy:${r.id}`} dimColor onPress={press => m.onCopy(r.copyText!, press.surface)}>
                  copy
                </Button>
              )}
              {(r.actions ?? []).map(a => (
                <Button key={`${a.key}:${r.id}`} dimColor onPress={() => m.onRowAction?.(r, a.key)}>
                  {a.label}
                </Button>
              ))}
              {r.link && !r.sub && <Link href={r.link} />}
            </Box>
            {r.sub && (
              <Box flexDirection="row" gap={1}>
                <Text dimColor>
                  {'    '}
                  {truncate(r.sub, MAX_SUB)}
                </Text>
                {r.link && <Link href={r.link} />}
              </Box>
            )}
          </Box>
        )
      })}
      {hidden > 0 && <Text dimColor>…and {hidden} more</Text>}
      {m.checkedAt !== undefined && (
        <Text dimColor>
          updated {new Date(m.checkedAt).toLocaleTimeString()}
          {m.footer && <Text> · {m.footer}</Text>}
        </Text>
      )}
    </Box>
  )
}