import { useEffect } from 'react';
import PaymentMethodsList from '@/features/payment-methods/PaymentMethodsList/PaymentMethodsList';
import EmptyPaymentMethods from '@/features/payment-methods/EmptyPaymentMethods/EmptyPaymentMethods';
import PaymentForm from './PaymentForm/PaymentForm';
import Loading from '@/components/Loading/Loading';
import Status from '@/components/Status/Status';
import type { IPaymentMethod } from '@/features/payment-methods/types';
import type { IPaymentRequest } from './types';
import { useCashier } from './context/CashierContext';
import { getCashierConfig } from '@/config/cashierConfig';
import { cashierService } from './services/CashierService';

function Cashier() {
  const {
    state,
    methods,
    currencies,
    selectedMethod,
    formMetadata,
    error,
    paymentUrl,
    goBack,
    setSelectedMethod,
    initiatePayment,
  } = useCashier();

  // Redirect to payment URL when state is redirecting
  useEffect(() => {
    if (state === 'redirecting' && paymentUrl) {
      window.location.href = paymentUrl;
    }
  }, [state, paymentUrl]);

  const handleMethodSelect = (method: IPaymentMethod) => {
    setSelectedMethod(method);
  };

  const handleFormSubmit = async (formData: Record<string, unknown>) => {
    try {
      // Transform form data to match IPaymentRequest structure
      const additionalFields: Record<string, unknown> = {};
      if (formData.account) {
        additionalFields.account = formData.account as string;
      }
      
      // Preserve any additional fields
      Object.entries(formData).forEach(([key, value]) => {
        if (
          !['payment_type', 'method', 'currency', 'amount', 'customer', 'redirect', 'account'].includes(key)
        ) {
          additionalFields[key] = value;
        }
      });

      const paymentRequest: Omit<IPaymentRequest, 'merchant_id'> = {
        payment_type: (formData.payment_type as 'deposit' | 'withdrawal') || 'deposit',
        method: (formData.method as string) || '',
        currency: (formData.currency as string) || '',
        amount: (formData.amount as number) || 0,
        customer: (formData.customer as IPaymentRequest['customer']) || {
          id: '',
          first_name: '',
          last_name: '',
          email: '',
        },
        redirect: formData.redirect as IPaymentRequest['redirect'],
        ...additionalFields,
      };
      await initiatePayment(paymentRequest);
    } catch {
      // Error is handled by the service state
    }
  };

  const handleBack = () => {
    setSelectedMethod(null);
  };

  if (state === 'loading') {
    return <Loading />;
  }

  if (state === 'error' && error) {
    return <Status type="error" message={`Error: ${error.message}`} onAction={()=> goBack()}/>;
  }

  if (state === 'redirecting') {
    return <div>Redirecting to payment...</div>;
  }

  if (selectedMethod) {
    return (
      <PaymentForm
        method={selectedMethod}
        currencies={currencies}
        formMetadata={formMetadata}
        config={getCashierConfig()}
        onSubmit={handleFormSubmit}
        onBack={handleBack}
        isLoading={state === 'submitting'}
      />
    );
  }

  return (
    <>
      {state === 'ready' && methods.length === 0 ? (
        <EmptyPaymentMethods />
      ) : state === 'ready' ? (
        <PaymentMethodsList methods={methods} onMethodSelect={handleMethodSelect} />
      ) : null}
    </>
  );
}

export default Cashier;