import React from 'react';
import { Box, Text } from 'ink';
import { colors } from '../../../theme.js';
import type { VariableInput, DataResult } from '../types.js';

interface DataResultStepProps {
  actionName: string;
  variables: VariableInput[];
  dataResults: DataResult[];
}

/**
 * Displays the result of a data-only action (e.g. sign, verify).
 *
 * NOTE: Engine-level data action execution is not yet implemented.
 * The computed values are stubbed until the engine supports evaluating
 * CashASM data expressions outside of a transaction context.
 */
export function DataResultStep({
  actionName,
  variables,
  dataResults,
}: DataResultStepProps): React.ReactElement {
  return (
    <Box flexDirection="column">
      <Text color={colors.primary} bold>
        {actionName} — Result
      </Text>

      {/* Variables that were provided */}
      {variables.length > 0 && (
        <Box marginTop={1} flexDirection="column">
          <Text color={colors.text}>Provided values:</Text>
          {variables.map((v) => (
            <Text key={v.id} color={colors.textMuted}>
              {'  '}{v.name}: {v.value || '(empty)'}
            </Text>
          ))}
        </Box>
      )}

      {/* Computed data results */}
      <Box marginTop={1} flexDirection="column">
        <Text color={colors.text}>Output:</Text>
        {dataResults.length === 0 ? (
          <Text color={colors.warning}>
            {'  '}Engine support for data actions is not yet implemented.
          </Text>
        ) : (
          dataResults.map((result) => (
            <Box key={result.id} flexDirection="column" marginTop={0}>
              <Text color={colors.textMuted}>
                {'  '}{result.name} ({result.type}):
              </Text>
              {result.value !== null ? (
                <Box
                  borderStyle="single"
                  borderColor={colors.primary}
                  paddingX={1}
                  marginLeft={2}
                >
                  <Text color={colors.accent}>{result.value}</Text>
                </Box>
              ) : (
                <Text color={colors.warning} dimColor>
                  {'    '}Pending — engine data execution not yet available
                </Text>
              )}
            </Box>
          ))
        )}
      </Box>

      <Box marginTop={1}>
        <Text color={colors.textMuted} dimColor>
          Press Done to exit.
        </Text>
      </Box>
    </Box>
  );
}