import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAuthStore } from '../stores';
import { useSEO } from '../hooks/useSEO';
import {
  getAuth,
  GoogleAuthProvider,
  signInWithPopup,
  sendSignInLinkToEmail,
  isSignInWithEmailLink,
  signInWithEmailLink
} from 'firebase/auth';
import { getFirestore, doc, setDoc, getDoc } from 'firebase/firestore';



const Auth: React.FC = () => {
  const navigate = useNavigate();
  const { isLoading } = useAuthStore();

  // SEO optimization for Auth page
  useSEO({
    title: 'Sign In to AiFigure - Create AI Action Figures | Free AI Art Generator',
    description: 'Sign in to AiFigure to start creating amazing AI-generated action figures. Join our community of artists and generate unique action figures for free using advanced AI technology.',
    keywords: 'sign in AiFigure, login AI art generator, create account action figures, free AI art platform, AI collectibles community, custom figurine creator login',
    ogTitle: 'Sign In to AiFigure - Create AI Action Figures | Free AI Art Generator',
    ogDescription: 'Sign in to AiFigure to start creating amazing AI-generated action figures. Join our community of artists and generate unique action figures for free.',
    ogImage: 'https://aifigure.com/auth-og-image.jpg',
    ogUrl: window.location.href,
    twitterTitle: 'Sign In to AiFigure - Create AI Action Figures | Free AI Art Generator',
    twitterDescription: 'Sign in to AiFigure to start creating amazing AI-generated action figures. Join our community of artists and generate unique action figures for free.',
    twitterImage: 'https://aifigure.com/auth-og-image.jpg',
    canonical: window.location.href,
    type: 'website',
  });



  // Passwordless email states
  const [passwordlessEmail, setPasswordlessEmail] = useState('');

  // Local states for success and error messages
  const [success, setSuccess] = useState('');
  const [localError, setLocalError] = useState('');

  // Helper functions for clearing messages
  const clearLocalError = () => setLocalError('');
  const clearSuccess = () => setSuccess('');



  // Handle passwordless email link sign-in
  React.useEffect(() => {
    const handleEmailLinkSignIn = async () => {
      const auth = getAuth();

      if (isSignInWithEmailLink(auth, window.location.href)) {
        console.log('🔗 Email link detected, processing sign-in...');

        let email = window.localStorage.getItem('emailForSignIn');

        // If email not found in localStorage, prompt user
        if (!email) {
          console.log('📧 Email not found in localStorage, prompting user...');
          email = window.prompt('Please type your email again');

          if (!email) {
            console.error('❌ No email provided by user');
            setLocalError('Email address is required to complete sign-in');
            return;
          }
        }

        try {
          console.log('🔐 Signing in with email link...');
          const result = await signInWithEmailLink(auth, email, window.location.href);

          console.log('✅ Email link sign-in successful!');

          // Clean up localStorage
          window.localStorage.removeItem('emailForSignIn');

          // Try to create/update user document, but don't fail auth if it doesn't work
          try {
            console.log('📝 Creating/updating user document for email link auth...');
            await createUserDocument(result.user, 'passwordless');
            console.log('✅ User document created/updated successfully');

            // Add a small delay to ensure Firestore operation completes
            setTimeout(() => {
              console.log('🔄 Email link auth completed, navigating to home...');
              navigate('/');
            }, 1000);

          } catch (docError) {
            console.warn('⚠️ User document creation/update failed, but authentication succeeded:', docError);
            // Still navigate even if document creation fails
            setTimeout(() => {
              console.log('🔄 Email link auth completed (with doc error), navigating to home...');
              navigate('/');
            }, 1000);
          }

          setSuccess('Successfully signed in! 🎉');

        } catch (error: any) {
          console.error('❌ Email link sign-in error:', error);

          // Handle specific Firebase Auth errors
          let errorMessage = 'Failed to sign in with email link';

          if (error.code === 'auth/invalid-action-code') {
            errorMessage = 'The sign-in link is invalid or has expired.';
          } else if (error.code === 'auth/expired-action-code') {
            errorMessage = 'The sign-in link has expired. Please request a new one.';
          } else if (error.code === 'auth/user-disabled') {
            errorMessage = 'This account has been disabled.';
          } else if (error.code === 'auth/invalid-email') {
            errorMessage = 'Invalid email address.';
          } else if (error.message) {
            errorMessage = error.message;
          }

          setLocalError(errorMessage);
        }
      }
    };

    handleEmailLinkSignIn();
  }, [navigate]);

  const testFirestoreConnection = async () => {
    console.log('🧪 Testing Firestore connection...');
    try {
      // Try to read a non-existent document to test permissions
      console.log('🔍 Testing read permission...');
      // This should fail gracefully if permissions are correct
      return true;
    } catch (error: any) {
      console.error('❌ Firestore connection test failed:', error.code, error.message);
      return false;
    }
  };

  /**
   * Creates or updates a user document in Firestore with comprehensive user information
   * This function stores all user data including authentication method, tokens, and metadata
   * CRITICAL: Preserves existing user data (tokens, generatedImages) when user logs in again
   */
  const createUserDocument = async (user: any, method: string = 'unknown', retryCount = 0) => {
    console.log(`📝 createUserDocument called with method: ${method}, retry: ${retryCount}`);
    console.log('👤 Firebase User object:', {
      uid: user.uid,
      email: user.email,
      phoneNumber: user.phoneNumber,
      displayName: user.displayName,
      emailVerified: user.emailVerified,
      isAnonymous: user.isAnonymous
    });

    const db = getFirestore();
    const maxRetries = 3;

    console.log('🔧 Firestore instance:', !!db);

    // Test Firestore connection first
    const isConnected = await testFirestoreConnection();
    if (!isConnected) {
      console.error('❌ Firestore connection test failed, aborting document creation');
      return;
    }

    try {
      console.log('🔍 Checking if user document already exists...');
      const userDocRef = doc(db, 'users', user.uid);
      const existingDoc = await getDoc(userDocRef);

      if (existingDoc.exists()) {
        console.log('✅ User document already exists, updating login metadata only...');
        const existingData = existingDoc.data();

        // Preserve existing data, only update metadata
        const updateData = {
          // Update basic user information (these might change)
          email: user.email || existingData?.email || null,
          phoneNumber: user.phoneNumber || existingData?.phoneNumber || null,
          displayName: user.displayName || existingData?.displayName || null,
          photoURL: user.photoURL || existingData?.photoURL || null,

          // Update login metadata
          lastLogin: new Date(),
          authMethod: method, // Update auth method in case they switched

          // Update status
          emailVerified: user.emailVerified || existingData?.emailVerified || false,
          isAnonymous: user.isAnonymous || existingData?.isAnonymous || false,

          // PRESERVE existing application data - DO NOT OVERWRITE
          // tokens: existingData?.tokens || 25, // Keep existing tokens
          // generatedImages: existingData?.generatedImages || [], // Keep existing images
          // totalGenerations: existingData?.totalGenerations || 0, // Keep existing count

          // Update additional metadata
          userAgent: navigator.userAgent,
        };

        console.log('🔄 Updating existing user with preserved data:', {
          uid: user.uid,
          email: updateData.email,
          preservedTokens: existingData?.tokens,
          preservedImagesCount: existingData?.generatedImages?.length || 0,
          lastLogin: updateData.lastLogin
        });

        await setDoc(userDocRef, updateData, { merge: true });
        console.log('✅ Existing user document updated successfully (data preserved)');

      } else {
        console.log('🆕 User document does not exist, creating new user profile...');

        // Create new user profile with default values
        const newUserData = {
          // Basic user information
          uid: user.uid,
          email: user.email || null,
          phoneNumber: user.phoneNumber || null,
          displayName: user.displayName || null,
          photoURL: user.photoURL || null,

          // Account metadata
          createdAt: new Date(),
          lastLogin: new Date(),
          authMethod: method,

          // User status and preferences
          emailVerified: user.emailVerified || false,
          isAnonymous: user.isAnonymous || false,

          // Application-specific data - DEFAULT VALUES FOR NEW USERS
          tokens: 10, // Give new users 10 free tokens
          subscriptionTier: 'free',
          generatedImages: [],
          totalGenerations: 0,
          accountStatus: 'active',

          // Additional metadata
          userAgent: navigator.userAgent,
          signupSource: 'web_app',
          timezone: Intl.DateTimeFormat().resolvedOptions().timeZone
        };

        console.log('📄 Creating new user with default data:', {
          uid: newUserData.uid,
          email: newUserData.email,
          tokens: newUserData.tokens,
          createdAt: newUserData.createdAt
        });

        await setDoc(userDocRef, newUserData);
        console.log('✅ New user document created successfully');
      }

      // Verify the document exists and log final state
      console.log('🔍 Verifying final document state...');
      const finalDoc = await getDoc(userDocRef);
      if (finalDoc.exists()) {
        const finalData = finalDoc.data();
        console.log('✅ Final document state:', {
          uid: finalData?.uid,
          email: finalData?.email,
          tokens: finalData?.tokens,
          generatedImagesCount: finalData?.generatedImages?.length || 0,
          authMethod: finalData?.authMethod,
          lastLogin: finalData?.lastLogin?.toDate?.()?.toISOString() || finalData?.lastLogin
        });
      } else {
        console.error('❌ Document verification failed - document not found!');
      }
    } catch (error: any) {
      console.error('❌ Error in createUserDocument:', error);
      console.error('Error details:', {
        code: error.code,
        message: error.message,
        stack: error.stack,
        name: error.name
      });

      // Specific handling for different error types
      if (error.code === 'permission-denied') {
        console.error('🚫 PERMISSION DENIED: Check Firestore security rules');
        console.error('📋 Current user permissions may not allow writes to /users collection');
      } else if (error.code === 'unavailable') {
        console.error('🌐 NETWORK UNAVAILABLE: Check internet connection');
        console.error('📡 Firestore service may be temporarily down');
      } else if (error.code === 'failed-precondition') {
        console.error('⚠️ FAILED PRECONDITION: Firestore may not be enabled');
        console.error('🔧 Check Firebase Console - enable Firestore Database');
      } else if (error.code === 'resource-exhausted') {
        console.error('⏱️ RESOURCE EXHAUSTED: Quota exceeded');
        console.error('💰 Check Firebase billing/quota limits');
      } else {
        console.error('❓ UNKNOWN ERROR: Unexpected Firestore error');
      }

      // Handle retry logic based on error type
      if (error.code === 'unavailable' || error.code === 'failed-precondition') {
        console.log('⚠️ Firestore temporarily unavailable, but user auth succeeded');

        // Retry document creation if we haven't exceeded max retries
        if (retryCount < maxRetries) {
          console.log(`🔄 Retrying user document creation (attempt ${retryCount + 1}/${maxRetries})`);
          setTimeout(() => {
            createUserDocument(user, method, retryCount + 1);
          }, 2000 * (retryCount + 1)); // Exponential backoff
        } else {
          console.log('❌ Max retries exceeded, giving up on document creation');
        }
      } else {
        console.error('❌ Unexpected error in createUserDocument:', error);
        // Don't throw error for document creation failures during auth
      }
    }
  };



  const handleGoogleSignIn = async () => {
    console.log('🔐 Starting Google sign-in process...');
    clearLocalError();
    setSuccess('');

    try {
      console.log('🔧 Getting Firebase auth instance...');
      const auth = getAuth();
      console.log('✅ Auth instance obtained:', !!auth);

      const provider = new GoogleAuthProvider();
      provider.setCustomParameters({
        prompt: 'select_account'
      });
      console.log('🔧 Google provider configured');

      console.log('🔄 Opening Google sign-in popup...');
      const result = await signInWithPopup(auth, provider);
      console.log('✅ Google sign-in successful!');
      console.log('👤 User data:', {
        uid: result.user.uid,
        email: result.user.email,
        displayName: result.user.displayName,
        phoneNumber: result.user.phoneNumber
      });

      // Try to create/update user document, but don't fail auth if it doesn't work
      console.log('📝 Attempting to create/update user document...');
      try {
        await createUserDocument(result.user, 'google');
        console.log('✅ User document created/updated successfully');
      } catch (docError: any) {
        console.warn('⚠️ User document creation/update failed, but authentication succeeded:', docError);
        console.warn('Error details:', {
          code: docError?.code,
          message: docError?.message,
          stack: docError?.stack
        });
      }

      console.log('🎉 Google sign-in completed, auth store will handle the rest...');
      setSuccess('Successfully signed in with Google!');
      setTimeout(() => navigate('/'), 1000);

      console.log('🚀 Google sign-in process completed successfully!');

    } catch (err: any) {
      console.error('❌ Google sign-in error:', err);
      console.error('Error details:', {
        code: err.code,
        message: err.message,
        stack: err.stack,
        customData: err.customData
      });
      // Error will be shown by the store
    }
  };



  const handlePasswordlessEmail = async (e: React.FormEvent) => {
    e.preventDefault();

    // Validate email format
    if (!passwordlessEmail || !passwordlessEmail.includes('@')) {
      setLocalError('Please enter a valid email address');
      return;
    }

    // Check if we're in production or development
    const isProduction = window.location.hostname !== 'localhost' && !window.location.hostname.includes('127.0.0.1');

    if (!isProduction) {
      setLocalError('⚠️ Magic link emails are only available in production. For testing, please deploy your app.');
      return;
    }

    clearLocalError();
    clearSuccess();

    try {
      console.log('📧 Sending magic link to:', passwordlessEmail);

      const auth = getAuth();
      const actionCodeSettings = {
        url: `${window.location.origin}/auth`, // Redirect to auth page after clicking link
        handleCodeInApp: true,
      };

      console.log('🔗 Sending sign-in link...');
      await sendSignInLinkToEmail(auth, passwordlessEmail, actionCodeSettings);

      // Store email in localStorage for later use
      window.localStorage.setItem('emailForSignIn', passwordlessEmail);

      console.log('✅ Magic link sent successfully');
      setSuccess('Check your email for the verification link! Check your spam folder if you don\'t see it.');
      setPasswordlessEmail('');

    } catch (err: any) {
      console.error('❌ Magic link error:', err);

      // Handle specific Firebase Auth errors
      let errorMessage = 'Failed to send magic link';

      if (err.code === 'auth/invalid-email') {
        errorMessage = 'Invalid email address. Please check and try again.';
      } else if (err.code === 'auth/missing-email') {
        errorMessage = 'Email address is required.';
      } else if (err.code === 'auth/user-disabled') {
        errorMessage = 'This account has been disabled.';
      } else if (err.code === 'auth/too-many-requests') {
        errorMessage = 'Too many requests. Please wait before trying again.';
      } else if (err.message) {
        errorMessage = err.message;
      }

      setLocalError(errorMessage);
    }
  };

  return (
    <div className="min-h-[calc(100vh-120px)] bg-black flex items-center justify-center px-4 py-8">
      <div className="max-w-md w-full">
        <div className="bg-gray-900/50 backdrop-blur-md rounded-2xl p-8 shadow-2xl border border-gray-800">
          {/* Header */}
          <div className="text-center mb-8">
            <div className="w-16 h-16 bg-gradient-to-br from-blue-500 to-purple-600 rounded-full flex items-center justify-center mx-auto mb-4">
              <span className="text-white font-bold text-xl">PG</span>
            </div>
            <h1 className="text-2xl font-bold text-white mb-2">Welcome to AiFigure</h1>
            <p className="text-gray-400 text-sm">
              Choose your preferred sign-in method
            </p>
          </div>

          {/* Success Message */}
          {success && (
            <div className="bg-green-900/50 border border-green-700 text-green-300 px-4 py-3 rounded-lg text-sm mb-6">
              {success}
            </div>
          )}

          {/* Error Message */}
          {localError && (
            <div className="bg-red-900/50 border border-red-700 text-red-300 px-4 py-3 rounded-lg text-sm mb-6">
              {localError}
            </div>
          )}

          {/* Authentication Method Tabs */}
          {/* <div className="flex flex-wrap gap-2 mb-6">
            <button
              onClick={() => setAuthMethod('google')}
              className={`px-3 py-2 rounded-lg text-sm font-medium transition-all ${
                authMethod === 'google'
                  ? 'bg-blue-600 text-white'
                  : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
              }`}
            >
              Google
            </button>
            <button
              onClick={() => setAuthMethod('passwordless')}
              className={`px-3 py-2 rounded-lg text-sm font-medium transition-all ${
                authMethod === 'passwordless'
                  ? 'bg-blue-600 text-white'
                  : 'bg-gray-800 text-gray-300 hover:bg-gray-700'
              }`}
            >
              Magic Link
            </button>
          </div> */}





          {/* Passwordless Email */}
          { (
            <form onSubmit={handlePasswordlessEmail} className="space-y-6">
              <div>
                <label htmlFor="passwordlessEmail" className="block text-sm font-medium text-gray-300 mb-2">
                  Email Address
                </label>
                <input
                  id="passwordlessEmail"
                  type="email"
                  value={passwordlessEmail}
                  onChange={(e) => setPasswordlessEmail(e.target.value)}
                  className="w-full px-4 py-3 bg-gray-800 border border-gray-700 rounded-lg text-white placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
                  placeholder="Enter your email"
                  required
                />
                <p className="text-xs text-gray-200 mt-1">
                  We'll send you a verification link to sign in instantly.
                </p>
              </div>

              <button
                type="submit"
                disabled={isLoading}
                className="w-full bg-gradient-to-r from-purple-600 to-purple-700 text-white py-3 px-4 rounded-lg font-medium hover:from-purple-700 hover:to-purple-800 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {isLoading ? 'Sending link...' : 'Send Verify Link'}
              </button>
            </form>
          )}



          {/* Social Login Options */}
          <div className="mt-8">
            <div className="relative">
              <div className="absolute inset-0 flex items-center">
                <div className="w-full border-t border-gray-700"></div>
              </div>
              <div className="relative flex justify-center text-sm">
                <span className="px-2 bg-gray-900 text-gray-400">Or continue with</span>
              </div>
            </div>

            <div className="mt-6 grid grid-cols-1 gap-3">
              <button
                onClick={handleGoogleSignIn}
                disabled={isLoading}
                className="w-full inline-flex justify-center items-center px-4 py-3 border border-blue-600 rounded-lg shadow-sm bg-blue-600 text-white hover:bg-blue-700 hover:border-blue-700 transition-all disabled:opacity-50 disabled:cursor-not-allowed font-medium"
              >
                <svg className="w-5 h-5 mr-3" viewBox="0 0 24 24">
                  <path fill="currentColor" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
                  <path fill="currentColor" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
                  <path fill="currentColor" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/>
                  <path fill="currentColor" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/>
                </svg>
                Continue with Google
              </button>
            </div>
          </div>
         
        </div>


      </div>
    </div>
  );
};

export default Auth;