import React, { useState, useEffect } from 'react';
import axios from 'axios';
import ProgressBox from './ConfirmBox';
import ConfirmBox from './ConfirmBox';
import YatırımContent from './YatırımContent';

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

const InvestmentTable = () => {
    const [investments, setInvestments] = useState([]);
    const [filteredInvestments, setFilteredInvestments] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    const [refs, setRefs] = useState({});
    const [users, setUsers] = useState({});
    const [updateLoading, setUpdateLoading] = useState(null);
    const [showModal, setShowModal] = useState(false);
    const [showModal2, setShowModal2] = useState(false);
    const [showModal3, setShowModal3] = useState(false);
    const [selectedInvestmentId, setSelectedInvestmentId] = useState(null);
    const [currentUser, setCurrentUser] = useState(null);

    useEffect(() => {
        const fetchData = async () => {
            await Promise.all([
                fetchInvestments(),
                fetchRefs(),
                fetchUsers(),
                fetchCurrentUser()
            ]);
        };
        fetchData();
    }, []);

    const fetchInvestments = async () => {
        const token = localStorage.getItem('token');
        try {
            setLoading(true);
            const response = await axios.get(`${BASE_URL}/investment/`, {
                headers: {
                    'Authorization': `Bearer ${token}`
                }
            });
            const sortedInvestments = response.data.data.sort((a, b) =>
                new Date(b.transactionDate) - new Date(a.transactionDate)
            );
            setInvestments(sortedInvestments);
            setFilteredInvestments(sortedInvestments);
            setError(null);
        } catch (error) {
            console.error("Error fetching investments:", error);
            setError("Yatırımlar yüklenirken bir hata oluştu. Lütfen tekrar deneyin.");
        } finally {
            setLoading(false);
        }
    };

    const fetchCurrentUser = async () => {
        const token = localStorage.getItem('token');
        try {
            const response = await axios.get(`${BASE_URL}/users/me`, {
                headers: {
                    'Authorization': `Bearer ${token}`
                }
            });
            setCurrentUser(response.data);
        } catch (error) {
            console.error("Error fetching current user:", error);
        }
    };

    const fetchRefs = async () => {
        const token = localStorage.getItem('token');
        try {
            const response = await axios.get(`${BASE_URL}/refs/`, {
                headers: {
                    'Authorization': `Bearer ${token}`
                }
            });
            const refsMap = {};
            response.data.forEach(ref => {
                refsMap[ref.refId] = ref.refName;
            });
            setRefs(refsMap);
        } catch (error) {
            console.error("Error fetching refs:", error);
        }
    };

    const fetchUsers = async () => {
        const token = localStorage.getItem('token');
        try {
            const response = await axios.get(`${BASE_URL}/users`, {
                headers: {
                    'Authorization': `Bearer ${token}`
                }
            });
            const usersMap = {};
            response.data.data.forEach(user => {
                usersMap[user.id] = user.username;
            });
            setUsers(usersMap);
        } catch (error) {
            console.error("Error fetching users:", error);
        }
    };

    const handleTakeOwnership = async (investmentId) => {
        const token = localStorage.getItem('token');
        try {
            setUpdateLoading(investmentId);
            await axios.post(`${BASE_URL}/investment/${investmentId}/take-ownership`, null, {
                headers: {
                    'Authorization': `Bearer ${token}`
                }
            });
            await fetchInvestments();
            setShowModal(false);
        } catch (error) {
            console.error("Error taking ownership:", error);
            setError("Yatırım sahiplenirken bir hata oluştu.");
        } finally {
            setUpdateLoading(null);
        }
    };

    const handleStatusUpdate = async (investmentId, newStatus) => {
        const token = localStorage.getItem('token');
        setUpdateLoading(investmentId);
        try {
            const investment = investments.find(inv => inv.id === investmentId);
            if (!investment.userID) {
                await handleTakeOwnership(investmentId);
            }

            await axios.patch(`${BASE_URL}/investment/${investmentId}`, {
                investmentStatus: newStatus,
                note: newStatus === 'Onaylandı'
                    ? 'Yatırım onaylandı'
                    : newStatus === 'İptal'
                        ? 'Yatırım iptal edildi'
                        : 'Yatırım beklemede',
            }, {
                headers: {
                    'Accept': 'application/json',
                    'Authorization': `Bearer ${token}`
                }
            });

            await fetchInvestments();
        } catch (error) {
            setError("Bu Yatırımı Onaylamaya Yetkiniz Yok.");
        } finally {
            setUpdateLoading(null);
        }
    };

    const handleFiltersChange = (filters) => {
        let filtered = [...investments];

        // Filter by account
        if (filters.account) {
            filtered = filtered.filter(inv => inv.accountNumber === filters.account);
        }

        // Filter by status
        if (filters.status) {
            filtered = filtered.filter(inv => inv.investmentStatus === filters.status);
        }

        // Filter by date range
        if (filters.dateRange.start || filters.dateRange.end) {
            filtered = filtered.filter(inv => {
                const invDate = new Date(inv.transactionDate);
                const startDate = filters.dateRange.start ? new Date(filters.dateRange.start) : null;
                const endDate = filters.dateRange.end ? new Date(filters.dateRange.end) : null;
                
                if (startDate && endDate) {
                    return invDate >= startDate && invDate <= endDate;
                } else if (startDate) {
                    return invDate >= startDate;
                } else if (endDate) {
                    return invDate <= endDate;
                }
                return true;
            });
        }

        // Filter by amount range
        if (filters.amountRange.min || filters.amountRange.max) {
            filtered = filtered.filter(inv => {
                const min = filters.amountRange.min ? parseFloat(filters.amountRange.min) : 0;
                const max = filters.amountRange.max ? parseFloat(filters.amountRange.max) : Infinity;
                return inv.balance >= min && inv.balance <= max;
            });
        }

        setFilteredInvestments(filtered);
    };

    const getStatusBadgeClass = (status) => {
        switch (status) {
            case 'Onaylandı':
                return 'bg-emerald-600 text-slate-200';
            case 'İptal':
                return 'bg-red-600 text-slate-200';
            case 'Beklemede':
            default:
                return 'bg-yellow-600 text-slate-100';
        }
    };

    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>
        );
    }

    return (
        <div className="container-fluid mx-auto p-3">
            <div className="mb-6">
                <YatırımContent onFiltersChange={handleFiltersChange} />
            </div>

            <div className="bg-white rounded-lg shadow-lg overflow-hidden">
                {error && (
                    <div className="p-4 bg-red-100 border-l-4 border-red-500 text-red-700">
                        <p className="font-medium">Hata!</p>
                        <p>{error}</p>
                    </div>
                )}

                {/* Show count of filtered investments */}
                <div className="p-4 bg-gray-50 border-b">
                    <div className="text-sm text-gray-600">
                        Toplam Yatırım: {filteredInvestments.length}
                        {filteredInvestments.length > 0 && (
                            <span className="ml-4">
                                Toplam Tutar: {filteredInvestments.reduce((sum, inv) => sum + inv.balance, 0).toLocaleString('tr-TR')} ₺
                            </span>
                        )}
                    </div>
                </div>

                <div className="overflow-x-auto">
                    <table className="min-w-full divide-y divide-gray-200">
                        <thead className="bg-gray-800">
                            <tr>
                                <th className="px-6 py-3 text-left text-xs font-medium text-slate-200 uppercase tracking-wider">ID</th>
                                <th className="px-6 py-3 text-left text-xs font-medium text-slate-200 uppercase tracking-wider">Site</th>
                                <th className="px-6 py-3 text-left text-xs font-medium text-slate-200 uppercase tracking-wider">Adı Soyadı</th>
                                <th className="px-6 py-3 text-left text-xs font-medium text-slate-200 uppercase tracking-wider">Miktar</th>
                                <th className="px-6 py-3 text-left text-xs font-medium text-slate-200 uppercase tracking-wider">Kullanıcı Adı</th>
                                <th className="px-6 py-3 text-left text-xs font-medium text-slate-200 uppercase tracking-wider">Yöntem</th>
                                <th className="px-6 py-3 text-left text-xs font-medium text-slate-200 uppercase tracking-wider">Hesap Adı</th>
                                <th className="px-6 py-3 text-left text-xs font-medium text-slate-200 uppercase tracking-wider">Hesap No</th>
                                <th className="px-6 py-3 text-left text-xs font-medium text-slate-200 uppercase tracking-wider">İşlem Tarihi</th>
                                <th className="px-6 py-3 text-left text-xs font-medium text-slate-200 uppercase tracking-wider">İşlemi Yapan</th>
                                <th className="px-6 py-3 text-center text-xs font-medium text-slate-200 uppercase tracking-wider">Durum</th>
                                <th className="px-6 py-3 text-center text-xs font-medium text-slate-200 uppercase tracking-wider">İşlemler</th>
                            </tr>
                        </thead>
                        <tbody className="bg-white divide-y divide-gray-200">
                            {filteredInvestments.map((investment) => (
                                <tr key={investment.id} className="text-xs hover:bg-gray-50">
                                    <td className="px-6 py-4 whitespace-nowrap">{investment.id}</td>
                                    <td className="px-6 py-4 whitespace-nowrap">{refs[investment.refId] || '-'}</td>
                                    <td className="px-6 py-4 whitespace-nowrap">{investment.fullName}</td>
                                    <td className="px-6 py-4 whitespace-nowrap">
                                        <span className={`p-1.5 rounded-md ${investment.balance <= 4999 ? 'bg-yellow-600' : 'bg-emerald-600'} text-white`}>
                                            {investment.balance.toLocaleString('tr-TR')} ₺
                                        </span>
                                    </td>
                                    <td className="px-6 py-4 whitespace-nowrap">{investment.username}</td>
                                    <td className="px-6 py-4 whitespace-nowrap">{investment.method}</td>
                                    <td className="px-6 py-4 whitespace-nowrap">{investment.accountName}</td>
                                    <td className="px-6 py-4 whitespace-nowrap">TR {investment.accountNumber}</td>
                                    <td className="px-6 py-4 whitespace-nowrap text-gray-500">
                                        {new Date(investment.transactionDate).toLocaleString("tr-TR")}
                                    </td>
                                    <td className="px-6 py-4 whitespace-nowrap">
                                        <span className={`px-2 py-1 rounded-lg ${investment.userID ? 'bg-red-400' : 'bg-red-600'} text-white`}>
                                            {users[investment.userID] || 'Seçilmedi'}
                                        </span>
                                    </td>
                                    <td className="px-6 py-4 whitespace-nowrap text-center">
                                        <span className={`px-2 py-1 text-xs leading-5 font-semibold rounded-full ${getStatusBadgeClass(investment.investmentStatus)}`}>
                                            {investment.investmentStatus}
                                        </span>
                                    </td>
                                    <td className="px-6 py-4 whitespace-nowrap text-center">
                                        <div className="flex items-center justify-center space-x-2">
                                            {investment.investmentStatus === 'Beklemede' && (
                                                <>
                                                    {!investment.userID && (
                                                        <button
                                                            onClick={() => {
                                                                setSelectedInvestmentId(investment.id);
                                                                setShowModal(true);
                                                            }}
                                                            disabled={updateLoading === investment.id}
                                                            className="px-3 py-1 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors text-xs disabled:opacity-50"
                                                        >
                                                            {updateLoading === investment.id ? 'İşleniyor...' : 'İşlemi Al'}
                                                        </button>
                                                    )}
                                                    {investment.userID === currentUser?.id && (
                                                        <>
                                                            <button
                                                                onClick={() => {
                                                                    setSelectedInvestmentId(investment.id);
                                                                    setShowModal2(true);
                                                                }}
                                                                disabled={updateLoading === investment.id}
                                                                className="px-3 py-1 bg-emerald-500 text-white rounded-md hover:bg-emerald-600 transition-colors text-xs disabled:opacity-50"
                                                            >
                                                                {updateLoading === investment.id ? 'Onaylanıyor...' : 'Onayla'}
                                                            </button>
                                                            <button
                                                                onClick={() => {setSelectedInvestmentId(investment.id);
                                                                    setShowModal3(true);
                                                                }}
                                                                disabled={updateLoading === investment.id}
                                                                className="px-3 py-1 bg-red-500 text-white rounded-md hover:bg-red-600 transition-colors text-xs disabled:opacity-50"
                                                            >
                                                                {updateLoading === investment.id ? 'Reddediliyor...' : 'Reddet'}
                                                            </button>
                                                        </>
                                                    )}
                                                    {investment.userID && investment.userID !== currentUser?.id && (
                                                        <button
                                                            onClick={() => handleTakeOwnership(investment.id)}
                                                            disabled={updateLoading === investment.id}
                                                            className="px-3 py-1 bg-yellow-500 text-white rounded-md hover:bg-yellow-600 transition-colors text-xs disabled:opacity-50"
                                                        >
                                                            {updateLoading === investment.id ? 'İşlem Alınıyor...' : 'İşlemi Devral'}
                                                        </button>
                                                    )}
                                                </>
                                            )}
                                        </div>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>

                {filteredInvestments.length === 0 && (
                    <div className="text-center py-8 text-gray-500">
                        Yatırım Bulunamadı.
                    </div>
                )}

                {/* Confirmation Modals */}
                {showModal && (
                    <ProgressBox
                        title="İşlemi almak istiyor musun?"
                        show={showModal}
                        onSuccess={() => {
                            handleTakeOwnership(selectedInvestmentId);
                            setShowModal(false);
                        }}
                        onClose={() => {
                            setShowModal(false);
                            setSelectedInvestmentId(null);
                        }}
                    />
                )}

                {showModal2 && (
                    <ConfirmBox
                        title="İşlemi onaylamak istiyor musun?"
                        show={showModal2}
                        onSuccess={() => {
                            handleStatusUpdate(selectedInvestmentId, 'Onaylandı');
                            setShowModal2(false);
                        }}
                        onClose={() => {
                            setShowModal2(false);
                            setSelectedInvestmentId(null);
                        }}
                    />
                )}

                {showModal3 && (
                    <ConfirmBox
                        title="İşlemi reddetmek istiyor musun?"
                        show={showModal3}
                        onSuccess={() => {
                            handleStatusUpdate(selectedInvestmentId, 'İptal');
                            setShowModal3(false);
                        }}
                        onClose={() => {
                            setShowModal3(false);
                            setSelectedInvestmentId(null);
                        }}
                    />
                )}
            </div>
        </div>
    );
};

export default InvestmentTable;