everythings

  on('ui.render', { component: 'Pane', requestId: 'everythings' }, async ($, e) => {
    const p = ports($);
    return drawPane($.ui.resolve(e), e.surface, await readSnapshot(p), paneActions(p));
  });

export function drawPane(
  els: ElementTable,
  surface: RenderSurface,
  snap: PaneSnapshot,
  act: PaneActions,
): RenderElement {
  const { Box, Text, Button } = els;
  const { view, load, cache, blocked, writes } = snap;
  const page = view.kind === 'thing' ? pageOf(cache, view.thingId) : null;
  const grid = view.kind === 'grid' ? gridOf(cache, view.workspaceId) : null;
  const landing = grid?.landing ?? null;
  const hasData = page !== null || (landing !== null && (landing.things.length > 0 || landing.isListed));

  const failure = load.error ?? (load.isNotConnected ? NOT_CONNECTED : null);
  const retry = <Button key="retry" label="Retry" onPress={act.refresh} />;
  // The pane will not fill this screen by itself: its reads are blocked, or the last one failed.
  const isSettled = blocked !== null || failure !== null;
  // Asking Claude helps then: its own calls reach the connector under whatever name it runs.
  const canAsk = isSettled;
  const isAsked = snap.asked !== null && snap.asked === askKey(view, cache);
  // The reads' note, then a refused write's, both when both are up.
  const readNote = blocked !== null && !snap.isNoteDismissed ? blocked : null;
  const writeNote = writes.blocked;

  // A screen with nothing to draw says why and offers to ask Claude for it.
  let unseen: RenderElement | null = null;
  if (grid !== null && !hasData && canAsk) {
    const workspaceId = landing?.workspaceId ?? null;
    unseen = drawAsk(els, {
      line: landing === null ? NOTHING_SEEN : WORKSPACE_UNLISTED,
      label: landing === null ? 'Ask Claude to show your workspace' : 'Ask Claude to list it',
      asked: landing === null ? WORKSPACE_ASKED_FIRST : WORKSPACE_ASKED,
      isAsked,
      onPress: () => act.ask({ kind: 'workspace', id: workspaceId }),
    });
  } else if (view.kind === 'thing' && !hasData && canAsk) {
    const thingId = view.thingId;
    unseen = drawAsk(els, {
      line: THING_NOT_SEEN,
      label: 'Ask Claude to open it',
      asked: THING_ASKED,
      isAsked,
      onPress: () => act.ask({ kind: 'thing', id: thingId }),
    });
  }

  // No server answered and the session's calls carried nothing: the notice, and the ask under it.
  if (load.isNotConnected && !hasData) {
    return (
      <Box flexDirection="column" rowGap={1}>
        <Box flexDirection="row" columnGap={1}>
          <Text>{NOT_CONNECTED}</Text>
          <Button key="retry" label="Retry" onPress={act.refresh} />
        </Box>
        {unseen}
      </Box>
    );
  }

  // A read in flight shows on the Refresh Button, and a failed read's line
  // sits below the page: neither adds or drops a line above the cards, so
  // nothing moves under the pointer while a read runs.
  return (
    <Box flexDirection="column" rowGap={1}>
      {drawHeader(els, surface, snap, page, grid, act)}
      {readNote !== null && drawNote(els, [BLOCKED_NOTE, UNBLOCK_HOW], readNote, 'reads', act)}
      {writeNote !== null && drawNote(els, [WRITE_UNBLOCK_HOW[writeNote.on]], writeNote, 'writes', act)}
      {unseen}
      {landing !== null && hasData && drawGrid(els, surface, landing, act)}
      {page !== null && drawThing(els, surface, page, writes, canAsk, isAsked, act)}
      {failure !== null && (
        <Box flexDirection="row" columnGap={1}>
          <Text dimColor>{hasData ? `${FROM_CALLS} ${failure}` : failure}</Text>
          {retry}
        </Box>
      )}
    </Box>
  );
}

function drawHeader(
  els: ElementTable,
  surface: RenderSurface,
  snap: PaneSnapshot,
  page: DrawnPage | null,
  grid: DrawnGrid | null,
  act: PaneActions,
): RenderElement {
  const { Box, Text, Button } = els;
  const { view, cache, isFollowing } = snap;
  const workspaces = grid?.workspaces ?? cache.workspaces;
  const current = grid?.landing?.workspaceId ?? view.workspaceId;
  // The phone draws no Select (its table has none to draw), so it gets Buttons.
  const Select = surface !== 'mobile' && 'Select' in els ? els.Select : null;
  const picked = workspaces.some(ws => ws.id === current) ? (current ?? undefined) : undefined;

  let left: RenderElement | null = null;
  if (view.kind === 'thing') {
    // The breadcrumb: the workspace's grid, then the thing this one sits under.
    const parent = page?.parent ?? null;
    left = (
      <Box flexDirection="row" columnGap={1} alignItems="center">
        <Button key="back" label={GRID_GLYPH} onPress={act.back} />
        {parent !== null && <Text dimColor>{CHEVRON}</Text>}
        {parent !== null && (
          <Button
            key="parent"
            label={label(parent.emoji, clip(parent.name, PARENT_NAME_CELLS))}
            onPress={() => act.openThing(parent.id)}
          />
        )}
      </Box>
    );
  } else if (workspaces.length > 0 && Select) {
    left = (
      <Select
        key="workspace"
        options={workspaces.map(ws => ({ value: ws.id, label: ws.name }))}
        value={picked}
        onSelect={act.openWorkspace}
      />
    );
  } else if (workspaces.length > 0) {
    left = (
      <Box flexDirection="row" flexWrap="wrap" columnGap={2}>
        {workspaces.map(ws => (
          <Button
            key={`workspace:${ws.id}`}
            plain
            dimColor={ws.id !== current}
            label={ws.name}
            onPress={() => act.openWorkspace(ws.id)}
          />
        ))}
      </Box>
    );
  }

  return (
    <Box flexDirection="row" flexWrap="wrap" justifyContent="space-between" columnGap={2}>
      <Box flexShrink={1}>{left}</Box>
      <Box flexDirection="row" columnGap={1}>
        <Button key="follow" label={isFollowing ? 'Follow: on' : 'Follow: paused'} onPress={act.toggleFollow} />
        <Button key="refresh" label={snap.load.isLoading ? 'Loading…' : 'Refresh'} onPress={act.refresh} />
      </Box>
    </Box>
  );
}

function drawNote(
  els: ElementTable,
  lines: string[],
  blocked: EverythingsBlocked,
  on: 'reads' | 'writes',
  act: PaneActions,
): RenderElement {
  const { Box, Text, Button } = els;
  const prefix = on === 'reads' ? '' : 'write-';
  return (
    <Box flexDirection="column">
      {lines.map(line => (
        <Text dimColor>{line}</Text>
      ))}
      {blocked.rules.map(rule => (
        <Text>{rule}</Text>
      ))}
      <Box flexDirection="row" flexWrap="wrap" columnGap={1}>
        <Button
          key={`copy-${prefix}rules`}
          label={copyLabel(blocked)}
          onPress={press => act.copyRules(on, press.surface)}
        />
        <Button
          key={`dismiss-${prefix}note`}
          label="Dismiss"
          onPress={on === 'reads' ? act.dismissNote : act.dismissWriteNote}
        />
      </Box>
    </Box>
  );
}

function drawGrid(
  els: ElementTable,
  surface: RenderSurface,
  landing: NonNullable<DrawnGrid['landing']>,
  act: PaneActions,
): RenderElement {
  const { Box, Text } = els;
  if (landing.things.length === 0) return <Text dimColor>This workspace is empty.</Text>;
  return (
    <Box flexDirection="column">
      {drawCards(els, surface, landing.things, act)}
      {landing.truncated && <Text dimColor>{`Showing ${landing.things.length} of ${landing.count}.`}</Text>}
    </Box>
  );
}

function drawCards(
  els: ElementTable,
  surface: RenderSurface,
  refs: EverythingsThingRef[],
  act: PaneActions,
): RenderElement {
  const { Box, Text, Button } = els;
  const isTerminal = surface === 'terminal';
  return (
    <Box flexDirection="row" flexWrap="wrap" columnGap={1} rowGap={isTerminal ? 0 : 1}>
      {refs.map(ref => {
        const emoji = ref.emoji ?? NO_EMOJI;
        const name = clip(ref.name, CARD_NAME_CELLS);
        const open = () => act.openThing(ref.id);
        return isTerminal ? (
          <Box
            key={`card:${ref.id}`}
            flexDirection="column"
            alignItems="center"
            width={CARD_WIDTH}
            paddingX={1}
            borderStyle="round"
            borderDimColor
            hover={{ borderColor: 'cyan', borderDimColor: false }}
          >
            <Text>{emoji}</Text>
            <Button key={`tile:${ref.id}`} plain label={name} onPress={open} />
          </Box>
        ) : (
          <Box key={`card:${ref.id}`} flexDirection="column" alignItems="stretch" width={CARD_WIDTH}>
            <Button key={`tile:${ref.id}`} label={`${emoji}\n${name}`} onPress={open} />
          </Box>
        );
      })}
    </Box>
  );
}