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

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setError(null);
        if (!form.NumIBan) {
            setError('El IBAN es obligatorio.');
            return;
        }
        setSubmitting(true);
        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();
                setSubmitting(false);
                return;
            }
        } catch (err: any) {
            if (err.response?.data?.errors?.iban) {
                setError('El IBAN proporcionado es inválido.');
                hideLoading();
                setSubmitting(false);
                return;
            }
        }

        try {
            await onUpdated(form);
            onHide();
        } finally {
            setSubmitting(false);
        }
    };

    return (
        <BaseEditModal
            show={show}
            onHide={onHide}
            title="Editar cuenta bancaria"
            subtitle="Modifica el código IBAN o actualiza las observaciones asociadas"
            icon={<CreditCard size={18} />}
            iconVariant="emerald"
            submitLabel="Guardar cambios"
            loading={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"
                            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
                            className="saas-form-control"
                            name="ObserCuenBan"
                            value={form.ObserCuenBan || ''}
                            onChange={(e) => setForm(prev => ({ ...prev, ObserCuenBan: e.target.value }))}
                            as="textarea"
                            rows={3}
                            maxLength={100}
                            placeholder="Notas o descripción para identificar esta cuenta..."
                        />
                    </Form.Group>
                </Col>
            </Row>
        </BaseEditModal>
    );
};

export default EditarCuentaBancariaModal;