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


/* ------------------------------------------------------------
   CustomComplexFormDialog — for homebrew and splatbook forms.
   ------------------------------------------------------------ */
window.CustomComplexFormDialog = function CustomComplexFormDialog({ onSubmit, onClose }) {
    const [name, setName] = useState('');
    const [target, setTarget] = useState('Persona');
    const [duration, setDuration] = useState('I');
    const [fade, setFade] = useState('L');
    const [description, setDescription] = useState('');
    const canSubmit = name.trim().length > 0;

    const footer = (
        <>
            <div className="footer-info">fade formula: use L for Level, e.g. "L+1" or "L-3" (minimum fade DV is 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(),
                            target, duration, fade: fade.trim() || 'L',
                            description: description.trim(),
                        })}>Add</button>
            </div>
        </>
    );

    return (
        <Modal title="Custom Complex Form" onClose={onClose} footer={footer}>
            <div style={{ padding: '20px 24px', width: '100%', overflowY: 'auto' }}>
                <FormRow label="Name">
                    <TextInput value={name} onChange={setName} placeholder="e.g. Resonance Ghost" maxLength={80} />
                </FormRow>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 12 }}>
                    <FormRow label="Target">
                        <select className="input" value={target} onChange={e => setTarget(e.target.value)}>
                            <option value="Persona">Persona</option>
                            <option value="Device">Device</option>
                            <option value="File">File</option>
                            <option value="Host">Host</option>
                            <option value="Sprite">Sprite</option>
                            <option value="Self">Self</option>
                            <option value="IC">IC</option>
                        </select>
                    </FormRow>
                    <FormRow label="Duration">
                        <select className="input" value={duration} onChange={e => setDuration(e.target.value)}>
                            <option value="I">Instant (I)</option>
                            <option value="S">Sustained (S)</option>
                            <option value="P">Permanent (P)</option>
                            <option value="E">Extended (E)</option>
                        </select>
                    </FormRow>
                    <FormRow label="Fade formula">
                        <TextInput value={fade} onChange={setFade} placeholder="e.g. L-2 or L+1" maxLength={10} />
                    </FormRow>
                </div>
                <FormRow label="Description" hint="(optional)">
                    <TextArea value={description} onChange={setDescription} rows={3}
                              placeholder="What does this form do?" />
                </FormRow>
            </div>
        </Modal>
    );
};