import React, { useState, useEffect, useRef } from 'react';
import PaymentModal from '../components/PaymentModal';
import SuccessDialog from '../components/SuccessDialog';
import { useAuthStore } from '../stores/authStore';
import { useNavigate } from 'react-router-dom';
import { useSEO } from '../hooks/useSEO';
import { CONFIG, formatPriceWithCurrency } from '../utils/config';

const Subscription: React.FC = () => {
  const [loading, setLoading] = useState(true);
  const { userData, isAuthenticated } = useAuthStore();
  const navigate = useNavigate();

  // SEO optimization for Subscription page
  useSEO({
    title: 'Buy Tokens - AiFigure Premium | Unlimited AI Action Figure Generation',
    description: 'Purchase tokens to unlock unlimited AI action figure generation. Create as many custom figurines as you want with premium features. Fast, high-quality AI art generation for collectors and artists.',
    keywords: 'buy tokens AiFigure, premium AI generator, unlimited action figures, AI art tokens, custom figurine generation, premium AI collectibles, high-quality AI images',
    ogTitle: 'Buy Tokens - AiFigure Premium | Unlimited AI Action Figure Generation',
    ogDescription: 'Purchase tokens to unlock unlimited AI action figure generation. Create as many custom figurines as you want with premium features.',
    ogImage: 'https://aifigure.com/subscription-og-image.jpg',
    ogUrl: window.location.href,
    twitterTitle: 'Buy Tokens - AiFigure Premium | Unlimited AI Action Figure Generation',
    twitterDescription: 'Purchase tokens to unlock unlimited AI action figure generation. Create as many custom figurines as you want with premium features.',
    twitterImage: 'https://aifigure.com/subscription-og-image.jpg',
    canonical: window.location.href,
    type: 'website',
  });

  const [paymentModal, setPaymentModal] = useState<{
    isOpen: boolean;
    amount: number; // cents
    packageId: 'starter' | 'popular' | 'party';
    title: string;
    description?: string;
  }>({
    isOpen: false,
    amount: 0,
    packageId: 'starter',
    title: '',
    description: ''
  });

  const [successDialog, setSuccessDialog] = useState<{
    isOpen: boolean;
    tokensAdded: number;
    amount: number;
  }>({
    isOpen: false,
    tokensAdded: 0,
    amount: 0
  });

  // Track token balance around purchases to show correct tokensAdded after webhook credit
  const [lastTokensBeforePurchase, setLastTokensBeforePurchase] = useState<number | null>(null);
  const [purchaseInFlight, setPurchaseInFlight] = useState<boolean>(false);
  const [paymentInProgress, setPaymentInProgress] = useState<boolean>(false);

  // Ref to manage webhook timeout
  const webhookTimeoutRef = useRef<NodeJS.Timeout | null>(null);

  useEffect(() => {
    if (!isAuthenticated) {
      navigate('/auth');
      return;
    }

    // User data is now managed centrally by the auth store
    if (userData) {
      setLoading(false);

      // Handle purchase completion - show success dialog when tokens increase
      const currentTokens = (userData as any).tokens ?? 0;
      console.log('🔍 Checking for token increase:', {
        purchaseInFlight,
        lastTokensBeforePurchase,
        currentTokens,
        difference: currentTokens - (lastTokensBeforePurchase || 0)
      });

      if (purchaseInFlight && lastTokensBeforePurchase !== null && currentTokens > lastTokensBeforePurchase) {
        const added = currentTokens - lastTokensBeforePurchase;
        console.log('🎉 Token increase detected! Added:', added, 'tokens');

        setSuccessDialog({
          isOpen: true,
          tokensAdded: added,
          amount: paymentModal.amount / 100
        });
        setPurchaseInFlight(false);
        setPaymentInProgress(false); // Reset payment progress state
        setLastTokensBeforePurchase(null);

        // Clear the timeout since webhook completed successfully
        if (webhookTimeoutRef.current) {
          clearTimeout(webhookTimeoutRef.current);
          webhookTimeoutRef.current = null;
        }

        console.log('✅ Success dialog shown, purchase flow completed');
      }
    }
  }, [isAuthenticated, userData, navigate, purchaseInFlight, lastTokensBeforePurchase, paymentModal.amount]);


  const handleTokenPurchase = (pkg: 'starter' | 'popular' | 'party') => {
    // Prevent multiple payment modal openings
    if (paymentInProgress || paymentModal.isOpen) {
      console.log('⚠️ Payment already in progress, ignoring click');
      return;
    }

    const conf = CONFIG.pricing[pkg];
    console.log(`🛒 Starting purchase for ${pkg} package: ${conf.tokens} tokens`);

    // Remember current token balance before payment starts
    setLastTokensBeforePurchase((userData && (userData as any).tokens) ?? 0);
    setPaymentInProgress(true);

    setPaymentModal({
      isOpen: true,
      amount: conf.amount,
      packageId: pkg,
      title: `Buy ${conf.tokens} Tokens`,
      description: `Purchase ${conf.tokens} tokens for ${formatPriceWithCurrency(conf.amount)}`
    });
  };

  const handlePaymentSuccess = async (_amount?: number) => {
    console.log('💳 Payment success callback triggered, amount:', _amount);
    // Payment succeeded; tokens will be granted by Stripe webhook shortly.
    setPaymentModal(prev => ({ ...prev, isOpen: false }));
    setPurchaseInFlight(true);
    console.log('🔄 Set purchaseInFlight to true, waiting for webhook...');

    // Safety timeout: if webhook doesn't complete within 30 seconds, stop loading
    webhookTimeoutRef.current = setTimeout(() => {
      setPurchaseInFlight(false);
      setPaymentInProgress(false); // Reset payment progress state
      setLastTokensBeforePurchase(null);
      console.log('⏰ Webhook timeout - cleared loading state');
      // Could show a message that tokens might take longer to appear
    }, 30000); // 30 seconds timeout
  };

  const handlePaymentError = (error: string) => {
    console.error('Payment error:', error);
    // Reset loading state on error
    setPurchaseInFlight(false);
    setPaymentInProgress(false); // Reset payment progress state
    setLastTokensBeforePurchase(null);

    // Clear any pending timeout
    if (webhookTimeoutRef.current) {
      clearTimeout(webhookTimeoutRef.current);
      webhookTimeoutRef.current = null;
    }

    // You can show a toast notification or alert here
  };

  if (loading) {
    return (
      <div className="min-h-screen bg-black flex items-center justify-center">
        <div className="text-white">Loading subscription...</div>
      </div>
    );
  }

  // const currentTier = tiers.find(t => t.id === userData.subscriptionTier) || tiers[0];

  return (
    <div className="min-h-screen bg-black text-white">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
        <div className="text-center mb-12">
          <h1 className="text-4xl font-bold mb-4">Buy Tokens</h1>
          <p className="text-xl text-gray-400 max-w-2xl mx-auto">
            Unlock more tokens to create amazing action figures
          </p>
        </div>

        {/* Current Plan */}
        {/* <div className="bg-gray-900/50 backdrop-blur-md rounded-2xl p-6 mb-8">
          <div className="flex items-center justify-between">
            <div>
              <h2 className="text-xl font-bold mb-2">Current Plan</h2>
              <p className="text-gray-400">You're currently on the {currentTier.name} plan</p>
            </div>
            <div className="text-right">
              <div className="text-2xl font-bold">{userData.tokens}</div>
              <div className="text-gray-400">tokens remaining</div>
            </div>
          </div>
        </div> */}

        {/* Subscription Tiers */}
        {/* <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-12">
          {tiers.map((tier) => (
            <div
              key={tier.id}
              className={`relative bg-gray-900/50 backdrop-blur-md rounded-2xl p-6 border-2 transition-all duration-300 ${
                tier.id === userData.subscriptionTier
                  ? 'border-blue-500 bg-gray-800/50'
                  : 'border-gray-800 hover:border-gray-600'
              } ${tier.popular ? 'ring-2 ring-purple-500' : ''}`}
            >
              {tier.popular && (
                <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
                  <span className="bg-purple-600 text-white px-3 py-1 rounded-full text-sm font-medium">
                    Most Popular
                  </span>
                </div>
              )}

              <div className="text-center mb-6">
                <h3 className="text-xl font-bold mb-2">{tier.name}</h3>
                <div className="text-3xl font-bold mb-1">
                  ${tier.price}
                  <span className="text-lg text-gray-400">/month</span>
                </div>
                <div className="text-gray-400">{tier.tokens} tokens</div>
              </div>

              <ul className="space-y-3 mb-6">
                {tier.features.map((feature, index) => (
                  <li key={index} className="flex items-center text-sm">
                    <svg className="w-4 h-4 text-green-500 mr-2 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
                      <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                    </svg>
                    {feature}
                  </li>
                ))}
              </ul>

              {tier.id === userData.subscriptionTier ? (
                <button
                  disabled
                  className="w-full bg-gray-700 text-gray-400 py-3 px-4 rounded-lg font-medium cursor-not-allowed"
                >
                  Current Plan
                </button>
              ) : (
                <button
                  onClick={() => handleUpgrade(tier.id)}
                  disabled={upgrading}
                  className={`w-full py-3 px-4 rounded-lg font-medium transition-all ${
                    tier.id === 'free'
                      ? 'bg-gray-700 hover:bg-gray-600 text-white'
                      : `bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white`
                  } disabled:opacity-50 disabled:cursor-not-allowed`}
                >
                  {upgrading ? 'Upgrading...' : tier.price === 0 ? 'Downgrade' : 'Upgrade'}
                </button>
              )}
            </div>
          ))}
        </div> */}

        {/* Token Purchase */}
        <div className="bg-gray-900/50 backdrop-blur-md rounded-2xl p-8">
          <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">

            <div className="bg-gray-800 rounded-xl p-6 text-center relative">
              <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
                <span className="bg-gray-600 text-white px-3 py-1 rounded-full text-sm font-medium">
                  STARTER
                </span>
              </div>
              <div className="text-2xl font-bold mb-2">{CONFIG.pricing.starter.tokens} Tokens</div>
              <div className="text-sm text-gray-400 mb-2">Good for {Math.floor(CONFIG.pricing.starter.tokens / CONFIG.tokenCost.generation)} images</div>
              <div className="text-xl text-green-400 mb-4">{formatPriceWithCurrency(CONFIG.pricing.starter.amount)}</div>
              <button
                onClick={() => isAuthenticated ? handleTokenPurchase('starter') : navigate('/auth')}
                disabled={paymentInProgress}
                className="w-full bg-green-600 hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-white py-2 px-4 rounded-lg font-medium transition-colors"
              >
                {paymentInProgress ? 'Processing...' : 'Buy Now'}
              </button>
            </div>
            <div className="bg-gray-800 rounded-xl p-6 text-center border-2 border-blue-500 relative">
              <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
                <span className="bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-medium">
                  POPULAR
                </span>
              </div>
              <div className="text-2xl font-bold mb-2">{CONFIG.pricing.popular.tokens} Tokens</div>
              <div className="text-sm text-gray-400 mb-2">Good for {Math.floor(CONFIG.pricing.popular.tokens / CONFIG.tokenCost.generation)} images</div>
              <div className="text-xl text-green-400 mb-4">{formatPriceWithCurrency(CONFIG.pricing.popular.amount)}</div>
              <button
                onClick={() => isAuthenticated ? handleTokenPurchase('popular') : navigate('/auth')}
                disabled={paymentInProgress}
                className="w-full bg-blue-600 hover:bg-blue-700 disabled:opacity-50 disabled:cursor-not-allowed text-white py-2 px-4 rounded-lg font-medium transition-colors"
              >
                {paymentInProgress ? 'Processing...' : 'Buy Now'}
              </button>
            </div>
            <div className="bg-gray-800 rounded-xl p-6 text-center relative">
              <div className="absolute -top-3 left-1/2 transform -translate-x-1/2">
                <span className="bg-purple-600 text-white px-3 py-1 rounded-full text-sm font-medium">
                  PARTY PACK
                </span>
              </div>
              <div className="text-2xl font-bold mb-2">{CONFIG.pricing.party.tokens} Tokens</div>
              <div className="text-sm text-gray-400 mb-2">Good for {Math.floor(CONFIG.pricing.party.tokens / CONFIG.tokenCost.generation)} images</div>
              <div className="text-xl text-green-400 mb-4">{formatPriceWithCurrency(CONFIG.pricing.party.amount)}</div>
              <button
                onClick={() => isAuthenticated ? handleTokenPurchase('party') : navigate('/auth')}
                disabled={paymentInProgress}
                className="w-full bg-green-600 hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed text-white py-2 px-4 rounded-lg font-medium transition-colors"
              >
                {paymentInProgress ? 'Processing...' : 'Buy Now'}
              </button>
            </div>
          </div>
        </div>

        {/* Payment Modal */}
        <PaymentModal
          isOpen={paymentModal.isOpen}
          onClose={() => setPaymentModal(prev => ({ ...prev, isOpen: false }))}
          amount={paymentModal.amount}
          packageId={paymentModal.packageId}
          title={paymentModal.title}
          description={paymentModal.description}
          onSuccess={(amount) => handlePaymentSuccess(amount)}
          onError={handlePaymentError}
        />

        {/* Payment Processing Overlay */}
        {purchaseInFlight && (
          <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
            <div className="bg-gray-900 rounded-2xl p-8 max-w-md w-full mx-4 text-center border border-gray-700">
              <div className="mb-6">
                <div className="inline-block animate-spin rounded-full h-12 w-12 border-4 border-blue-600 border-t-transparent"></div>
              </div>
              <h3 className="text-xl font-bold text-white mb-2">Processing Payment</h3>
              <p className="text-gray-400 mb-4">Your payment was successful! We're adding tokens to your account...</p>
              <div className="text-sm text-gray-500">This usually takes 5-10 seconds</div>
            </div>
          </div>
        )}

        {/* Success Dialog */}
        <SuccessDialog
          isOpen={successDialog.isOpen}
          onClose={() => setSuccessDialog(prev => ({ ...prev, isOpen: false }))}
          tokensAdded={successDialog.tokensAdded}
          amount={successDialog.amount}
        />
      </div>
    </div>
  );
};

export default Subscription;