/* ============================================================
   Magic — Lodge Dialog (Phase 5d)
   
   Pick Force (capped at magician's Magic attribute), see cost.
   Force = Magic, cost = Force × 500¥, avail = Force × 2.
   ============================================================ */
const { useState, useEffect, useRef, useMemo, useCallback, Fragment } = React;

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

    const magic = C.specialAttributeValue(character, 'mag');
    const tradKey = C.characterTradition(character);
    const tradition = tradKey ? M.findTradition(tradKey) : null;

    const [force, setForce] = useState(Math.min(magic, 3));
    const [traditionName, setTraditionName] = useState(tradition?.label || '');
    const [notes, setNotes] = useState('');

    const cost = M.lodgeCost(force);
    const avail = M.lodgeAvail(force);

    const footer = (
        <>
            <div className="footer-info">
                F{force} {traditionName ? traditionName + ' ' : ''}Lodge = {cost.toLocaleString()}¥ · avail {avail}
            </div>
            <div className="footer-actions">
                <button className="btn btn-ghost" onClick={onClose}>Cancel</button>
                <button className="btn btn-primary" disabled={force <= 0}
                        onClick={() => onSubmit({
                            force,
                            tradition: traditionName.trim() || null,
                            notes: notes.trim(),
                        })}>Add</button>
            </div>
        </>
    );

    return (
        <Modal title="Add Magical Lodge" onClose={onClose} footer={footer}>
            <div style={{ padding: '20px 24px', width: '100%', overflowY: 'auto' }}>
                <FormRow label="Tradition" hint="(optional — just a label)">
                    <TextInput
                        value={traditionName}
                        onChange={setTraditionName}
                        placeholder="Hermetic, Shamanic, Voudoun, etc."
                        maxLength={40} />
                </FormRow>
                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12 }}>
                    <FormRow label="Force" hint={`max = your Magic (${magic})`}>
                        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                            <RatingStepper
                                value={force}
                                min={1}
                                max={magic || 6}
                                onChange={setForce}
                            />
                        </div>
                    </FormRow>
                    <FormRow label="Cost">
                        <div className="input" style={{ background: 'var(--bg-base)', color: 'var(--accent)' }}>
                            {cost.toLocaleString()}¥
                        </div>
                    </FormRow>
                </div>
                <div className="muted" style={{ fontSize: 11, marginTop: 4, fontStyle: 'italic' }}>
                    Cost = Force × 500¥. Availability = Force × 2. Used for binding spirits and performing rituals.
                </div>
                <FormRow label="Notes" hint="(optional)">
                    <TextArea value={notes} onChange={setNotes} rows={3}
                              placeholder="Location, style, consecrated objects, etc." />
                </FormRow>
            </div>
        </Modal>
    );
};