"use client";

import React, { useState } from "react";
import type { WorkflowDefinition } from "@/lib/workflow-types";

interface WorkflowInputFormProps {
  definition: WorkflowDefinition;
  onSubmit: (input: string) => void;
  isLoading?: boolean;
}

export const WorkflowInputForm: React.FC<WorkflowInputFormProps> = ({
  definition,
  onSubmit,
  isLoading = false,
}) => {
  const [inputValue, setInputValue] = useState(definition.input || "");

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    onSubmit(inputValue);
  };

  const firstNode = definition.nodes.length > 0 ? definition.nodes[0] : null;
  const hasInputFields =
    firstNode?.data && Object.keys(firstNode.data).length > 0;

  return (
    <form onSubmit={handleSubmit} className="space-y-4">
      {/* Instructions */}
      {!hasInputFields && (
        <p className="text-sm text-foreground-500">
          This workflow doesn't require any input to start.
        </p>
      )}

      {/* Input field */}
      {hasInputFields && (
        <div>
          <label
            htmlFor="workflow-input"
            className="block text-sm font-medium text-foreground mb-2"
          >
            Input Data
          </label>
          <textarea
            id="workflow-input"
            value={inputValue}
            onChange={(e) => setInputValue(e.target.value)}
            placeholder="Enter workflow input (e.g., JSON or plain text)"
            className="w-full px-3 py-2 bg-background-200 border border-neutral-200 rounded-lg text-foreground placeholder-foreground-500 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"
            rows={4}
            disabled={isLoading}
          />
          <p className="text-xs text-foreground-500 mt-1">
            {inputValue.length} characters
          </p>
        </div>
      )}

      {/* Submit button */}
      <button
        type="submit"
        disabled={isLoading}
        className="w-full px-4 py-2 bg-primary-600 text-white rounded-lg hover:bg-primary-700 disabled:bg-primary-600/50 disabled:cursor-not-allowed font-medium transition"
      >
        {isLoading ? "Starting..." : "Execute Workflow"}
      </button>
    </form>
  );
};
