import React, { useState, useEffect, useRef, useMemo } from 'react';
import { useNavigate } from 'react-router-dom';

// Import Zustand store
import { useAuthStore } from '../stores/authStore';
import type { UserData } from '../stores/authStore';
import { CONFIG } from '../utils/config';

// Import utilities
import { generateActionFigure } from '../utils/imageGenerationUtils';

// Import components
import UserInfoDisplay from '../components/UserInfoDisplay';
import ImageModal from '../components/ImageModal';
import ShareableImage from '../components/ShareableImage';
import { useSEO } from '../hooks/useSEO';

// API key is now handled by the backend Cloud Function

const Create = () => {
  const navigate = useNavigate();
  const { user, userData, isAuthenticated, queryUserData } = useAuthStore();

  // SEO optimization for Create page
  useSEO({
    title: 'Create AI Action Figures - AiFigure Generator | Free AI Art Creation Tool',
    description: 'Create stunning AI-generated action figures with our advanced AI technology. Upload reference images, customize your prompts, and generate unique action figures for free. Join thousands of artists creating amazing AI collectibles.',
    keywords: 'create AI action figures, AI art generator tool, custom figurine creator, AI toy generator, free AI image creation, action figure maker, AI collectibles generator, custom toy design',
    ogTitle: 'Create AI Action Figures - AiFigure Generator | Free AI Art Creation Tool',
    ogDescription: 'Create stunning AI-generated action figures with our advanced AI technology. Upload reference images, customize your prompts, and generate unique action figures for free.',
    ogImage: 'https://aifigure.com/create-og-image.jpg',
    ogUrl: window.location.href,
    twitterTitle: 'Create AI Action Figures - AiFigure Generator | Free AI Art Creation Tool',
    twitterDescription: 'Create stunning AI-generated action figures with our advanced AI technology. Upload reference images, customize your prompts, and generate unique action figures for free.',
    twitterImage: 'https://aifigure.com/create-og-image.jpg',
    canonical: window.location.href,
    type: 'website',
  });

  // State variables
  const [uploadedImage, setUploadedImage] = useState<File | null>(null);
  const [generatedImageUrl, setGeneratedImageUrl] = useState('');
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [isDragOver, setIsDragOver] = useState(false);
  const [customPrompt, setCustomPrompt] = useState('');
  const [selectedStyle, setSelectedStyle] = useState<string>('');
  const [previewUrl, setPreviewUrl] = useState<string>('');
  const figureStyles = useMemo<{ key: string; prompt: string; thumb: string }[]>(() => ([
    { prompt: 'Transform this person into a Western statue maquette. Fixed-pose collectible sculpture with dramatic stance, fashion modal body proportions, sharp sculpted details, realistic painted textures, matte and glossy shading, high-quality resin material. Displayed on a base with themed design. Strong studio lighting, premium product showcase photography.', key: 'Realistic', thumb: '/hottoy.png' },
    { prompt: 'Transform this person into a Nendoroid chibi figure. Big round head, tiny body, glossy plastic toy look, smooth vinyl textures, cute anime proportions, large expressive eyes, small nose and mouth, simplified details, bright clean colors, standing on a small display base. ', key: 'Nendoroid', thumb: '/t1.png' },
    { prompt: 'Funko Pop, (stictly with solid eyes, really big head, small body)', key: 'Funko Pop', thumb: 't2.png' },
    { prompt: 'LEGO minifig, (stictly c shaped hands, stictly classic cylinder LEGO minifigure face, with lego blocks standing dock. lego logo on the box, details on outfits)', key: 'LEGO', thumb: '/lego.png' },
    { prompt: 'Transform this person into 3 piece designer bikini. big breast, long legs', key: 'Bikini Mode', thumb: '/bikini.png' },
  ]), []);

  useEffect(() => {
    if (uploadedImage) {
      const url = URL.createObjectURL(uploadedImage);
      setPreviewUrl(url);
      return () => URL.revokeObjectURL(url);
    } else {
      setPreviewUrl('');
    }
  }, [uploadedImage]);

  // Modal state
  const [isModalOpen, setIsModalOpen] = useState(false);
  const [modalImageUrl, setModalImageUrl] = useState('');
  const [modalAltText, setModalAltText] = useState('');

  const fileInputRef = useRef<HTMLInputElement>(null);

  useEffect(() => {
    console.log('🏠 Create component useEffect triggered, checking auth state...');
    console.log('🔍 useEffect dependencies:', {
      isAuthenticated,
      user: user?.email,
      userData: userData ? { tokens: userData.tokens, subscriptionTier: userData.subscriptionTier } : null
    });

    if (!isAuthenticated) {
      console.log('❌ User not authenticated, redirecting to auth...');
      navigate('/auth');
      return;
    }

    console.log('👤 User authenticated:', user?.email || user?.phoneNumber);
    console.log('📊 User data from centralized store:', userData);

    // If user is authenticated but userData is null, query it again
    if (isAuthenticated && user && !userData) {
      console.log('🔄 User authenticated but userData is null, querying again...');

      // Use the store's queryUserData function (it handles state updates internally)
      queryUserData(user.uid).then((freshUserData) => {
        if (freshUserData) {
          console.log('✅ Re-queried userData successfully');
        } else {
          console.log('⚠️ No user document found on re-query, setting defaults');
          const defaultData: UserData = {
            tokens: CONFIG.app.defaultTokens,
            subscriptionTier: 'free',
            generatedImages: [],
            publicImages: []
          };
          // Update the store with default data
          useAuthStore.setState({ userData: defaultData });
        }
      }).catch((error) => {
        console.error('❌ Failed to re-query userData:', error);
        // Set defaults even on error to prevent infinite loading
        const defaultData: UserData = {
          tokens: CONFIG.app.defaultTokens,
          subscriptionTier: 'free',
          generatedImages: [],
          publicImages: []
        };
        useAuthStore.setState({ userData: defaultData });
      });
    }

  }, [isAuthenticated, user, userData, navigate]);


  // Event handlers
  const handleFileSelect = (file: File) => {
    setUploadedImage(file);
    setGeneratedImageUrl('');
    setError('');
  };

  const handleDragOver = (isOver: boolean) => {
    setIsDragOver(isOver);
  };

  const handleError = (errorMessage: string) => {
    setError(errorMessage);
  };

  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    const file = event.target.files?.[0];
    if (file) {
      handleFileSelect(file);
    }
  };

  const openFileDialog = () => {
    fileInputRef.current?.click();
  };



  // Modal handlers
  const openModal = (imageUrl: string, altText: string = "Image") => {
    setModalImageUrl(imageUrl);
    setModalAltText(altText);
    setIsModalOpen(true);
  };

  const closeModal = () => {
    setIsModalOpen(false);
    setModalImageUrl('');
    setModalAltText('');
  };

  // Image generation function
  const generateImage = async () => {
    if (!user || !uploadedImage) return;

    console.log('🚀 Starting image generation process...');
    console.log('👤 User authenticated:', !!user);
    console.log('🖼️ Image uploaded:', !!uploadedImage);
    console.log('🔑 User ID:', user.uid);

    try {
      setLoading(true);
      setError('');
      setGeneratedImageUrl('');

      // Check tokens
      const tokens = userData?.tokens || 0;
      if (tokens < 5) {
        setError('You need at least 5 tokens to generate an image. Please purchase more tokens or upgrade your plan.');
        navigate('/subscription');
        return;
      }

      // Append selected style to prompt only when sending
      const styletext = "stictly 2 arms and 2 legs. close up on the figure. the monitor should be cropped outside the photo frame as it is not the most important part."
      const promptForRequest = selectedStyle
        ? (customPrompt ? `${customPrompt}. ${styletext} ${selectedStyle}` : `${styletext} ${selectedStyle}`)
        : customPrompt;

      console.log('📝 Final prompt:', promptForRequest);
      console.log('👤 User details:', {
        uid: user.uid,
        email: user.email,
        displayName: user.displayName,
        providerId: user.providerData?.[0]?.providerId
      });

      // Generate image using backend Cloud Function
      const imageUrl = await generateActionFigure({
        uploadedImage,
        customPrompt: promptForRequest,
        userId: user.uid
      });

      setGeneratedImageUrl(imageUrl);

      // Note: Optimistic updates are now handled by the centralized Firestore listener
      // The real-time listener in the auth store will automatically update the userData
      console.log('📊 Centralized listener will update userData automatically');

      console.log('✅ Image generation completed successfully');
    } catch (error: any) {
      console.error('❌ Generation failed:', error);

      // Provide more specific error messages
      if (error.message?.includes('not authenticated') || error.message?.includes('Authentication failed')) {
        setError('Authentication error. Please sign out and sign in again to refresh your session.');
      } else if (error.message?.includes('User not authenticated')) {
        setError('You are not signed in. Please sign in and try again.');
      } else {
        setError(error.message || 'An error occurred during image generation. Please try again.');
      }
    } finally {
      setLoading(false);
    }
  };

  return (
    <div className="min-h-screen bg-black text-white flex flex-col items-center justify-center p-4 sm:p-8">
      {/* Main container with a card-like design */}
      <div className="bg-gray-900/50 backdrop-blur-md p-6 sm:p-10 rounded-2xl shadow-2xl w-full max-w-4xl flex flex-col items-center border border-gray-800">
        {/* Header and Description */}
        <div className="text-center mb-8">
          <h1 className="pb-4 text-4xl sm:text-5xl font-bold bg-gradient-to-r from-blue-400 to-purple-400 bg-clip-text text-transparent">
            AI Action Figure Creator
          </h1>
          <p className="mt-4 text-xl text-gray-300 max-w-2xl">
            Transform your picture into a miniature anime action figure with AI magic
          </p>
        </div>

        {/* User info and token display */}
        <UserInfoDisplay user={user} userData={userData} />

        {/* Main content area - changes based on state */}
        <div className="w-full mb-8">
          {/* Show upload area only when no image is generated and not loading */}
          {!generatedImageUrl && !loading && (
            <>
              {/* Image upload area with drag and drop */}
              <div className="mb-6">
                <div
                  onDragOver={(e) => { e.preventDefault(); handleDragOver(true); }}
                  onDragLeave={(e) => { e.preventDefault(); handleDragOver(false); }}
                  onDrop={(e) => {
                    e.preventDefault();
                    handleDragOver(false);
                    if (e.dataTransfer.files.length > 0) {
                      const file = e.dataTransfer.files[0];
                      if (file.type.startsWith('image/')) {
                        handleFileSelect(file);
                      } else {
                        handleError('Please upload a valid image file (JPEG or PNG).');
                      }
                    }
                  }}
                  onClick={openFileDialog}
                  className={`mb-4 relative border-2 border-dashed rounded-xl p-8 text-center cursor-pointer transition-all duration-300 ${isDragOver
                    ? 'border-blue-400 bg-blue-500/10'
                    : 'border-gray-600 hover:border-gray-500 hover:bg-gray-800/50'
                    }`}
                >
                  <input
                    ref={fileInputRef}
                    type="file"
                    accept="image/*"
                    className="hidden"
                    onChange={handleFileChange}
                  />

                  <div className="flex flex-col items-center">
                    <div className="w-16 h-16 bg-gray-800 rounded-full flex items-center justify-center mb-4">
                      <svg className="w-8 h-8 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
                      </svg>
                    </div>

                    <h3 className="text-lg font-semibold mb-2">
                      {uploadedImage ? 'Image Selected' : 'Drop your image here'}
                    </h3>

                    <p className="text-gray-400 text-sm mb-4">
                      {uploadedImage
                        ? `Selected: ${uploadedImage.name}`
                        : 'or click to browse files (JPEG, PNG)'
                      }
                    </p>

                    {uploadedImage && (
                      <div className="mt-4">
                        <img
                          src={previewUrl}
                          alt="Preview"
                          className="max-w-xs max-h-48 rounded-lg object-cover mx-auto"
                        />
                      </div>
                    )}
                  </div>
                </div>



                {/* Figure Style Selection */}
                <div className="mb-6">
                  <div className="flex items-center justify-between mb-2">
                    <span className="block text-sm font-medium text-gray-300">Choose a figure style (optional)</span>
                  </div>
                  <div className="flex flex-wrap flex-row gap-3 justify-between">
                    {figureStyles.map((style) => (
                      <button
                        key={style.key}
                        type="button"
                        onClick={() => {
                          setSelectedStyle(selectedStyle === style.prompt ? '' : style.prompt);
                        }}
                        className={`cursor-pointer w-[100px] h-[100px] relative rounded-xl overflow-hidden border transition-all duration-200 ${selectedStyle === style.prompt ? 'border-blue-500 ring-2 ring-blue-400/50' : 'border-gray-700 hover:border-gray-500'
                          }`}
                        aria-label={style.key}
                      >
                        <div className="aspect-square w-full bg-gray-800">
                          <img src={style.thumb} alt={style.key} className="w-full h-full object-cover" />
                        </div>
                        <div className="absolute bottom-0 inset-x-0 bg-black/60 text-xs text-gray-200 px-2 py-1 text-center">
                          {style.key}
                        </div>
                      </button>
                    ))}
                  </div>
                </div>

                {/* Custom prompt input */}
                <div className="mb-6">
                  <label htmlFor="customPrompt" className="block text-sm font-medium text-gray-300 mb-2">
                    Additional instructions (Optional)
                  </label>
                  <textarea
                    id="customPrompt"
                    value={customPrompt}
                    onChange={(e) => setCustomPrompt(e.target.value)}
                    placeholder="e.g. Make the dress pink, give blue hair, set the background in a forest, add a sword, etc. Let your imagination run wild!"
                    rows={3}
                    className="w-full px-4 py-3 bg-gray-800 border border-gray-600 rounded-xl text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent resize-none"
                  />
                </div>

                {error && (
                  <div className="bg-red-900/50 border border-red-700 text-red-300 p-4 rounded-xl text-center mb-6">
                    {/* The image maybe prohibited. Please try again. */}
                    {error}
                  </div>
                )}
                {/* Generate button */}
                <div className="text-center">
                  <button
                    onClick={generateImage}
                    disabled={!uploadedImage || loading || !user}
                    className="bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 disabled:from-gray-600 disabled:to-gray-600 text-white font-bold py-4 px-8 rounded-xl shadow-lg transition-all transform hover:scale-105 disabled:scale-100 disabled:opacity-50 disabled:cursor-not-allowed text-lg"
                  >
                    {!user ? (
                      'Sign in to Generate'
                    ) : userData && userData.tokens < 5 ? (
                      'Generate'
                    ) : (
                      'Generate Action Figure (5 tokens)'
                    )}
                  </button>

                  {!user && (
                    <p className="text-gray-400 text-sm mt-2">
                      Sign in to start creating amazing action figures!
                    </p>
                  )}
                </div>
              </div>
            </>
          )}

          {/* Show loading spinner during generation */}
          {loading && !generatedImageUrl &&
            <div className="bg-gray-800/50 backdrop-blur-md rounded-2xl p-8 text-center border border-gray-700">
              <div className="flex flex-col items-center space-y-6">
                {/* Animated image icon */}
                <div className="relative">
                  <div className="w-20 h-20 bg-gradient-to-br from-blue-900 to-purple-900 rounded-full flex items-center justify-center">
                    <svg className="w-10 h-10 text-white animate-pulse" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
                    </svg>
                  </div>
                  {/* Spinning ring */}
                  <div className="absolute inset-0 rounded-full border-4 border-blue-500/30 border-t-blue-200 animate-spin"></div>
                </div>

                <div className="text-gray-300">
                  <p className="text-2xl font-bold mb-2">Creating Your Action Figure</p>
                  <p className="text-lg text-gray-400 mb-4">AI is working its magic...</p>

                  <div className="text-sm text-gray-500 max-w-md mx-auto">
                    This usually takes 15-45 seconds. Our AI is carefully crafting your collectible figure with professional photography and perfect details.
                  </div>
                </div>

                {/* Progress bar */}
                <div className="w-full max-w-sm">
                  <div className="bg-gray-700 rounded-full h-2 overflow-hidden">
                    <div className="bg-gradient-to-r from-blue-500 to-purple-600 h-full rounded-full animate-pulse w-full"></div>
                  </div>
                  <p className="text-xs text-gray-500 mt-2">Processing your image...</p>
                </div>
              </div>
            </div>
          }

          {/* Show generated image when ready */}
          {generatedImageUrl && (
            <div className="bg-gray-900/50 backdrop-blur-md rounded-2xl p-6 border border-gray-700">
              <div className="text-center mb-6">
                <h2 className="text-2xl font-bold text-white mb-2">🎉 Your Action Figure is Ready!</h2>
                <p className="text-gray-400">AI-generated masterpiece created just for you</p>
              </div>

              <div className="flex flex-col items-center space-y-6">
                <div className="relative max-w-2xl w-full">
                  <img
                    src={generatedImageUrl}
                    alt="Generated anime action figure"
                    className="w-full rounded-xl shadow-2xl border border-gray-600 cursor-pointer hover:opacity-90 transition-opacity"
                    onClick={() => openModal(generatedImageUrl, "Generated anime action figure")}
                  />
                  <div className="absolute inset-0 rounded-xl bg-gradient-to-t from-black/20 to-transparent pointer-events-none"></div>
                </div>

                <div className="flex flex-col sm:flex-row gap-4 w-full max-w-md">

                  <button
                    onClick={async () => {
                      if (generatedImageUrl) {
                        try {
                          // Fetch the image as a blob to ensure download works
                          const response = await fetch(generatedImageUrl);
                          const blob = await response.blob();

                          // Create a blob URL for the download
                          const blobUrl = URL.createObjectURL(blob);

                          // Create download link with blob URL
                          const link = document.createElement('a');
                          link.href = blobUrl;
                          link.download = `action-figure-${Date.now()}.jpg`;
                          document.body.appendChild(link);
                          link.click();
                          document.body.removeChild(link);

                          // Clean up the blob URL after a short delay
                          setTimeout(() => URL.revokeObjectURL(blobUrl), 1000);
                        } catch (error) {
                          console.error('Download failed:', error);
                          // Fallback to direct download
                          const link = document.createElement('a');
                          link.href = generatedImageUrl;
                          link.download = `action-figure-${Date.now()}.jpg`;
                          link.target = '_blank';
                          document.body.appendChild(link);
                          link.click();
                          document.body.removeChild(link);
                        }
                      }
                    }}
                    className="flex-1 bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white font-bold py-3 px-6 rounded-xl shadow-lg transition-all transform hover:scale-105 active:scale-95 flex items-center justify-center space-x-2"
                  >
                    <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
                    </svg>
                    <span>Download</span>
                  </button>

                  <button
                    onClick={() => {
                      setUploadedImage(null);
                      setGeneratedImageUrl('');
                      setError('');

                      window.scrollTo({ top: 0, behavior: 'smooth' });
                    }}
                    className="flex-1 bg-gray-700 hover:bg-gray-600 text-white font-medium py-3 px-6 rounded-xl shadow-lg transition-all transform hover:scale-105 active:scale-95"
                  >
                    Create Another
                  </button>
                </div>

                <div className="text-center">
                  <p className="text-sm text-gray-500">
                    File saved automatically to your account for future downloads
                  </p>
                </div>
              </div>
            </div>
          )}
        </div>

        {/* Display area for error messages, loading state, and the generated image */}
        <div className="w-full">


          {/* User's Generated Images History */}
          {user && userData && userData.generatedImages && userData.generatedImages.length > 0 && (
            <div className="bg-gray-800/50 rounded-xl p-6 border border-gray-700">
              <div className="text-center mb-6">
                <h2 className="text-2xl font-bold text-white mb-2">Your Generated Images</h2>
              </div>

              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
                {userData.generatedImages
                  .sort((a, b) => {
                    // Sort by creation date, latest first (same as Profile.tsx)
                    const dateA = a.createdAt?.toDate?.() || new Date(a.createdAt);
                    const dateB = b.createdAt?.toDate?.() || new Date(b.createdAt);
                    return dateB.getTime() - dateA.getTime();
                  })
                  .slice(0, 6) // Get first 6 images (most recent after sorting)
                  .map((image: any, index: number) => {
                    // Find the original index in the unsorted array for the imageId
                    const originalIndex = userData.generatedImages.findIndex(img => img === image);
                    console.log(`🔍 Create page image ${index}:`, {
                      originalIndex,
                      createdAt: image.createdAt?.toDate?.() || image.createdAt,
                      imageId: `user-${user.uid}-${originalIndex}`,
                      imageUrl: image.imageUrl?.substring(0, 50) + '...'
                    });
                    return (
                      <ShareableImage
                        key={index}
                        image={image}
                        imageId={`user-${user.uid}-${originalIndex}`}
                        showShareButton={true}
                      />
                    );
                  })}
              </div>

              {userData.generatedImages.length > 6 && (
                <div className="text-center mt-4">
                  <button
                    onClick={() => navigate('/profile')}
                    className="text-blue-400 hover:text-blue-300 text-sm underline"
                  >
                    View all {userData.generatedImages.length} images in your profile
                  </button>
                </div>
              )}
            </div>
          )}
        </div>
      </div>

      {/* Image Modal */}
      <ImageModal
        isOpen={isModalOpen}
        imageUrl={modalImageUrl}
        altText={modalAltText}
        onClose={closeModal}
      />
    </div>
  );
};

export default Create;