src/StoryGenerator.js

import React, { useState } from "react";

function StoryGenerator() {
  const [userInput, setUserInput] = useState("");
  const [result, setResult] = useState(null);
  const [loading, setLoading] = useState(false);

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    setResult(null);
    try {
      const response = await fetch("http://localhost:8000/generate-story", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ user_input: userInput }),
      });
      const data = await response.json();
      setResult(data);
    } catch (err) {
      setResult({ error: "Failed to connect to backend." });
    }
    setLoading(false);
  };

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <textarea
          value={userInput}
          onChange={(e) => setUserInput(e.target.value)}
          placeholder="Enter your story idea..."
        />
        <button type="submit" disabled={loading}>
          {loading ? "Generating..." : "Generate Story"}
        </button>
      </form>
      {result && (
        <div>
          {result.error ? (
            <div style={{ color: "red" }}>{result.error}</div>
          ) : (
            <div>
              <h3>Genre: {result.genre}</h3>
              <h4>Tone: {result.tone}</h4>
              <p><strong>Outline:</strong> {result.outline}</p>
              <p><strong>Scene:</strong> {result.scene}</p>
              <pre><strong>Dialogue:</strong> {result.dialogue}</pre>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

export default StoryGenerator;