import { Box, Text } from 'ink';
import TextInput from 'ink-text-input';
import type { Theme } from '../theme';

interface Props {
  command: string;
  theme: Theme;
  onChange: (value: string) => void;
  onSubmit: (value: string) => void;
}

/**
 * Single-line input modal pre-filled with a finding's remediation
 * command. Cursor lands on the first `<placeholder>` if one is
 * present (resolved by the parent before `command` reaches us — we
 * just render whatever we're given). Enter submits, Esc cancels at
 * the parent level via the keymap.
 */
export function RemediateModal({ command, theme, onChange, onSubmit }: Props) {
  return (
    <Box
      borderStyle="round"
      borderColor="cyan"
      backgroundColor={theme.dialogBg}
      flexDirection="column"
      paddingX={2}
      paddingY={1}
      width={80}
    >
      <Text color={theme.dialogFg} bold>
        Remediate
      </Text>
      <Box marginTop={1}>
        <Text color={theme.dialogFg}>
          Edit the command, then press Enter to run (Esc to cancel).
        </Text>
      </Box>
      <Box marginTop={1}>
        <Text color="cyan">$ </Text>
        <TextInput value={command} onChange={onChange} onSubmit={onSubmit} />
      </Box>
    </Box>
  );
}