var ODOUR_OPTIONS_SOF  = AppConstants.ODOUR_OPTIONS;
var TEXTURE_OPTIONS_SOF = AppConstants.TEXTURE_OPTIONS;

/**
 * ScanObservationForm — Standard observation fields for scan editing.
 *
 * Used by: LocationDetails (standard flow), ScansPage (inline edit).
 * When MANAGE_MOULD is enabled, LocationDetails replaces this with
 * EnterpriseMouldAssessment instead.
 *
 * Props:
 *   odour           (string|null) — Current odour level
 *   onOdourChange   (func)        — Called with new odour value (or null to clear)
 *   odourSource     (string)      — Odour source description
 *   onOdourSource   (func)        — Called with new odour source string
 *   textures        (string[])    — Currently selected textures
 *   onTextureToggle (func)        — Called with texture string to toggle
 *   severityRating  (number)      — Current severity rating (0-5)
 *   onSeverityChange(func)        — Called with new rating value
 *   notes           (string)      — Current notes text
 *   onNotesChange   (func)        — Called with new notes string
 *   compact         (bool)        — Use compact layout (default: false)
 */
var ScanObservationForm = function (props) {
    var odour          = props.odour;
    var onOdourChange  = props.onOdourChange;
    var odourSource    = props.odourSource || '';
    var onOdourSource  = props.onOdourSource || function () {};
    var textures       = props.textures || [];
    var onTextureToggle = props.onTextureToggle;
    var severityRating = props.severityRating || 0;
    var onSeverityChange = props.onSeverityChange;
    var notes          = props.notes || '';
    var onNotesChange  = props.onNotesChange;
    var compact        = props.compact || false;

    var inputClass = 'bg-surface border-none rounded-xl text-sm p-3 shadow-soft ring-1 ring-sage/20 focus:ring-2 focus:ring-primary font-semibold text-forest placeholder:text-forest/60 placeholder:font-medium w-full';

    var showOdourSource = odour && odour !== 'None';

    return (
        <div className="space-y-4">
            {/* Odour Level */}
            <div className="space-y-1.5">
                <label className="text-[10px] font-black text-forest uppercase tracking-[0.15em]">Odour Level</label>
                <div className="flex flex-wrap gap-2">
                    {ODOUR_OPTIONS_SOF.map(function (opt) {
                        var isActive = odour === opt;
                        return (
                            <button
                                key={opt}
                                onClick={function () { onOdourChange(isActive ? null : opt); }}
                                className={'flex-1 min-w-[60px] 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>
                {showOdourSource && (
                    <input
                        type="text"
                        className={inputClass + ' mt-2 text-xs'}
                        placeholder="Describe odour source (optional)..."
                        value={odourSource}
                        onChange={function (e) { onOdourSource(e.target.value); }}
                    />
                )}
            </div>

            {/* Surface Texture */}
            <div className="space-y-1.5">
                <label className="text-[10px] font-black text-forest uppercase tracking-[0.15em]">Surface Texture</label>
                <div className="flex flex-wrap gap-2">
                    {TEXTURE_OPTIONS_SOF.map(function (tex) {
                        var isActive = textures.indexOf(tex) >= 0;
                        return (
                            <button
                                key={tex}
                                onClick={function () { onTextureToggle(tex); }}
                                className={'px-3.5 py-2 rounded-full 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')}
                            >
                                {tex}
                            </button>
                        );
                    })}
                </div>
            </div>

            {/* Severity Rating */}
            <SeverityRating value={severityRating} onChange={onSeverityChange} compact={compact} label="Your Severity Rating" />

            {/* Notes */}
            <div className="space-y-1.5">
                <label className="text-[10px] font-black text-forest uppercase tracking-[0.15em]">Additional Notes</label>
                <textarea
                    className={inputClass + ' text-xs'}
                    rows={compact ? 3 : 5}
                    placeholder="Describe the leak source, recent water damage, or anything relevant..."
                    value={notes}
                    onChange={function (e) { onNotesChange(e.target.value); }}
                />
            </div>
        </div>
    );
};

window.ScanObservationForm = ScanObservationForm;