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


/* ------------------------------------------------------------
   CustomAdeptPowerDialog — user-defined adept power
   ------------------------------------------------------------ */
window.CustomAdeptPowerDialog = function CustomAdeptPowerDialog({ onSubmit, onClose }) {
    const [name, setName] = useState('');
    const [ppCost, setPpCost] = useState(0.5);
    const [level, setLevel] = useState(1);
    const [description, setDescription] = useState('');

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

    const footer = (
        <>
            <div className="footer-info">PP cost is the FINAL cost (already-multiplied by level if rated)</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(),
                            ppCost: parseFloat(ppCost) || 0,
                            level: parseInt(level, 10),
                            description: description.trim(),
                        })}>Add</button>
            </div>
        </>
    );

    return (
        <Modal title="Custom Adept Power" onClose={onClose} footer={footer}>
            <div style={{ padding: '20px 24px', width: '100%' }}>
                <FormRow label="Name">
                    <TextInput value={name} onChange={setName} placeholder="e.g. Way of the Open Hand" maxLength={80} />
                </FormRow>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                    <FormRow label="PP Cost">
                        <input className="input" type="number" step="0.25" min="0" max="6" value={ppCost}
                               onChange={e => setPpCost(e.target.value)} />
                    </FormRow>
                    <FormRow label="Level (if rated)">
                        <input className="input" type="number" min="1" max="6" value={level}
                               onChange={e => setLevel(e.target.value)} />
                    </FormRow>
                </div>
                <FormRow label="Description" hint="(optional)">
                    <TextArea value={description} onChange={setDescription} rows={3}
                              placeholder="What does the power do?" />
                </FormRow>
            </div>
        </Modal>
    );
};