import React, { useState, useEffect } from 'react';
import axios from 'axios';
import KasaEkleBox from './KasaEkleBox';
import KasaCıkarBox from './KasaCıkarBox';
import ConfirmBox from './ConfirmBox';
import BankaUpdateForm from './BankaUpdateForm';
import Logs from '../components/Logs';

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

const BankTable = () => {
    const [showKasaEkle, setShowKasaEkle] = useState(false);
    const [showKasaCıkar, setShowKasaCıkar] = useState(false);
    const [selectedAccountId, setSelectedAccountId] = useState(null);
    const [selectedAccountBalance, setSelectedAccountBalance] = useState(null);
    const [users, setUsers] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    const [confirmModal, setConfirmModal] = useState(null);
    const [updateModal, setUpdateModal] = useState(null);
    const [logsModal, setLogsModal] = useState(null);
    const [searchTerm, setSearchTerm] = useState('');

    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);
            setError(null);
        } catch (error) {
            console.error("Error fetching data: " + error);
            setError("Failed to load data. Please try again later.");
        } finally {
            setLoading(false);
        }
    };

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

    const handleKasaTakviyeOn = (accountId, accountBalance) => {
        setSelectedAccountId(accountId);
        setSelectedAccountBalance(accountBalance);
        setShowKasaEkle(true);
    };

    const handleKasaLogs = (accountId) => {
        setSelectedAccountId(accountId);
        setLogsModal(true);
        setUpdateModal(false);
        setConfirmModal(false);
    };

    const handleKasaCıkarOn = (accountId, accountBalance) => {
        setSelectedAccountId(accountId);
        setSelectedAccountBalance(accountBalance);
        setShowKasaCıkar(true);
    };

    const handleCloseConfirm = () => {
        setShowKasaEkle(false);
        setConfirmModal(false);
        setSelectedAccountId(null);
    };

    const handleDeleteBank = async (accountId) => {
        const token = localStorage.getItem('token');
        try {
            await axios.delete(`${BASE_URL}/bank/${accountId}`, {
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${token}`
                }
            });
            fetchData();
            setTimeout(() => {
                setConfirmModal(null);
            }, 1000);
        } catch (error) {
            console.error("Error during deletion: ", error);
        }
    };

    const formatIBAN = (accountNumber) => {
        let cleanedIBAN = accountNumber.replace(/\s+/g, '');
        return cleanedIBAN.match(/.{1,4}/g).join(' ');
    };

    if (loading) {
        return (
            <div className="flex items-center justify-center min-h-screen">
                <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-emerald-500"></div>
            </div>
        );
    }

    if (error) {
        return (
            <div className="flex items-center justify-center min-h-screen">
                <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative">
                    {error}
                </div>
            </div>
        );
    }

    return (
        <div className="container mx-auto px-4 py-8">
            <div className="bg-white rounded-lg shadow-lg overflow-hidden">
                <div className="overflow-x-auto">
                    <table className="w-full border-collapse">
                        <thead>
                            <tr className="bg-gray-800 text-white text-sm">
                                <th className="p-3 text-left">ID</th>
                                <th className="p-3 text-left">Account Holder</th>
                                <th className="p-3 text-left">Bank</th>
                                <th className="p-3 text-left">IBAN</th>
                                <th className="p-3 text-right">Balance</th>
                                <th className="p-3 text-left">Created</th>
                                <th className="p-3 text-center">Status</th>
                                <th className="p-3 text-center">Investment</th>
                                <th className="p-3 text-center">Withdrawal</th>
                                <th className="p-3 text-center">Blocked</th>
                                <th className="p-3 text-right">Investment Limits</th>
                                <th className="p-3 text-right">Withdrawal Limits</th>
                                <th className="p-3 text-right">Max Balance</th>
                                <th className="p-3 text-center">History</th>
                                <th className="p-3">
                                    <input
                                        type="search"
                                        className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-emerald-500"
                                        placeholder="Search accounts..."
                                        value={searchTerm}
                                        onChange={(e) => setSearchTerm(e.target.value)}
                                    />
                                </th>
                                <th className="p-3 text-center">Actions</th>
                                <th className="p-3 text-center">Operations</th>
                            </tr>
                        </thead>
                        <tbody>
                            {users.map((data) => (
                                <tr 
                                    key={data.id}
                                    className="border-b hover:bg-gray-50 transition-colors duration-200"
                                >
                                    <td className="p-3 font-medium">{data.id}</td>
                                    <td className="p-3">{data.accountName}</td>
                                    <td className="p-3">{data.bankName}</td>
                                    <td className="p-3 font-mono">TR {formatIBAN(data.accountNumber)}</td>
                                    <td className="p-3 text-right">
                                        <span className={`px-3 py-1 rounded-full text-white ${
                                            data.accountBalance === 0 ? 'bg-gray-500' :
                                            data.accountBalance > 0 && data.accountBalance < 5000 ? 'bg-yellow-600' :
                                            'bg-emerald-600'
                                        }`}>
                                            {Number(data.accountBalance).toLocaleString("tr-TR", { 
                                                minimumFractionDigits: 2, 
                                                maximumFractionDigits: 2 
                                            })} ₺
                                        </span>
                                    </td>
                                    <td className="p-3">{data.created_at}</td>
                                    <td className="p-3 text-center">
                                        <span className={`px-2 py-1 rounded-full text-white ${
                                            data.isActive ? 'bg-emerald-500' : 'bg-red-500'
                                        }`}>
                                            {data.isActive ? 'Active' : 'Inactive'}
                                        </span>
                                    </td>
                                    <td className="p-3 text-center">
                                        <span className={`px-2 py-1 rounded-full text-white ${
                                            data.isInvest ? 'bg-emerald-500' : 'bg-red-500'
                                        }`}>
                                            {data.isInvest ? 'Yes' : 'No'}
                                        </span>
                                    </td>
                                    <td className="p-3 text-center">
                                        <span className={`px-2 py-1 rounded-full text-white ${
                                            data.isPull ? 'bg-emerald-500' : 'bg-red-500'
                                        }`}>
                                            {data.isPull ? 'Yes' : 'No'}
                                        </span>
                                    </td>
                                    <td className="p-3 text-center">
                                        <span className={`px-2 py-1 rounded-full text-white ${
                                            data.isBlocked ? 'bg-red-500' : 'bg-emerald-500'
                                        }`}>
                                            {data.isBlocked ? 'Yes' : 'No'}
                                        </span>
                                    </td>
                                    <td className="p-3 text-right">
                                        {data.minInvest} / {data.maxInvest}
                                    </td>
                                    <td className="p-3 text-right">
                                        {data.minPull} / {data.maxPull}
                                    </td>
                                    <td className="p-3 text-right">
                                        {data.maxAmount}
                                    </td>
                                    <td className="p-3 text-center">
                                        <button
                                            onClick={() => handleKasaLogs(data.accountId)}
                                            className="px-3 py-1 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors"
                                        >
                                            Logs
                                        </button>
                                    </td>
                                    <td className="p-3 text-center">
                                        <div className="flex items-center justify-center space-x-2">
                                            <button
                                                onClick={() => handleKasaTakviyeOn(data.accountId, data.accountBalance)}
                                                className="px-3 py-1 bg-emerald-500 text-white rounded-lg hover:bg-emerald-600 transition-colors"
                                            >
                                                Add
                                            </button>
                                            <button
                                                onClick={() => handleKasaCıkarOn(data.accountId, data.accountBalance)}
                                                className="px-3 py-1 bg-yellow-500 text-white rounded-lg hover:bg-yellow-600 transition-colors"
                                            >
                                                Withdraw
                                            </button>
                                        </div>
                                    </td>
                                    <td className="p-3 text-center">
                                        <div className="flex flex-col space-y-2">
                                            <button
                                                onClick={() => setUpdateModal(true)}
                                                className="px-3 py-1 bg-emerald-500 text-white rounded-lg hover:bg-emerald-600 transition-colors"
                                            >
                                                Edit
                                            </button>
                                            <button
                                                onClick={() => setConfirmModal(true)}
                                                className="px-3 py-1 bg-red-500 text-white rounded-lg hover:bg-red-600 transition-colors"
                                            >
                                                Delete
                                            </button>
                                            <button
                                                className="px-3 py-1 bg-amber-800 text-white rounded-lg hover:bg-amber-900 transition-colors"
                                            >
                                                Refund
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>
            </div>

            {/* Modals */}
            {logsModal && (
                <Logs 
                    show={logsModal}
                    title="Bank Account Log"
                    accountId={selectedAccountId}
                    onClose={() => setLogsModal(false)}
                />
            )}
            
            {updateModal && (
                <BankaUpdateForm
                    show={updateModal}
                    accountId={selectedAccountId}
                    title="Update Bank Account"
                    onClose={() => setUpdateModal(false)}
                />
            )}
            
            {showKasaEkle && (
                <KasaEkleBox
                    show={showKasaEkle}
                    onClose={() => setShowKasaEkle(false)}
                    accountId={selectedAccountId}
                    accountBalance={selectedAccountBalance}
                    onSuccess={fetchData}
                />
            )}
            
            {showKasaCıkar && (
                <KasaCıkarBox
                    show={showKasaCıkar}
                    onClose={() => setShowKasaCıkar(false)}
                    accountId={selectedAccountId}
                    accountBalance={selectedAccountBalance}
                    onSuccess={fetchData}
                />
            )}
            
            {confirmModal && (
                <ConfirmBox
                    show={confirmModal}
                    title="Are you sure you want to delete this bank account?"
                    onSuccess={() => handleDeleteBank(selectedAccountId)}
                    onClose={() => setConfirmModal(false)}
                />
            )}
        </div>
    );
};

export default BankTable;