import React, { useState, useEffect } from 'react';
import '../css/transferBox.css';
import { IoIosClose } from "react-icons/io";
import { FaUser, FaMoneyBillWave } from "react-icons/fa";
import axios from 'axios';

const TransferBox = ({ show, onClose }) => {
    const [users, setUsers] = useState([]);
    const [loading, setLoading] = useState(false);
    const [searchTermSender, setSearchTermSender] = useState('');
    const [searchTermRecipient, setSearchTermRecipient] = useState('');
    const [selectedSenderAccount, setSelectedSenderAccount] = useState(null);
    const [selectedRecipientAccount, setSelectedRecipientAccount] = useState(null);
    const [amount, setAmount] = useState('');
    const [note, setNote] = useState('');
    const [transferSuccess, setTransferSuccess] = useState(false); 

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

    const fetchData = async () => {
        try {
            setLoading(true);
            const response = await axios.get(`${BASE_URL}/bank/accounts`);
            const sortedUsers = response.data.data.sort((a, b) => new Date(b.created_at) - new Date(a.created_at));
            setUsers(sortedUsers);
        } catch (error) {
            console.error("Error fetching data: " + error);
        } finally {
            setLoading(false);
        }
    };

    useEffect(() => {
        fetchData();
    }, []);

    const filteredUsersSender = users.filter(user =>
        user.accountNumber?.includes(searchTermSender) || user.accountName?.toLowerCase().includes(searchTermSender.toLowerCase())
    );

    const filteredUsersRecipient = users.filter(user =>
        user.accountNumber?.includes(searchTermRecipient) || user.accountName?.toLowerCase().includes(searchTermRecipient.toLowerCase())
    );

    const handleTransfer = async () => {
        if (!selectedSenderAccount || !selectedRecipientAccount || !amount) {
            alert("Please select a sender account, a recipient account, and enter an amount.");
            return;
        }

        if (parseFloat(amount) > selectedSenderAccount.accountBalance) {
            alert("Insufficient balance in the sender's account!");
            return;
        }

        try {
            const transfer = {
                sender_account_id: selectedSenderAccount.accountId,
                receiver_account_id: selectedRecipientAccount.accountId,
                amount: parseInt(amount),
                note: note
            };
        
            const token = localStorage.getItem('token');

            await axios.post(`${BASE_URL}/bank/transfer`, transfer, {
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${token}`,
                },
            });

            setTransferSuccess(true);
            fetchData();
            setTimeout(() => {
                setTransferSuccess(false);
                onClose();
            }, 2000);
        } catch (error) {
            console.error("An error occurred during the transfer: " + error);
            alert("An error occurred. Please try again.");
        }
    };

    const handleSenderSelect = (user) => {
        setSelectedSenderAccount(user);
        setSearchTermSender(`${user.accountName} (${user.accountNumber})`);
    };

    const handleRecipientSelect = (user) => {
        setSelectedRecipientAccount(user);
        setSearchTermRecipient(`${user.accountName} (${user.accountNumber})`);
    };

    if (!show) {
        return null;
    }

    return (
        <div className="modal-transfer">
            <div className="modal-transfer-box relative flex items-start justify-center">
                <div className='absolute flex border rounded-sm bg-amber-600 text-white items-center text-xs w-full justify-between top-0 p-1'>
                    <div className='text-xs'>
                        <h1>Transfer Between Accounts</h1>
                    </div>
                    <div>
                        <IoIosClose size={20} onClick={onClose} />
                    </div>
                </div>

                <div className='flex flex-col gap-5 items-center w-full justify-center p-5'>
                    {transferSuccess && (
                        <div className="p-2 text-green-600 bg-green-100 border border-green-300 rounded-md">
                            Transfer completed successfully!
                        </div>
                    )}

                    <div className='flex flex-col gap-1 w-full items-center justify-center relative'>
                        <h5 className="flex items-center"><FaUser className="mr-1" /> Sender Account</h5>
                        <input
                            type="text"
                            placeholder="Search by Account No or User ID"
                            className="w-full bg-gray-300 rounded-md p-1 border-2 text-xs text-center pl-1"
                            value={searchTermSender}
                            onChange={(e) => setSearchTermSender(e.target.value)}
                        />
                        {searchTermSender.length > 0 && filteredUsersSender.length > 0 && (
                            <div className="absolute z-10 w-full h-32 overflow-y-scroll bg-gray-300 rounded-md mt-48">
                                <div className="flex flex-col gap-4 flex-1 items-center justify-center m-5 p-0.5">
                                    {loading ? (
                                        <div>Loading...</div>
                                    ) : filteredUsersSender.length > 0 ? (
                                        filteredUsersSender.map(user => (
                                            <div
                                                key={user.id}
                                                style={{
                                                    fontSize: '10px',
                                                }}
                                                className={`p-1 border rounded-md w-full text-black font-semibold bg-blue-200 hover:bg-blue-300 cursor-pointer ${selectedSenderAccount && selectedSenderAccount.id === user.id ? 'bg-gray-300' : ''}`}
                                                onClick={() => handleSenderSelect(user)}
                                            >
                                                <div>
                                                    {user.accountName} <span>{user.bankName}</span> TR {user.accountNumber} (Balance: {user.accountBalance}₺)
                                                </div>
                                            </div>
                                        ))
                                    ) : (
                                        <div className="p-2 text-sm">No results found</div>
                                    )}
                                </div>
                            </div>
                        )}
                    </div>

                    <div className='flex flex-col items-center justify-center gap-1 w-full relative'>
                        <h5 className="flex items-center"><FaUser className="mr-1" /> Recipient Account</h5>
                        <input
                            type="text"
                            placeholder="Search by Account No or User ID"
                            className="w-full bg-gray-300 rounded-md p-1 border-2 text-xs text-center pl-1"
                            value={searchTermRecipient}
                            onChange={(e) => setSearchTermRecipient(e.target.value)}
                        />
                        {searchTermRecipient.length > 0 && filteredUsersRecipient.length > 0 && (
                            <div className="absolute z-10 w-full h-32 overflow-y-scroll bg-gray-300 bg-opacity-95 rounded-md mt-48 ">
                                <div className="flex flex-col gap-4 flex-1 items-center justify-center m-5 p-0.5">
                                    {loading ? (
                                        <div>Loading...</div>
                                    ) : filteredUsersRecipient.length > 0 ? (
                                        filteredUsersRecipient.map(user => (
                                            <div
                                                key={user.id}
                                                style={{
                                                    fontSize: '10px',
                                                }}
                                                className={`p-1 border rounded-lg w-full text-black font-semibold bg-blue-200 hover:bg-blue-300 cursor-pointer ${selectedRecipientAccount && selectedRecipientAccount.id === user.id ? 'bg-gray-300' : ''}`}
                                                onClick={() => handleRecipientSelect(user)}
                                            >
                                                <div>
                                                    {user.accountName} {user.bankName} TR {user.accountNumber} (Balance: {user.accountBalance}₺)
                                                </div>
                                            </div>
                                        ))
                                    ) : (
                                        <div className="p-2 text-sm">No results found</div>
                                    )}
                                </div>
                            </div>
                        )}
                    </div>

                    <div className='flex flex-col gap-1 items-center w-full'>
                        <h5 className="flex items-center"><FaMoneyBillWave className="mr-1" /> Amount to Transfer</h5>
                        <input
                            className='border-2 w-full bg-gray-300 rounded-md text-xs text-center p-1'
                            type='number'
                            placeholder='1,000₺'
                            value={amount}
                            onChange={(e) => setAmount(e.target.value)}
                        />
                    </div>

                    <div className='flex flex-col gap-1 items-center w-full'>
                        <h5>Note</h5>
                        <input
                            className='border-2 w-full bg-gray-300 text-xs text-center p-1 rounded-md'
                            type='text'
                            value={note}
                            placeholder='Please enter a note.'
                            onChange={(e) => setNote(e.target.value)}
                        />
                    </div>

                    <div className='flex items-center mt-4 w-full justify-center'>
                        <button
                            type='button'
                            className='bg-emerald-500 p-2 rounded-md text-white text-xs my-1 hover:bg-emerald-600 transition'
                            onClick={handleTransfer}
                        >
                            Transfer
                        </button>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default TransferBox;