import React, { useState } from "react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Card, CardContent } from "@/components/ui/card";

export default function StoryGenerator() {
  const [childName, setChildName] = useState("");
  const [theme, setTheme] = useState("");
  const [storyLength, setStoryLength] = useState("");
  const [story, setStory] = useState("Enter details to generate a story...");
  const [imageUrl, setImageUrl] = useState(null);
  const [loading, setLoading] = useState(false);

  const generateStory = async () => {
    setLoading(true);
    try {
      const response = await fetch("/api/generate-story", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ childName, theme, storyLength }),
      });
      if (!response.ok) {
        throw new Error("Failed to fetch story");
      }
      const data = await response.json();
      setStory(data.story);
      generateImage(data.story);
    } catch (error) {
      setStory("Error generating story. Please try again.");
    }
    setLoading(false);
  };

  const generateImage = async (storyText) => {
    try {
      const response = await fetch("/api/generate-image", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ storyText }),
      });
      if (!response.ok) {
        throw new Error("Failed to fetch image");
      }
      const data = await response.json();
      setImageUrl(data.imageUrl);
    } catch (error) {
      console.error("Error generating image:", error);
    }
  };

  return (
    <div className="max-w-2xl mx-auto p-8 text-center bg-gradient-to-b from-blue-400 to-purple-600 rounded-lg shadow-xl text-white">
      <h1 className="text-4xl font-extrabold mb-6 drop-shadow-lg">AI-Powered Bedtime Stories</h1>
      <p className="text-lg mb-4">Create magical bedtime stories in seconds! Just enter a name and theme.</p>
      <div className="mb-4">
        <Input 
          className="text-black p-3 rounded-lg shadow-md" 
          placeholder="Child's Name" 
          value={childName} 
          onChange={(e) => setChildName(e.target.value)} 
        />
      </div>
      <div className="mb-4">
        <Input 
          className="text-black p-3 rounded-lg shadow-md" 
          placeholder="Story Theme (e.g., adventure, kindness)" 
          value={theme} 
          onChange={(e) => setTheme(e.target.value)} 
        />
      </div>
      <div className="mb-4">
        <Input 
          className="text-black p-3 rounded-lg shadow-md" 
          placeholder="Story Length (minutes)" 
          type="number"
          min="1"
          max="10"
          value={storyLength} 
          onChange={(e) => setStoryLength(e.target.value)} 
        />
      </div>
      <Button className="px-6 py-3 bg-yellow-400 text-black font-bold rounded-full hover:bg-yellow-500 transition" onClick={generateStory} disabled={loading}>
        {loading ? "Generating..." : "Generate Story"}
      </Button>
      <Card className="mt-6 p-6 bg-white text-black rounded-lg shadow-lg">
        <CardContent className="text-lg font-medium">{story}</CardContent>
      </Card>
      {imageUrl && (
        <div className="mt-6">
          <h2 className="text-2xl font-bold mb-4">Generated Illustration</h2>
          <img src={imageUrl} alt="Story Illustration" className="rounded-lg shadow-lg mx-auto" />
        </div>
      )}
    </div>
  );
}