import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { ChevronDown, ChevronUp } from 'lucide-react';

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

const AccountStatsPanel = () => {
  const [accountStats, setAccountStats] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  const [isExpanded, setIsExpanded] = useState(true);
  const [searchTerm, setSearchTerm] = useState('');

  const fetchAccountStats = async () => {
    const token = localStorage.getItem('token');
    try {
      setLoading(true);
      
      // Fetch accounts
      const accountsResponse = await axios.get(`${BASE_URL}/bank/accounts`, {
        headers: {
          'Authorization': `Bearer ${token}`,
          'Accept': 'application/json'
        }
      });

      // Fetch investments
      const investmentsResponse = await axios.get(`${BASE_URL}/investment`, {
        headers: {
          'Authorization': `Bearer ${token}`,
          'Accept': 'application/json'
        }
      });

      // Fetch withdrawals
      const withdrawalsResponse = await axios.get(`${BASE_URL}/withdrawal`, {
        headers: {
          'Authorization': `Bearer ${token}`,
          'Accept': 'application/json'
        }
      });

      // Process and combine the data
      const stats = accountsResponse.data.data.map(account => {
        const investments = investmentsResponse.data.data.filter(
          inv => inv.accountNumber === account.accountNumber
        );
        const withdrawals = withdrawalsResponse.data.data.filter(
          with_ => with_.accountNumber === account.accountNumber
        );

        return {
          accountName: account.accountName,
          accountNumber: account.accountNumber,
          bankName: account.bankName,
          balance: account.accountBalance,
          totalInvestment: investments.reduce((sum, inv) => sum + inv.balance, 0),
          investmentCount: investments.length,
          totalWithdrawal: withdrawals.reduce((sum, with_) => sum + with_.balance, 0),
          withdrawalCount: withdrawals.length
        };
      });

      setAccountStats(stats);
      setError(null);
    } catch (error) {
      console.error("Error fetching account statistics:", error);
      setError("İstatistikler yüklenirken bir hata oluştu. Lütfen daha sonra tekrar deneyin.");
    } finally {
      setLoading(false);
    }
  };

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

  const filteredStats = accountStats.filter(stat => {
    const searchLower = searchTerm.toLowerCase();
    return (
      stat.accountName.toLowerCase().includes(searchLower) ||
      stat.accountNumber.toLowerCase().includes(searchLower) ||
      stat.bankName.toLowerCase().includes(searchLower)
    );
  });

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

  return (
    <div className="bg-white rounded-lg shadow-lg mb-6">
      <div className="p-4 bg-gray-800 text-white flex justify-between items-center">
        <h2 className="text-lg font-semibold">Hesap İstatistikleri</h2>
        <div className="flex items-center space-x-4">
          <input
            type="search"
            placeholder="Hesap Ara..."
            className="px-3 py-1 rounded-lg border text-sm focus:outline-none focus:ring-2 focus:ring-emerald-500 text-gray-800"
            value={searchTerm}
            onChange={(e) => setSearchTerm(e.target.value)}
          />
          <button
            onClick={() => setIsExpanded(!isExpanded)}
            className="p-1 hover:bg-gray-700 rounded"
          >
            {isExpanded ? <ChevronUp size={20} /> : <ChevronDown size={20} />}
          </button>
        </div>
      </div>

      {error && (
        <div className="p-4 bg-red-100 border-l-4 border-red-500 text-red-700">
          <p>{error}</p>
        </div>
      )}

      {isExpanded && (
        <div className="p-4 overflow-x-auto">
          <table className="min-w-full divide-y divide-gray-200">
            <thead>
              <tr className="bg-gray-50">
                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Banka Adı</th>
                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Hesap Adı</th>
                <th className="px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase">Hesap No</th>
                <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Bakiye</th>
                <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Toplam Yatırım</th>
                <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">Yatırım Sayısı</th>
                <th className="px-4 py-3 text-right text-xs font-medium text-gray-500 uppercase">Toplam Çekim</th>
                <th className="px-4 py-3 text-center text-xs font-medium text-gray-500 uppercase">Çekim Sayısı</th>
              </tr>
            </thead>
            <tbody className="divide-y divide-gray-200">
              {filteredStats.map((stat, index) => (
                <tr key={index} className="hover:bg-gray-50">
                  <td className="px-4 py-3 text-sm text-gray-900">{stat.bankName}</td>
                  <td className="px-4 py-3 text-sm text-gray-900">{stat.accountName}</td>
                  <td className="px-4 py-3 text-sm text-gray-900">{stat.accountNumber}</td>
                  <td className="px-4 py-3 text-sm text-gray-900 text-right">
                    {stat.balance.toLocaleString('tr-TR')} ₺
                  </td>
                  <td className="px-4 py-3 text-sm text-green-600 text-right font-semibold">
                    {stat.totalInvestment.toLocaleString('tr-TR')} ₺
                  </td>
                  <td className="px-4 py-3 text-sm text-gray-900 text-center">
                    <span className="px-2 py-1 bg-green-100 text-green-800 rounded-full">
                      {stat.investmentCount}
                    </span>
                  </td>
                  <td className="px-4 py-3 text-sm text-red-600 text-right font-semibold">
                    {stat.totalWithdrawal.toLocaleString('tr-TR')} ₺
                  </td>
                  <td className="px-4 py-3 text-sm text-gray-900 text-center">
                    <span className="px-2 py-1 bg-red-100 text-red-800 rounded-full">
                      {stat.withdrawalCount}
                    </span>
                  </td>
                </tr>
              ))}
            </tbody>
          </table>

          {filteredStats.length === 0 && (
            <div className="text-center py-6 text-gray-500">
              Aradığınız kriterlere uygun hesap bulunamadı.
            </div>
          )}
        </div>
      )}
    </div>
  );
};

export default AccountStatsPanel;