import React, { useEffect, useState } from 'react';
import { HiBars3BottomLeft } from "react-icons/hi2";
import { FaCheck } from "react-icons/fa6";
import { IoSearch } from "react-icons/io5";
import '../App.css';
import WithdrawalForm from './Cekimform';
import WithdrawalTable from './CekimTable';
import DateInput from './DateInput';
import axios from 'axios';

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

const WithdrawalContent = () => {
    const [showFilterMenu, setShowFilterMenu] = useState(true);
    const [showModal, setShowModal] = useState(false);
    const [bankAccounts, setBankAccounts] = useState([]);
    const [selectedAccounts, setSelectedAccounts] = useState([]);
    const [accountSearchTerm, setAccountSearchTerm] = useState('');
    const [filteredAccounts, setFilteredAccounts] = useState([]);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);
    const [minAmount, setMinAmount] = useState('');
    const [maxAmount, setMaxAmount] = useState('');
    const [filterConfig, setFilterConfig] = useState({
        accountNumbers: [],
        minAmount: '',
        maxAmount: '',
        startDate: '',
        endDate: '',
        autoUpdate: true
    });

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

    useEffect(() => {
        if (accountSearchTerm.trim() === '') {
            setFilteredAccounts(bankAccounts);
            return;
        }

        const searchTerms = accountSearchTerm.toLowerCase().split(' ');
        const filtered = bankAccounts.filter(account => {
            const accountString = `${account.accountName} ${account.bankName} ${account.accountNumber}`.toLowerCase();
            return searchTerms.every(term => accountString.includes(term));
        });

        setFilteredAccounts(filtered);
    }, [accountSearchTerm, bankAccounts]);

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

    const handleAccountChange = (e) => {
        const selectedOptions = Array.from(e.target.selectedOptions).map(option => option.value);
        const selectedAccountsInfo = selectedOptions.map(accountId => {
            const account = bankAccounts.find(acc => acc.accountId === accountId);
            return account ? account.accountNumber : null;
        }).filter(Boolean);

        setSelectedAccounts(selectedOptions);
        setFilterConfig(prev => ({
            ...prev,
            accountNumbers: selectedAccountsInfo
        }));
    };

    const handleMinAmountChange = (e) => {
        const value = e.target.value;
        setMinAmount(value);
        setFilterConfig(prev => ({
            ...prev,
            minAmount: value
        }));
    };

    const handleMaxAmountChange = (e) => {
        const value = e.target.value;
        setMaxAmount(value);
        setFilterConfig(prev => ({
            ...prev,
            maxAmount: value
        }));
    };

    const handleDateChange = ({ startDate, endDate }) => {
        setFilterConfig(prev => ({
            ...prev,
            startDate,
            endDate
        }));
    };

    const toggleAutoUpdate = () => {
        setFilterConfig(prev => ({
            ...prev,
            autoUpdate: !prev.autoUpdate
        }));
    };

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

    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">
                {/* Header Section */}
                <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 Çekim Talebi Oluştur
                    </button>
                    <div className="flex flex-row items-center text-sm gap-3 justify-center">
                        <DateInput onDateChange={handleDateChange} />
                    </div>
                </div>

                {/* Withdrawal Form Modal */}
                {showModal && (
                    <WithdrawalForm
                        show={showModal}
                        title="Çekim Talebi Oluşturma Formu"
                        onClose={() => setShowModal(false)}
                    />
                )}

                {/* Filter Toggle Button */}
                <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>

                {/* Filter Section */}
                {!showFilterMenu && (
                    <div className="w-full">
                        <div className="flex items-center md:items-start flex-wrap flex-1 gap-6 justify-between">
                            {/* Bank Accounts Section */}
                            <div className="flex flex-col items-start text-sm justify-center gap-3.5">
                                <h5 className="font-medium">Banka Hesapları</h5>
                                
                                <div className="flex flex-col w-full min-w-[300px] gap-2">
                                    {/* Account Search */}
                                    <div className="relative">
                                        <input
                                            type="text"
                                            placeholder="Hesap ara..."
                                            value={accountSearchTerm}
                                            onChange={(e) => setAccountSearchTerm(e.target.value)}
                                            className="w-full pl-8 pr-4 py-1.5 rounded-md text-xs border border-gray-300 
                                                     focus:outline-none focus:ring-2 focus:ring-emerald-500
                                                     placeholder-gray-400"
                                        />
                                        <IoSearch className="absolute left-2.5 top-1/2 transform -translate-y-1/2 text-gray-400" size={14} />
                                    </div>

                                    {/* Accounts Multi-Select */}
                                    <select
                                        multiple
                                        value={selectedAccounts}
                                        onChange={handleAccountChange}
                                        className="w-full rounded-md text-xs border border-gray-300 
                                                 focus:outline-none focus:ring-2 focus:ring-emerald-500
                                                 disabled:bg-gray-100 disabled:cursor-not-allowed"
                                        disabled={loading}
                                        size={6}
                                    >
                                        {filteredAccounts.map(account => (
                                            <option
                                                key={account.accountId}
                                                value={account.accountId}
                                                className="p-2 border-b border-gray-100 last:border-b-0
                                                         hover:bg-emerald-50 cursor-pointer"
                                            >
                                                {account.accountName} - {account.bankName} - (TR {account.accountNumber})
                                            </option>
                                        ))}
                                    </select>

                                    {/* Selection Info and Help Text */}
                                    <div className="flex flex-col gap-1">
                                        <div className="text-xs text-gray-600">
                                            {selectedAccounts.length === 0 ? (
                                                'Seçili hesap yok'
                                            ) : (
                                                `${selectedAccounts.length} hesap seçili`
                                            )}
                                        </div>
                                        <div className="text-xs text-gray-500 flex items-center gap-1">
                                            <span className="bg-gray-100 px-1.5 py-0.5 rounded">Ctrl/Cmd</span>
                                            tuşuna basılı tutarak birden fazla hesap seçebilirsiniz
                                        </div>
                                    </div>

                                    {error && (
                                        <span className="text-xs text-red-500">{error}</span>
                                    )}

                                    {loading && (
                                        <div className="flex items-center justify-center py-2">
                                            <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-emerald-500"></div>
                                        </div>
                                    )}
                                </div>
                            </div>

                            {/* Amount Range and Auto-Update Section */}
                            <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={handleMinAmountChange}
                                        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={handleMaxAmountChange}
                                        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 items-center justify-center">
                                    <div 
                                        onClick={toggleAutoUpdate}
                                        className="flex flex-row items-center justify-center rounded-lg p-1 bg-emerald-600 text-white hover:bg-emerald-700 transition-colors cursor-pointer"
                                    >
                                        <FaCheck size={10} />
                                        <button
                                            type="button"
                                            className="text-xs p-1 rounded-lg"
                                        >
                                            {filterConfig.autoUpdate ? 'Otomatik Güncelleştirme Açık' : 'Otomatik Güncelleştirme Kapalı'}
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                )}
            </div>
            
            {/* Withdrawals Table */}
            <WithdrawalTable 
                filters={filterConfig}
                autoUpdate={filterConfig.autoUpdate}
            />
        </div>
    );
};

export default WithdrawalContent;