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


/* ------------------------------------------------------------
   EquipmentPickerModal — catalog browser with filter chips.
   Uses the generic EntityPicker component from Phase 3.
   ------------------------------------------------------------ */
window.EquipmentPickerModal = function EquipmentPickerModal({ catalog, categories, title, character, kind, onPick, onClose }) {
    const E = SR5_EQUIPMENT;
    const C = SR5_CALC;
    const [rating, setRating] = useState({}); /* per-item rating override */

    function setItemRating(key, val) {
        setRating(r => ({ ...r, [key]: val }));
    }

    function itemRenderer(t, { selected, blocked, onClick }) {
        const isRated = !!t.ratingRange;
        const curRating = rating[t.key] || (t.ratingRange ? t.ratingRange[0] : t.rating);
        const resolvedCost = E.resolveCost(t, curRating);
        const resolvedAvail = E.resolveAvail(t, curRating);
        return (
            <div key={t.key}
                 className={`picker-item ${selected ? 'selected' : ''} ${blocked ? 'blocked' : ''}`}
                 onClick={onClick}
                 title={blocked ? `Availability ${resolvedAvail} — over the creation cap` : undefined}>
                <span className="pi-name">{t.name}</span>
                <span className="pi-cost">{resolvedCost.toLocaleString()}¥</span>
                <div className="pi-meta">
                    {(t.category || '').replace(/_/g, ' ')}{isRated ? ` · R${t.ratingRange[0]}–${t.ratingRange[1]}` : ''} · avail {resolvedAvail}
                </div>
            </div>
        );
    }

    function renderDetails(t) {
        if (!t) return null;
        const isRated = !!t.ratingRange;
        const curRating = rating[t.key] || (t.ratingRange ? t.ratingRange[0] : t.rating);
        const cost = E.resolveCost(t, curRating);
        const avail = E.resolveAvail(t, curRating);
        return (
            <>
                <h3 className="picker-details-title">{t.name}</h3>
                <div className="picker-details-cost">
                    <span className="cost-label">Cost</span>
                    <span className="cost-value">{cost.toLocaleString()}¥</span>
                </div>
                <div className="weapon-stat-grid">
                    {isRated && (
                        <div className="ws" style={{ gridColumn: '1 / -1' }}>
                            <span className="ws-label">Rating</span>
                            <span className="ws-value">
                                <RatingStepper
                                    value={curRating}
                                    min={t.ratingRange[0]}
                                    max={t.ratingRange[1]}
                                    onChange={(n) => setItemRating(t.key, n)}
                                    stopPropagation
                                />
                            </span>
                        </div>
                    )}
                    {!isRated && t.rating != null && (
                        <div className="ws"><span className="ws-label">Rating</span><span className="ws-value">{t.rating}</span></div>
                    )}
                    <div className="ws"><span className="ws-label">Avail</span><span className="ws-value">{avail}</span></div>
                    {t.source && <div className="ws"><span className="ws-label">Source</span><span className="ws-value" style={{ fontSize: 11 }}>{t.source}</span></div>}
                </div>
                {t.description && (
                    <div className="picker-details-section">
                        <div className="picker-details-label">Description</div>
                        <div className="picker-details-text">{t.description}</div>
                    </div>
                )}
                {t.tags && t.tags.length > 0 && (
                    <div className="picker-details-section">
                        <div className="picker-details-label">Tags</div>
                        <div className="picker-details-tags">
                            {t.tags.map(tag => <span key={tag} className="picker-tag">{tag}</span>)}
                        </div>
                    </div>
                )}
            </>
        );
    }

    return (
        <EntityPicker
            title={`Browse ${title}`}
            items={catalog}
            getItemKey={t => t.key}
            filters={categories}
            filterBy={(t, query, filter) => {
                if (filter && t.category !== filter) return false;
                if (query) {
                    const q = query.toLowerCase();
                    const blob = [t.name, t.category, t.description || ''].join(' ').toLowerCase();
                    if (!blob.includes(q)) return false;
                }
                return true;
            }}
            isBlocked={t => {
                const curRating = rating[t.key] || (t.ratingRange ? t.ratingRange[0] : t.rating);
                return !C.availAllowedForCharacter(character, E.resolveAvail(t, curRating));
            }}
            blockedReason={t => {
                const curRating = rating[t.key] || (t.ratingRange ? t.ratingRange[0] : t.rating);
                return `Availability ${E.resolveAvail(t, curRating)} exceeds creation cap of ${C.CREATION_AVAIL_CAP}`;
            }}
            itemRenderer={itemRenderer}
            renderDetails={renderDetails}
            onPick={(t) => {
                const isRated = !!t.ratingRange;
                const curRating = rating[t.key] || (t.ratingRange ? t.ratingRange[0] : t.rating);
                onPick(t, isRated ? { rating: curRating } : {});
            }}
            onClose={onClose}
        />
    );
};