/**
 * SeverityRating — Reusable tap-to-rate bar component.
 *
 * Props:
 *   value     (number)  — Current rating (0 = unset)
 *   onChange  (func)    — Called with new value (tap same value resets to 0)
 *   max       (number)  — Maximum rating (default: 5)
 *   label     (string)  — Label text (default: "Severity Rating")
 *   minLabel  (string)  — Left hint text (default: "Negligible")
 *   maxLabel  (string)  — Right hint text (default: "Severe")
 *   compact   (bool)    — Smaller sizing for inline/edit contexts (default: false)
 */
var SeverityRating = function (props) {
    var value = props.value || 0;
    var onChange = props.onChange;
    var max = props.max || 5;
    var label = props.label !== undefined ? props.label : 'Severity Rating';
    var minLabel = props.minLabel !== undefined ? props.minLabel : 'Negligible';
    var maxLabel = props.maxLabel !== undefined ? props.maxLabel : 'Severe';
    var compact = props.compact || false;

    var barHeight = compact ? 'h-2.5' : 'h-3';
    var gap = compact ? 'gap-1.5' : 'gap-2';
    var valueSize = compact ? 'text-xs' : 'text-sm';

    var steps = [];
    for (var i = 1; i <= max; i++) { steps.push(i); }

    var handleTap = function (n) {
        if (onChange) onChange(value === n ? 0 : n);
    };

    return (
        <div className={compact ? 'space-y-1.5' : 'space-y-2'}>
            {label && (
                <div className="flex justify-between items-center">
                    <label className="text-xs font-bold text-forest uppercase tracking-wider">{label}</label>
                    <span className={'text-forest font-bold ' + valueSize}>{value}/{max}</span>
                </div>
            )}
            <div className={'flex ' + gap}>
                {steps.map(function (n) {
                    return (
                        <button
                            key={n}
                            onClick={function () { handleTap(n); }}
                            className={'w-full rounded-full transition-colors ' + barHeight + ' ' + (n <= value ? 'bg-forest' : 'bg-forest/15')}
                        />
                    );
                })}
            </div>
            {(minLabel || maxLabel) && (
                <div className="flex justify-between text-[10px] text-forest font-medium">
                    <span>{minLabel}</span>
                    <span>{maxLabel}</span>
                </div>
            )}
        </div>
    );
};

window.SeverityRating = SeverityRating;