/**
 * Pay Invoice Modal
 * Allows users to pay pending invoices using Stripe, PayPal, or submit bank transfer confirmation
 * 
 * Payment Method Logic (Following SignUpFormUnified pattern):
 * - Pakistan (PK): Bank Transfer + Credit Card (Stripe) - NO PayPal
 * - Other countries: Credit Card (Stripe) + PayPal only
 * - Default selection: User's configured default payment method from AccountPaymentMethod
 */

import { useState, useEffect } from 'react';
import { Modal } from '../ui/modal';
import Button from '../ui/button/Button';
import Label from '../form/Label';
import Input from '../form/input/InputField';
import TextArea from '../form/input/TextArea';
import { 
  Loader2Icon, 
  UploadIcon, 
  XIcon, 
  CheckCircleIcon, 
  CreditCardIcon, 
  Building2Icon,
  WalletIcon 
} from '../../icons';
import { API_BASE_URL } from '../../services/api';
import { useAuthStore } from '../../store/authStore';
import { subscribeToPlan, getAvailablePaymentMethods, purchaseCredits } from '../../services/billing.api';

interface BankDetails {
  bank_name: string;
  account_title: string;
  account_number: string;
  iban?: string;
  swift_code?: string;
}

interface Invoice {
  id: number;
  invoice_number: string;
  invoice_type?: 'subscription' | 'credit_package' | 'addon' | 'custom';
  credit_package_id?: string | number | null;
  total?: string;
  total_amount?: string;
  currency?: string;
  status?: string;
  payment_method?: string;
  subscription?: {
    id?: number;
    plan?: {
      id: number;
      name: string;
      slug?: string;
    };
  } | null;
}

interface PayInvoiceModalProps {
  isOpen: boolean;
  onClose: () => void;
  onSuccess?: () => void;
  invoice: Invoice;
  /** User's billing country code (e.g., 'US', 'PK') */
  userCountry?: string;
  /** User's default payment method type */
  defaultPaymentMethod?: string;
}

type PaymentOption = 'stripe' | 'paypal' | 'bank_transfer';

export default function PayInvoiceModal({
  isOpen,
  onClose,
  onSuccess,
  invoice,
  userCountry = 'US',
  defaultPaymentMethod,
}: PayInvoiceModalProps) {
  const isPakistan = userCountry?.toUpperCase() === 'PK';
  
  // Determine available payment options based on country
  // PK users: Stripe (Card) + Bank Transfer - NO PayPal
  // Other users: Stripe (Card) + PayPal only
  const availableOptions: PaymentOption[] = isPakistan 
    ? ['stripe', 'bank_transfer'] 
    : ['stripe', 'paypal'];
  
  // Determine initial selection based on:
  // 1. User's default payment method (if available for this country)
  // 2. Invoice's stored payment_method
  // 3. First available option (stripe)
  const getInitialOption = (): PaymentOption => {
    // Check user's default payment method first
    if (defaultPaymentMethod) {
      if (defaultPaymentMethod === 'stripe' || defaultPaymentMethod === 'card') return 'stripe';
      if (defaultPaymentMethod === 'bank_transfer' && isPakistan) return 'bank_transfer';
      if (defaultPaymentMethod === 'paypal' && !isPakistan) return 'paypal';
    }
    // Then check invoice's stored payment method
    if (invoice.payment_method) {
      if (invoice.payment_method === 'stripe' || invoice.payment_method === 'card') return 'stripe';
      if (invoice.payment_method === 'bank_transfer' && isPakistan) return 'bank_transfer';
      if (invoice.payment_method === 'paypal' && !isPakistan) return 'paypal';
    }
    // Fall back to first available (always stripe)
    return 'stripe';
  };

  const [selectedOption, setSelectedOption] = useState<PaymentOption>(getInitialOption());
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState('');
  const [success, setSuccess] = useState(false);

  // Bank transfer form state
  const [bankFormData, setBankFormData] = useState({
    manual_reference: '',
    manual_notes: '',
    proof_url: '',
  });
  const [uploadedFileName, setUploadedFileName] = useState('');
  const [uploading, setUploading] = useState(false);
  
  // Bank details loaded from backend
  const [bankDetails, setBankDetails] = useState<BankDetails | null>(null);
  const [bankDetailsLoading, setBankDetailsLoading] = useState(false);

  const amount = parseFloat(invoice.total_amount || invoice.total || '0');
  const currency = invoice.currency?.toUpperCase() || 'USD';
  const planId = invoice.subscription?.plan?.id;
  const planSlug = invoice.subscription?.plan?.slug;
  const isCreditInvoice = invoice.invoice_type === 'credit_package';
  const creditPackageId = invoice.credit_package_id ? String(invoice.credit_package_id) : null;
  
  // Check if user's default method is selected (for showing badge)
  const isDefaultMethod = (option: PaymentOption): boolean => {
    if (!defaultPaymentMethod) return false;
    if (option === 'stripe' && (defaultPaymentMethod === 'stripe' || defaultPaymentMethod === 'card')) return true;
    if (option === 'bank_transfer' && defaultPaymentMethod === 'bank_transfer') return true;
    if (option === 'paypal' && defaultPaymentMethod === 'paypal') return true;
    return false;
  };

  // Reset state when modal opens
  useEffect(() => {
    if (isOpen) {
      setSelectedOption(getInitialOption());
      setError('');
      setSuccess(false);
      setBankFormData({ manual_reference: '', manual_notes: '', proof_url: '' });
      setUploadedFileName('');
      setBankDetails(null);
    }
  }, [isOpen]);

  // Load bank details from backend when bank_transfer is selected for PK users
  useEffect(() => {
    if (!isOpen || !isPakistan || selectedOption !== 'bank_transfer') return;
    if (bankDetails) return; // Already loaded
    
    const loadBankDetails = async () => {
      setBankDetailsLoading(true);
      try {
        const { results } = await getAvailablePaymentMethods(userCountry);
        const bankMethod = results.find(
          (m) => m.type === 'bank_transfer' && m.is_enabled
        ) as any;
        
        if (bankMethod?.bank_name && (bankMethod?.account_title || bankMethod?.account_number)) {
          setBankDetails({
            bank_name: bankMethod.bank_name,
            account_title: bankMethod.account_title || '',
            account_number: bankMethod.account_number || '',
            iban: bankMethod.iban,
            swift_code: bankMethod.swift_code,
          });
        }
      } catch (err) {
        console.error('Failed to load bank details:', err);
      } finally {
        setBankDetailsLoading(false);
      }
    };
    
    loadBankDetails();
  }, [isOpen, isPakistan, selectedOption, userCountry, bankDetails]);

  const handleStripePayment = async () => {
    if (isCreditInvoice) {
      if (!creditPackageId) {
        setError('Unable to process card payment. Credit package not found on invoice. Please contact support.');
        return;
      }

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

        const result = await purchaseCredits(creditPackageId, 'stripe', {
          return_url: `${window.location.origin}/account/usage?purchase=success`,
          cancel_url: `${window.location.origin}/account/usage?purchase=canceled`,
        });

        window.location.href = result.redirect_url;
      } catch (err: any) {
        setError(err.message || 'Failed to initiate card payment');
        setLoading(false);
      }
      return;
    }

    // Use plan slug if available, otherwise fall back to id
    const planIdentifier = planSlug || (planId ? String(planId) : null);
    
    if (!planIdentifier) {
      setError('Unable to process card payment. Invoice has no associated plan. Please contact support.');
      return;
    }

    try {
      setLoading(true);
      setError('');
      
      // Use the subscribeToPlan function which properly handles Stripe checkout
      const result = await subscribeToPlan(planIdentifier, 'stripe', {
        return_url: `${window.location.origin}/account/plans?success=true`,
        cancel_url: `${window.location.origin}/account/plans?canceled=true`,
      });

      // Redirect to Stripe Checkout
      window.location.href = result.redirect_url;
    } catch (err: any) {
      setError(err.message || 'Failed to initiate card payment');
      setLoading(false);
    }
  };

  const handlePayPalPayment = async () => {
    if (isCreditInvoice) {
      if (!creditPackageId) {
        setError('Unable to process PayPal payment. Credit package not found on invoice. Please contact support.');
        return;
      }

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

        const result = await purchaseCredits(creditPackageId, 'paypal', {
          return_url: `${window.location.origin}/account/usage?purchase=success`,
          cancel_url: `${window.location.origin}/account/usage?purchase=canceled`,
        });

        window.location.href = result.redirect_url;
      } catch (err: any) {
        setError(err.message || 'Failed to initiate PayPal payment');
        setLoading(false);
      }
      return;
    }

    // Use plan slug if available, otherwise fall back to id
    const planIdentifier = planSlug || (planId ? String(planId) : null);
    
    if (!planIdentifier) {
      setError('Unable to process PayPal payment. Invoice has no associated plan. Please contact support.');
      return;
    }

    try {
      setLoading(true);
      setError('');
      
      // Use the subscribeToPlan function which properly handles PayPal
      const result = await subscribeToPlan(planIdentifier, 'paypal', {
        return_url: `${window.location.origin}/account/plans?paypal=success&plan_id=${planIdentifier}`,
        cancel_url: `${window.location.origin}/account/plans?paypal=cancel`,
      });

      // Redirect to PayPal
      window.location.href = result.redirect_url;
    } catch (err: any) {
      setError(err.message || 'Failed to initiate PayPal payment');
      setLoading(false);
    }
  };

  const handleFileSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (!file) return;

    if (file.size > 5 * 1024 * 1024) {
      setError('File size must be less than 5MB');
      return;
    }

    const allowedTypes = ['image/jpeg', 'image/png', 'image/jpg', 'application/pdf'];
    if (!allowedTypes.includes(file.type)) {
      setError('Only JPEG, PNG, and PDF files are allowed');
      return;
    }

    setUploadedFileName(file.name);
    setError('');
    setUploading(true);

    try {
      // Placeholder URL - actual S3 upload would go here
      const placeholderUrl = `https://s3.amazonaws.com/igny8-payments/${Date.now()}-${file.name}`;
      setBankFormData({ ...bankFormData, proof_url: placeholderUrl });
    } catch (err) {
      setError('Failed to upload file');
    } finally {
      setUploading(false);
    }
  };

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

    if (!bankFormData.manual_reference.trim()) {
      setError('Transaction reference is required');
      return;
    }

    try {
      setLoading(true);

      const token = useAuthStore.getState().token;
      const response = await fetch(`${API_BASE_URL}/v1/billing/admin/payments/confirm/`, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          ...(token && { Authorization: `Bearer ${token}` }),
        },
        credentials: 'include',
        body: JSON.stringify({
          invoice_id: invoice.id,
          payment_method: 'bank_transfer',
          amount: invoice.total_amount || invoice.total || '0',
          manual_reference: bankFormData.manual_reference.trim(),
          manual_notes: bankFormData.manual_notes.trim() || undefined,
          proof_url: bankFormData.proof_url || undefined,
        }),
      });

      const data = await response.json();

      if (!response.ok || !data.success) {
        throw new Error(data.error || data.message || 'Failed to submit payment confirmation');
      }

      setSuccess(true);
      setTimeout(() => {
        onClose();
        onSuccess?.();
      }, 2500);
    } catch (err: any) {
      setError(err.message || 'Failed to submit payment');
    } finally {
      setLoading(false);
    }
  };

  const handlePayNow = () => {
    if (selectedOption === 'stripe') {
      handleStripePayment();
    } else if (selectedOption === 'paypal') {
      handlePayPalPayment();
    }
    // Bank transfer uses form submit
  };

  return (
    <Modal isOpen={isOpen} onClose={onClose} className="max-w-xl p-0">
      <div className="p-6">
        {success ? (
          <div className="text-center py-8">
            <CheckCircleIcon className="w-16 h-16 text-success-500 mx-auto mb-4" />
            <h3 className="text-2xl font-semibold text-gray-900 dark:text-white mb-2">
              {selectedOption === 'bank_transfer' ? 'Payment Submitted!' : 'Redirecting...'}
            </h3>
            <p className="text-gray-600 dark:text-gray-400">
              {selectedOption === 'bank_transfer' 
                ? 'Your payment confirmation has been submitted for review.'
                : 'You will be redirected to complete your payment.'}
            </p>
          </div>
        ) : (
          <>
            {/* Header */}
            <div className="flex items-center justify-between mb-5 pr-8">
              <div>
                <h2 className="text-xl font-semibold text-gray-900 dark:text-white">Pay Invoice</h2>
                <p className="text-sm text-gray-500 dark:text-gray-400">#{invoice.invoice_number}</p>
              </div>
              <div className="text-right">
                <div className="text-2xl font-bold text-gray-900 dark:text-white">
                  {currency} {amount.toFixed(2)}
                </div>
                {isPakistan && selectedOption === 'bank_transfer' && (
                  <div className="text-sm text-gray-500 dark:text-gray-400">
                    ≈ PKR {Math.round(amount * 278).toLocaleString()}
                  </div>
                )}
              </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>
            )}

            {/* Payment Method Selection */}
            {availableOptions.length > 1 && (
              <div className="mb-5">
                <Label className="text-sm text-gray-600 dark:text-gray-400 mb-2 block">Payment Method</Label>
                <div className="flex gap-2">
                  {/* Stripe (Card) - Always available */}
                  <button
                    type="button"
                    onClick={() => setSelectedOption('stripe')}
                    disabled={loading}
                    className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-lg border-2 transition-all ${
                      selectedOption === 'stripe'
                        ? 'border-brand-500 bg-brand-50 dark:bg-brand-900/20 text-brand-700 dark:text-brand-300'
                        : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 text-gray-700 dark:text-gray-300'
                    }`}
                  >
                    <CreditCardIcon className={`w-5 h-5 ${selectedOption === 'stripe' ? 'text-brand-600' : 'text-gray-500'}`} />
                    <span className="font-medium">Credit/Debit Card</span>
                    {isDefaultMethod('stripe') && (
                      <span className="ml-1 px-1.5 py-0.5 text-xs font-medium rounded bg-brand-100 dark:bg-brand-800 text-brand-700 dark:text-brand-200">
                        Default
                      </span>
                    )}
                  </button>
                  
                  {/* PayPal - Only for non-Pakistan */}
                  {!isPakistan && availableOptions.includes('paypal') && (
                    <button
                      type="button"
                      onClick={() => setSelectedOption('paypal')}
                      disabled={loading}
                      className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-lg border-2 transition-all ${
                        selectedOption === 'paypal'
                          ? 'border-brand-500 bg-brand-50 dark:bg-brand-900/20 text-brand-700 dark:text-brand-300'
                          : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 text-gray-700 dark:text-gray-300'
                      }`}
                    >
                      <WalletIcon className={`w-5 h-5 ${selectedOption === 'paypal' ? 'text-brand-600' : 'text-gray-500'}`} />
                      <span className="font-medium">PayPal</span>
                      {isDefaultMethod('paypal') && (
                        <span className="ml-1 px-1.5 py-0.5 text-xs font-medium rounded bg-brand-100 dark:bg-brand-800 text-brand-700 dark:text-brand-200">
                          Default
                        </span>
                      )}
                    </button>
                  )}
                  
                  {/* Bank Transfer - Only for Pakistan */}
                  {isPakistan && availableOptions.includes('bank_transfer') && (
                    <button
                      type="button"
                      onClick={() => setSelectedOption('bank_transfer')}
                      disabled={loading}
                      className={`flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-lg border-2 transition-all ${
                        selectedOption === 'bank_transfer'
                          ? 'border-brand-500 bg-brand-50 dark:bg-brand-900/20 text-brand-700 dark:text-brand-300'
                          : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 text-gray-700 dark:text-gray-300'
                      }`}
                    >
                      <Building2Icon className={`w-5 h-5 ${selectedOption === 'bank_transfer' ? 'text-brand-600' : 'text-gray-500'}`} />
                      <span className="font-medium">Bank Transfer</span>
                      {isDefaultMethod('bank_transfer') && (
                        <span className="ml-1 px-1.5 py-0.5 text-xs font-medium rounded bg-brand-100 dark:bg-brand-800 text-brand-700 dark:text-brand-200">
                          Default
                        </span>
                      )}
                    </button>
                  )}
                </div>
              </div>
            )}

            {/* Stripe Payment */}
            {selectedOption === 'stripe' && (
              <div className="space-y-4">
                <div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg text-center">
                  <CreditCardIcon className="w-12 h-12 mx-auto text-brand-500 mb-3" />
                  <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
                    Pay securely with your credit or debit card via Stripe.
                  </p>
                  <Button
                    variant="primary"
                    onClick={handlePayNow}
                    disabled={loading}
                    startIcon={loading ? <Loader2Icon className="w-4 h-4 animate-spin" /> : <CreditCardIcon className="w-4 h-4" />}
                  >
                    {loading ? 'Processing...' : `Pay ${currency} ${amount.toFixed(2)} with Card`}
                  </Button>
                </div>
              </div>
            )}

            {/* PayPal Payment - Only for non-Pakistan */}
            {selectedOption === 'paypal' && !isPakistan && (
              <div className="space-y-4">
                <div className="p-4 bg-gray-50 dark:bg-gray-800 rounded-lg text-center">
                  <WalletIcon className="w-12 h-12 mx-auto text-[#0070ba] mb-3" />
                  <p className="text-sm text-gray-600 dark:text-gray-400 mb-4">
                    Pay securely using your PayPal account.
                  </p>
                  <Button
                    variant="primary"
                    onClick={handlePayNow}
                    disabled={loading}
                    className="bg-[#0070ba] hover:bg-[#005ea6]"
                    startIcon={loading ? <Loader2Icon className="w-4 h-4 animate-spin" /> : <WalletIcon className="w-4 h-4" />}
                  >
                    {loading ? 'Processing...' : `Pay ${currency} ${amount.toFixed(2)} with PayPal`}
                  </Button>
                </div>
              </div>
            )}

            {/* Bank Transfer - Only for Pakistan */}
            {selectedOption === 'bank_transfer' && isPakistan && (
              <form onSubmit={handleBankSubmit} className="space-y-4">
                {/* Bank Details */}
                <div className="p-4 bg-brand-50 dark:bg-brand-900/20 rounded-lg border border-brand-200 dark:border-brand-800">
                  <h4 className="font-medium text-brand-900 dark:text-brand-100 mb-2 flex items-center gap-2">
                    <Building2Icon className="w-5 h-5" />
                    Bank Transfer Details
                  </h4>
                  {bankDetailsLoading ? (
                    <div className="flex items-center gap-2 text-sm text-gray-500">
                      <Loader2Icon className="w-4 h-4 animate-spin" />
                      Loading bank details...
                    </div>
                  ) : bankDetails ? (
                    <div className="text-sm text-brand-800 dark:text-brand-200 space-y-1">
                      <p><span className="font-medium">Bank:</span> {bankDetails.bank_name}</p>
                      <p><span className="font-medium">Account Title:</span> {bankDetails.account_title}</p>
                      <p><span className="font-medium">Account #:</span> {bankDetails.account_number}</p>
                      {bankDetails.iban && <p><span className="font-medium">IBAN:</span> {bankDetails.iban}</p>}
                      <p><span className="font-medium">Reference:</span> {invoice.invoice_number}</p>
                    </div>
                  ) : (
                    <p className="text-sm text-error-600 dark:text-error-400">
                      Bank details not available. Please contact support.
                    </p>
                  )}
                </div>

                {/* Transaction Reference */}
                <div>
                  <Label>Transaction Reference / ID<span className="text-error-500">*</span></Label>
                  <Input
                    type="text"
                    value={bankFormData.manual_reference}
                    onChange={(e) => setBankFormData({ ...bankFormData, manual_reference: e.target.value })}
                    placeholder="Enter your bank transaction reference"
                    disabled={loading}
                  />
                </div>

                {/* Notes */}
                <div>
                  <Label>Notes (Optional)</Label>
                  <TextArea
                    placeholder="Any additional notes about your payment..."
                    rows={2}
                    value={bankFormData.manual_notes}
                    onChange={(val) => setBankFormData({ ...bankFormData, manual_notes: val })}
                    disabled={loading}
                  />
                </div>

                {/* Proof Upload */}
                <div>
                  <Label>Upload Payment Proof (Optional)</Label>
                  {!uploadedFileName ? (
                    <label className="flex items-center justify-center w-full h-20 border-2 border-dashed border-gray-300 rounded-lg cursor-pointer hover:border-brand-500 dark:border-gray-700 transition-colors">
                      <div className="text-center">
                        <UploadIcon className="w-6 h-6 mx-auto text-gray-400 mb-1" />
                        <p className="text-xs text-gray-500">Click to upload receipt screenshot</p>
                      </div>
                      <input
                        type="file"
                        className="hidden"
                        onChange={handleFileSelect}
                        accept=".jpg,.jpeg,.png,.pdf"
                        disabled={loading || uploading}
                      />
                    </label>
                  ) : (
                    <div className="flex items-center justify-between p-3 bg-gray-50 dark:bg-gray-800 rounded-lg">
                      <div className="flex items-center gap-2">
                        <CheckCircleIcon className="w-5 h-5 text-success-500" />
                        <span className="text-sm truncate max-w-[200px]">{uploadedFileName}</span>
                      </div>
                      <button
                        type="button"
                        onClick={() => {
                          setUploadedFileName('');
                          setBankFormData({ ...bankFormData, proof_url: '' });
                        }}
                        disabled={loading}
                        className="p-1 hover:bg-gray-200 dark:hover:bg-gray-700 rounded"
                      >
                        <XIcon className="w-4 h-4 text-gray-500" />
                      </button>
                    </div>
                  )}
                </div>

                <div className="text-center">
                  <Button
                    type="submit"
                    variant="primary"
                    disabled={loading || uploading}
                  >
                    {loading ? (
                      <>
                        <Loader2Icon className="w-4 h-4 mr-2 animate-spin" />
                        Submitting...
                      </>
                    ) : (
                      'Submit Payment Confirmation'
                    )}
                  </Button>
                </div>
              </form>
            )}

            {/* Cancel Button */}
            <div className="mt-4 text-center">
              <Button
                variant="outline"
                tone="neutral"
                onClick={onClose}
                disabled={loading}
              >
                Cancel
              </Button>
            </div>
          </>
        )}
      </div>
    </Modal>
  );
}