/* ============================================================
   Primitives — Rating Stepper
   Extracted from components.jsx via split.py.
   Each component reaches React hooks via window.React.
   ============================================================ */
const { useState, useEffect, useRef, useMemo, useCallback, Fragment } = React;


/* ============================================================
   RatingStepper — compact +/- widget for rated items.
   ============================================================
   
   Used by equipment rows (rated templates like stim patches,
   autopickers, respirators), the picker detail panel for
   selecting a rating before adding, adept power level pickers,
   and anywhere else a small numeric rating needs a +/- control.
   
   Props:
     value       number        Current rating
     min         number        Minimum allowed (inclusive)
     max         number        Maximum allowed (inclusive)
     onChange    (n) => void   Called with new value on +/-
     stopPropagation bool      If true, stop click bubbling
                               (useful inside pickers where
                               clicking the item itself selects it)
     size        'sm' | 'md'   Visual density. Default 'sm'.
   
   Clamps automatically. Disables + when at max, − when at min.
   ============================================================ */
window.RatingStepper = function RatingStepper({ value, min, max, onChange, stopPropagation, size }) {
    /* Runtime validation — same pattern as EntityPicker. */
    if (typeof value !== 'number') {
        throw new Error(`RatingStepper: 'value' must be a number, got ${typeof value}`);
    }
    if (typeof min !== 'number' || typeof max !== 'number') {
        throw new Error(`RatingStepper: 'min' and 'max' must be numbers`);
    }
    if (typeof onChange !== 'function') {
        throw new Error(`RatingStepper: 'onChange' must be a function`);
    }

    const wrap = (handler) => (e) => {
        if (stopPropagation) e.stopPropagation();
        handler();
    };
    const dec = wrap(() => onChange(Math.max(min, value - 1)));
    const inc = wrap(() => onChange(Math.min(max, value + 1)));

    const cls = 'rating-stepper' + (size === 'md' ? ' rating-stepper-md' : '');

    return (
        <div className={cls}>
            <button onClick={dec} disabled={value <= min} title="Decrease">−</button>
            <span className="r-val">{value}</span>
            <button onClick={inc} disabled={value >= max} title="Increase">+</button>
        </div>
    );
};