import React from 'react';
import { Box, Text } from 'ink';
import { colors, formatSatoshis, formatHex } from '../../../theme.js';
import type { SelectableUTXO, FocusArea } from '../types.js';

interface Props {
  availableUtxos: SelectableUTXO[];
  selectedUtxoIndex: number;
  requiredAmount: bigint;
  fee: bigint;
  selectedAmount: bigint;
  changeAmount: bigint;
  focusArea: FocusArea;
}

export function InputsStep({
  availableUtxos,
  selectedUtxoIndex,
  requiredAmount,
  fee,
  selectedAmount,
  changeAmount,
  focusArea,
}: Props): React.ReactElement {
  return (
    <Box flexDirection='column'>
      <Text color={colors.text} bold>
        Select UTXOs to fund the transaction:
      </Text>

      <Box marginTop={1} flexDirection='column'>
        <Text color={colors.textMuted}>
          Required: {formatSatoshis(requiredAmount)} +{' '}
          {formatSatoshis(fee)} fee
        </Text>
        <Text
          color={
            selectedAmount >= requiredAmount + fee
              ? colors.success
              : colors.warning
          }
        >
          Selected: {formatSatoshis(selectedAmount)}
        </Text>
        {selectedAmount > requiredAmount + fee && (
          <Text color={colors.info}>
            Change: {formatSatoshis(changeAmount)}
          </Text>
        )}
      </Box>

      <Box
        marginTop={1}
        flexDirection='column'
        borderStyle='single'
        borderColor={colors.border}
        paddingX={1}
      >
        {availableUtxos.length === 0 ? (
          <Text color={colors.textMuted}>No UTXOs available</Text>
        ) : (
          availableUtxos.map((utxo, index) => {
            const isCursor =
              selectedUtxoIndex === index && focusArea === 'content';
            return (
              <Box
                key={`${utxo.outpointTransactionHash}:${utxo.outpointIndex}`}
              >
                <Text
                  color={isCursor ? colors.focus : colors.text}
                  bold={isCursor}
                >
                  {isCursor ? '▸ ' : '  '}[{utxo.selected ? 'X' : ' '}]{' '}
                  {formatSatoshis(utxo.valueSatoshis)} -{' '}
                  {formatHex(utxo.outpointTransactionHash, 12)}:
                  {utxo.outpointIndex}
                </Text>
              </Box>
            );
          })
        )}
      </Box>

      <Box marginTop={1}>
        <Text color={colors.textMuted} dimColor>
          Space/Enter: Toggle • a: Select all • n: Deselect all
        </Text>
      </Box>
    </Box>
  );
}