taxi-meter

  on('ui.render', { component: 'Pane', requestId: PANE }, async ($, e) => {
    const { Box, Text, Button } = $.ui.resolve(e)
    const w = PANE_WORDS[cfg.lang]
    const now = await read($, live)
    const limit = await read($, budget)
    const hidden = await read($, isHidden)
    const rides = await read($, trips)
    const points = await read($, history)
    const cols = Math.max(20, e.props.bodyColumns)

    const fare = money(now.units, cfg.currency)
    const digits = bigDigits(fare)
    const isBig = digits !== null && digits[0]!.length <= cols
    const pct = budgetPct({ units: now.units, budget: limit > 0 ? units(limit) : null })
    const lamp =
      now.phase === 'idle'
        ? { text: cfg.lang === 'zh' ? '空车' : 'FOR HIRE', color: 'green' }
        : now.phase === 'waiting'
          ? { text: cfg.lang === 'zh' ? '等候 ⏳' : 'WAITING ⏳', color: 'yellow' }
          : { text: `${cfg.lang === 'zh' ? '载客' : 'HIRED'} ${now.isLit ? '●' : '○'}`, color: 'red' }
    const drumColor = pct !== null && pct >= 100 ? 'red' : '#f5c518'

    const barWidth = Math.max(8, Math.min(30, cols - 24))
    const filled = pct === null ? 0 : Math.min(barWidth, Math.round((pct / 100) * barWidth))
    const spend = spendBuckets(points, await $.clock.now(), Math.max(10, Math.min(30, cols - 16)), 60000)

    return (
      <Box flexDirection="column">
        <Box flexDirection="row" justifyContent="space-between">
          <Text bold color={lamp.color}>
            {lamp.text}
          </Text>
          <Text dimColor>{w.brand}</Text>
        </Box>
        {isBig ? (
          <Box flexDirection="column" marginY={1}>
            {digits.map(row => (
              <Text color={drumColor} bold>
                {row}
              </Text>
            ))}
          </Box>
        ) : (
          <Text color={drumColor} bold>
            {fare}
          </Text>
        )}
        <Text>
          {now.trip !== null && now.trip > 0
            ? `${now.phase === 'idle' ? w.last : w.ride} ${money(now.trip, cfg.currency)}`
            : ' '}
          {now.flash > 0 ? `  ▲${(now.flash / 100).toFixed(2)}` : ''}
        </Text>
        {now.phase !== 'idle' && (
          <Text dimColor>
            {w.time} {duration(now.rideMs)}
            {now.rate >= 1 ? `  ·  ${w.rate} ${money(Math.round(now.rate), cfg.currency)}/min` : ''}
            {now.tool ? `  ·  ${now.tool}` : ''}
          </Text>
        )}
        <Text>
          {pct === null ? (
            <Text dimColor>{w.noBudget}</Text>
          ) : (
            <Text color={pct >= 100 ? 'red' : pct >= 80 ? 'yellow' : 'green'}>
              {w.budget} {'█'.repeat(filled)}
              {'░'.repeat(barWidth - filled)} {pct}% / {moneyUsd(limit, cfg.currency, cfg.cnyRate)}
            </Text>
          )}
        </Text>
        {cfg.planUsd > 0 && (
          <Text>
            <Text dimColor>{w.payback} </Text>
            <Text color="cyan" bold>
              💎 {paybackText(payback() ?? 0, cfg.lang)}
            </Text>
            <Text dimColor>
              {'  '}
              {moneyUsd(m.monthUsd, cfg.currency, cfg.cnyRate)} / {moneyUsd(cfg.planUsd, cfg.currency, cfg.cnyRate)}
            </Text>
          </Text>
        )}
        <Text>
          <Text dimColor>{w.spend} </Text>
          <Text color="#f5c518">{sparkline(spend)}</Text>
        </Text>
        <Box flexDirection="column" marginTop={1}>
          <Text bold>{w.recent}</Text>
          {rides.length === 0 && <Text dimColor>{w.none}</Text>}
          {rides
            .slice(-4)
            .reverse()
            .map(t => (
              <Text wrap="truncate-end">
                {moneyUsd(t.fare, cfg.currency, cfg.cnyRate).padStart(8)} {t.prompt}
              </Text>
            ))}
        </Box>
        <Box flexDirection="row" flexWrap="wrap" marginTop={1} gap={1}>
          <Button key="receipt" hotkey="r" label={w.receipt} onPress={() => $.command.run({ command: 'taxi' })} />
          <Button
            key="currency"
            hotkey="c"
            label={w.currency}
            onPress={() =>
              $.config.set({ key: 'taxi-meter.currency', value: cfg.currency === 'USD' ? 'CNY' : 'USD' })
            }
          />
          <Button key="budget" hotkey="b" label={w.addBudget} onPress={() => setBudget($, Math.max(0, limit) + 5)} />
          {limit > 0 && <Button key="nobudget" hotkey="n" label={w.clearBudget} onPress={() => setBudget($, 0)} />}
          <Button key="hide" hotkey="h" label={hidden ? w.show : w.hide} onPress={() => setHidden($, !hidden)} />
          <Button key="close" role="dismiss" label={w.close} onPress={() => $.ui.close({ id: PANE })} />
        </Box>
      </Box>
    )
  })