import React, { useState, useEffect } from "react";
import ExamplePrompts from "./ExamplePrompts";
import "./Landing.css";

const examplePromptsList = [
  "Write a romantic comedy set in New York.",
  "Generate a thriller about a detective chasing a serial killer.",
  "Create a sci-fi scene on a distant planet.",
  "Write a dialogue between two estranged siblings.",
  "Outline a fantasy adventure with dragons and magic.",
];

export default function Landing({ initialPrompt }) {
  const [prompt, setPrompt] = useState(initialPrompt || "");
  const [output, setOutput] = useState(
    "Your screenplay output will appear here..."
  );
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    if (initialPrompt) setPrompt(initialPrompt);
  }, [initialPrompt]);

  async function generate() {
    setLoading(true);
    setOutput("Generating screenplay...");
    try {
      const response = await fetch("http://localhost:8000/generate-story", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ user_input: prompt }),
      });
      if (!response.ok) {
        throw new Error("Backend error: " + response.status);
      }
      const data = await response.json();
      setOutput(
        `Genre: ${data.genre || ''}\n` +
        `Tone: ${data.tone || ''}\n\n` +
        `Outline:\n${data.outline || ''}\n\n` +
        `Scene:\n${data.scene || ''}\n\n` +
        `Dialogue:\n${data.dialogue || ''}`
      );
    } catch (error) {
      setOutput("Error generating screenplay: " + error.message);
    } finally {
      setLoading(false);
    }
  }

  return (
    <div className="container">
      <div className="content">
        <h1 className="heading">Screenplay Generator</h1>
        <p className="description">
          Simply provide a brief prompt, and this AI will craft a complete screenplay tailored to your idea — seamlessly weaving together the genre, plot outline, character development, and dialogue to bring your story to life.
        </p>

        {/* Example prompts box */}
        <ExamplePrompts prompts={examplePromptsList} onSelect={setPrompt} />

        <textarea
          className="textarea"
          value={prompt}
          onChange={(e) => setPrompt(e.target.value)}
          placeholder="Enter your prompt here..."
          rows={6}
        />

        <button className="button" onClick={generate} disabled={loading}>
          {loading ? "Generating..." : "Generate Screenplay"}
        </button>

        <pre className="output" style={{ whiteSpace: 'pre-wrap' }}>{output}</pre>
      </div>
    </div>
  );
}