import React from 'react';
import { Cog } from 'lucide-react';
import { Col, Form, InputGroup, Row } from 'react-bootstrap';
import { FormDataGas } from '../Interfaces/Interfaces';
import { getSelectedTypeaheadValue } from '../utils';
import { CampoInformativo } from './CampoInformativo';
import { GrupoTypeaheadBusqueda } from './GrupoTypeaheadBusqueda';
import { SubseccionFormulario } from './SubseccionFormulario';
import styles from '../css/UniClienteUniPunto.module.css';

export interface SeccionDatosTecnicosGasProps {
    formData: FormDataGas;
    cupsOptions: unknown[];
    tarifaOptions: Array<{ CodTarGas: string | number; NomTarGas: string }>;
    formErrors: Record<string, string>;
    showErrors: boolean;
    onCupsChange: (cupsSeleccionado: unknown | null) => void;
    onTarifaChange: (event: React.ChangeEvent<HTMLSelectElement>) => void;
    onCorpoGoChange: (valor: string) => void;
    onBuscarSips: () => void;
}

export const SeccionDatosTecnicosGas: React.FC<SeccionDatosTecnicosGasProps> = ({
    formData,
    cupsOptions,
    tarifaOptions,
    formErrors,
    showErrors,
    onCupsChange,
    onTarifaChange,
    onCorpoGoChange,
    onBuscarSips,
}) => {
    return (
        <SubseccionFormulario titulo="Datos Técnicos" icono={<Cog size={16} aria-hidden />}>
            <Row className={`g-3 ${styles.filaDatosTecnicos}`}>
                <Col xs={12} lg={5} xl={4}>
                    <Form.Label htmlFor="cupsGas" className="form-label fw-medium">
                        CUPS Gas
                    </Form.Label>
                    <GrupoTypeaheadBusqueda
                        id="cupsGas"
                        labelKey="codigoCups"
                        options={cupsOptions}
                        selected={getSelectedTypeaheadValue(
                            cupsOptions,
                            formData.codigoCups,
                            'codigoCups',
                        )}
                        placeholder="Buscar CUPS Gas..."
                        onChange={(selected) => {
                            const cupsSeleccionado = selected.length > 0 ? selected[0] : null;
                            onCupsChange(cupsSeleccionado);
                        }}
                        onBuscar={onBuscarSips}
                        buscarDeshabilitado={!formData.cupsGas}
                        ariaLabelBuscar="Consultar CUPS Gas en SIPS"
                        isInvalid={showErrors && !!formErrors.cupsGas}
                        mensajeError={formErrors.cupsGas}
                    />
                </Col>

                <Col xs={12} sm={6} lg={3} xl={3}>
                    <Form.Label htmlFor="tarifaGas" className="form-label fw-medium">
                        Tarifa Gas
                    </Form.Label>
                    <InputGroup hasValidation>
                        <Form.Select
                            id="tarifaGas"
                            size="sm"
                            value={formData.tarifaGas || ''}
                            onChange={onTarifaChange}
                            isInvalid={showErrors && !!formErrors.tarifaGas}
                        >
                            <option value="">Seleccione una tarifa</option>
                            {tarifaOptions.map((registro) => (
                                <option key={registro.CodTarGas} value={registro.CodTarGas}>
                                    {registro.NomTarGas}
                                </option>
                            ))}
                        </Form.Select>
                        <Form.Control.Feedback type="invalid">
                            {formErrors.tarifaGas}
                        </Form.Control.Feedback>
                    </InputGroup>
                </Col>

                <CampoInformativo
                    id="consumoGas"
                    etiqueta="Consumo Gas"
                    valor={formData.consumoGas}
                    unidad="kWh"
                    colProps={{ xs: 12, sm: 6, lg: 3, xl: 3 }}
                    esInvalido={showErrors && !!formErrors.consumoGas}
                    mensajeError={formErrors.consumoGas}
                />
            </Row>

            <Row className={`g-3 mt-0 ${styles.filaDatosTecnicos}`}>
                <CampoInformativo
                    id="caudal_diario"
                    etiqueta="Caudal Diario"
                    valor={formData.caudal_diario}
                    unidad="kWh/día"
                    colProps={{ xs: 12, sm: 6, lg: 3, xl: 3 }}
                    esInvalido={showErrors && !!formErrors.caudal_diario}
                    mensajeError={formErrors.caudal_diario}
                />

                <Col xs={12} sm={6} lg={3} xl={3}>
                    <Form.Label htmlFor="corpoGo_gas" className="form-label fw-medium">
                        Costo Operativo
                    </Form.Label>
                    <Form.Control
                        type="text"
                        id="corpoGo_gas"
                        size="sm"
                        value={formData.corpoGo || ''}
                        onChange={(e) => onCorpoGoChange(e.target.value)}
                    />
                </Col>
            </Row>
        </SubseccionFormulario>
    );
};