import React, { useEffect, useState } from 'react';
import { Alert, Form, Row, Col } from 'react-bootstrap';
import { User, Briefcase, CreditCard, Mail, Phone, Smartphone } from 'lucide-react';
import { Contacto } from '../../../../interfaces';
import BaseEditModal from '../Components/BaseEditModal';

interface EditarContactoModalProps {
    show: boolean;
    onHide: () => void;
    contacto: Contacto;
    onUpdated: (updatedContacto: Contacto) => void | Promise<void>;
}

const EditarContactoModal: React.FC<EditarContactoModalProps> = ({ show, onHide, contacto, onUpdated }) => {
    const [form, setForm] = useState<Contacto>(contacto);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState<string | null>(null);

    useEffect(() => {
        setForm(contacto);
    }, [contacto]);

    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({ ...form, [e.target.name]: normalizedValue });
    };

    const handleSubmit = async (e: React.FormEvent) => {
        e.preventDefault();
        setError(null);
        if (!form.CarConCli) {
            setError('El cargo del contacto es obligatorio.');
            return;
        }
        setLoading(true);
        try {
            await onUpdated(form);
            onHide();
        } catch (err: any) {
            console.log(err);
            setError(err?.message || 'Error al actualizar el contacto');
        } finally {
            setLoading(false);
        }
    };

    return (
        <BaseEditModal
            show={show}
            onHide={onHide}
            title="Editar datos de contacto"
            subtitle="Modifica la información y vías de comunicación del contacto"
            icon={<User size={18} />}
            iconVariant="primary"
            submitLabel="Guardar cambios"
            loading={loading}
            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">
                            <User size={13} style={{ color: '#64748b' }} />
                            <span>Nombre completo</span>
                        </Form.Label>
                        <Form.Control
                            className="saas-form-control"
                            type="text"
                            name="NomConCli"
                            placeholder="Ej. Juan Pérez García"
                            value={form.NomConCli}
                            onChange={handleChange}
                            maxLength={50}
                            required
                        />
                    </Form.Group>
                </Col>
                <Col md={6}>
                    <Form.Group className="saas-form-group">
                        <Form.Label className="saas-form-label">
                            <Briefcase size={13} style={{ color: '#64748b' }} />
                            <span>Cargo</span>
                        </Form.Label>
                        <Form.Control
                            className="saas-form-control"
                            type="text"
                            name="CarConCli"
                            placeholder="Ej. Administrador"
                            value={form.CarConCli || ''}
                            onChange={handleChange}
                            maxLength={50}
                            required
                        />
                    </Form.Group>
                </Col>
                <Col md={6}>
                    <Form.Group className="saas-form-group">
                        <Form.Label className="saas-form-label">
                            <CreditCard size={13} style={{ color: '#64748b' }} />
                            <span>NIF / DNI</span>
                        </Form.Label>
                        <Form.Control
                            className="saas-form-control"
                            type="text"
                            name="NIFConCli"
                            placeholder="Ej. 12345678Z"
                            value={form.NIFConCli || ''}
                            onChange={handleChange}
                            maxLength={10}
                        />
                    </Form.Group>
                </Col>
                <Col md={12}>
                    <Form.Group className="saas-form-group">
                        <Form.Label className="saas-form-label">
                            <Mail size={13} style={{ color: '#64748b' }} />
                            <span>Email</span>
                        </Form.Label>
                        <Form.Control
                            className="saas-form-control"
                            type="email"
                            name="EmaConCli"
                            placeholder="nombre@empresa.com"
                            value={form.EmaConCli || ''}
                            onChange={handleChange}
                        />
                    </Form.Group>
                </Col>
                <Col md={6}>
                    <Form.Group className="saas-form-group">
                        <Form.Label className="saas-form-label">
                            <Phone size={13} style={{ color: '#64748b' }} />
                            <span>Teléfono fijo</span>
                        </Form.Label>
                        <Form.Control
                            className="saas-form-control"
                            type="text"
                            name="TelFijConCli"
                            placeholder="9 dígitos"
                            value={form.TelFijConCli || ''}
                            onChange={handleChange}
                            maxLength={9}
                        />
                    </Form.Group>
                </Col>
                <Col md={6}>
                    <Form.Group className="saas-form-group">
                        <Form.Label className="saas-form-label">
                            <Smartphone size={13} style={{ color: '#64748b' }} />
                            <span>Teléfono móvil</span>
                        </Form.Label>
                        <Form.Control
                            className="saas-form-control"
                            type="text"
                            name="TelCelConCli"
                            placeholder="9 dígitos"
                            value={form.TelCelConCli || ''}
                            onChange={handleChange}
                            maxLength={9}
                        />
                    </Form.Group>
                </Col>
            </Row>
        </BaseEditModal>
    );
};

export default EditarContactoModal;