import React from 'react';
import { Badge, Card, Col, Form, Row } from 'react-bootstrap';
import { UserCircle } from 'lucide-react';
import { Cliente } from '../../Interfaces/Interfaces';
import FormDateInputEs from '../../../../../Components/Common/FormDateInputEs';
import { TypeaheadClienteConLimpiar } from '../../Shared/TypeaheadClienteConLimpiar';
import { obtenerVarianteEstatus } from '../utils/estatusContrato';
import { CampoInformativo } from './CampoInformativo';
import styles from '../css/UniClienteUniPunto.module.css';

interface ClienteSectionProps {
    fechaPropuesta: string;
    numeroPropuesta: string;
    estatus: string;
    documentoFiscal: string;
    razonSocial: string;
    clientesOptions: Cliente[];
    selectedCliente: Cliente[];
    errors: Record<string, string | undefined>;
    isLoadingClientes?: boolean;
    onClienteChange: (selected: Cliente[]) => void;
    onFechaPropuestaChange: (value: string) => void;
}

export const ClienteSection: React.FC<ClienteSectionProps> = ({
    fechaPropuesta,
    numeroPropuesta,
    estatus,
    documentoFiscal,
    razonSocial,
    clientesOptions,
    selectedCliente,
    errors,
    isLoadingClientes = false,
    onClienteChange,
    onFechaPropuestaChange,
}) => {
    const estatusPresentacion = obtenerVarianteEstatus(estatus);

    const limpiarCliente = () => {
        onClienteChange([]);
    };

    const puedeLimpiarCliente =
        selectedCliente.length > 0
        || Boolean(documentoFiscal?.trim())
        || Boolean(razonSocial?.trim());

    const handleClienteChange = (selected: Cliente[]) => {
        if (selected.length > 0) {
            onClienteChange(selected);
        } else {
            limpiarCliente();
        }
    };

    return (
        <Card className={`mb-4 ${styles.clienteTarjeta}`}>
            <Card.Header className={styles.clienteTarjetaHeader}>
                <h4 className="card-title mb-0 d-flex align-items-center">
                    <UserCircle size={22} className="me-2 text-success" aria-hidden />
                    Datos del Cliente
                </h4>
                <p className="text-muted mb-0">
                    Se debe registrar datos del cliente que estará asociado al contrato.
                </p>
            </Card.Header>
            <Card.Body>
                <Row className="g-3">
                    <Col xs={12} md={3}>
                        <Form.Label htmlFor="documento_fiscal" className="form-label fw-medium">
                            Nº Documento Fiscal
                        </Form.Label>
                        <TypeaheadClienteConLimpiar
                            id="documento_fiscal"
                            labelKey="NumCifCli"
                            selected={selectedCliente}
                            onChange={handleClienteChange}
                            options={clientesOptions}
                            isLoading={isLoadingClientes}
                            placeholder="Buscar por CIF/NIF..."
                            isInvalid={!!errors.documento_fiscal}
                            errorId="documento_fiscal-error"
                            onLimpiar={limpiarCliente}
                            mostrarBotonLimpiar={puedeLimpiarCliente}
                        />
                        <Form.Control.Feedback type="invalid" id="documento_fiscal-error">
                            {errors.documento_fiscal}
                        </Form.Control.Feedback>
                    </Col>

                    <Col xs={12} md={6}>
                        <Form.Label htmlFor="razon_social" className="form-label fw-medium">
                            Razón Social / Nombre
                        </Form.Label>
                        <TypeaheadClienteConLimpiar
                            id="razon_social"
                            labelKey="RazSocCli"
                            selected={selectedCliente}
                            onChange={handleClienteChange}
                            options={clientesOptions}
                            isLoading={isLoadingClientes}
                            placeholder="Buscar por Razón Social..."
                            isInvalid={!!errors.razon_social}
                            errorId="razon_social-error"
                            onLimpiar={limpiarCliente}
                            mostrarBotonLimpiar={puedeLimpiarCliente}
                        />
                        <Form.Control.Feedback type="invalid" id="razon_social-error">
                            {errors.razon_social}
                        </Form.Control.Feedback>
                    </Col>

                    <Col xs={12} md={3}>
                        <Form.Label htmlFor="fecha_propuesta" className="form-label fw-medium">
                            Fecha del Contrato
                        </Form.Label>
                        <FormDateInputEs
                            id="fecha_propuesta"
                            value={fechaPropuesta ?? ''}
                            onChange={onFechaPropuestaChange}
                            bsSize="sm"
                            isInvalid={!!errors.fecha_propuesta}
                        />
                        <Form.Control.Feedback type="invalid" id="fecha_propuesta-error">
                            {errors.fecha_propuesta}
                        </Form.Control.Feedback>
                    </Col>

                    <CampoInformativo
                        id="numero_propuesta"
                        etiqueta="Nº Contrato"
                        valor={numeroPropuesta}
                        valorVacio="Pendiente de asignación"
                        colProps={{ xs: 12, md: 3 }}
                    />

                    <Col xs={12} md={3}>
                        <Form.Label htmlFor="estatus" className="form-label fw-medium">
                            Estatus
                        </Form.Label>
                        <div>
                            <Badge
                                id="estatus"
                                bg={estatusPresentacion.variante}
                                className={`px-3 py-2 fw-normal ${styles.badgeEstatus}`}
                            >
                                {estatusPresentacion.etiqueta}
                            </Badge>
                        </div>
                        {errors.estatus && (
                            <div className="invalid-feedback d-block">{errors.estatus}</div>
                        )}
                    </Col>
                </Row>
            </Card.Body>
        </Card>
    );
};