/* ============================================================
   Magic — Custom Focus Dialog (Phase 5d)
   
   Freeform focus entry for homebrew/splatbook foci. Still uses
   the standard category→karma/nuyen/avail formula to compute
   costs, so "custom" means "I'm naming it myself" rather than
   "unbounded cost."
   ============================================================ */
const { useState, useEffect, useRef, useMemo, useCallback, Fragment } = React;

window.CustomFocusDialog = function CustomFocusDialog({ character, onSubmit, onClose }) {
    const M = SR5_MAGIC;
    const C = SR5_CALC;
    const allowed = C.allowedFocusCategories(character);

    const [name, setName] = useState('');
    const [categoryKey, setCategoryKey] = useState(allowed[0]?.key || 'spell');
    const [force, setForce] = useState(3);
    const [notes, setNotes] = useState('');

    const cat = M.findFocusCategory(categoryKey);
    const karma = M.focusKarmaCost(categoryKey, force);
    const nuyen = M.focusNuyenCost(categoryKey, force);
    const avail = M.focusAvail(categoryKey, force);

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

    const footer = (
        <>
            <div className="footer-info">
                {cat && `F${force} ${cat.label}: ${karma}k / ${nuyen.toLocaleString()}¥ / avail ${avail}`}
            </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(),
                            categoryKey,
                            force,
                            notes: notes.trim(),
                        })}>Add</button>
            </div>
        </>
    );

    return (
        <Modal title="Custom Focus" onClose={onClose} footer={footer}>
            <div style={{ padding: '20px 24px', width: '100%', overflowY: 'auto' }}>
                <FormRow label="Name">
                    <TextInput value={name} onChange={setName}
                               placeholder="e.g. Ebony Staff of Binding"
                               maxLength={80} />
                </FormRow>
                <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 12 }}>
                    <FormRow label="Category">
                        <select className="input"
                                value={categoryKey}
                                onChange={e => setCategoryKey(e.target.value)}>
                            {allowed.map(c => (
                                <option key={c.key} value={c.key}>
                                    {c.label} — F×{c.karmaPerF}k / F×{c.costPerF.toLocaleString()}¥
                                </option>
                            ))}
                        </select>
                    </FormRow>
                    <FormRow label="Force">
                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                            <RatingStepper
                                value={force}
                                min={1}
                                max={12}
                                onChange={setForce}
                            />
                        </div>
                    </FormRow>
                </div>
                <FormRow label="Notes" hint="(optional)">
                    <TextArea value={notes} onChange={setNotes} rows={3}
                              placeholder="House rules, special properties, binding time, etc." />
                </FormRow>
            </div>
        </Modal>
    );
};