/**
 * EnterpriseMouldAssessment — Section E: Remediation Planning
 *                             Section F: Technician Sign-off + General Notes
 */

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

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

    var riskColour = {
        'Low':      'bg-primary/15 text-primary border-primary/20',
        'Medium':   'bg-[#FFF8E1] text-[#d4a373] border-[#d4a373]/20',
        'High':     'bg-warning-light text-warning border-warning/20',
        'Critical': 'bg-warning-light text-warning border-warning/20',
    };

    return (
        <div className="space-y-4">
            <window._EMA_SectionHeader num="E" title="Remediation Planning" />

            {/* Overall Risk Classification */}
            <window._EMA_FieldRow label="Overall Risk Classification">
                <div className="flex gap-2">
                    {RISK_LEVELS_EMA.map(function (level) {
                        var isActive = val.overallRisk === level;
                        var activeClass = isActive ? (riskColour[level] || 'bg-forest text-white') + ' shadow-clay border' : 'bg-surface border border-stone-100/50 text-forest shadow-soft hover:bg-forest hover:text-white';
                        return (
                            <button
                                key={level}
                                type="button"
                                onClick={function () { patch('overallRisk', isActive ? '' : level); }}
                                className={'flex-1 py-2.5 rounded-2xl text-sm font-bold transition-all btn-nature ' + activeClass}
                            >
                                {level}
                            </button>
                        );
                    })}
                </div>
            </window._EMA_FieldRow>

            {/* Remediation Method */}
            <window._EMA_FieldRow label="Recommended Remediation Method">
                <select
                    className={window._EMA_SELECT_CLS}
                    value={val.remediationMethod}
                    onChange={function (e) { patch('remediationMethod', e.target.value); }}
                >
                    <option value="">Select method...</option>
                    {REMED_METHODS_EMA.map(function (m) {
                        return <option key={m} value={m}>{m}</option>;
                    })}
                </select>
            </window._EMA_FieldRow>

            {/* Containment */}
            <window._EMA_FieldRow label="Containment Required">
                <select
                    className={window._EMA_SELECT_CLS}
                    value={val.containmentType}
                    onChange={function (e) { patch('containmentType', e.target.value); }}
                >
                    <option value="">Select containment...</option>
                    {CONTAIN_EMA.map(function (c) {
                        return <option key={c} value={c}>{c}</option>;
                    })}
                </select>
            </window._EMA_FieldRow>

            {/* PPE Level */}
            <window._EMA_FieldRow label="PPE Level Required">
                <select
                    className={window._EMA_SELECT_CLS}
                    value={val.ppeLevel}
                    onChange={function (e) { patch('ppeLevel', e.target.value); }}
                >
                    <option value="">Select PPE level...</option>
                    {PPE_LEVELS_EMA.map(function (p) {
                        return <option key={p} value={p}>{p}</option>;
                    })}
                </select>
            </window._EMA_FieldRow>
        </div>
    );
};

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

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

    return (
        <div className="space-y-4">
            <window._EMA_SectionHeader num="F" title="Technician Sign-off" />

            <div className="grid grid-cols-2 gap-3">
                <window._EMA_FieldRow label="Technician Name">
                    <input
                        type="text"
                        className={window._EMA_INPUT_CLS}
                        placeholder="Full name"
                        value={val.technicianName}
                        onChange={function (e) { patch('technicianName', e.target.value); }}
                    />
                </window._EMA_FieldRow>
                <window._EMA_FieldRow label="Cert / Licence No.">
                    <input
                        type="text"
                        className={window._EMA_INPUT_CLS}
                        placeholder="e.g. IICRC-12345"
                        value={val.technicianCertNo}
                        onChange={function (e) { patch('technicianCertNo', e.target.value); }}
                    />
                </window._EMA_FieldRow>
            </div>

            {/* General Notes */}
            <window._EMA_FieldRow label="General Notes">
                <textarea
                    className={window._EMA_INPUT_CLS + ' text-xs'}
                    rows={4}
                    placeholder="Overall assessment summary, additional observations, follow-up actions required..."
                    value={val.generalNotes}
                    onChange={function (e) { patch('generalNotes', e.target.value); }}
                />
            </window._EMA_FieldRow>
        </div>
    );
};

window._EMA_SectionRemediation = SectionRemediation;
window._EMA_SectionSignOff     = SectionSignOff;