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


/* ------------------------------------------------------------
   AttributeStepper — +/- with a pip track showing current value
   
   Props:
     value, min, max, onChange — standard stepper fields
     hardCapAtMaxInCreation — creation-only: cap at max-1 if another attr at max
     canIncOverride — optional: if provided and false, force-disable + button
                      (used by career mode for karma gating)
     canDecOverride — optional: if provided and false, force-disable − button
                      (used by career mode to prevent decrement below committed)
     pending — optional: if true, render with pending (amber) styling
     incTitle — optional tooltip for the + button (for "not enough karma" etc.)
   ------------------------------------------------------------ */
window.AttributeStepper = function AttributeStepper({
    value, min, max, onChange,
    hardCapAtMaxInCreation,
    canIncOverride, canDecOverride,
    pending, incTitle,
}) {
    const dec = () => onChange(value - 1);
    const inc = () => onChange(value + 1);
    const baseCanDec = value > min;
    const effectiveCeiling = hardCapAtMaxInCreation ? max - 1 : max;
    const baseCanInc = value < effectiveCeiling;
    const canDec = canDecOverride === undefined ? baseCanDec : baseCanDec && canDecOverride;
    const canInc = canIncOverride === undefined ? baseCanInc : baseCanInc && canIncOverride;

    const pips = [];
    for (let i = 1; i <= max; i++) {
        let cls = 'attr-pip';
        if (i <= value) cls += ' filled';
        if (i === value && value === max) cls += ' bought-last';
        pips.push(<div key={i} className={cls} />);
    }

    return (
        <div className={`attr-stepper ${pending ? 'pending' : ''}`}>
            <button className="stepper-btn" onClick={dec} disabled={!canDec} title="Decrease">−</button>
            <div className="attr-track">{pips}</div>
            <button className="stepper-btn" onClick={inc} disabled={!canInc} title={incTitle || 'Increase'}>+</button>
            <div className={`attr-value ${pending ? 'pending-value' : ''}`}>{value}</div>
        </div>
    );
};