import React, { useState, useEffect } from 'react';
import axios from 'axios';
import PopBox from './PopBox';
import '../css/bankForm.css';

const BASE_URL = "http://localhost:8000";

const BankaUpdateForm = ({ show, onClose, title, accountId }) => {
    const [formData, setFormData] = useState({
        bankName: '',
        accountName: '',
        accountNumber: '',
        accountExplanation: '',
        isActive: false,
        isBlocked: false,
        isInvest: false,
        isPull: false,
        minInvest: '',
        maxInvest: '',
        minPull: '',
        maxPull: '',
        maxTransfer: '',
        maxAmount: ''
    });
    const [showModal, setShowModal] = useState(false);
    const [isFormVisible, setIsFormVisible] = useState(true);
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState(null);

    useEffect(() => {
        if (accountId) {
            fetchAccountDetails();
        }
    }, [accountId]);

    const fetchAccountDetails = async () => {
        setIsLoading(true);
        setError(null);
        
        try {
            console.log('Fetching account:', accountId);
            const token = localStorage.getItem('token');
            if (!token) {
                throw new Error('No authentication token found');
            }

            const response = await axios.get(`${BASE_URL}/bank/accounts`, {
                headers: {
                    'Authorization': `Bearer ${token}`,
                    'Accept': 'application/json',
                }
            });

            const account = response.data.data.find(acc => acc.accountId === accountId);
            
            if (!account) {
                throw new Error('Account not found');
            }

            setFormData({
                bankName: account.bankName || '',
                accountName: account.accountName || '',
                accountNumber: account.accountNumber || '',  // Keep as string
                accountExplanation: account.accountExplanation || '',
                isActive: Boolean(account.isActive),
                isBlocked: Boolean(account.isBlocked),
                isInvest: Boolean(account.isInvest),
                isPull: Boolean(account.isPull),
                minInvest: account.minInvest || '',
                maxInvest: account.maxInvest || '',
                minPull: account.minPull || '',
                maxPull: account.maxPull || '',
                maxTransfer: account.maxTransfer || '',
                maxAmount: account.maxAmount || ''
            });
        } catch (error) {
            console.error('Error fetching account details:', error);
            setError(error.message || 'Failed to fetch account details');
        } finally {
            setIsLoading(false);
        }
    };

    const handleUpdate = async (e) => {
        e.preventDefault();
    
        setIsLoading(true);
        setError(null);
        
        try {
            const token = localStorage.getItem('token');
            if (!token) {
                throw new Error('No authentication token found');
            }

            // Only include fields that have values and convert types appropriately
            const updateData = {
                ...(formData.bankName && { bankName: formData.bankName }),
                ...(formData.accountName && { accountName: formData.accountName }),
                ...(formData.accountNumber && { accountNumber: formData.accountNumber }),
                ...(formData.accountExplanation && { accountExplanation: formData.accountExplanation }),
                isActive: formData.isActive,
                isBlocked: formData.isBlocked,
                isInvest: formData.isInvest,
                isPull: formData.isPull,
                ...(formData.maxInvest && { maxInvest: Number(formData.maxInvest) }),
                ...(formData.minInvest && { minInvest: Number(formData.minInvest) }),
                ...(formData.maxPull && { maxPull: Number(formData.maxPull) }),
                ...(formData.minPull && { minPull: Number(formData.minPull) }),
                ...(formData.maxTransfer && { maxTransfer: Number(formData.maxTransfer) }),
                ...(formData.maxAmount && { maxAmount: Number(formData.maxAmount) })
            };

            console.log('Sending update data:', updateData);
    
            const updateAccount = await axios.patch(
                `${BASE_URL}/bank/${accountId}`,
                updateData,
                {
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${token}`,
                        'Accept': 'application/json',
                    }
                }
            );
    
            console.log('Update response:', updateAccount);
            setShowModal(true);
        } catch (error) {
            console.error('Error updating account:', error);
            if (error.response) {
                console.error('Error response:', error.response.data);
                setError(error.response.data.detail || 'Failed to update account');
            } else {
                setError(error.message || 'Failed to update account');
            }
        } finally {
            setIsLoading(false);
        }
    };