import React, { useState } from 'react';
import { Input, Modal, Space, Typography } from 'antd';

const { Text } = Typography;
const { TextArea } = Input;

interface Props {
  open: boolean;
  nodeId: string | null;
  nodeLabel: string | null;
  onClose: () => void;
  onSubmit: (prompt: string) => void;
  loading: boolean;
}

export function NodeEditModal({
  open,
  nodeId,
  nodeLabel,
  onClose,
  onSubmit,
  loading,
}: Props) {
  const [prompt, setPrompt] = useState('');

  function handleSubmit() {
    if (!prompt.trim()) return;
    onSubmit(prompt.trim());
    setPrompt('');
  }

  return (
    <Modal
      title={`Edit Node: ${nodeLabel || nodeId}`}
      open={open}
      onCancel={onClose}
      onOk={handleSubmit}
      okText="Apply"
      okButtonProps={{ loading }}
      destroyOnClose
      width={480}
    >
      <Space direction="vertical" style={{ width: '100%' }} size="middle">
        <Text type="secondary">
          Describe how you want to modify this node. The AI will update only
          this node.
        </Text>
        <TextArea
          rows={3}
          placeholder="e.g. Change the timeout to 30 minutes and add a fallback approver"
          value={prompt}
          onChange={(e) => setPrompt(e.target.value)}
          onPressEnter={(e) => {
            if (e.ctrlKey) handleSubmit();
          }}
        />
      </Space>
    </Modal>
  );
}
