/**
 * Simplified Single-Page Signup Form
 * Shows all fields on one page - no multi-step wizard
 * For paid plans: registration + payment selection on same page
 */

import { useState, useEffect } from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { ChevronLeftIcon, EyeCloseIcon, EyeIcon } from '../../icons';
import { CreditCard, Building2, Wallet, Check, Loader2 } from 'lucide-react';
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';

interface PaymentMethodConfig {
  id: number;
  payment_method: string;
  display_name: string;
  instructions: string | null;
  country_code: string;
  is_enabled: boolean;
}

interface SignUpFormSimplifiedProps {
  planDetails?: any;
  planLoading?: boolean;
}

export default function SignUpFormSimplified({ planDetails: planDetailsProp, planLoading: planLoadingProp }: SignUpFormSimplifiedProps) {
  const [showPassword, setShowPassword] = useState(false);
  const [isChecked, setIsChecked] = useState(false);
  
  const [formData, setFormData] = useState({
    firstName: '',
    lastName: '',
    email: '',
    password: '',
    accountName: '',
    billingCountry: 'US', // Default to US for payment method filtering
  });

  const [selectedPaymentMethod, setSelectedPaymentMethod] = useState<string>('');
  const [paymentMethods, setPaymentMethods] = useState<PaymentMethodConfig[]>([]);
  const [paymentMethodsLoading, setPaymentMethodsLoading] = useState(false);

  const [error, setError] = useState('');
  const [planDetails, setPlanDetails] = useState<any | null>(planDetailsProp || null);
  const [planLoading, setPlanLoading] = useState(planLoadingProp || false);
  
  const navigate = useNavigate();
  const { register, loading } = useAuthStore();
  
  const planSlug = new URLSearchParams(window.location.search).get('plan') || '';
  const paidPlans = ['starter', 'growth', 'scale'];
  const isPaidPlan = planSlug && paidPlans.includes(planSlug);

  // Load plan details
  useEffect(() => {
    if (planDetailsProp) {
      setPlanDetails(planDetailsProp);
      setPlanLoading(!!planLoadingProp);
      return;
    }
    
    const fetchPlan = async () => {
      if (!planSlug) return;
      setPlanLoading(true);
      try {
        const API_BASE_URL = import.meta.env.VITE_BACKEND_URL || 'https://api.igny8.com/api';
        const res = await fetch(`${API_BASE_URL}/v1/auth/plans/?slug=${planSlug}`);
        const data = await res.json();
        const plan = data?.results?.[0];
        if (plan) {
          setPlanDetails(plan);
        }
      } catch (e: any) {
        console.error('Failed to load plan:', e);
      } finally {
        setPlanLoading(false);
      }
    };
    fetchPlan();
  }, [planSlug, planDetailsProp, planLoadingProp]);

  // Load payment methods for paid plans
  useEffect(() => {
    if (!isPaidPlan) return;
    
    const loadPaymentMethods = async () => {
      setPaymentMethodsLoading(true);
      try {
        const API_BASE_URL = import.meta.env.VITE_BACKEND_URL || 'https://api.igny8.com/api';
        const country = formData.billingCountry || 'US';
        const response = await fetch(`${API_BASE_URL}/v1/billing/admin/payment-methods/?country=${country}`);
        
        if (!response.ok) {
          throw new Error('Failed to load payment methods');
        }

        const data = await response.json();
        
        // Handle different response formats
        let methodsList: PaymentMethodConfig[] = [];
        if (Array.isArray(data)) {
          methodsList = data;
        } else if (data.success && data.data) {
          methodsList = Array.isArray(data.data) ? data.data : data.data.results || [];
        } else if (data.results) {
          methodsList = data.results;
        }
        
        const enabledMethods = methodsList.filter((m: PaymentMethodConfig) => m.is_enabled);
        setPaymentMethods(enabledMethods);
        
        // Auto-select first method
        if (enabledMethods.length > 0) {
          setSelectedPaymentMethod(enabledMethods[0].payment_method);
        }
      } catch (err: any) {
        console.error('Failed to load payment methods:', err);
        setError('Failed to load payment options. Please refresh the page.');
      } finally {
        setPaymentMethodsLoading(false);
      }
    };
    
    loadPaymentMethods();
  }, [isPaidPlan, formData.billingCountry]);

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

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

    // Validation
    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;
    }

    // Validate payment method for paid plans
    if (isPaidPlan && !selectedPaymentMethod) {
      setError('Please select a payment method');
      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: planSlug || undefined,
      };

      // Add payment method for paid plans
      if (isPaidPlan) {
        registerPayload.payment_method = selectedPaymentMethod;
        // Use email as billing email by default
        registerPayload.billing_email = formData.email;
        registerPayload.billing_country = formData.billingCountry;
      }

      const user = await register(registerPayload) as any;

      // Wait a bit for token to persist
      await new Promise(resolve => setTimeout(resolve, 100));

      const status = user?.account?.status;
      if (status === 'pending_payment') {
        navigate('/account/plans', { replace: true });
      } else {
        navigate('/sites', { replace: true });
      }
    } catch (err: any) {
      setError(err.message || 'Registration failed. Please try again.');
    }
  };

  const getPaymentIcon = (method: string) => {
    switch (method) {
      case 'stripe':
        return <CreditCard className="w-5 h-5" />;
      case 'bank_transfer':
        return <Building2 className="w-5 h-5" />;
      case 'local_wallet':
        return <Wallet className="w-5 h-5" />;
      default:
        return <CreditCard className="w-5 h-5" />;
    }
  };

  return (
    <div className="flex flex-col flex-1 w-full overflow-y-auto lg:w-1/2 no-scrollbar">
      <div className="w-full max-w-md mx-auto mb-5 sm:pt-10">
        <Link
          to="/"
          className="inline-flex items-center text-sm text-gray-500 transition-colors hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300"
        >
          <ChevronLeftIcon className="size-5" />
          Back to dashboard
        </Link>
      </div>

      <div className="flex flex-col justify-center flex-1 w-full max-w-md mx-auto pb-10">
        <div>
          <div className="mb-5 sm:mb-8">
            <h1 className="mb-2 font-semibold text-gray-800 text-title-sm dark:text-white/90 sm:text-title-md">
              {isPaidPlan ? `Sign Up for ${planDetails?.name || 'Paid'} Plan` : 'Start Your Free Trial'}
            </h1>
            <p className="text-sm text-gray-500 dark:text-gray-400">
              {isPaidPlan
                ? 'Complete your registration and select a payment method.'
                : 'No credit card required. 1000 AI credits to get started.'}
            </p>
          </div>

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

          <form onSubmit={handleSubmit} className="space-y-5">
            {/* Basic Info */}
            <div className="grid grid-cols-1 gap-5 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>

            {/* Payment Method Selection for Paid Plans */}
            {isPaidPlan && (
              <div className="pt-4 border-t border-gray-200 dark:border-gray-700">
                {/* Country Selection */}
                <div className="mb-5">
                  <Label>
                    Country<span className="text-error-500">*</span>
                  </Label>
                  <select
                    name="billingCountry"
                    value={formData.billingCountry}
                    onChange={handleChange}
                    className="w-full px-4 py-2.5 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-2 focus:ring-brand-500 focus:border-transparent"
                  >
                    <option value="US">United States</option>
                    <option value="GB">United Kingdom</option>
                    <option value="IN">India</option>
                    <option value="PK">Pakistan</option>
                    <option value="CA">Canada</option>
                    <option value="AU">Australia</option>
                    <option value="DE">Germany</option>
                    <option value="FR">France</option>
                  </select>
                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                    Payment methods will be filtered by your country
                  </p>
                </div>

                <div className="mb-3">
                  <Label>
                    Payment Method<span className="text-error-500">*</span>
                  </Label>
                  <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
                    Select how you'd like to pay for your subscription
                  </p>
                </div>

                {paymentMethodsLoading ? (
                  <div className="flex items-center justify-center p-6 bg-gray-50 dark:bg-gray-800 rounded-lg">
                    <Loader2 className="w-5 h-5 animate-spin text-brand-500 mr-2" />
                    <span className="text-sm text-gray-600 dark:text-gray-400">Loading payment options...</span>
                  </div>
                ) : paymentMethods.length === 0 ? (
                  <div className="p-4 bg-amber-50 border border-amber-200 rounded-lg text-amber-800 dark:bg-amber-900/20 dark:border-amber-800 dark:text-amber-200">
                    <p className="text-sm">No payment methods available. Please contact support.</p>
                  </div>
                ) : (
                  <div className="space-y-2">
                    {paymentMethods.map((method) => (
                      <div
                        key={method.id}
                        onClick={() => setSelectedPaymentMethod(method.payment_method)}
                        className={`
                          relative p-4 rounded-lg border-2 cursor-pointer transition-all
                          ${selectedPaymentMethod === method.payment_method
                            ? 'border-brand-500 bg-brand-50 dark:bg-brand-900/20'
                            : 'border-gray-200 hover:border-gray-300 dark:border-gray-700 dark:hover:border-gray-600'
                          }
                        `}
                      >
                        <div className="flex items-start gap-3">
                          <div className={`
                            flex items-center justify-center w-10 h-10 rounded-lg
                            ${selectedPaymentMethod === method.payment_method
                              ? 'bg-brand-500 text-white'
                              : 'bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400'
                            }
                          `}>
                            {getPaymentIcon(method.payment_method)}
                          </div>
                          <div className="flex-1">
                            <div className="flex items-center justify-between">
                              <h4 className="font-semibold text-gray-900 dark:text-white">
                                {method.display_name}
                              </h4>
                              {selectedPaymentMethod === method.payment_method && (
                                <Check className="w-5 h-5 text-brand-500" />
                              )}
                            </div>
                            {method.instructions && (
                              <p className="text-xs text-gray-500 dark:text-gray-400 mt-1 whitespace-pre-line">
                                {method.instructions}
                              </p>
                            )}
                          </div>
                        </div>
                      </div>
                    ))}
                  </div>
                )}
              </div>
            )}

            {/* Terms and Conditions */}
            <div className="flex items-center gap-3">
              <Checkbox className="w-5 h-5" checked={isChecked} onChange={setIsChecked} />
              <p className="inline-block font-normal text-gray-500 dark:text-gray-400">
                By creating an account means you agree to the{' '}
                <span className="text-gray-800 dark:text-white/90">Terms and Conditions,</span> and
                our <span className="text-gray-800 dark:text-white">Privacy Policy</span>
              </p>
            </div>

            <Button type="submit" variant="primary" disabled={loading} className="w-full">
              {loading ? 'Creating your account...' : isPaidPlan ? 'Create Account & Continue to Payment' : 'Start Free Trial'}
            </Button>
          </form>

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