import React, { useState } from 'react';
import { Handle, Position } from 'reactflow';

const InputNode = ({ id, data }) => {
  const [spaceId, setSpaceId] = useState('');
  const [loading, setLoading] = useState(false);

  const handleLoad = () => {
    if (spaceId) {
      setLoading(true);
      data.onLoad(id, spaceId);
      // The parent will handle the actual replacement or error state
    }
  };

  // If the parent component passes an error, it means loading failed.
  // We reset the loading state to allow the user to try again.
  if (data.error && loading) {
    setLoading(false);
  }

  return (
    <div className={`input-node ${data.error ? 'error' : ''}`}>
      <Handle type="target" position={Position.Left} />
      <div className="input-node-header">
        <strong>Hugging Face Space</strong>
      </div>
      <div className="input-node-content">
        <p>Enter the Space ID to load.</p>
        <input
          type="text"
          value={spaceId}
          onChange={(e) => setSpaceId(e.target.value)}
          placeholder="e.g., gradio/hello-world"
          disabled={loading}
        />
        <button onClick={handleLoad} disabled={loading}>
          {loading ? 'Loading...' : 'Load'}
        </button>
        {data.error && <div className="node-error-message">{data.error}</div>}
      </div>
      <Handle type="source" position={Position.Right} />
    </div>
  );
};

export default InputNode;