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


/* ------------------------------------------------------------
   CustomAugDialog — add a user-defined piece of cyberware or bioware
   ------------------------------------------------------------ */
window.CustomAugDialog = function CustomAugDialog({ kind, onSubmit, onClose }) {
    const [name, setName] = useState('');
    const [category, setCategory] = useState(kind === 'bioware' ? 'basic' : 'bodyware');
    const [grade, setGrade] = useState('standard');
    const [essence, setEssence] = useState(0.5);
    const [nuyen, setNuyen] = useState(0);
    const [rating, setRating] = useState(1);
    const [notes, setNotes] = useState('');

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

    const footer = (
        <>
            <div className="footer-info">enter the raw stats — they're stored as-is, not grade-adjusted</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,
                            grade,
                            essence: parseFloat(essence) || 0,
                            nuyen: parseInt(nuyen, 10) || 0,
                            rating: parseInt(rating, 10) > 1 ? parseInt(rating, 10) : undefined,
                            notes: notes.trim(),
                        })}>Add</button>
            </div>
        </>
    );

    const categories = kind === 'bioware' ? SR5_AUGS.CATEGORIES_BIO : SR5_AUGS.CATEGORIES_CYBER;

    return (
        <Modal title={`Custom ${kind === 'bioware' ? 'Bioware' : 'Cyberware'}`}
               onClose={onClose} footer={footer}>
            <div style={{ padding: '20px 24px', width: '100%' }}>
                <FormRow label="Name">
                    <TextInput value={name} onChange={setName}
                               placeholder={kind === 'bioware' ? 'e.g. Adrenal Pump' : 'e.g. Skillwires'}
                               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)}>
                            {categories.map(c => <option key={c.key} value={c.key}>{c.label}</option>)}
                        </select>
                    </FormRow>
                    <FormRow label="Grade">
                        <select className="input" value={grade} onChange={e => setGrade(e.target.value)}>
                            {SR5_AUGS.GRADES.map(g => (
                                <option key={g.key} value={g.key}>
                                    {g.label} {!g.creation && '(post-creation)'}
                                </option>
                            ))}
                        </select>
                    </FormRow>
                    <FormRow label="Essence (effective)">
                        <input className="input" type="number" step="0.05" min="0" max="6" value={essence}
                               onChange={e => setEssence(e.target.value)} />
                    </FormRow>
                    <FormRow label="Cost (¥)">
                        <input className="input" type="number" min="0" value={nuyen}
                               onChange={e => setNuyen(e.target.value)} />
                    </FormRow>
                    <FormRow label="Rating">
                        <input className="input" type="number" min="1" max="6" value={rating}
                               onChange={e => setRating(e.target.value)} />
                    </FormRow>
                </div>
                <FormRow label="Notes" hint="(optional)">
                    <TextArea value={notes} onChange={setNotes} rows={2}
                              placeholder="Effect description, sub-implants, book reference…" />
                </FormRow>
            </div>
        </Modal>
    );
};