/**
 * EnterpriseMouldAssessment — Section D: Environmental Readings
 * All fields optional — for organisations with measurement devices.
 */

var EnvField = function (props) {
    var val    = props.value;
    var set    = props.onChange;
    var field  = props.field;
    var label  = props.label;
    var unit   = props.unit;
    var hint   = props.hint;
    var min    = props.min;
    var max    = props.max;
    var step   = props.step || 'any';

    var patch = function (v) {
        set(FormatUtils.patchObject(val, field, v));
    };

    return (
        <div className="flex flex-col gap-1">
            <div className="flex items-center justify-between">
                <label className={window._EMA_LABEL_CLS}>{label}</label>
                <span className="text-[9px] font-bold text-forest">{unit}</span>
            </div>
            <input
                type="number"
                min={min}
                max={max}
                step={step}
                className={window._EMA_INPUT_CLS + ' text-xs'}
                placeholder={hint}
                value={val[field]}
                onChange={function (e) { patch(e.target.value); }}
            />
        </div>
    );
};

var SectionEnvironmental = function (props) {
    var val = props.value;
    var set = props.onChange;

    return (
        <div className="space-y-4">
            <window._EMA_SectionHeader
                num="D"
                title="Environmental Readings"
                subtitle="Record device measurements if available"
                optional={true}
            />

            {/* Info banner */}
            <div className="bg-primary/10 rounded-xl p-3 flex items-start gap-2.5 border border-primary/20">
                <span className="material-symbols-outlined text-forest text-base mt-0.5 shrink-0">info</span>
                <p className="text-[11px] font-medium text-forest leading-relaxed">
                    All environmental fields are optional. Record only what your equipment supports.
                    High CO₂ and humidity are strong proxies for conditions that promote mould growth.
                </p>
            </div>

            {/* Temperature + Humidity */}
            <div className="grid grid-cols-2 gap-3">
                <EnvField value={val} onChange={set} field="envTemp"     label="Temperature"  unit="°C"    hint="e.g. 22.5" min="-20" max="60"  step="0.1" />
                <EnvField value={val} onChange={set} field="envHumidity" label="Humidity"     unit="% RH"  hint="e.g. 68"   min="0"   max="100" step="0.1" />
            </div>

            {/* CO2 */}
            <div className="space-y-1">
                <EnvField value={val} onChange={set} field="envCO2" label="CO₂ Level" unit="ppm" hint="e.g. 1200" min="0" max="10000" />
                <p className="text-[10px] text-muted font-medium px-1">
                    &gt;1000 ppm indicates poor ventilation — a key mould risk factor
                </p>
            </div>

            {/* Natural Light range */}
            <div className="space-y-1.5">
                <label className={window._EMA_LABEL_CLS}>Natural Light Level (lux range)</label>
                <div className="grid grid-cols-2 gap-3">
                    <div className="flex flex-col gap-1">
                        <label className="text-[9px] font-bold text-forest uppercase tracking-wider">Min</label>
                        <input
                            type="number" min="0" max="100000"
                            className={window._EMA_INPUT_CLS + ' text-xs'}
                            placeholder="e.g. 50"
                            value={val.envLightMin}
                            onChange={function (e) { set(FormatUtils.patchObject(val, 'envLightMin', e.target.value)); }}
                        />
                    </div>
                    <div className="flex flex-col gap-1">
                        <label className="text-[9px] font-bold text-forest uppercase tracking-wider">Max</label>
                        <input
                            type="number" min="0" max="100000"
                            className={window._EMA_INPUT_CLS + ' text-xs'}
                            placeholder="e.g. 300"
                            value={val.envLightMax}
                            onChange={function (e) { set(FormatUtils.patchObject(val, 'envLightMax', e.target.value)); }}
                        />
                    </div>
                </div>
                <p className="text-[10px] text-muted font-medium px-1">Low light (&lt;100 lux) correlates with reduced air circulation and higher mould risk</p>
            </div>

            {/* Formaldehyde */}
            <div className="space-y-1">
                <EnvField value={val} onChange={set} field="envFormaldehyde" label="Formaldehyde" unit="μg/m³" hint="e.g. 45" min="0" max="5000" step="0.1" />
                <p className="text-[10px] text-muted font-medium px-1">
                    Elevated levels can indicate off-gassing from mould-affected composite materials (MDF, plywood)
                </p>
            </div>

            {/* VOCs */}
            <div className="space-y-1">
                <EnvField value={val} onChange={set} field="envVOCs" label="VOCs (Total)" unit="ppb" hint="e.g. 250" min="0" max="50000" />
                <p className="text-[10px] text-muted font-medium px-1">
                    Microbial VOCs (MVOCs) are a chemical marker for active mould metabolism
                </p>
            </div>
        </div>
    );
};

window._EMA_SectionEnvironmental = SectionEnvironmental;