/* ============================================================
   Magic — Reagent Picker Modal (Phase 5d)
   
   Simple form: pick grade (raw/refined/radical), enter drams,
   see cost. No catalog browser needed — just 3 options.
   ============================================================ */
const { useState, useEffect, useRef, useMemo, useCallback, Fragment } = React;

window.ReagentPickerModal = function ReagentPickerModal({ onAdd, onClose }) {
    const M = SR5_MAGIC;
    const [gradeKey, setGradeKey] = useState('raw');
    const [drams, setDrams] = useState(10);
    const [notes, setNotes] = useState('');

    const grade = M.findReagentGrade(gradeKey);
    const cost = M.reagentCost(gradeKey, drams);

    const footer = (
        <>
            <div className="footer-info">
                {drams} dram{drams !== 1 ? 's' : ''} of {grade?.label.toLowerCase()} = {cost.toLocaleString()}¥
            </div>
            <div className="footer-actions">
                <button className="btn btn-ghost" onClick={onClose}>Cancel</button>
                <button className="btn btn-primary" disabled={drams <= 0}
                        onClick={() => onAdd({ gradeKey, drams, notes: notes.trim() })}>Add</button>
            </div>
        </>
    );

    return (
        <Modal title="Buy Reagents" onClose={onClose} footer={footer}>
            <div style={{ padding: '20px 24px', width: '100%', overflowY: 'auto' }}>
                <div className="reagent-grade-options">
                    {M.REAGENT_GRADES.map(g => (
                        <div key={g.key}
                             className={`reagent-grade-option ${gradeKey === g.key ? 'selected' : ''}`}
                             onClick={() => setGradeKey(g.key)}>
                            <div className="rgo-head">
                                <span className="rgo-name">{g.label}</span>
                                <span className="rgo-cost">{g.costPerDram}¥/dram · avail {g.avail}</span>
                            </div>
                            <div className="rgo-desc">{g.description}</div>
                        </div>
                    ))}
                </div>

                <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 12, marginTop: 16 }}>
                    <FormRow label="Drams">
                        <input type="number"
                               className="input"
                               min="1"
                               max="9999"
                               value={drams}
                               onChange={e => setDrams(Math.max(0, parseInt(e.target.value, 10) || 0))} />
                    </FormRow>
                    <FormRow label="Total cost">
                        <div className="input" style={{ background: 'var(--bg-base)', color: 'var(--accent)' }}>
                            {cost.toLocaleString()}¥
                        </div>
                    </FormRow>
                </div>

                <FormRow label="Notes" hint="(optional)">
                    <TextArea value={notes} onChange={setNotes} rows={2}
                              placeholder="Source, purpose, etc." />
                </FormRow>
            </div>
        </Modal>
    );
};