import React, { useState } from 'react';
import { Alert, Col, Form, Row } from 'react-bootstrap';
import { CreditCard, FileText } from 'lucide-react';
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 [submitting, setSubmitting] = useState(false);
    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.toUpperCase() }));
    };

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setError(null);
        if (!form.NumIBan) {
            setError('El IBAN es obligatorio.');
            return;
        }
        setSubmitting(true);
        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();
                    setSubmitting(false);
                    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();
                    setSubmitting(false);
                    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();
        } finally {
            setSubmitting(false);
        }
    };

    return (
        <BaseEditModal
            show={show}
            onHide={onHide}
            title="Nueva cuenta bancaria"
            subtitle="Introduce el código IBAN con validación bancaria y observaciones"
            icon={<CreditCard size={18} />}
            iconVariant="emerald"
            submitLabel="Guardar cuenta"
            loading={submitting}
            onSubmit={handleSubmit}
        >
            {error && <Alert variant="danger" className="py-2 mb-3">{error}</Alert>}
            <Row className="g-3">
                <Col md={12}>
                    <Form.Group className="saas-form-group">
                        <Form.Label className="saas-form-label">
                            <CreditCard size={13} style={{ color: '#059669' }} />
                            <span>Código IBAN</span>
                        </Form.Label>
                        <Form.Control
                            className="saas-form-control"
                            style={{ fontFamily: 'monospace', letterSpacing: '0.05em', fontWeight: 600 }}
                            name="NumIBan"
                            placeholder="ES00 0000 0000 0000 0000 0000"
                            value={form.NumIBan}
                            onChange={handleChange}
                            required
                            maxLength={24}
                        />
                        <Form.Text className="text-muted" style={{ fontSize: '0.75rem' }}>
                            Formato internacional de cuenta bancaria estándar (24 caracteres).
                        </Form.Text>
                    </Form.Group>
                </Col>

                <Col md={12}>
                    <Form.Group className="saas-form-group">
                        <Form.Label className="saas-form-label">
                            <FileText size={13} style={{ color: '#64748b' }} />
                            <span>Observaciones (Opcional)</span>
                        </Form.Label>
                        <Form.Control
                            as="textarea"
                            rows={3}
                            maxLength={100}
                            className="saas-form-control"
                            name="ObserCuenBan"
                            placeholder="Notas o descripción para identificar esta cuenta..."
                            value={form.ObserCuenBan}
                            onChange={(e) => setForm(prev => ({ ...prev, ObserCuenBan: e.target.value }))}
                        />
                    </Form.Group>
                </Col>
            </Row>
        </BaseEditModal>
    );
};

export default CrearCuentaBancariaModal;