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


/* ------------------------------------------------------------
   CustomSpellDialog — user-defined spell with full stat block
   ------------------------------------------------------------ */
window.CustomSpellDialog = function CustomSpellDialog({ onSubmit, onClose }) {
    const [name, setName] = useState('');
    const [category, setCategory] = useState('combat');
    const [type, setType] = useState('M');
    const [range, setRange] = useState('LOS');
    const [damage, setDamage] = useState('—');
    const [duration, setDuration] = useState('I');
    const [drain, setDrain] = useState('F-3');
    const [description, setDescription] = useState('');

    const canSubmit = name.trim().length > 0;

    const footer = (
        <>
            <div className="footer-info">drain uses F for Force, e.g. F, F-3, F+1, F/2</div>
            <div className="footer-actions">
                <button className="btn btn-ghost" onClick={onClose}>Cancel</button>
                <button className="btn btn-primary" disabled={!canSubmit}
                        onClick={() => onSubmit({
                            name: name.trim(), category, type, range, damage, duration, drain,
                            description: description.trim(),
                        })}>Add</button>
            </div>
        </>
    );

    return (
        <Modal title="Custom Spell" onClose={onClose} footer={footer}>
            <div style={{ padding: '20px 24px', width: '100%', overflowY: 'auto' }}>
                <FormRow label="Name">
                    <TextInput value={name} onChange={setName} placeholder="e.g. Kellan's Ganger-Melting Blast" maxLength={80} />
                </FormRow>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                    <FormRow label="Category">
                        <select className="input" value={category} onChange={e => setCategory(e.target.value)}>
                            {SR5_MAGIC.SPELL_CATEGORIES.map(c => (
                                <option key={c.key} value={c.key}>{c.label}</option>
                            ))}
                        </select>
                    </FormRow>
                    <FormRow label="Type">
                        <select className="input" value={type} onChange={e => setType(e.target.value)}>
                            <option value="M">Mana</option>
                            <option value="P">Physical</option>
                        </select>
                    </FormRow>
                    <FormRow label="Range">
                        <select className="input" value={range} onChange={e => setRange(e.target.value)}>
                            <option value="LOS">LOS</option>
                            <option value="LOS(A)">LOS (Area)</option>
                            <option value="LOS(I)">LOS (Indirect)</option>
                            <option value="T">Touch</option>
                        </select>
                    </FormRow>
                    <FormRow label="Damage">
                        <select className="input" value={damage} onChange={e => setDamage(e.target.value)}>
                            <option value="—">—</option>
                            <option value="P">Physical</option>
                            <option value="S">Stun</option>
                        </select>
                    </FormRow>
                    <FormRow label="Duration">
                        <select className="input" value={duration} onChange={e => setDuration(e.target.value)}>
                            <option value="I">Instant</option>
                            <option value="S">Sustained</option>
                            <option value="P">Permanent</option>
                        </select>
                    </FormRow>
                    <FormRow label="Drain Formula">
                        <TextInput value={drain} onChange={setDrain} placeholder="e.g. F-3, F, F+1" maxLength={10} />
                    </FormRow>
                </div>
                <FormRow label="Description" hint="(optional)">
                    <TextArea value={description} onChange={setDescription} rows={3}
                              placeholder="What does the spell do?" />
                </FormRow>
            </div>
        </Modal>
    );
};