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


/* ------------------------------------------------------------
   CustomQualityDialog — simple modal for adding a user-defined quality
   ------------------------------------------------------------ */
window.CustomQualityDialog = function CustomQualityDialog({ type, onSubmit, onClose }) {
    const [name, setName] = useState('');
    const [karma, setKarma] = useState(5);
    const [notes, setNotes] = useState('');

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

    const footer = (
        <>
            <div className="footer-info">
                {type === 'positive' ? 'costs karma' : 'grants karma'}
            </div>
            <div className="footer-actions">
                <button className="btn btn-ghost" onClick={onClose}>Cancel</button>
                <button className="btn btn-primary"
                        disabled={!canSubmit}
                        onClick={() => onSubmit(name.trim(), karma, notes.trim())}>
                    Add
                </button>
            </div>
        </>
    );

    return (
        <Modal title={`Custom ${type === 'positive' ? 'Positive' : 'Negative'} Quality`}
               onClose={onClose} footer={footer}>
            <div style={{ padding: '24px 28px', width: '100%' }}>
                <FormRow label="Name">
                    <TextInput value={name} onChange={setName}
                               placeholder="e.g. Trust Fund, Shadow Guide" maxLength={80} />
                </FormRow>
                <FormRow label="Karma">
                    <input className="input" type="number" min="0" max="50"
                           value={karma}
                           onChange={e => setKarma(parseInt(e.target.value, 10) || 0)} />
                </FormRow>
                <FormRow label="Notes" hint="(optional)">
                    <TextArea value={notes} onChange={setNotes} rows={3}
                              placeholder="Effect description, book reference, etc." />
                </FormRow>
            </div>
        </Modal>
    );
};