export interface AskEditorProps {
  question: string;
  onQuestionChange: (value: string) => void;
  phase: "idle" | "editing" | "submitting";
  error: string | null;
  onSubmit: () => void;
  onCancel: () => void;
  className?: string;
}

export function AskEditor({
  question,
  onQuestionChange,
  phase,
  error,
  onSubmit,
  onCancel,
  className,
}: AskEditorProps) {
  const isSubmitting = phase === "submitting";
  const isEmpty = !question.trim();

  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
      e.preventDefault();
      if (!isEmpty && !isSubmitting) {
        onSubmit();
      }
    }
  };

  return (
    <div className={className}>
      <label htmlFor="ask-question" className="sr-only">
        Ask a question about the plan
      </label>
      <textarea
        id="ask-question"
        placeholder="Ask a question about the plan..."
        value={question}
        onChange={(e) => onQuestionChange(e.target.value)}
        disabled={isSubmitting}
        onKeyDown={handleKeyDown}
        className="w-full bg-gray-800 border border-gray-700 rounded px-3 py-2 text-sm text-gray-200 resize-none"
        rows={4}
      />
      {error && <p className="text-sm text-red-400 mt-1">{error}</p>}
      <div className="flex gap-2 mt-2">
        <button
          type="button"
          onClick={onSubmit}
          disabled={isEmpty || isSubmitting}
          className="px-4 py-2 bg-blue-600 text-white rounded text-sm disabled:opacity-50"
        >
          {isSubmitting ? "Asking..." : "Submit"}
        </button>
        <button
          type="button"
          onClick={onCancel}
          disabled={isSubmitting}
          className="px-4 py-2 bg-gray-700 text-gray-300 rounded text-sm disabled:opacity-50"
        >
          Cancel
        </button>
      </div>
    </div>
  );
}
