import { useState, useEffect, useRef } from "react";
import { useAuth } from "@/lib/auth";
import StoryGenerator from "@/components/story-generator";
import StoryDisplay from "@/components/story-display";
import { Button } from "@/components/ui/button";
import { Badge } from "@/components/ui/badge";
import { ArrowLeft, Crown, Headphones } from "lucide-react";
import { Link } from "wouter";
import bedtimeBardLogo from "@assets/BB Logo Transparent.png";
import { SEOHead } from "@/components/seo-head";
import { pageMetadata } from "@/lib/seo-data";

export default function CreateStory() {
  const [generatedStory, setGeneratedStory] = useState<any>(null);
  const [isGenerating, setIsGenerating] = useState(false);
  const { user } = useAuth();
  const loadingRef = useRef<HTMLDivElement>(null);
  const storyRef = useRef<HTMLDivElement>(null);

  const handleStoryGenerated = (story: any) => {
    setGeneratedStory(story);
  };

  const handleCreateAnother = () => {
    setGeneratedStory(null);
  };

  const handleGeneratingChange = (generating: boolean) => {
    setIsGenerating(generating);
    
    // Scroll to loading panel when generation starts
    if (generating && loadingRef.current) {
      loadingRef.current.scrollIntoView({ 
        behavior: 'smooth', 
        block: 'center' 
      });
    }
  };

  // Auto-scroll to story when it's generated
  useEffect(() => {
    if (generatedStory && storyRef.current) {
      storyRef.current.scrollIntoView({ 
        behavior: 'smooth', 
        block: 'start' 
      });
    }
  }, [generatedStory]);

  return (
    <>
      <SEOHead 
        title="Create Your Story - Bedtime Bard"
        description="Create personalized AI-generated bedtime stories for your child. Choose themes, characters, and moral lessons to craft the perfect bedtime tale."
        keywords="create bedtime story, personalized children story, AI story generator, custom bedtime tales, kids story maker"
        canonicalUrl="https://www.bedtimebard.com/create-story"
      />
      <div className="min-h-screen bg-gradient-to-br from-purple-50 via-blue-50 to-indigo-100 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
        <div className="container mx-auto px-1 sm:px-4 py-2 sm:py-8">
        {/* Back button */}
        <div className="mb-6">
          <Link href="/">
            <Button variant="ghost" className="text-gray-600 dark:text-gray-300 hover:text-gray-800 dark:hover:text-gray-100">
              <ArrowLeft className="h-4 w-4 mr-2" />
              Back to Home
            </Button>
          </Link>
        </div>

        {/* Page header */}
        <div className="text-center mb-8">
          <h1 className="text-4xl font-bold text-brand-blue dark:text-white mb-4">
            Create Your Story
          </h1>
          <p className="text-lg dark:text-gray-300 max-w-2xl mx-auto text-[#fe7232]">
            Turn your child into the hero of their own bedtime story
          </p>
        </div>

        {/* Main content */}
        <div className="max-w-6xl mx-auto">
          {generatedStory ? (
            <div id="generated-story" ref={storyRef}>
              <StoryDisplay 
                story={generatedStory} 
                onCreateAnother={handleCreateAnother}
              />
            </div>
          ) : (
            <div className="bg-white dark:bg-gray-800 rounded-lg shadow-lg p-1 sm:p-3 md:p-6 lg:p-8">
              <StoryGenerator 
                onStoryGenerated={handleStoryGenerated}
                onGeneratingChange={handleGeneratingChange}
              />
            </div>
          )}
        </div>

        {/* Loading overlay */}
        {isGenerating && (
          <div id="story-loading-panel" ref={loadingRef} className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div className="bg-white dark:bg-gray-800 rounded-lg p-8 max-w-md mx-4 text-center">
              <img 
                src={bedtimeBardLogo} 
                alt="Bedtime Bard" 
                className="w-12 h-12 animate-bounce-gentle mx-auto mb-4"
              />
              <h3 className="text-lg font-semibold text-gray-800 dark:text-white mb-2">
                Creating Your Story...
              </h3>
              <p className="text-gray-600 dark:text-gray-300 mb-4">
                Our AI Bards are crafting a magical tale just for you. This process takes 30-60 seconds for the best quality.
              </p>
              
              {/* Progress bar */}
              <div className="w-full bg-gray-200 dark:bg-gray-600 rounded-full h-2 mb-4">
                <div className="bg-gradient-to-r from-purple-500 to-pink-500 h-2 rounded-full animate-pulse" style={{width: '60%'}}></div>
              </div>
              
              <p className="text-sm text-amber-600 dark:text-amber-400 font-medium mb-2">
                ⚠️ Please don't close or refresh your browser
              </p>
              <p className="text-xs text-gray-500 dark:text-gray-400">
                This page will respond automatically when your story is ready
              </p>
            </div>
          </div>
        )}
        </div>
      </div>
    </>
  );
}