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

interface CrearCuentaBancariaModalProps {
    show: boolean;
    onHide: () => void;
    codCli: number;
    onCreate: (payload: { CodCli: number; NumIBan: string; CodBan: string; ObserCuenBan?: string }) => Promise<void>;
}

const CrearCuentaBancariaModal: React.FC<CrearCuentaBancariaModalProps> = ({ show, onHide, codCli, onCreate }) => {
    const { showLoading, hideLoading } = useLoading();
    const [error, setError] = useState<string | null>(null);
    const [form, setForm] = useState({
        NumIBan: '',
        CodBan: '',
        ObserCuenBan: '',
    });
    React.useEffect(() => {
        if (!show) return;
    }, [show]);

    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
        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 {
            // IBAN Validation Step
            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 the validation route fails completely (e.g. 500 or 422 for format)
                if (err.response?.data?.errors?.iban) {
                    setError('El IBAN proporcionado es inválido.');
                    hideLoading();
                    return;
                }
            }

            await onCreate({
                CodCli: codCli,
                NumIBan: form.NumIBan,
                CodBan: form.CodBan,
                ObserCuenBan: form.ObserCuenBan || '',
            });
            onHide();
            setForm({ NumIBan: '', CodBan: '', ObserCuenBan: '' });
        } catch (err: any) {
            setError(err?.message || 'No fue posible crear la cuenta bancaria.');
            hideLoading();
        }
    };

    return (
        <BaseEditModal show={show} onHide={onHide} title="Crear cuenta bancaria" loading={false} onSubmit={handleSubmit}>
            {error && <Alert variant="danger">{error}</Alert>}
            <Row className="g-3">
                <Col md={12}>
                    <Form.Group>
                        <Form.Label>IBAN</Form.Label>
                        <Form.Control name="NumIBan" value={form.NumIBan} onChange={handleChange} required maxLength={24} />
                    </Form.Group>
                </Col>

                <Col md={12}>
                    <Form.Group>
                        <Form.Label>Observaciones</Form.Label>
                        <Form.Control as="textarea" rows={2} name="ObserCuenBan" value={form.ObserCuenBan} onChange={handleChange} />
                    </Form.Group>
                </Col>
            </Row>
        </BaseEditModal>
    );
};

export default CrearCuentaBancariaModal;