import React, { useState, useEffect } from 'react';
import axios from 'axios';

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

const InvestmentTable = () => {
    const [investments, setInvestments] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);
    const [searchTerm, setSearchTerm] = useState('');
    const [statusFilter, setStatusFilter] = useState('all');
    const [refs, setRefs] = useState({});
    const [users, setUsers] = useState({});
    const [updateLoading, setUpdateLoading] = useState(null);

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

    useEffect(() => {
        fetchInvestments();
        fetchRefs();
        fetchUsers();

        // Set up periodic refresh every 30 seconds
        const interval = setInterval(() => {
            fetchInvestments();
        }, 30000);

        return () => clearInterval(interval);
    }, []);

    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();
        } 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 {
            // First take ownership if not already owned
            const investment = investments.find(inv => inv.id === investmentId);
            if (!investment.userID) {
                await handleTakeOwnership(investmentId);
            }

            // Then update the status
            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',
                resultDate: newStatus !== 'Beklemede' ? new Date().toISOString() : null
            }, {
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${token}`
                }
            });

            await fetchInvestments();
        } catch (error) {
            console.error("Error updating status:", error);
            setError("Durum güncellenirken bir hata oluştu.");
        } finally {
            setUpdateLoading(null);
        }
    };

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

    const filteredInvestments = investments.filter(investment => {
        const searchLower = searchTerm.toLowerCase();
        const matchesSearch = (
            investment.id.toString().includes(searchLower) ||
            (refs[investment.refId] || '').toLowerCase().includes(searchLower) ||
            investment.fullName.toLowerCase().includes(searchLower) ||
            investment.username.toLowerCase().includes(searchLower) ||
            investment.accountNumber.includes(searchLower)
        );
        
        const matchesStatus = statusFilter === 'all' || investment.investmentStatus === statusFilter;
        
        return matchesSearch && matchesStatus;
    });

    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="bg-white rounded-lg shadow-lg overflow-hidden">
                {/* Search and filters */}
                <div className="p-4 bg-gray-300">
                    <div className="flex items-center justify-between space-x-4">
                        <div className="flex-1">
                            <input
                                type="search"
                                placeholder="ID, Site, Kullanıcı Adı veya Hesap No ile ara..."
                                className="w-full px-4 py-2 rounded-lg border text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500"
                                value={searchTerm}
                                onChange={(e) => setSearchTerm(e.target.value)}
                            />
                        </div>
                        <select
                            value={statusFilter}
                            onChange={(e) => setStatusFilter(e.target.value)}
                            className="px-4 py-2 border rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500"
                        >
                            <option value="all">Tüm Durumlar</option>
                            <option value="Beklemede">Beklemede</option>
                            <option value="Onaylandı">Onaylandı</option>
                            <option value="İptal">İptal</option>
                        </select>
                        <button
                            onClick={fetchInvestments}
                            className="px-4 py-2 bg-emerald-500 text-white rounded-lg text-sm hover:bg-emerald-600 transition-colors"
                        >
                            Yenile
                        </button>
                    </div>
                </div>

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

                <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">
                                    Sonuç 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="hover:bg-gray-100">
                                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {investment.id}
                                    </td>
                                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {refs[investment.refId] || '-'}
                                    </td>
                                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {investment.fullName}
                                    </td>
                                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        ₺{investment.balance.toLocaleString()}
                                    </td>
                                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {investment.username}
                                    </td>
                                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {investment.method}
                                    </td>
                                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {investment.accountName}
                                    </td>
                                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {investment.accountNumber}
                                    </td>
                                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        {new Date(investment.transactionDate).toLocaleString("tr-TR")}
                                    </td>
                                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                                        {investment.resultDate ? new Date(investment.resultDate).toLocaleString("tr-TR") : '-'}
                                    </td>
                                    <td className="px-6 py-4 whitespace-nowrap text-sm text-gray-900">
                                        {users[investment.userID] || '-'}
                                    </td>
                                    <td className="px-6 py-4 whitespace-nowrap text-center">
                                        <span className={`px-2 inline-flex 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={() => handleTakeOwnership(investment.id)}
                                                            disabled={updateLoading === investment.id}
                                                            className="px-3 py-1 bg-blue-500 text-white rounded-md hover:bg-blue-600 transition-colors text-xs"
                                                        >
                                                            {updateLoading === investment.id ? 'İşleniyor...' : 'Sahiplen'}
                                                        </button>
                                                    )}
                                                    {investment.userID && (
                                                        <>
                                                            <button
                                                                onClick={() => handleStatusUpdate(investment.id, 'Onaylandı')}
                                                                disabled={updateLoading === investment.id}
                                                                className="px-3 py-1 bg-emerald-500 text-white rounded-md hover:bg-emerald-600 transition-colors text-xs"
                                                            >
                                                                {updateLoading === investment.id ? 'İşleniyor...' : 'Onayla'}
                                                            </button>
                                                            <button
                                                                onClick={() => handleStatusUpdate(investment.id, 'İptal')}
                                                                disabled={updateLoading === investment.id}className="px-3 py-1 bg-red-500 text-white rounded-md hover:bg-red-600 transition-colors text-xs"
                                                            >
                                                                {updateLoading === investment.id ? 'İşleniyor...' : 'İptal'}
                                                            </button>
                                                        </>
                                                    )}
                                                </>
                                            )}
                                            {(investment.investmentStatus === 'Onaylandı' || investment.investmentStatus === 'İptal') && (
                                                <span className="text-xs text-gray-500 italic">
                                                    {investment.resultDate 
                                                        ? `İşlem tarihi: ${new Date(investment.resultDate).toLocaleString("tr-TR")}` 
                                                        : '-'}
                                                </span>
                                            )}
                                        </div>
                                    </td>
                                </tr>
                            ))}
                        </tbody>
                    </table>
                </div>

                {filteredInvestments.length === 0 && (
                    <div className="text-center py-6 text-gray-500">
                        Aradığınız kriterlerde yatırım bulunamadı.
                    </div>
                )}
            </div>
        </div>
    );
};

export default InvestmentTable;