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

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

const BankForm = ({ show, onClose, title }) => {
    const [accounts, setAccounts] = useState([]);
    const [formData, setFormData] = useState({
        bankName: '',
        accountName: '',
        accountNumber: '',
        accountExplanation: '',
        isActive: false,
        isBlocked: false,
        isInvest: false,
        isPull: false,
        minInvest: '',
        maxInvest: '',
        minPull: '',
        maxPull: '',
        maxTransfer: '',
        maxAmount: ''
    });
    const [isLoading, setIsLoading] = useState(false);
    const [showModal, setShowModal] = useState(false);

    useEffect(() => {
        const getAllByBanks = async () => {
            try {
                const response = await axios.get(`${BASE_URL}/bank/accounts`);
                const sortedAccounts = response.data.data.sort((a, b) => 
                    new Date(b.created_at) - new Date(a.created_at)
                );
                setAccounts(sortedAccounts);
            } catch (error) {
                console.error("Error fetching data: " + error);
            }
        };
        getAllByBanks();
    }, []);

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

    const handleSubmit = async (e) => {
        e.preventDefault();
        setIsLoading(true);

        const token = localStorage.getItem('token');
        const currentDate = new Date().toLocaleString("tr-TR", {
            year: 'numeric',
            month: '2-digit',
            day: '2-digit',
            hour: '2-digit',
            minute: '2-digit',
            second: '2-digit',
            hour12: false,
        });

        const newBank = {
            ...formData,
            accountBalance: 0,
            userID: { token },
            created_at: { currentDate }
        };

        try {
            const response = await axios.post(`${BASE_URL}/bank/`, newBank, {
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': `Bearer ${token}`
                }
            });
            setAccounts([...accounts, response.data]);
            setShowModal(true);
            setFormData({
                bankName: '',
                accountName: '',
                accountNumber: '',
                accountExplanation: '',
                isActive: false,
                isBlocked: false,
                isInvest: false,
                isPull: false,
                minInvest: '',
                maxInvest: '',
                minPull: '',
                maxPull: '',
                maxTransfer: '',
                maxAmount: ''
            });
        } catch (error) {
            console.error("Error saving data:", error);
        } finally {
            setIsLoading(false);
        }
    };

    const handleCloseModal = () => {
        setShowModal(false);
        window.location.reload();
    };

    if (!show) return null;

    return (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center p-4" style={{ zIndex: '9999' }}>
            <div className="bg-white rounded-lg w-full max-w-2xl">
                <div className="bg-emerald-600 p-4 rounded-t-lg">
                    <h1 className="text-white font-bold text-xl text-center">{title}</h1>
                </div>

                <form onSubmit={handleSubmit} className="p-6 space-y-6">
                    <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                        {/* Bank Information */}
                        <div className="space-y-4">
                            <div>
                                <label className="block text-sm font-bold mb-2">Bank Name</label>
                                <select
                                    name="bankName"
                                    value={formData.bankName}
                                    onChange={handleChange}
                                    className="w-full p-2 border rounded-md"
                                    required
                                >
                                    <option value="">Select Bank</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>
                                </select>
                            </div>

                            <div>
                                <label className="block text-sm font-bold mb-2">Account Name</label>
                                <input
                                    type="text"
                                    name="accountName"
                                    value={formData.accountName}
                                    onChange={handleChange}
                                    className="w-full p-2 border rounded-md"
                                    placeholder="Full Name"
                                    required
                                />
                            </div>

                            <div>
                                <label className="block text-sm font-bold mb-2">IBAN Number</label>
                                <input
                                    type="text"
                                    name="accountNumber"
                                    value={formData.accountNumber}
                                    onChange={handleChange}
                                    maxLength={24}
                                    className="w-full p-2 border rounded-md"
                                    placeholder="Enter without TR prefix"
                                    required
                                />
                            </div>

                            <div>
                                <label className="block text-sm font-bold mb-2">Description</label>
                                <input
                                    type="text"
                                    name="accountExplanation"
                                    value={formData.accountExplanation}
                                    onChange={handleChange}
                                    className="w-full p-2 border rounded-md"
                                    placeholder="Account description"
                                />
                            </div>

                            <div className="flex gap-4">
                                <label className="flex items-center space-x-2">
                                    <input
                                        type="checkbox"
                                        name="isActive"
                                        checked={formData.isActive}
                                        onChange={handleChange}
                                        className="w-4 h-4"
                                    />
                                    <span className="text-sm font-bold">Active Account</span>
                                </label>

                                <label className="flex items-center space-x-2">
                                    <input
                                        type="checkbox"
                                        name="isBlocked"
                                        checked={formData.isBlocked}
                                        onChange={handleChange}
                                        className="w-4 h-4"
                                    />
                                    <span className="text-sm font-bold">Blocked</span>
                                </label>
                            </div>
                        </div>

                        {/* Account Settings */}
                        <div className="space-y-4">
                            <div className="flex gap-4">
                                <label className="flex items-center space-x-2">
                                    <input
                                        type="checkbox"
                                        name="isInvest"
                                        checked={formData.isInvest}
                                        onChange={handleChange}
                                        className="w-4 h-4"
                                    />
                                    <span className="text-sm font-bold">Investment Active</span>
                                </label>

                                <label className="flex items-center space-x-2">
                                    <input
                                        type="checkbox"
                                        name="isPull"
                                        checked={formData.isPull}
                                        onChange={handleChange}
                                        className="w-4 h-4"
                                    />
                                    <span className="text-sm font-bold">Withdrawal Active</span>
                                </label>
                            </div>

                            <div className="grid grid-cols-2 gap-4">
                                <div>
                                    <label className="block text-sm font-bold mb-2">Max Investment</label>
                                    <input
                                        type="number"
                                        name="maxInvest"
                                        value={formData.maxInvest}
                                        onChange={handleChange}
                                        className="w-full p-2 border rounded-md"
                                        placeholder="100,000₺"
                                    />
                                </div>

                                <div>
                                    <label className="block text-sm font-bold mb-2">Min Investment</label>
                                    <input
                                        type="number"
                                        name="minInvest"
                                        value={formData.minInvest}
                                        onChange={handleChange}
                                        className="w-full p-2 border rounded-md"
                                        placeholder="20₺"
                                    />
                                </div>

                                <div>
                                    <label className="block text-sm font-bold mb-2">Max Withdrawal</label>
                                    <input
                                        type="number"
                                        name="maxPull"
                                        value={formData.maxPull}
                                        onChange={handleChange}
                                        className="w-full p-2 border rounded-md"
                                        placeholder="100,000₺"
                                    />
                                </div>

                                <div>
                                    <label className="block text-sm font-bold mb-2">Min Withdrawal</label>
                                    <input
                                        type="number"
                                        name="minPull"
                                        value={formData.minPull}
                                        onChange={handleChange}
                                        className="w-full p-2 border rounded-md"
                                        placeholder="20₺"
                                    />
                                </div>
                            </div>

                            <div className="grid grid-cols-2 gap-4">
                                <div>
                                    <label className="block text-sm font-bold mb-2">Monthly Transactions</label>
                                    <input
                                        type="number"
                                        name="maxTransfer"
                                        value={formData.maxTransfer}
                                        onChange={handleChange}
                                        className="w-full p-2 border rounded-md"
                                        placeholder="50"
                                    />
                                </div>

                                <div>
                                    <label className="block text-sm font-bold mb-2">Max Balance</label>
                                    <input
                                        type="number"
                                        name="maxAmount"
                                        value={formData.maxAmount}
                                        onChange={handleChange}
                                        className="w-full p-2 border rounded-md"
                                        placeholder="250,000₺"
                                    />
                                </div>
                            </div>
                        </div>
                    </div>

                    <div className="flex justify-end gap-4 pt-4">
                        <button
                            type="submit"
                            disabled={isLoading}
                            className="bg-emerald-500 text-white px-6 py-2 rounded-md hover:bg-emerald-600 disabled:opacity-50"
                        >
                            {isLoading ? 'Adding Account...' : 'Add Account'}
                        </button>

                        <button
                            type="button"
                            onClick={onClose}
                            disabled={isLoading}
                            className="bg-red-500 text-white px-6 py-2 rounded-md hover:bg-red-600 disabled:opacity-50"
                        >
                            Close
                        </button>
                    </div>

                    <div className="text-center text-sm text-gray-600 bg-gray-100 p-4 rounded-md mt-6">
                        <p className="font-semibold">Please fill in all required information</p>
                        <p>Thank you for your cooperation</p>
                        <p>Dem<span className="font-bold">Settle ®</span></p>
                    </div>
                </form>
            </div>

            {showModal && (
                <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
                    <div className="bg-white p-6 rounded-lg">
                        <h2 className="text-xl font-bold mb-4">Bank Account Successfully Added</h2>
                        <button
                            onClick={handleCloseModal}
                            className="bg-emerald-500 text-white px-4 py-2 rounded-md hover:bg-emerald-600"
                        >
                            Close
                        </button>
                    </div>
                </div>
            )}
        </div>
    );
};

export default BankForm;