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

export interface SeccionDatosTecnicosElectricoProps {
    formData: FormDataElectrico;
    cupsOptions: unknown[];
    tarifaOptions: Array<{ CodTarEle: string | number; NomTarEle: 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 SeccionDatosTecnicosElectrico: React.FC<SeccionDatosTecnicosElectricoProps> = ({
    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="cups_electrico" className="form-label fw-medium">
                        CUPS Eléctrico
                    </Form.Label>
                    <GrupoTypeaheadBusqueda
                        id="cups_electrico"
                        labelKey="codigoCups"
                        options={cupsOptions}
                        selected={getSelectedTypeaheadValue(
                            cupsOptions,
                            formData.codigoCups,
                            'codigoCups',
                        )}
                        placeholder="Buscar CUPS..."
                        onChange={(selected) => {
                            const cupsSeleccionado = selected.length > 0 ? selected[0] : null;
                            onCupsChange(cupsSeleccionado);
                        }}
                        onBuscar={onBuscarSips}
                        buscarDeshabilitado={!formData.cups_electrico}
                        ariaLabelBuscar="Consultar CUPS en SIPS"
                        isInvalid={showErrors && !!formErrors.cups_electrico}
                        mensajeError={formErrors.cups_electrico}
                    />
                </Col>

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

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

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

            <div className="mt-3">
                <h6 className="text-muted mb-2 fw-semibold d-flex align-items-center small">
                    <Zap size={14} className="me-2" aria-hidden />
                    Potencias
                </h6>
                <RejillaPotencias
                    prefijoId="electrico"
                    potencias={{
                        potencia1: formData.potencia1,
                        potencia2: formData.potencia2,
                        potencia3: formData.potencia3,
                        potencia4: formData.potencia4,
                        potencia5: formData.potencia5,
                        potencia6: formData.potencia6,
                    }}
                />
            </div>
        </SubseccionFormulario>
    );
};