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


/* ------------------------------------------------------------
   CustomWeaponDialog
   ------------------------------------------------------------ */
window.CustomWeaponDialog = function CustomWeaponDialog({ onSubmit, onClose }) {
    const [name, setName] = useState('');
    const [category, setCategory] = useState('heavy_pistols');
    const [acc, setAcc] = useState('');
    const [damage, setDamage] = useState('');
    const [ap, setAp] = useState('');
    const [mode, setMode] = useState('');
    const [rc, setRc] = useState('');
    const [ammo, setAmmo] = useState('');
    const [avail, setAvail] = useState('');
    const [nuyen, setNuyen] = useState(0);
    const [notes, setNotes] = useState('');

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

    const footer = (
        <>
            <div className="footer-info">enter the stats you know — blank fields become "—"</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,
                            acc, damage, ap, mode, rc, ammo, avail,
                            nuyen: parseInt(nuyen, 10) || 0,
                            notes: notes.trim()
                        })}>Add</button>
            </div>
        </>
    );

    return (
        <Modal title="Custom Weapon" onClose={onClose} footer={footer}>
            <div style={{ padding: '20px 24px', width: '100%', overflowY: 'auto' }}>
                <FormRow label="Name">
                    <TextInput value={name} onChange={setName} placeholder="e.g. Ares Predator VI" maxLength={80} />
                </FormRow>
                <FormRow label="Category">
                    <select className="input" value={category} onChange={e => setCategory(e.target.value)}>
                        {SR5_GEAR.WEAPON_CATEGORIES.map(c => (
                            <option key={c.key} value={c.key}>{c.label}</option>
                        ))}
                    </select>
                </FormRow>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                    <FormRow label="Accuracy">
                        <TextInput value={acc} onChange={setAcc} placeholder="e.g. 5 or 5 (7)" maxLength={20} />
                    </FormRow>
                    <FormRow label="Damage">
                        <TextInput value={damage} onChange={setDamage} placeholder="e.g. 8P or (STR+3)P" maxLength={20} />
                    </FormRow>
                    <FormRow label="AP">
                        <TextInput value={String(ap)} onChange={setAp} placeholder="e.g. -1 or 0" maxLength={10} />
                    </FormRow>
                    <FormRow label="Mode">
                        <TextInput value={mode} onChange={setMode} placeholder="e.g. SA/BF/FA" maxLength={20} />
                    </FormRow>
                    <FormRow label="RC">
                        <TextInput value={String(rc)} onChange={setRc} placeholder="e.g. 2" maxLength={10} />
                    </FormRow>
                    <FormRow label="Ammo">
                        <TextInput value={ammo} onChange={setAmmo} placeholder="e.g. 15 (c)" maxLength={20} />
                    </FormRow>
                    <FormRow label="Avail">
                        <TextInput value={avail} onChange={setAvail} placeholder="e.g. 8R" maxLength={10} />
                    </FormRow>
                    <FormRow label="Cost (¥)">
                        <input className="input" type="number" min="0" value={nuyen}
                               onChange={e => setNuyen(e.target.value)} />
                    </FormRow>
                </div>
                <FormRow label="Notes" hint="(optional)">
                    <TextArea value={notes} onChange={setNotes} rows={2} placeholder="Attachments, mods, ammo type…" />
                </FormRow>
            </div>
        </Modal>
    );
};
