/* ============================================================
   Gear — Ware 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;


/* ------------------------------------------------------------
   WarePickerModal — EntityPicker specialized for cyberware/bioware.
   Adds a grade selector and rating stepper to the details panel, so
   the user picks both the template and the grade/rating before adding.
   ------------------------------------------------------------ */
window.WarePickerModal = function WarePickerModal({ kind, templates, categories, character, onPick, onClose }) {
    const A = SR5_AUGS;
    const C = SR5_CALC;
    const creationGrades = A.GRADES.filter(g => g.creation);

    function itemRenderer(t, { selected, blocked, onClick }) {
        return (
            <div key={t.key}
                 className={`picker-item ${selected ? 'selected' : ''} ${blocked ? 'blocked' : ''}`}
                 onClick={onClick}
                 title={blocked ? `Availability ${t.avail} — over the creation cap` : undefined}>
                <span className="pi-name">{t.name}</span>
                <span className="pi-cost">
                    <span style={{ color: 'var(--text-muted)', marginRight: 6 }}>{t.essence.toFixed(2)}e</span>
                    {t.cost.toLocaleString()}¥
                </span>
                <div className="pi-meta">
                    {t.category.replace(/_/g, ' ').replace(/-/g, ' ')} · avail {t.avail}
                </div>
            </div>
        );
    }

    function renderDetails(t, { extras, setExtras }) {
        const grade = extras.grade || 'standard';
        const rating = extras.rating || 1;
        const effEss = Math.round(t.essence * rating * A.findGrade(grade).essMul * 1000) / 1000;
        const effCost = Math.round(t.cost * rating * A.findGrade(grade).costMul);
        const effAvail = A.adjustAvail(t.avail, A.findGrade(grade).availMod);

        return (
            <>
                <h3 className="picker-details-title">{t.name}</h3>

                <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
                    <div className="picker-details-cost">
                        <span className="cost-label">Essence</span>
                        <span className="cost-value" style={{ color: 'var(--accent)' }}>
                            {effEss.toFixed(2)}
                        </span>
                    </div>
                    <div className="picker-details-cost">
                        <span className="cost-label">Cost</span>
                        <span className="cost-value">{effCost.toLocaleString()}¥</span>
                    </div>
                    <div className="picker-details-cost">
                        <span className="cost-label">Avail</span>
                        <span className="cost-value" style={{ color: 'var(--text-primary)' }}>{effAvail}</span>
                    </div>
                </div>

                {/* Grade selector */}
                <div className="picker-grade-row">
                    <span className="grade-label">Grade</span>
                    <div className="picker-grade-options">
                        {creationGrades.map(g => (
                            <div key={g.key}
                                 className={`picker-grade-option ${grade === g.key ? 'active' : ''}`}
                                 onClick={() => setExtras({ ...extras, grade: g.key })}>
                                <span className="gop-name">{g.label}</span>
                                <span className="gop-effect">
                                    {(g.essMul * 100).toFixed(0)}%e · {(g.costMul * 100).toFixed(0)}%¥
                                </span>
                            </div>
                        ))}
                    </div>
                    <span className="muted mono" style={{ fontSize: 10, letterSpacing: '0.03em' }}>
                        Beta and deltaware grades aren't purchasable during character creation.
                    </span>
                </div>

                {/* Rating stepper (for ware that's rated — heuristic: name ends with a digit or says "1") */}
                {(t.name.match(/\s\d+$/) || t.name.includes('Rating')) && (
                    <div className="picker-details-rank-input">
                        <label>Rating</label>
                        <RatingStepper
                            value={extras.rating || 1}
                            min={1}
                            max={6}
                            onChange={(n) => setExtras({ ...extras, rating: n })}
                            stopPropagation
                        />
                        <span className="muted mono" style={{ fontSize: 11, marginLeft: 8 }}>
                            (scales essence and cost)
                        </span>
                    </div>
                )}

                {t.description && (
                    <div className="picker-details-section">
                        <div className="picker-details-label">Effect</div>
                        <div className="picker-details-text">{t.description}</div>
                    </div>
                )}
                {t.capacity !== undefined && t.capacity > 0 && (
                    <div className="picker-details-section">
                        <div className="picker-details-label">Capacity</div>
                        <div className="picker-details-text">
                            {t.capacity} — slots available for sub-implants inside this piece.
                        </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>
                )}
                {t.source && <div className="picker-details-source">{t.source}</div>}
            </>
        );
    }

    return (
        <EntityPicker
            title={`Browse ${kind === 'bioware' ? 'Bioware' : 'Cyberware'}`}
            items={templates}
            getItemKey={t => t.key}
            filters={categories}
            filterBy={(t, query, filter) => {
                if (filter && t.category !== filter) return false;
                if (query && !t.name.toLowerCase().includes(query)) return false;
                return true;
            }}
            isBlocked={t => !C.availAllowedForCharacter(character, t.avail)}
            blockedReason={t => `Availability ${t.avail} exceeds creation cap of ${C.CREATION_AVAIL_CAP}`}
            itemRenderer={itemRenderer}
            renderDetails={renderDetails}
            onPick={(t, extras) => onPick(t, { grade: extras.grade || 'standard', rating: extras.rating || 1 })}
            onClose={onClose}
        />
    );
};