import React, { useEffect, useState } from 'react';
import { Alert, Form } from 'react-bootstrap';
import axios from 'axios';
import { CuentaBancaria } from '../../../../interfaces';
import BaseEditModal from '../Components/BaseEditModal';
import { useLoading } from "../../../../LoadingContext";

interface EditarCuentaBancariaModalProps {
    show: boolean;
    onHide: () => void;
    cuenta: CuentaBancaria;
    loading?: boolean;
    onUpdated: (cuenta: CuentaBancaria) => void | Promise<void>;
}

const EditarCuentaBancariaModal: React.FC<EditarCuentaBancariaModalProps> = ({ show, onHide, cuenta, loading = false, onUpdated }) => {
    const [form, setForm] = useState<CuentaBancaria>(cuenta);
    const [error, setError] = useState<string | null>(null);
    const { showLoading, hideLoading } = useLoading();
    useEffect(() => {
        setForm(cuenta);
    }, [cuenta]);

    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | any>) => {
        setForm((prev) => ({ ...prev, [e.target.name]: e.target.value }));
    };

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setError(null);
        if (!form.NumIBan) {
            setError('El IBAN es obligatorio.');
            return;
        }
        showLoading();
        try {
            const { data } = await axios.post(route('api.data.iban.validate'), { iban: form.NumIBan });
            if (!data.valid && data.errors && data.errors.length > 0) {
                setError('Errores en IBAN: ' + data.errors.join(' | '));
                hideLoading();
                return;
            }
        } catch (err: any) {
            if (err.response?.data?.errors?.iban) {
                setError('El IBAN proporcionado es inválido.');
                hideLoading();
                return;
            }
        }

        // hideLoading not strictly necessary before onUpdated() because onUpdated() explicitly calls showLoading() inside ClientDetailPanel, 
        // preventing a flicker. but we should still match count logic if the context has one. We'll leave the handoff to onUpdated.
        await onUpdated(form);
        onHide();
    };

    return (
        <BaseEditModal show={show} onHide={onHide} title="Editar cuenta bancaria" loading={loading} onSubmit={handleSubmit}>
            {error && <Alert variant="danger">{error}</Alert>}
            <Form.Group className="mb-3">
                <Form.Label>IBAN</Form.Label>
                <Form.Control name="NumIBan" value={form.NumIBan || ''} onChange={handleChange} required maxLength={24} />
            </Form.Group>

            <Form.Group className="mb-3">
                <Form.Label>Observaciones</Form.Label>
                <Form.Control name="ObserCuenBan" value={form.ObserCuenBan || ''} onChange={handleChange} as="textarea" rows={2} />
            </Form.Group>
        </BaseEditModal>
    );
};

export default EditarCuentaBancariaModal;