banana

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button, Link } = $.ui.resolve(e)
    const [raw, v, thinking, last, c, u, me, b, stock, r] = await Promise.all([
      read($, save),
      read($, view),
      read($, isThinking),
      read($, lastEvent),
      read($, content),
      read($, gate),
      read($, player),
      read($, board),
      read($, serverStock),
      read($, rate),
    ])
    const nowMs = Date.now()
    const s = expire(raw, nowMs, c.economy)
    const expiry = nextExpiry(s, c.economy)
    const close = () => void $.ui.close({ id: PANE })

    if (u.status === 'required') {
      return (
        <Box flexDirection="column" gap={1} paddingX={1}>
          <Text color="red" bold>
            Update required
          </Text>
          <Text>{u.message ?? 'This content needs a newer banana mod.'}</Text>
          <Text dimColor>{`Content ${u.contentVersion ?? '?'} needs mod ${u.minVersion ?? '?'}; you run ${u.localVersion}.`}</Text>
          <Box gap={1}>
            <Button key="update" variant="primary" hotkey="u" autoFocus onPress={() => void runUpdate($)}>
              Update now
            </Button>
            <Button key="recheck" hotkey="r" onPress={() => void refreshContent($, opts)}>
              Check again
            </Button>
            <Button key="close" role="dismiss" onPress={close}>
              Close
            </Button>
          </Box>
          <Text dimColor>{`Update now runs \`${UPDATE_HINT}\` for you (or git pull, if you play from a clone). Then restart Claude Code.`}</Text>
          {last ? <Text color="yellow">{last}</Text> : null}
        </Box>
      )
    }

    const tab = (id: View, label: string, hotkey: string) => (
      <Button key={`tab-${id}`} hotkey={hotkey} plain dimColor={v !== id} onPress={() => void showTab($, opts, id)}>
        {v === id ? `[${label}]` : label}
      </Button>
    )

    let body
    if (v === 'click') {
      body = (
        <Box flexDirection="column" alignItems="center" gap={1}>
          <Text color={c.sponsor.color} bold>
            {c.banana.name}
          </Text>
          {bananaArt($, e, c)}
          <Button key="banana" hotkey="1" variant="primary" autoFocus onPress={() => void pressBanana($)}>
            {c.banana.buttonLabel ?? '🍌 CLICK THE BANANA 🍌'}
          </Button>
          <Text dimColor>{`${s.clicks} clicks · +${coinsPerClick(s.level)} per click · ${clicksToNextLevel(s.clicks)} to Lv ${s.level + 1}`}</Text>
          {last ? <Text color="green">{last}</Text> : null}
        </Box>
      )
    } else if (v === 'bag') {
      const counts = countByRarity(s.inventory)
      body = (
        <Box flexDirection="column" gap={0}>
          <Text dimColor>{`Each banana sells for coins; coins buy LLM tokens in the Shop. Bag worth: ${bagWorth(s, c)} coins. Bananas are void ${c.economy.windowHours / 24} days after they drop.`}</Text>
          {RARITY_ORDER.map(rarity => {
            const kinds = c.specials.filter(k => k.rarity === rarity)
            const owned = s.inventory.filter(d => d.rarity === rarity)
            const worth = owned.reduce((sum, d) => sum + sellValueOf(c, d.kindId), 0)
            const names = kinds.map(k => `${k.glyph} ${k.name} = ${k.sellValue}c, ${pct(k.chance)} per click`).join(' · ') || 'none defined'
            return (
              <Box flexDirection="column">
                <Box gap={1}>
                  <Text color={RARITY_COLOR[rarity]} bold>
                    {`${rarity.padEnd(9)} ×${counts[rarity]}`}
                  </Text>
                  <Text>{counts[rarity] > 0 ? `worth ${worth}c` : ''}</Text>
                  {counts[rarity] > 0 ? (
                    <Button key={`sell-${rarity}`} onPress={() => void sellRarity($, rarity)}>
                      {`Sell all for ${worth}c`}
                    </Button>
                  ) : null}
                </Box>
                <Text dimColor>{`  ${names}`}</Text>
              </Box>
            )
          })}
          {s.inventory.length === 0 ? <Text dimColor>Your bag is empty. Bananas drop while you click.</Text> : null}
        </Box>
      )
    } else if (v === 'shop') {
      const lastClaim = s.claims[s.claims.length - 1]
      const unit = `$${c.economy.unitUsd}`
      body = (
        <Box flexDirection="column" gap={0}>
          <Text>
            <Text bold>{`Rate: ${unit} = ${r.coinsPerUsd} coins`}</Text>
            <Text dimColor>
              {r.source === 'server'
                ? `  (${r.windowCoins} coins earned by everyone in the last ${c.economy.windowHours / 24} days ÷ ${r.budgetUnits} units of $${c.economy.budgetUsd})`
                : '  (single-player fallback rate; set banana.serverUrl for the live pool rate)'}
            </Text>
          </Text>
          <Text dimColor>{`You have ${s.coins} coins${bagWorth(s, c) > 0 ? ` + ${bagWorth(s, c)}c of bananas in the Bag` : ''}${expiry ? ` · oldest void in ${days(expiry - nowMs)}` : ''}`}</Text>
          {me.gateway ? (
            <Text dimColor>{`Tokens are paid out to your ${c.gateway?.name ?? 'gateway'} login "${me.gateway}" (change: /banana link <username>)`}</Text>
          ) : (
            <Box flexDirection="column">
              <Text color="yellow">{`No gateway login linked. ${c.gateway?.hint ?? 'Register on the sponsor gateway, then run /banana link <your username>.'}`}</Text>
              {c.gateway?.url ? linkOrText(Link, Text, c.gateway.url, `Register on ${c.gateway.name}`) : null}
            </Box>
          )}
          {c.gifts.map((gift, i) => {
            const left = (opts.serverUrl ? stock[gift.id] : undefined) ?? stockLeft(s, gift)
            const price = priceOf(gift, r.coinsPerUsd)
            const check = canRedeem(s, gift, price, !!opts.serverUrl)
            const why = left === 0 ? 'no-stock' : check === 'server-only' ? check : gift.claim.kind === 'gateway' && !me.gateway ? 'no-link' : check
            const value = gift.usd !== undefined ? `$${gift.usd}` : `${price}c`
            const stockText = left < 0 ? 'unlimited' : `${left} × ${value} left`
            const status =
              why === 'no-stock' ? 'sold out'
              : why === 'no-link' ? 'link your gateway login first'
              : why === 'server-only' ? 'needs the online server'
              : why === 'no-coins' ? `need ${price - s.coins} more coins`
              : 'affordable'
            return (
              <Box flexDirection="column" marginTop={1}>
                <Box gap={1}>
                  <Text bold color={c.sponsor.color}>{`${value} of ${gift.name}`}</Text>
                  <Text>{`= ${price} coins`}</Text>
                  <Button key={`redeem-${gift.id}`} hotkey={i < 9 ? String(i + 1) : undefined} dimColor={why !== 'ok'} onPress={() => void redeemGift($, opts, gift.id)}>
                    {why === 'no-stock' ? 'Sold out' : `Redeem ${value} for ${price}c`}
                  </Button>
                </Box>
                <Text dimColor>{`${gift.description ?? ''}${gift.description ? ' · ' : ''}by ${gift.sponsor} · ${stockText} · ${status}`}</Text>
              </Box>
            )
          })}
          {lastClaim ? (
            <Box gap={1} marginTop={1}>
              <Text color="green">{`🎁 ${lastClaim.giftName}: ${lastClaim.claim}`}</Text>
              <Button key="copy" onPress={(p: UiPressArgument) => void $.ui.copy({ text: lastClaim.claim, surface: p.surface })}>
                Copy
              </Button>
            </Box>
          ) : null}
        </Box>
      )
    } else {
      body = (
        <Box flexDirection="column" gap={0}>
          {!opts.serverUrl ? (
            <Text dimColor>Single-player mode. Set banana.serverUrl in config to join the leaderboard.</Text>
          ) : b.error ? (
            <Text color="red">{`Leaderboard unavailable: ${b.error}`}</Text>

function sponsorArt($: EngineInterface, e: RenderInput<'Pane'>, c: Content) {
  if (e.surface !== 'terminal' && c.sponsor.logo) {
    const { Svg } = $.ui.resolve(e)
    return <Svg source={c.sponsor.logo} alt={`${c.sponsor.name} logo`} height={c.sponsor.logoHeight ?? 64} />
  }
  const { Box, Text } = $.ui.resolve(e)
  return (
    <Box flexDirection="column">
      {c.sponsor.banner.map(line => (
        <Text color={c.sponsor.color}>{line}</Text>
      ))}
    </Box>
  )
}

function linkOrText(Link: any, Text: any, href: string, label: string) {
  return isLinkable(href) ? (
    <Link href={href} label={label} />
  ) : (
    <Text>
      <Text>{`${label} `}</Text>
      <Text underline color="cyan">{href}</Text>
    </Text>
  )
}