import React, { useState } from 'react';
import { Alert, Col, Form, Row } from 'react-bootstrap';
import BaseEditModal from '../Components/BaseEditModal';
import { Contacto } from '../../../../interfaces';

interface CrearContactoModalProps {
    show: boolean;
    onHide: () => void;
    onCreate: (payload: { NomConCli: string; NIFConCli?: string; CarConCli?: string; EmaConCli?: string; TelFijConCli?: string; TelCelConCli?: string; CodCli: number }) => Promise<void>;
    codCli: number;
}

const CrearContactoModal: React.FC<CrearContactoModalProps> = ({ show, onHide, onCreate, codCli }) => {
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);
    const [form, setForm] = useState<Partial<Contacto>>({
        NomConCli: '',
        NIFConCli: '',
        CarConCli: '',
        EmaConCli: '',
        TelFijConCli: '',
        TelCelConCli: '',
    });

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
        const normalizedValue = ['TelFijConCli', 'TelCelConCli'].includes(e.target.name)
            ? String(e.target.value || '').replace(/\D/g, '').slice(0, 9)
            : e.target.value;
        setForm((prev) => ({ ...prev, [e.target.name]: normalizedValue }));
    };

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setError(null);
        if (!form.NomConCli) {
            setError('El nombre del contacto es obligatorio.');
            return;
        }
        setLoading(true);
        try {
            await onCreate({
                CodCli: codCli,
                NomConCli: form.NomConCli,
                NIFConCli: form.NIFConCli || '',
                CarConCli: form.CarConCli || '',
                EmaConCli: form.EmaConCli || '',
                TelFijConCli: form.TelFijConCli || '',
                TelCelConCli: form.TelCelConCli || '',
            });
            onHide();
            setForm({ NomConCli: '', NIFConCli: '', CarConCli: '', EmaConCli: '', TelFijConCli: '', TelCelConCli: '' });
        } catch (err: any) {
            setError(err?.message || 'No fue posible crear el contacto.');
        } finally {
            setLoading(false);
        }
    };

    return (
        <BaseEditModal show={show} onHide={onHide} title="Asignar contacto" loading={loading} onSubmit={handleSubmit}>
            {error && <Alert variant="danger">{error}</Alert>}
            <Row className="g-3">
                <Col md={12}>
                    <Form.Group>
                        <Form.Label>Nombre</Form.Label>
                        <Form.Control name="NomConCli" value={form.NomConCli || ''} onChange={handleChange} required />
                    </Form.Group>
                </Col>
                <Col md={12}>
                    <Form.Group>
                        <Form.Label>NIF</Form.Label>
                        <Form.Control name="NIFConCli" value={form.NIFConCli || ''} onChange={handleChange} maxLength={20} />
                    </Form.Group>
                </Col>
                <Col md={12}>
                    <Form.Group>
                        <Form.Label>Cargo</Form.Label>
                        <Form.Control name="CarConCli" value={form.CarConCli || ''} onChange={handleChange} />
                    </Form.Group>
                </Col>
                <Col md={12}>
                    <Form.Group>
                        <Form.Label>Email</Form.Label>
                        <Form.Control type="email" name="EmaConCli" value={form.EmaConCli || ''} onChange={handleChange} />
                    </Form.Group>
                </Col>
                <Col md={12}>
                    <Form.Group>
                        <Form.Label>Teléfono fijo</Form.Label>
                        <Form.Control name="TelFijConCli" value={form.TelFijConCli || ''} onChange={handleChange} maxLength={9} />
                    </Form.Group>
                </Col>
                <Col md={12}>
                    <Form.Group>
                        <Form.Label>Teléfono móvil</Form.Label>
                        <Form.Control name="TelCelConCli" value={form.TelCelConCli || ''} onChange={handleChange} maxLength={9} />
                    </Form.Group>
                </Col>
            </Row>
        </BaseEditModal>
    );
};

export default CrearContactoModal;