import React from 'react';
import { Card, Col, Form, Row } from 'react-bootstrap';
import 'react-bootstrap-typeahead/css/Typeahead.css';
import { Cliente } from '../../Interfaces/Interfaces';
import { ContratoFormData } from '../../../../../interfaces';
import FormDateInputEs from '../../../../../Components/Common/FormDateInputEs';
import { TypeaheadClienteConLimpiar } from '../../Shared/TypeaheadClienteConLimpiar';

interface ClientDataSectionProps {
    data: ContratoFormData;
    setData: (key: keyof ContratoFormData, value: any) => void;
    selectedCliente: Cliente[];
    setSelectedCliente: (cliente: Cliente[]) => void;
    clientesOptions: Cliente[];
    isLoading: boolean;
    errors: any;
    erroresCliente?: Record<string, string>;
    mostrarErroresCliente?: boolean;
    onLimpiarErrorCliente?: (campo: string) => void;
    onClearAll?: () => void;
}

const ClientDataSection: React.FC<ClientDataSectionProps> = ({
    data,
    setData,
    selectedCliente,
    setSelectedCliente,
    clientesOptions,
    isLoading,
    errors,
    erroresCliente = {},
    mostrarErroresCliente = false,
    onLimpiarErrorCliente,
    onClearAll,
}) => {
    const erroresVisibles = {
        ...errors,
        ...(mostrarErroresCliente ? erroresCliente : {}),
    };

    const limpiarCliente = () => {
        setData('documento_fiscal', '');
        setData('razon_social', '');
        setSelectedCliente([]);
        onLimpiarErrorCliente?.('documento_fiscal');
        onLimpiarErrorCliente?.('razon_social');
    };

    const puedeLimpiarCliente =
        selectedCliente.length > 0
        || Boolean(data.documento_fiscal?.trim())
        || Boolean(data.razon_social?.trim());

    const handleClienteDocumentoChange = (selected: Cliente[]) => {
        const cliente = selected.length > 0 ? selected[0] : null;
        if (cliente) {
            setData('documento_fiscal', cliente.NumCifCli);
            setData('razon_social', cliente.RazSocCli);
            setSelectedCliente([cliente]);
            onLimpiarErrorCliente?.('documento_fiscal');
            onLimpiarErrorCliente?.('razon_social');
        } else {
            limpiarCliente();
        }
    };

    const handleClienteRazonSocialChange = (selected: Cliente[]) => {
        if (selected.length > 0) {
            const cliente = selected[0];
            setData('documento_fiscal', cliente.NumCifCli);
            setData('razon_social', cliente.RazSocCli);
            setSelectedCliente(selected);
            onLimpiarErrorCliente?.('documento_fiscal');
            onLimpiarErrorCliente?.('razon_social');
        } else {
            limpiarCliente();
        }
    };

    return (
        <Card>
            <Card.Header className="bg-light">
                <div className="d-flex justify-content-between align-items-center">
                    <div>
                        <h4 className="card-title mb-0">Datos del Cliente</h4>
                        <p className="text-muted mb-0">
                            Se debe registrar datos del cliente que estará asociado al contrato.
                        </p>
                    </div>
                    {onClearAll && (
                        <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>
                    )}
                </div>
            </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
                            id="documento_fiscal"
                            labelKey="NumCifCli"
                            selected={selectedCliente}
                            onChange={handleClienteDocumentoChange}
                            options={clientesOptions}
                            placeholder="Buscar por CIF/NIF..."
                            isLoading={isLoading}
                            isInvalid={!!erroresVisibles.documento_fiscal}
                            errorId="documento_fiscal-error"
                            onLimpiar={limpiarCliente}
                            mostrarBotonLimpiar={puedeLimpiarCliente}
                        />
                        <Form.Control.Feedback type="invalid" id="documento_fiscal-error">
                            {erroresVisibles.documento_fiscal}
                        </Form.Control.Feedback>
                    </Col>

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

                    <Col md={2}>
                        <Form.Label htmlFor="fecha_propuesta" className="form-label">
                            Fecha del Contrato
                        </Form.Label>
                        <FormDateInputEs
                            id="fecha_propuesta"
                            value={data.fecha_propuesta ?? ''}
                            onChange={(iso) => {
                                setData('fecha_propuesta', iso);
                                onLimpiarErrorCliente?.('fecha_propuesta');
                            }}
                            bsSize="sm"
                            isInvalid={!!erroresVisibles.fecha_propuesta}
                        />
                        <Form.Control.Feedback type="invalid" id="fecha_propuesta-error">
                            {erroresVisibles.fecha_propuesta}
                        </Form.Control.Feedback>
                    </Col>

                    <Col md={3}>
                        <Form.Label htmlFor="numero_propuesta" className="form-label">
                            Nº Contrato
                        </Form.Label>
                        <Form.Control
                            disabled
                            type="text"
                            className="form-control form-control-sm"
                            id="numero_propuesta"
                            placeholder="Ej. PROP-2024-001"
                            value={data.numero_propuesta}
                            onChange={(e) => setData('numero_propuesta', e.target.value)}
                            isInvalid={!!erroresVisibles.numero_propuesta}
                        />
                        <Form.Control.Feedback type="invalid">
                            {erroresVisibles.numero_propuesta}
                        </Form.Control.Feedback>
                    </Col>

                    <Col md={3}>
                        <Form.Label htmlFor="estatus" className="form-label">
                            Estatus
                        </Form.Label>
                        <Form.Control
                            disabled
                            type="text"
                            className="form-control form-control-sm"
                            id="estatus"
                            placeholder="Ej. En proceso, Aprobada..."
                            value={data.estatus}
                            onChange={(e) => setData('estatus', e.target.value)}
                            isInvalid={!!erroresVisibles.estatus}
                        />
                        <Form.Control.Feedback type="invalid">
                            {erroresVisibles.estatus}
                        </Form.Control.Feedback>
                    </Col>
                </Row>
            </Card.Body>
        </Card>
    );
};

export default ClientDataSection;