import React, { useEffect, useState } from 'react';
import { HiBars3BottomLeft } from "react-icons/hi2";
import { FaCheck } from "react-icons/fa6";
import '../App.css';
import InvestmentForm from './YatırımForm';
import axios from 'axios';
import DateInput from './DateInput';

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

const YatırımContent = () => {
    const [showFilterMenu, setShowFilterMenu] = useState(true);
    const [showModal, setShowModal] = useState(false);
    const [bankAccounts, setBankAccounts] = useState([]);
    const [filteredAccounts, setFilteredAccounts] = useState([]);
    const [selectedAccount, setSelectedAccount] = useState('');
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);
    const [minAmount, setMinAmount] = useState('');
    const [maxAmount, setMaxAmount] = useState('');
    const [selectedDate, setSelectedDate] = useState('');
    const [autoUpdate, setAutoUpdate] = useState(true);

    useEffect(() => {
        fetchBankAccounts();
        if (autoUpdate) {
            const interval = setInterval(fetchBankAccounts, 30000); // Auto-update every 30 seconds
            return () => clearInterval(interval);
        }
    }, [autoUpdate]);

    useEffect(() => {
        applyFilters();
    }, [bankAccounts, selectedAccount, minAmount, maxAmount, selectedDate]);

    const fetchBankAccounts = async () => {
        const token = localStorage.getItem('token');
        setLoading(true);
        try {
            const response = await axios.get(`${BASE_URL}/bank/accounts`, {
                headers: {
                    'Authorization': `Bearer ${token}`
                }
            });
            const accounts = response.data.data;
            setBankAccounts(accounts);
            setError(null);
        } catch (err) {
            setError('Banka hesapları yüklenirken bir hata oluştu');
            console.error('Error fetching bank accounts:', err);
        } finally {
            setLoading(false);
        }
    };

    const applyFilters = () => {
        let filtered = [...bankAccounts];

        // Filter by selected account
        if (selectedAccount) {
            filtered = filtered.filter(account => account.accountId === selectedAccount);
        }

        // Filter by amount range
        if (minAmount !== '') {
            filtered = filtered.filter(account => account.accountBalance >= parseFloat(minAmount));
        }
        if (maxAmount !== '') {
            filtered = filtered.filter(account => account.accountBalance <= parseFloat(maxAmount));
        }

        // Filter by date
        if (selectedDate) {
            const filterDate = new Date(selectedDate).toISOString().split('T')[0];
            filtered = filtered.filter(account => {
                const accountDate = new Date(account.created_at).toISOString().split('T')[0];
                return accountDate === filterDate;
            });
        }

        setFilteredAccounts(filtered);
    };

    const toggleFilterMenu = () => {
        setShowFilterMenu(prevState => !prevState);
    };

    const toggleAutoUpdate = () => {
        setAutoUpdate(prev => !prev);
    };

    const handleDateChange = (date) => {
        setSelectedDate(date);
    };

    const clearFilters = () => {
        setSelectedAccount('');
        setMinAmount('');
        setMaxAmount('');
        setSelectedDate('');
        setFilteredAccounts(bankAccounts);
    };

    return (
        <div className="w-full border-4 bg-slate-200 border-slate-200">
            <div className="flex flex-col p-5 border-4 gap-4 items-start justify-center">
                <div className="flex items-center justify-between border border-black border-r-0 border-t-0 border-l-0 pb-2 flex-wrap gap-4 w-full">
                    <button
                        onClick={() => setShowModal(true)}
                        type="button"
                        className="p-1.5 text-xs rounded-lg bg-emerald-500 text-white hover:bg-emerald-600 transition-colors"
                    >
                        Banka Yatırım Talebi Oluştur
                    </button>
                    <div className="flex flex-row items-center text-sm gap-3 justify-center">
                        <DateInput onDateChange={handleDateChange} />
                    </div>
                </div>

                {showModal && (
                    <InvestmentForm
                        show={showModal}
                        title="Yatırım Oluşturma Formu"
                        onClose={() => setShowModal(false)}
                    />
                )}

                <div
                    onClick={toggleFilterMenu}
                    className="items-center cursor-pointer gap-1 justify-center flex-row text-xs flex hover:text-emerald-600"
                >
                    <button type="button">Filtrele</button>
                    <HiBars3BottomLeft />
                </div>

                {!showFilterMenu && (
                    <div className="w-full">
                        <div className="flex items-center md:items-start flex-wrap flex-1 gap-6 justify-between">
                            <div className="flex flex-col items-start text-sm justify-center gap-3.5">
                                <h5 className="font-medium">Banka Hesapları</h5>
                                <select
                                    value={selectedAccount}
                                    onChange={(e) => setSelectedAccount(e.target.value)}
                                    className="rounded-md w-44 p-1 text-xs border border-gray-300 focus:outline-none focus:ring-2 focus:ring-emerald-500"
                                    disabled={loading}
                                >
                                    <option value="">Tüm Hesaplar</option>
                                    {bankAccounts.map(account => (
                                        <option
                                            key={account.accountId}
                                            value={account.accountId}
                                        >
                                            {account.accountName} - {account.bankName} - (TR {account.accountNumber})
                                        </option>
                                    ))}
                                </select>
                                {error && (
                                    <span className="text-xs text-red-500">{error}</span>
                                )}
                            </div>

                            <div className="flex flex-col items-start justify-center gap-5">
                                <div className="flex flex-row items-center text-xs justify-center gap-1">
                                    <h1>Tutar Aralığı</h1>
                                    <input
                                        type="number"
                                        placeholder="0 ₺"
                                        value={minAmount}
                                        onChange={(e) => setMinAmount(e.target.value)}
                                        className="rounded-sm text-center w-28 p-1 text-xs border border-gray-300 focus:outline-none focus:ring-2 focus:ring-emerald-500"
                                    />
                                    <span>ve</span>
                                    <input
                                        type="number"
                                        placeholder="500.000 ₺"
                                        value={maxAmount}
                                        onChange={(e) => setMaxAmount(e.target.value)}
                                        className="rounded-sm w-28 text-center p-1 text-xs border border-gray-300 focus:outline-none focus:ring-2 focus:ring-emerald-500"
                                    />
                                </div>
                                <div className="flex flex-row items-center justify-center gap-4">
                                    <button
                                        onClick={clearFilters}
                                        className="px-3 py-1 bg-gray-500 text-white rounded-lg hover:bg-gray-600 transition-colors text-xs"
                                    >
                                        Filtreleri Temizle
                                    </button>
                                    <div
                                        onClick={toggleAutoUpdate}
                                        className={`flex flex-row items-center justify-center rounded-lg p-1 ${autoUpdate ? 'bg-emerald-600' : 'bg-gray-400'} text-white hover:opacity-90 transition-colors cursor-pointer`}
                                    >
                                        <FaCheck size={10} />
                                        <span className="text-xs p-1 rounded-lg">
                                            Otomatik Güncelleştirme {autoUpdate ? 'Açık' : 'Kapalı'}
                                        </span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                )}

                {/* Display filtered accounts summary */}
                <div className="w-full mt-4">
                    <div className="text-xs text-gray-600">
                        Toplam Hesap: {filteredAccounts.length}
                        {filteredAccounts.length > 0 && (
                            <span className="ml-4">
                                Toplam Bakiye: {filteredAccounts.reduce((sum, account) => sum + account.accountBalance, 0).toLocaleString()} ₺
                            </span>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
};

export default YatırımContent;