import React, { useState, useEffect } from 'react';
import axios from 'axios';
import BankaCardBox from './BankaCardBox';
import KrediCardBox from './KrediCardBox';
import { FaWallet, FaChartPie } from 'react-icons/fa6';

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

const Main = () => {
    const [users, setUsers] = useState([]);
    const [loading, setLoading] = useState(true);
    const [error, setError] = useState(null);

    const getAllByUsers = async () => {
        try {
            setLoading(true);
            const response = await axios.get(`${BASE_URL}/bank/accounts`);
            setUsers(response.data.data);
        } catch (error) {
            console.error("Error fetching data:", error);
            setError("Failed to load account data. Please try again later.");
        } finally {
            setLoading(false);
        }
    };

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

    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="min-h-screen bg-gray-50 p-6">
                <div className="bg-red-50 border-l-4 border-red-400 p-4 rounded">
                    <div className="flex">
                        <div className="flex-shrink-0">
                            <svg className="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
                                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
                            </svg>
                        </div>
                        <div className="ml-3">
                            <h3 className="text-sm font-medium text-red-800">Error</h3>
                            <div className="mt-2 text-sm text-red-700">{error}</div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }

    const totalBalance = users.reduce((acc, data) => acc + data.accountBalance, 0);

    return (
        <div className="min-h-screen bg-gray-50">
            <main className="container mx-auto px-4 py-8">
                <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                    {/* Left Column - Account Summary */}
                    <div className="lg:col-span-1">
                        <div className="bg-white rounded-lg shadow-lg overflow-hidden">
                            <div className="bg-emerald-600 px-6 py-4">
                                <h2 className="text-lg font-semibold text-white flex items-center">
                                    <FaWallet className="mr-2" />
                                    Bank Accounts
                                </h2>
                            </div>
                            
                            {/* Total Balance Card */}
                            <div className="p-6">
                                <div className="bg-emerald-50 rounded-lg p-4 mb-6">
                                    <h3 className="text-sm font-medium text-gray-600 mb-2">Total Balance</h3>
                                    <div className="text-2xl font-bold text-emerald-600">
                                        {totalBalance.toLocaleString('tr-TR', { 
                                            minimumFractionDigits: 2, 
                                            maximumFractionDigits: 2 
                                        })} ₺
                                    </div>
                                </div>

                                {/* Account List */}
                                <div className="space-y-4">
                                    {users.map((account) => (
                                        <div 
                                            key={account.id}
                                            className="bg-white rounded-lg border border-gray-200 p-4 hover:shadow-md transition-shadow"
                                        >
                                            <div className="flex flex-col space-y-2">
                                                <div className="flex items-center justify-between">
                                                    <span className="font-medium text-gray-900">
                                                        {account.accountName}
                                                    </span>
                                                    <span className="text-sm text-gray-500">
                                                        {account.bankName}
                                                    </span>
                                                </div>
                                                
                                                <div className={`text-right font-semibold ${
                                                    account.accountBalance === 0 
                                                        ? 'text-gray-600' 
                                                        : account.accountBalance < 5000 
                                                            ? 'text-yellow-600' 
                                                            : 'text-emerald-600'
                                                }`}>
                                                    {Number(account.accountBalance).toLocaleString("tr-TR", { 
                                                        minimumFractionDigits: 2, 
                                                        maximumFractionDigits: 2 
                                                    })} ₺
                                                </div>

                                                <div className="flex items-center justify-between text-xs text-gray-500">
                                                    <span>Last Updated:</span>
                                                    <span>{new Date(account.created_at).toLocaleString("tr-TR")}</span>
                                                </div>
                                            </div>
                                        </div>
                                    ))}
                                </div>
                            </div>
                        </div>
                    </div>

                    {/* Right Column - Cards */}
                    <div className="lg:col-span-2">
                        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                            {/* Statistics Cards */}
                            <div className="h-full">
                                <BankaCardBox />
                            </div>
                            <div className="h-full">
                                <KrediCardBox />
                            </div>
                        </div>
                    </div>
                </div>
            </main>
        </div>
    );
};

export default Main;