import React, { useState } from 'react';
import { Alert, Col, Form, Row } from 'react-bootstrap';
import { UserPlus, User, Briefcase, CreditCard, Mail, Phone, Smartphone } from 'lucide-react';
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;
        }
        if (!form.CarConCli) {
            setError('El cargo 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"
            subtitle="Añade un representante o contacto autorizado para este cliente"
            icon={<UserPlus size={18} />}
            iconVariant="primary"
            submitLabel="Guardar contacto"
            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"
                            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"
                            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"
                            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"
                            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"
                            name="TelCelConCli"
                            placeholder="9 dígitos"
                            value={form.TelCelConCli || ''}
                            onChange={handleChange}
                            maxLength={9}
                        />
                    </Form.Group>
                </Col>
            </Row>
        </BaseEditModal>
    );
};

export default CrearContactoModal;