/**
 * Unified Signup Form with Integrated Pricing Selection
 * Combines free and paid signup flows in one modern interface
 * 
 * Payment Flow (Simplified):
 * 1. User selects plan and fills in details
 * 2. User selects country from dropdown
 * 3. On submit: account created, redirected to /account/plans for payment
 * 
 * NO payment method selection at signup - this happens on /account/plans
 */

import { useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { Link, useNavigate } from 'react-router-dom';
import { ChevronLeftIcon, EyeCloseIcon, EyeIcon, CheckIcon, Loader2Icon, CheckCircleIcon, GlobeIcon } from '../../icons';
import Label from '../form/Label';
import Input from '../form/input/InputField';
import Checkbox from '../form/input/Checkbox';
import Button from '../ui/button/Button';
import { useAuthStore } from '../../store/authStore';
import { fetchCountries } from '../../utils/countries';

interface Plan {
  id: number;
  name: string;
  slug: string;
  price: string | number;
  billing_cycle: string;
  is_active: boolean;
  max_users: number;
  max_sites: number;
  max_keywords: number;
  max_ahrefs_queries: number;
  included_credits: number;
  features: string[];
  annual_discount_percent?: number;
}

interface Country {
  code: string;
  name: string;
}

interface SignUpFormUnifiedProps {
  plans: Plan[];
  selectedPlan: Plan | null;
  onPlanSelect: (plan: Plan) => void;
  plansLoading: boolean;
}

export default function SignUpFormUnified({
  plans,
  selectedPlan,
  onPlanSelect,
  plansLoading,
}: SignUpFormUnifiedProps) {
  const [showPassword, setShowPassword] = useState(false);
  const [isChecked, setIsChecked] = useState(false);
  const [billingPeriod, setBillingPeriod] = useState<'monthly' | 'annually'>('monthly');
  const [annualDiscountPercent, setAnnualDiscountPercent] = useState(15);

  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    email: '',
    password: '',
    accountName: '',
    billingCountry: 'US',
  });

  // Countries for dropdown
  const [countries, setCountries] = useState<Country[]>([]);
  const [countriesLoading, setCountriesLoading] = useState(true);
  const [error, setError] = useState('');

  const navigate = useNavigate();
  const { register, loading } = useAuthStore();

  const isPaidPlan = selectedPlan && parseFloat(String(selectedPlan.price || 0)) > 0;

  // Update URL when plan changes
  useEffect(() => {
    if (selectedPlan) {
      const url = new URL(window.location.href);
      url.searchParams.set('plan', selectedPlan.slug);
      window.history.replaceState({}, '', url.toString());
    }
  }, [selectedPlan]);

  // Load annual discount percent from plans
  useEffect(() => {
    if (plans.length > 0) {
      const planWithDiscount = plans.find(p => p.annual_discount_percent && p.annual_discount_percent > 0);
      if (planWithDiscount && planWithDiscount.annual_discount_percent) {
        setAnnualDiscountPercent(planWithDiscount.annual_discount_percent);
      }
    }
  }, [plans]);

  // Load countries from backend and detect user's country
  useEffect(() => {
    const loadCountriesAndDetect = async () => {
      setCountriesLoading(true);
      try {
        const loadedCountries = await fetchCountries();
        setCountries(loadedCountries);

        // Try to detect user's country for default selection
        // Note: This may fail due to CORS - that's expected and handled gracefully
        try {
          const geoResponse = await fetch('https://ipapi.co/country_code/', {
            signal: AbortSignal.timeout(3000),
            mode: 'cors',
          });
          if (geoResponse.ok) {
            const countryCode = await geoResponse.text();
            if (countryCode && countryCode.length === 2) {
              setFormData(prev => ({ ...prev, billingCountry: countryCode.trim() }));
            }
          }
        } catch (error) {
          // Silently fail - CORS or network error, keep default US
          // This is expected behavior and not a critical error
        }
      } finally {
        setCountriesLoading(false);
      }
    };

    loadCountriesAndDetect();
  }, []);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {
    const { name, value } = e.target;
    setFormData((prev) => ({ ...prev, [name]: value }));
  };

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    setError('');

    if (!formData.email || !formData.password || !formData.firstName || !formData.lastName) {
      setError('Please fill in all required fields');
      return;
    }

    if (!isChecked) {
      setError('Please agree to the Terms and Conditions');
      return;
    }

    if (!selectedPlan) {
      setError('Please select a plan');
      return;
    }

    try {
      const username = formData.email.split('@')[0];

      const registerPayload: any = {
        email: formData.email,
        password: formData.password,
        username: username,
        first_name: formData.firstName,
        last_name: formData.lastName,
        account_name: formData.accountName,
        plan_slug: selectedPlan.slug,
        billing_country: formData.billingCountry,
      };

      const user = (await register(registerPayload)) as any;

      console.log('Registration response:', {
        user: user,
        accountStatus: user?.account?.status,
        planSlug: selectedPlan.slug,
      });

      // Verify auth state is actually set in Zustand store
      const currentAuthState = useAuthStore.getState();
      
      // If for some reason state wasn't set, force set it again
      if (!currentAuthState.isAuthenticated || !currentAuthState.user || !currentAuthState.token) {
        console.error('Auth state not properly set after registration, forcing update...');
        
        const tokenData = user?.tokens || {};
        const accessToken = user?.access || tokenData.access || localStorage.getItem('access_token');
        const refreshToken = user?.refresh || tokenData.refresh || localStorage.getItem('refresh_token');
        
        useAuthStore.setState({
          user: user,
          token: accessToken,
          refreshToken: refreshToken,
          isAuthenticated: true,
          loading: false
        });
        
        await new Promise((resolve) => setTimeout(resolve, 500));
      }

      // Final verification before navigation
      const finalState = useAuthStore.getState();
      if (!finalState.isAuthenticated) {
        throw new Error('Failed to authenticate after registration. Please try logging in manually.');
      }

      // Simplified navigation:
      // - Paid plans: Go to /account/plans to select payment method and complete payment
      // - Free plans: Go to sites page
      if (isPaidPlan) {
        console.log('Paid plan selected, redirecting to /account/plans for payment');
        navigate('/account/plans', { replace: true });
      } else {
        console.log('Free plan selected, redirecting to /sites');
        navigate('/sites', { replace: true });
      }
    } catch (err: any) {
      setError(err.message || 'Registration failed. Please try again.');
    }
  };

  const formatNumber = (num: number): string => {
    if (num >= 1000000) return `${(num / 1000000).toFixed(1)}M`;
    if (num >= 1000) return `${(num / 1000).toFixed(0)}K`;
    return num.toString();
  };

  const extractFeatures = (plan: Plan): string[] => {
    // Use features from plan's JSON field if available, otherwise build from limits
    if (plan.features && plan.features.length > 0) {
      return plan.features;
    }
    
    // Fallback to building from plan limits
    const features: string[] = [];
    features.push(`${plan.max_sites} ${plan.max_sites === 1 ? 'Site' : 'Sites'}`);
    features.push(`${plan.max_users} ${plan.max_users === 1 ? 'User' : 'Users'}`);
    features.push(`${formatNumber(plan.max_keywords || 0)} Keywords`);
    features.push(`${formatNumber(plan.included_credits || 0)} Credits/Month`);
    return features;
  };

  const getDisplayPrice = (plan: Plan): number => {
    const monthlyPrice = typeof plan.price === 'number' ? plan.price : parseFloat(String(plan.price || 0));
    if (billingPeriod === 'annually') {
      const discountMultiplier = 1 - (annualDiscountPercent / 100);
      return monthlyPrice * 12 * discountMultiplier;
    }
    return monthlyPrice;
  };

  return (
    <div className="flex flex-col lg:w-1/2 w-full">
      {/* Mobile Pricing Toggle */}
      <div className="lg:hidden bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-700 p-4">
        <div className="flex items-center justify-center gap-3">
          <div className="relative inline-flex p-1 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-sm">
            <span
              className={`absolute top-1/2 left-1 flex h-9 w-28 -translate-y-1/2 rounded-md bg-gradient-to-br from-brand-500 to-brand-600 shadow-md transition-all duration-300 ease-out ${
                billingPeriod === 'monthly' ? 'translate-x-0' : 'translate-x-28'
              }`}
            ></span>
            <button
              type="button"
              onClick={() => setBillingPeriod('monthly')}
              className={`relative flex h-9 w-28 items-center justify-center text-sm font-semibold transition-all duration-200 rounded-md ${
                billingPeriod === 'monthly' ? 'text-white' : 'text-gray-600 dark:text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white'
              }`}
            >
              Monthly
            </button>
            <button
              type="button"
              onClick={() => setBillingPeriod('annually')}
              className={`relative flex h-9 w-28 items-center justify-center text-sm font-semibold transition-all duration-200 rounded-md ${
                billingPeriod === 'annually' ? 'text-white' : 'text-gray-600 dark:text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white'
              }`}
            >
              Annually
            </button>
          </div>
          <span className={`inline-flex items-center gap-1.5 text-xs text-success-600 dark:text-success-400 font-semibold bg-success-50 dark:bg-success-900/20 px-2 py-1 rounded-full transition-opacity duration-200 ${
            billingPeriod === 'annually' ? 'opacity-100' : 'opacity-0'
          }`}>
            <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
            </svg>
            Save up to {annualDiscountPercent}%
          </span>
        </div>
      </div>

      <div className="flex-1 overflow-y-auto no-scrollbar flex items-center">
        <div className="w-full mx-auto p-6 sm:p-8 max-w-[572px]">
          <div className="mb-6">
            <h1 className="mb-2 font-semibold text-gray-800 dark:text-white text-2xl">Sign Up for {selectedPlan?.name || 'IGNY8'}</h1>
            <p className="text-sm text-gray-500 dark:text-gray-400">
              Complete your registration and select a payment method.
            </p>
          </div>

          {/* Plan Selection - Mobile */}
          <div className="lg:hidden mb-6">
            <Label>Select Plan</Label>
            <div className="grid grid-cols-2 gap-2 mt-2">
              {plans.map((plan) => {
                const displayPrice = getDisplayPrice(plan);
                const isSelected = selectedPlan?.id === plan.id;
                const isFree = parseFloat(String(plan.price || 0)) === 0;

                return (
                  <Button
                    key={plan.id}
                    variant="ghost"
                    tone="neutral"
                    size="md"
                    onClick={() => onPlanSelect(plan)}
                    className={`p-3 rounded-lg border-2 text-left transition-all ${
                      isSelected
                        ? 'border-brand-500 bg-brand-50 dark:bg-brand-900/20'
                        : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'
                    }`}
                  >
                    <div className="flex items-center justify-between mb-1">
                      <span className={`font-semibold text-sm ${isSelected ? 'text-brand-600 dark:text-brand-400' : 'text-gray-900 dark:text-white'}`}>
                        {plan.name}
                      </span>
                      {isSelected && <CheckCircleIcon className="w-4 h-4 text-brand-500" />}
                    </div>
                    <div className="text-lg font-bold text-gray-900 dark:text-white">
                      {isFree ? 'Free' : `$${displayPrice.toFixed(2)}`}
                    </div>
                    <div className="text-xs text-gray-500 dark:text-gray-400">
                      {billingPeriod === 'annually' && !isFree ? '/year' : '/month'}
                    </div>
                  </Button>
                );
              })}
            </div>
          </div>

          {error && (
            <div className="mb-4 p-3 text-sm text-error-600 bg-error-50 border border-error-200 rounded-lg dark:bg-error-900/20 dark:text-error-400 dark:border-error-800">
              {error}
            </div>
          )}

          <form onSubmit={handleSubmit} className="space-y-4">
            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
              <div>
                <Label>
                  First Name<span className="text-error-500">*</span>
                </Label>
                <Input type="text" name="firstName" value={formData.firstName} onChange={handleChange} placeholder="Enter your first name" />
              </div>
              <div>
                <Label>
                  Last Name<span className="text-error-500">*</span>
                </Label>
                <Input type="text" name="lastName" value={formData.lastName} onChange={handleChange} placeholder="Enter your last name" />
              </div>
            </div>

            <div>
              <Label>
                Email<span className="text-error-500">*</span>
              </Label>
              <Input type="email" name="email" value={formData.email} onChange={handleChange} placeholder="Enter your email" />
            </div>

            <div>
              <Label>Account Name (optional)</Label>
              <Input type="text" name="accountName" value={formData.accountName} onChange={handleChange} placeholder="Workspace / Company name" />
            </div>

            <div>
              <Label>
                Password<span className="text-error-500">*</span>
              </Label>
              <div className="relative">
                <Input placeholder="Enter your password" type={showPassword ? 'text' : 'password'} name="password" value={formData.password} onChange={handleChange} />
                <span onClick={() => setShowPassword(!showPassword)} className="absolute z-30 -translate-y-1/2 cursor-pointer right-4 top-1/2">
                  {showPassword ? <EyeIcon className="fill-gray-500 dark:fill-gray-400 size-5" /> : <EyeCloseIcon className="fill-gray-500 dark:fill-gray-400 size-5" />}
                </span>
              </div>
            </div>

            {/* Country Selection */}
            <div>
              <Label className="flex items-center gap-1.5">
                <GlobeIcon className="w-4 h-4 text-gray-500" />
                Country<span className="text-error-500">*</span>
              </Label>
              {countriesLoading ? (
                <div className="flex items-center p-3 bg-gray-50 dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
                  <Loader2Icon className="w-4 h-4 animate-spin text-brand-500 mr-2" />
                  <span className="text-sm text-gray-500">Loading countries...</span>
                </div>
              ) : (
                <select
                  name="billingCountry"
                  value={formData.billingCountry}
                  onChange={handleChange}
                  className="w-full px-4 py-3 text-sm text-gray-900 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:text-white dark:border-gray-700 focus:ring-2 focus:ring-brand-500 focus:border-transparent appearance-none cursor-pointer"
                >
                  {countries.map((country) => (
                    <option key={country.code} value={country.code}>
                      {country.name}
                    </option>
                  ))}
                </select>
              )}
            </div>

            <div className="flex items-start gap-3 pt-2">
              <Checkbox className="w-5 h-5 mt-0.5" checked={isChecked} onChange={setIsChecked} />
              <p className="text-sm text-gray-500 dark:text-gray-400">
                By creating an account means you agree to the{' '}
                <Link to="/terms" className="text-brand-500 hover:text-brand-600 dark:text-brand-400 hover:underline">
                  Terms and Conditions
                </Link>
                , and our{' '}
                <Link to="/privacy" className="text-brand-500 hover:text-brand-600 dark:text-brand-400 hover:underline">
                  Privacy Policy
                </Link>
              </p>
            </div>

            <Button type="submit" variant="primary" disabled={loading} className="w-full">
              {loading ? (
                <span className="flex items-center justify-center">
                  <Loader2Icon className="w-4 h-4 animate-spin mr-2" />
                  Creating your account...
                </span>
              ) : isPaidPlan ? (
                'Create Account'
              ) : (
                'Start Free Trial'
              )}
            </Button>
          </form>

          <div className="mt-5 text-center">
            <p className="text-sm text-gray-700 dark:text-gray-400">
              Already have an account?{' '}
              <Link to="/signin" className="text-brand-500 hover:text-brand-600 dark:text-brand-400 font-medium">
                Sign In
              </Link>
            </p>
          </div>
        </div>
      </div>

      {/* Desktop Pricing Panel - Renders in right side */}
      <div className="hidden lg:block">
        {/* This will be portaled to the right side */}
        {typeof document !== 'undefined' &&
          document.getElementById('signup-pricing-plans') &&
          ReactDOM.createPortal(
            <div className="space-y-6">
              {/* Billing Toggle - Centered with inline discount */}
              <div className="flex items-center justify-center gap-3 w-full max-w-[640px] mx-auto">
                <div className="relative inline-flex p-1 bg-gray-100 dark:bg-gray-800 rounded-xl shadow-sm">
                  <span
                    className={`absolute top-1/2 left-1 flex h-11 w-32 -translate-y-1/2 rounded-lg bg-gradient-to-br from-brand-500 to-brand-600 shadow-md transition-all duration-300 ease-out ${
                      billingPeriod === 'monthly' ? 'translate-x-0' : 'translate-x-32'
                    }`}
                  ></span>
                  <button
                    type="button"
                    onClick={() => setBillingPeriod('monthly')}
                    className={`relative flex h-11 w-32 items-center justify-center text-base font-semibold transition-all duration-200 rounded-lg ${
                      billingPeriod === 'monthly' ? 'text-white' : 'text-gray-600 dark:text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white'
                    }`}
                  >
                    Monthly
                  </button>
                  <button
                    type="button"
                    onClick={() => setBillingPeriod('annually')}
                    className={`relative flex h-11 w-32 items-center justify-center text-base font-semibold transition-all duration-200 rounded-lg ${
                      billingPeriod === 'annually' ? 'text-white' : 'text-gray-600 dark:text-gray-400 hover:bg-gray-200 hover:text-gray-900 dark:hover:bg-gray-600 dark:hover:text-white'
                    }`}
                  >
                    Annually
                  </button>
                </div>
                <p className={`inline-flex items-center gap-1.5 text-success-600 dark:text-success-400 text-sm font-semibold bg-success-50 dark:bg-success-900/20 px-3 py-1.5 rounded-full transition-opacity duration-200 ${
                  billingPeriod === 'annually' ? 'opacity-100' : 'opacity-0'
                }`}>
                  <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8c-1.657 0-3 .895-3 2s1.343 2 3 2 3 .895 3 2-1.343 2-3 2m0-8c1.11 0 2.08.402 2.599 1M12 8V7m0 1v8m0 0v1m0-1c-1.11 0-2.08-.402-2.599-1M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                  </svg>
                  Save up to {annualDiscountPercent}%
                </p>
              </div>

              {/* Plan Cards - Single column, stacked vertically */}
              <div className="grid gap-4 grid-cols-1 w-full max-w-[640px] mx-auto">
                {plans.map((plan) => {
                  const displayPrice = getDisplayPrice(plan);
                  const features = extractFeatures(plan);
                  const isSelected = selectedPlan?.id === plan.id;
                  const isFree = parseFloat(String(plan.price || 0)) === 0;
                  const isPopular = plan.slug.toLowerCase().includes('growth');

                  return (
                    <div
                      key={plan.id}
                      onClick={() => onPlanSelect(plan)}
                      className={`relative rounded-2xl p-5 cursor-pointer transition-all duration-300 ${
                        isSelected
                          ? 'border-[3px] border-success-500 bg-white dark:bg-gray-800 shadow-2xl ring-4 ring-success-500/20'
                          : isPopular
                          ? 'border-2 border-brand-200 dark:border-brand-800 bg-white dark:bg-gray-800/50 hover:shadow-xl'
                          : 'border-2 border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800/50 hover:shadow-lg'
                      }`}
                    >
                      {isPopular && !isSelected && (
                        <div className="absolute -top-3 left-1/2 -translate-x-1/2">
                          <span className="bg-gradient-to-r from-success-500 to-success-500 text-white text-xs font-bold px-3 py-1 rounded-full shadow-lg">
                            ⭐ POPULAR
                          </span>
                        </div>
                      )}
                      {isSelected && (
                        <div className="absolute -top-4 -right-4">
                          <div className="bg-brand-500 rounded-full p-2 shadow-lg">
                            <CheckCircleIcon className="w-8 h-8 text-white" />
                          </div>
                        </div>
                      )}
                      
                      {/* Header: Plan name, price, and features in horizontal layout */}
                      <div className="flex items-center gap-6">
                        {/* Plan Name & Price */}
                        <div className="flex-shrink-0 min-w-[200px]">
                          <h3 className="text-lg font-bold text-gray-900 dark:text-white mb-1">{plan.name}</h3>
                          <div className="flex items-baseline gap-1">
                            <span className="text-3xl font-bold text-gray-900 dark:text-white">
                              {isFree ? 'Free' : `$${displayPrice.toFixed(2)}`}
                            </span>
                            {!isFree && (
                              <span className="text-gray-500 dark:text-gray-400 text-sm">
                                {billingPeriod === 'annually' ? '/year' : '/month'}
                              </span>
                            )}
                          </div>
                          {billingPeriod === 'annually' && !isFree && (
                            <p className="text-gray-500 dark:text-gray-400 text-xs mt-0.5">
                              ${(displayPrice / 12).toFixed(2)}/month billed annually
                            </p>
                          )}
                        </div>
                        
                        {/* Features - 2 columns */}
                        <div className="flex-1 grid grid-cols-2 gap-x-6 gap-y-2.5">
                          {features.map((feature, idx) => (
                            <div key={idx} className="flex items-center gap-2">
                              <CheckCircleIcon className="w-4 h-4 text-success-500 dark:text-success-400 flex-shrink-0" />
                              <span className="text-sm text-gray-700 dark:text-gray-300 leading-tight">{feature}</span>
                            </div>
                          ))}
                        </div>
                      </div>
                    </div>
                  );
                })}
              </div>
            </div>,
            document.getElementById('signup-pricing-plans')!
          )}
      </div>
    </div>
  );
}