/**
 * EnterpriseMouldAssessment — Section B: Odour Assessment
 * Appended to EnterpriseMouldAssessment.jsx build sequence.
 */

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

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

    var showSource = val.odourLevel && val.odourLevel !== 'None';

    return (
        <div className="space-y-4">
            <window._EMA_SectionHeader num="B" title="Odour Assessment" subtitle="Assess on first entry to the room before acclimatisation" />

            {/* Odour level pills */}
            <window._EMA_FieldRow label="Mould Odour Level">
                <div className="flex flex-wrap gap-2">
                    {ODOUR_OPTIONS_EMA.map(function (opt) {
                        var isActive = val.odourLevel === opt;
                        return (
                            <button
                                key={opt}
                                type="button"
                                onClick={function () { patch('odourLevel', isActive ? null : opt); }}
                                className={'flex-1 min-w-[56px] py-2.5 rounded-xl text-xs font-bold transition-all btn-nature ' + (isActive ? 'bg-forest text-white shadow-clay' : 'bg-surface border border-stone-100/50 text-forest shadow-soft hover:bg-forest hover:text-white')}
                            >
                                {opt}
                            </button>
                        );
                    })}
                </div>
            </window._EMA_FieldRow>

            {/* Source description — only when odour detected */}
            {showSource && (
                <div className="space-y-2">
                    <window._EMA_FieldRow label="Describe Odour Source">
                        <input
                            type="text"
                            className={window._EMA_INPUT_CLS + ' text-xs'}
                            placeholder="e.g. Behind north wall, under carpet near window..."
                            value={val.odourSource}
                            disabled={val.odourSourceUnknown}
                            onChange={function (e) { patch('odourSource', e.target.value); }}
                        />
                    </window._EMA_FieldRow>

                    {/* Source Unknown toggle */}
                    <button
                        type="button"
                        onClick={function () {
                            var updated = FormatUtils.patchObject(val, 'odourSourceUnknown', !val.odourSourceUnknown);
                            if (!val.odourSourceUnknown) { updated.odourSource = ''; }
                            set(updated);
                        }}
                        className="flex items-center gap-2.5 btn-nature"
                    >
                        <div className={'w-4 h-4 rounded border-2 flex items-center justify-center transition-colors shrink-0 ' + (val.odourSourceUnknown ? 'bg-forest border-forest' : 'border-sage/40 bg-surface')}>
                            {val.odourSourceUnknown && <span className="material-symbols-outlined text-white text-[11px]">check</span>}
                        </div>
                        <span className="text-xs font-semibold text-forest">Source Unknown</span>
                    </button>
                </div>
            )}
        </div>
    );
};

window._EMA_SectionOdour = SectionOdour;