import React from 'react';
import { Alert, Col, Row } from 'react-bootstrap';
import unipuntoStyles from '../../../Contratos/UniClienteUniPunto/css/UniClienteUniPunto.module.css';
import { SUMINISTRO_ELECTRICO_SECTIONS } from '../../config/suministroElectricoFields';
import { EMPTY_DISPLAY, mapSuministroToViewModel } from '../../utils/suministroMappers';
import SipsCampoInformativo from './SipsCampoInformativo';
import SipsSubseccionDetalle from './SipsSubseccionDetalle';
import styles from '../../Sips.module.css';

interface Props {
    suministros: Record<string, unknown>[];
}

const SipsSuministroDetalle: React.FC<Props> = ({ suministros }) => {
    if (!suministros.length) {
        return (
            <Alert variant="info" className="mb-0" role="status">
                No hay datos de suministro para este CUPS.
            </Alert>
        );
    }

    const primary = suministros[0];
    const sections = mapSuministroToViewModel(primary);

    return (
        <div
            className={`${styles.seccionSuministro} ${unipuntoStyles.formularioUnipunto}`}
            role="region"
            aria-label="Detalle del punto de suministro"
        >
            {suministros.length > 1 && (
                <Alert variant="warning" className="mb-3" role="status">
                    Se muestra el suministro principal. Existen {suministros.length - 1} registro(s)
                    adicional(es).
                </Alert>
            )}

            {sections.map((section) => {
                const sectionDef = SUMINISTRO_ELECTRICO_SECTIONS.find((item) => item.id === section.id);
                const Icon = sectionDef?.icon;

                return (
                    <SipsSubseccionDetalle
                        key={section.id}
                        sectionId={`sips-seccion-${section.id}`}
                        titulo={section.title}
                        icono={Icon ? <Icon size={16} aria-hidden /> : undefined}
                        className={styles.bloqueSuministro}
                    >
                        <Row className="g-3">
                            {section.fields.map((field) => (
                                <Col
                                    key={field.id}
                                    xs={12}
                                    md={field.highlight ? 12 : 6}
                                    lg={field.highlight ? 12 : 4}
                                    className={field.highlight ? styles.campoDestacado : undefined}
                                >
                                    <SipsCampoInformativo
                                        id={field.id}
                                        etiqueta={field.label}
                                        valor={field.displayValue === EMPTY_DISPLAY ? '' : field.displayValue}
                                        valorVacio={EMPTY_DISPLAY}
                                    />
                                </Col>
                            ))}
                        </Row>
                    </SipsSubseccionDetalle>
                );
            })}
        </div>
    );
};

export default SipsSuministroDetalle;