import React from 'react';
import { Row, Col, Card, Form } from 'react-bootstrap';
import { Contacto } from '../../Interfaces/Interfaces';
import FormDateInputEs from '../../../../../Components/Common/FormDateInputEs';
import { TypeaheadClienteConLimpiar } from '../../Shared/TypeaheadClienteConLimpiar';

interface RepresentanteLegalSectionProps {
    contactosOptions: Contacto[];
    selectedContacto: Contacto[];
    isLoading: boolean;
    documentoFiscal: string;
    razonSocial: string;
    fechaPropuesta: string;
    errors: {
        documento_fiscal?: string;
        razon_social?: string;
        fecha_propuesta?: string;
    };
    erroresRepresentante?: Record<string, string>;
    mostrarErroresRepresentante?: boolean;
    onLimpiarErrorRepresentante?: (campo: string) => void;
    onContactoDocumentoChange: (selected: Contacto[]) => void;
    onContactoNombreChange: (selected: Contacto[]) => void;
    onFechaPropuestaChange: (value: string) => void;
    onLimpiarRepresentante: () => void;
    onClearAll: () => void;
}

export const RepresentanteLegalSection: React.FC<RepresentanteLegalSectionProps> = ({
    contactosOptions,
    selectedContacto,
    isLoading,
    documentoFiscal,
    razonSocial,
    fechaPropuesta,
    errors,
    erroresRepresentante = {},
    mostrarErroresRepresentante = false,
    onLimpiarErrorRepresentante,
    onContactoDocumentoChange,
    onContactoNombreChange,
    onFechaPropuestaChange,
    onLimpiarRepresentante,
    onClearAll,
}) => {
    const erroresVisibles = {
        ...errors,
        ...(mostrarErroresRepresentante ? erroresRepresentante : {}),
    };

    const puedeLimpiarRepresentante =
        selectedContacto.length > 0
        || Boolean(documentoFiscal?.trim())
        || Boolean(razonSocial?.trim());

    const errorDocumento = erroresVisibles.documento_fiscal;
    const errorRazon = erroresVisibles.razon_social;
    const errorFecha = erroresVisibles.fecha_propuesta;

    return (
        <Row className="mb-4">
            <Col>
                <Card>
                    <Card.Header className="bg-light d-flex justify-content-between align-items-center">
                        <div>
                            <h4 className="card-title mb-0">Datos del Representante Legal</h4>
                            <p className="text-muted mb-0">
                                Se debe registrar datos del representante legal que estará asociado al contrato.
                            </p>
                        </div>
                        <button
                            className="btn btn-outline-danger btn-sm"
                            onClick={onClearAll}
                            type="button"
                        >
                            <i className="ri-delete-bin-line align-bottom me-1"></i>
                            Limpiar Todo
                        </button>
                    </Card.Header>
                    <Card.Body>
                        <Row className="g-3">
                            <Col md={2}>
                                <Form.Label htmlFor="documento_fiscal" className="form-label">
                                    Nº Documento Fiscal
                                </Form.Label>
                                <TypeaheadClienteConLimpiar<Contacto>
                                    id="documento_fiscal"
                                    labelKey="NIFConCli"
                                    placeholder="Buscar por CIF/NIF..."
                                    selected={selectedContacto}
                                    options={contactosOptions}
                                    isLoading={isLoading}
                                    isInvalid={!!errorDocumento}
                                    errorId="documento_fiscal-error"
                                    onChange={onContactoDocumentoChange}
                                    onLimpiar={onLimpiarRepresentante}
                                    mostrarBotonLimpiar={puedeLimpiarRepresentante}
                                    ariaLabelLimpiar="Limpiar representante legal"
                                />
                                {errorDocumento && (
                                    <Form.Control.Feedback type="invalid" className="d-block" id="documento_fiscal-error">
                                        {errorDocumento}
                                    </Form.Control.Feedback>
                                )}
                            </Col>

                            <Col md={8}>
                                <Form.Label htmlFor="razon_social" className="form-label">
                                    Razón Social / Nombre
                                </Form.Label>
                                <TypeaheadClienteConLimpiar<Contacto>
                                    id="razon_social"
                                    labelKey="NomConCli"
                                    placeholder="Buscar por Razón Social..."
                                    selected={selectedContacto}
                                    options={contactosOptions}
                                    isLoading={isLoading}
                                    isInvalid={!!errorRazon}
                                    errorId="razon_social-error"
                                    onChange={onContactoNombreChange}
                                    onLimpiar={onLimpiarRepresentante}
                                    mostrarBotonLimpiar={puedeLimpiarRepresentante}
                                    ariaLabelLimpiar="Limpiar representante legal"
                                />
                                {errorRazon && (
                                    <Form.Control.Feedback type="invalid" className="d-block" id="razon_social-error">
                                        {errorRazon}
                                    </Form.Control.Feedback>
                                )}
                            </Col>

                            <Col md={2}>
                                <Form.Label htmlFor="fecha_propuesta" className="form-label">
                                    Fecha del contrato
                                </Form.Label>
                                <FormDateInputEs
                                    id="fecha_propuesta"
                                    bsSize="sm"
                                    value={fechaPropuesta ?? ''}
                                    onChange={(value) => {
                                        onFechaPropuestaChange(value);
                                        onLimpiarErrorRepresentante?.('fecha_propuesta');
                                    }}
                                    isInvalid={!!errorFecha}
                                />
                                <Form.Control.Feedback type="invalid">
                                    {errorFecha}
                                </Form.Control.Feedback>
                            </Col>
                        </Row>
                    </Card.Body>
                </Card>
            </Col>
        </Row>
    );
};