import React, { useState, useEffect } from 'react';
import axios from 'axios';
import PopBox from './PopBox';
import '../css/bankForm.css';

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

const BankaUpdateForm = ({ show, onClose, title, accountId }) => {
    const [formData, setFormData] = useState({
        bankName: '',
        accountName: '',
        accountNumber: '',
        accountExplanation: '',
        isActive: false,
        isBlocked: false,
        isInvest: false,
        isPull: false,
        minInvest: '',
        maxInvest: '',
        minPull: '',
        maxPull: '',
        maxTransfer: '',
        maxAmount: ''
    });
    const [showModal, setShowModal] = useState(false);
    const [isFormVisible, setIsFormVisible] = useState(true);
    const [isLoading, setIsLoading] = useState(false);
    const [error, setError] = useState(null);

    useEffect(() => {
        if (accountId) {
            fetchAccountDetails();
        }
    }, [accountId]);

    const fetchAccountDetails = async () => {
        setIsLoading(true);
        setError(null);
        
        try {
            const token = localStorage.getItem('token');
            if (!token) {
                throw new Error('No authentication token found');
            }

            const response = await axios.get(`${BASE_URL}/bank/accounts`, {
                headers: {
                    'Authorization': `Bearer ${token}`
                }
            });

            const account = response.data.data.find(acc => acc.accountId === accountId);
            
            if (!account) {
                throw new Error('Account not found');
            }

            setFormData({
                bankName: account.bankName || '',
                accountName: account.accountName || '',
                accountNumber: account.accountNumber || '',
                accountExplanation: account.accountExplanation || '',
                isActive: Boolean(account.isActive),
                isBlocked: Boolean(account.isBlocked),
                isInvest: Boolean(account.isInvest),
                isPull: Boolean(account.isPull),
                minInvest: account.minInvest ? Number(account.minInvest) : '',
                maxInvest: account.maxInvest ? Number(account.maxInvest) : '',
                minPull: account.minPull ? Number(account.minPull) : '',
                maxPull: account.maxPull ? Number(account.maxPull) : '',
                maxTransfer: account.maxTransfer ? Number(account.maxTransfer) : '',
                maxAmount: account.maxAmount ? Number(account.maxAmount) : ''
            });
        } catch (error) {
            console.error('Error fetching account details:', error);
            setError(error.message || 'Failed to fetch account details');
        } finally {
            setIsLoading(false);
        }
    };

    const handleUpdate = async (e) => {
        e.preventDefault();
        setIsLoading(true);
        setError(null);
        
        try {
            const token = localStorage.getItem('token');
            if (!token) {
                throw new Error('No authentication token found');
            }
            
            const updatedFields = Object.entries(formData).reduce((acc, [key, value]) => {
                if (typeof value === 'boolean' || 
                    typeof value === 'number' || 
                    (typeof value === 'string' && value.trim() !== '')) {
                    acc[key] = value;
                }
                return acc;
            }, {});

            await axios.patch(
                `${BASE_URL}/bank/${accountId}`,
                updatedFields,
                {
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${token}`
                    }
                }
            );

            setShowModal(true);
        } catch (error) {
            console.error('Error updating account:', error);
            setError(error.message || 'Failed to update account');
        } finally {
            setIsLoading(false);
        }
    };

    const handleInputChange = (e) => {
        const { name, value, type, checked } = e.target;
        setFormData(prev => ({
            ...prev,
            [name]: type === 'checkbox' ? checked :
                    type === 'number' ? (value === '' ? '' : Number(value)) :
                    value
        }));
    };

    const resetForm = () => {
        if (accountId) {
            fetchAccountDetails();
        } else {
            setFormData({
                bankName: '',
                accountName: '',
                accountNumber: '',
                accountExplanation: '',
                isActive: false,
                isBlocked: false,
                isInvest: false,
                isPull: false,
                minInvest: '',
                maxInvest: '',
                minPull: '',
                maxPull: '',
                maxTransfer: '',
                maxAmount: ''
            });
        }
    };

    const handleCloseModal = () => {
        setShowModal(false);
        setIsFormVisible(false);
        onClose();
    };

    if (!show) {
        return null;
    }

    if (isLoading) {
        return (
            <div className="fixed inset-0 flex items-center justify-center bg-gray-800 bg-opacity-50">
                <div className="bg-white p-4 rounded-md">
                    <p className="text-lg">Loading...</p>
                </div>
            </div>
        );
    }

    return (
        <>
            {isFormVisible && (
                <div className="border border-gray-800 bg-slate-300 bg-opacity-95 absolute bank-form left-0 right-0 top-32 z-50 rounded-sm">
                    {error && (
                        <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative mb-4">
                            <strong className="font-bold">Error! </strong>
                            <span className="block sm:inline">{error}</span>
                            <button 
                                onClick={fetchAccountDetails}
                                className="text-blue-500 underline ml-4"
                            >
                                Retry
                            </button>
                        </div>
                    )}

                    <div className="flex font-bold text-sm p-3 border-l-0 border-r-0 border-t-0 bg-emerald-600 rounded-sm pl-2 items-center justify-center">
                        <h1 className="text-white font-bold text-xl">{title}</h1>
                    </div>

                    <form onSubmit={handleUpdate} className="flex items-center flex-wrap flex-1 justify-center">
                        <div className="flex flex-row flex-wrap flex-1 gap-2 rounded-xl items-center md:items-start p-5 justify-center">
                            {/* Bank Information Card */}
                            <article className="p-6 border bg-gray-400 bg-opacity-90 border-black rounded-md">
                                <div className="flex flex-col gap-4 items-start font-semibold p-5 justify-center">
                                    <h1 className="font-bold mb-4 underline underline-offset-4 text-2xl">Hesap Bilgileri</h1>
                                    
                                    {/* Bank Selection */}
                                    <div className="flex flex-col gap-2 items-start text-xs justify-center">
                                        <label className="font-bold" htmlFor="bankName">Banka</label>
                                        <select 
                                            id="bankName"
                                            name="bankName"
                                            className="px-1 p-1 rounded-md w-72"
                                            value={formData.bankName}
                                            onChange={handleInputChange}
                                        >
                                            <option value="">Seçiniz</option>
                                            <option value="Halkbank">Halkbank</option>
                                            <option value="Ziraat Bankası">Ziraat Bankası</option>
                                            <option value="Garanti Bankası">Garanti Bankası</option>
                                            <option value="Akbank">Akbank</option>
                                            <option value="Yapı Kredi Bankası">Yapı Kredi Bankası</option>
                                            <option value="İng Bank">İng Bank</option>
                                            <option value="Denizbank">Denizbank</option>
                                            <option value="QNB Finansbank">QNB Finansbank</option>
                                            <option value="Türkiye İş Bankası">Türkiye İş Bankası</option>
                                            <option value="VakıfBank">VakıfBank</option>
                                            <option value="Anadolu Bank">Anadolu Bank</option>
                                            <option value="Şekerbank">Şekerbank</option>
                                            <option value="Türkiye Halk Bankası">Türkiye Halk Bankası</option>
                                            <option value="Finansbank">Finansbank</option>
                                            <option value="Ziraat Katılım Bankası">Ziraat Katılım Bankası</option>
                                        </select>
                                    </div>

                                    {/* Account Name */}
                                    <div className="flex flex-col text-xs items-start justify-center gap-2">
                                        <label className="font-bold" htmlFor="accountName">Hesap Sahibi</label>
                                        <input 
                                            type="text"
                                            id="accountName"
                                            name="accountName"
                                            className="w-72 p-2 rounded-md bg-slate-100"
                                            value={formData.accountName}
                                            onChange={handleInputChange}
                                            placeholder="Ad ve Soyad"
                                        />
                                    </div>

                                    {/* Account Number */}
                                    <div className="flex flex-col text-xs items-start justify-center gap-2">
                                        <label className="font-bold" htmlFor="accountNumber">IBAN Numarası</label>
                                        <input 
                                            type="text"
                                            id="accountNumber"
                                            name="accountNumber"
                                            maxLength={24}
                                            className="w-72 p-2 rounded-md bg-slate-100"
                                            value={formData.accountNumber}
                                            onChange={handleInputChange}
                                            placeholder="Başında TR olmadan giriş yapınız"
                                        />
                                    </div>

                                    {/* Account Explanation */}
                                    <div className="flex flex-col text-xs items-start justify-center gap-2">
                                        <label className="font-bold" htmlFor="accountExplanation">Açıklama</label>
                                        <input 
                                            type="text"
                                            id="accountExplanation"
                                            name="accountExplanation"
                                            className="w-72 p-2 rounded-md bg-slate-100"
                                            value={formData.accountExplanation}
                                            onChange={handleInputChange}
                                            placeholder="Açıklama"
                                        />
                                    </div>

                                    {/* Is Active Switch */}
                                    <div className="flex items-center justify-center gap-2">
                                        <span className="text-xs font-extrabold">Hesap Aktif</span>
                                        <label className="switch">
                                            <input 
                                                type="checkbox"
                                                name="isActive"
                                                checked={formData.isActive}
                                                onChange={handleInputChange}
                                            />
                                            <span className="slider round"></span>
                                        </label>
                                    </div>
                                </div>
                            </article>

                            {/* Account Settings Card */}
                            <article className="p-6 border bg-gray-400 bg-opacity-90 border-black rounded-md">
                                <div className="flex flex-col gap-4 items-start font-semibold p-5 justify-center">
                                    <h1 className="font-bold mb-4 underline underline-offset-4 text-2xl">Hesap Ayarları</h1>
                                    
                                    {/* Toggle Switches */}
                                    <div className="flex flex-col gap-4">
                                        {/* Is Blocked */}
                                        <div className="flex items-center gap-4">
                                            <span className="text-xs font-bold">Hesap Bloke mi?</span>
                                            <label className="switch">
                                                <input 
                                                    type="checkbox"
                                                    name="isBlocked"
                                                    checked={formData.isBlocked}
                                                    onChange={handleInputChange}
                                                />
                                                <span className="slider round"></span>
                                            </label>
                                        </div>

                                        {/* Is Investment */}
                                        <div className="flex items-center gap-4">
                                            <span className="text-xs font-bold">Yatırım Aktif mi?</span>
                                            <label className="switch">
                                                <input 
                                                    type="checkbox"
                                                    name="isInvest"
                                                    checked={formData.isInvest}
                                                    onChange={handleInputChange}
                                                />
                                                <span className="slider round"></span>
                                            </label>
                                        </div>

                                        {/* Is Pull */}
                                        <div className="flex items-center gap-4">
                                            <span className="text-xs font-bold">Çekim Aktif mi?</span>
                                            <label className="switch">
                                                <input 
                                                    type="checkbox"
                                                    name="isPull"
                                                    checked={formData.isPull}
                                                    onChange={handleInputChange}
                                                />
                                                <span className="slider round"></span>
                                            </label>
                                        </div>
                                    </div>

                                    {/* Amount Inputs */}
                                    <div className="grid grid-cols-2 gap-4 mt-4">
                                        {/* Max Investment */}
                                        <div className="flex flex-col gap-1">
                                            <label className="text-xs font-bold">Maksimum Yatırım</label>
                                            <input 
                                                type="number"
                                                name="maxInvest"
                                                className="p-1 rounded-md text-xs"
                                                value={formData.maxInvest}
                                                onChange={handleInputChange}
                                                placeholder="100.000₺"
                                            />
                                        </div>

                                        {/* Min Investment */}
                                        <div className="flex flex-col gap-1">
                                            <label className="text-xs font-bold">Minimum Yatırım</label>
                                            <input 
                                                type="number"
                                                name="minInvest"
                                                className="p-1 rounded-md text-xs"
                                                value={formData.minInvest}
                                                onChange={handleInputChange}
                                                placeholder="20₺"
                                            />
                                        </div>

                                        {/* Max Pull */}
                                        <div className="flex flex-col gap-1">
                                            <label className="text-xs font-bold">Maksimum Çekim</label>
                                            <input 
                                                type="number"
                                                name="maxPull"
                                                className="p-1 rounded-md text-xs"
                                                value={formData.maxPull}
                                                onChange={handleInputChange}
                                                placeholder="100.000₺"
                                            />
                                        </div>

                                        {/* Min Pull */}
                                        <div className="flex flex-col gap-1">
                                            <label className="text-xs font-bold">Minimum Çekim</label>
                                            <input 
                                                type="number"
                                                name="minPull"
                                                className="p-1 rounded-md text-xs"
                                                value={formData.minPull}
                                                onChange={handleInputChange}
                                                placeholder="20₺"
                                            />
                                        </div>

                                        {/* Max Transfer */}
                                        <div className="flex flex-col gap-1">
                                            <label className="text-xs font-bold">Aylık İşlem Sayısı</label>
                                            <input 
                                                type="number"
                                                name="maxTransfer"
                                                className="p-1 rounded-md text-xs"
                                                value={formData.maxTransfer}
                                                onChange={handleInputChange}
                                                placeholder="50"
                                            />
                                        </div>

                                        {/* Max Amount */}
                                        <div className="flex flex-col gap-1">
                                            <label className="text-xs font-bold">Maksimum Bakiye</label>
                                            <input 
                                                type="number"
                                                name="maxAmount"
                                                className="p-1 rounded-md text-xs"
                                                value={formData.maxAmount}
                                                onChange={handleInputChange}
                                                placeholder="250.000₺"
                                            />
                                        </div>
                                    </div>

                                    {/* Action Buttons */}
                                    <div className="flex justify-center gap-4 w-full mt-6">
                                        <button 
                                            type="submit" 
                                            disabled={isLoading}
                                            className="bg-emerald-500 text-white text-xs rounded-md px-6 py-2 hover:bg-emerald-600 transition-colors"
                                        >
                                            {isLoading ? 'Güncelleniyor...' : 'Güncelle'}
                                        </button>
                                        <button 
                                            type="button" 
                                            onClick={resetForm}
                                            disabled={isLoading}
                                            className="bg-yellow-500 text-white text-xs rounded-md px-6 py-2 hover:bg-yellow-600 transition-colors"
                                        >
                                            Temizle
                                        </button>
                                        <button 
                                            type="button" 
                                            onClick={onClose}
                                            disabled={isLoading}
                                            className="bg-red-500 text-white text-xs rounded-md px-6 py-2 hover:bg-red-600 transition-colors"
                                        >
                                            Kapat
                                        </button>
                                    </div>

                                    {/* Form Info */}
                                    <div className="flex flex-col text-xs items-center bg-gray-800 bg-opacity-95 font-semibold animate-pulse p-3 mt-4 text-emerald-500 rounded-md w-full">
                                        <p>* Lütfen bilgileri eksiksiz doldurunuz. *</p>
                                        <p>Anlayışınız için teşekkür ederiz.</p>
                                        <p>Dem<span className="text-white">Settle ®</span></p>
                                    </div>
                                </div>
                            </article>
                        </div>
                    </form>
                </div>
            )}

            {/* Success Modal */}
            {showModal && (
                <PopBox 
                    show={showModal} 
                    onClose={handleCloseModal} 
                    title="Banka Hesabı Başarıyla Güncellendi."
                />
            )}
        </>
    );
};

export default BankaUpdateForm;