/* ============================================================
   Matrix — Submersion Section (Phase 10)
   
   Technomancer-only, career-mode-only. Shows:
     1. Grade / echoes / resonance-max ribbon
     2. "Submerge to Grade N" button that stages a pending
        submersion, karma-gated by the standard pending bar
     3. Submersion history log

   Submersion is the technomancer equivalent of magical
   initiation. Per SR5 CRB errata, karma cost = 10 + (Grade × 3).
   Each grade grants one echo slot and raises natural Resonance
   max by 1 (base 6 + grade).
   ============================================================ */
const { useState, useEffect, useRef, useMemo, useCallback, Fragment } = React;

window.SubmersionSection = function SubmersionSection({ character, onChange }) {
    const C = SR5_CALC;

    const inCareer = C.isCareerMode(character);

    /* Only shown for technomancers. */
    const magicType = C.priorityRow(character, 'magic')?.type;
    if (magicType !== 'technomancer') return null;

    const grade = C.submersionGrade(character);
    const nextGrade = grade + 1;
    const nextCost = C.submersionKarmaCost(nextGrade);
    const earned = C.echoesEarned(character);
    const used = C.echoesUsed(character, true);
    const available = C.echoesAvailable(character);
    const resMax = C.resonanceNaturalMax(character);
    const resCurrent = C.specialAttributeValue(character, 'res');
    const history = C.submersionHistory(character);
    const pending = C.pendingSubmersion(character);

    const check = inCareer ? C.canSubmergeToGrade(character, nextGrade) : { ok: false, reason: 'Submersion is only available in career mode.' };

    const [method, setMethod] = useState('extended_test');
    const [notes, setNotes] = useState('');

    function onStage() {
        if (!check.ok) return;
        onChange(C.stagePendingSubmersion(character, method, notes.trim()));
        setNotes('');
    }
    function onUnstage() {
        onChange(C.unstagePendingSubmersion(character));
    }

    return (
        <div className="card" style={{ marginTop: 12 }}>
            <div className="card-header">
                <h3 className="card-title">Submersion</h3>
                <div className="card-actions">
                    <span className="muted" style={{ fontSize: 12 }}>
                        Grade {grade}
                        {pending && (
                            <span className="accent" style={{ marginLeft: 6 }}>
                                → {pending.targetGrade} pending
                            </span>
                        )}
                    </span>
                </div>
            </div>
            <div className="card-body">
                {/* Ribbon — grade, echoes, resonance max */}
                <div className="sub-ribbon">
                    <div className="sub-stat">
                        <div className="sub-label">Current Grade</div>
                        <div className="sub-value">{grade}</div>
                        <div className="sub-hint">karma-bought metamagic</div>
                    </div>
                    <div className="sub-stat">
                        <div className="sub-label">Echoes</div>
                        <div className="sub-value">
                            {used}<span className="muted" style={{ fontSize: 14 }}>/{earned}</span>
                        </div>
                        <div className="sub-hint">
                            {available > 0
                                ? `${available} echo slot${available === 1 ? '' : 's'} available`
                                : 'no unspent echoes'}
                        </div>
                    </div>
                    <div className="sub-stat">
                        <div className="sub-label">Resonance Max</div>
                        <div className="sub-value">{resMax}</div>
                        <div className="sub-hint">
                            current {resCurrent}
                            {resCurrent < resMax && ' — room to raise'}
                        </div>
                    </div>
                </div>

                {/* Submerge button / pending state */}
                {!inCareer ? (
                    <div className="muted" style={{ marginTop: 16, fontSize: 12 }}>
                        Submersion is only possible after finalizing your character and entering career
                        mode. Per RAW, technomancers cannot submerge at character creation.
                    </div>
                ) : pending ? (
                    <div className="sub-pending-banner">
                        <div>
                            <strong className="accent">Pending:</strong> submerge to Grade {pending.targetGrade}
                            {' '}(via {pending.method.replace(/_/g, ' ')}) — {pending.karmaCost} karma
                        </div>
                        <button className="btn btn-ghost btn-small" onClick={onUnstage}>
                            Discard pending
                        </button>
                    </div>
                ) : (
                    <>
                        <div className="sub-submerge-panel">
                            <div className="sub-submerge-head">
                                <div>
                                    <div className="sub-next-label muted mono">Next grade</div>
                                    <div className="sub-next-value">
                                        Grade {nextGrade}
                                        <span className="muted" style={{ fontSize: 13, marginLeft: 8 }}>
                                            — {nextCost} karma
                                        </span>
                                    </div>
                                </div>
                                <button className={`btn btn-primary ${!check.ok ? 'sub-btn-disabled' : ''}`}
                                        onClick={onStage}
                                        disabled={!check.ok}
                                        title={check.ok ? `Stage submersion to Grade ${nextGrade}` : check.reason}>
                                    Submerge to Grade {nextGrade}
                                </button>
                            </div>

                            {!check.ok && (
                                <div className="sub-cant-reason">
                                    <span className="sub-cant-icon">⊘</span>
                                    <span>Can't submerge yet: <strong>{check.reason}</strong></span>
                                </div>
                            )}

                            <div className="sub-method-row">
                                <label>
                                    <span className="muted mono" style={{ fontSize: 11 }}>Method:</span>
                                    <select value={method}
                                            onChange={e => setMethod(e.target.value)}
                                            disabled={!check.ok}>
                                        <option value="extended_test">Extended test (Software+Intuition [Resonance])</option>
                                        <option value="solo_run">Solo submersion run</option>
                                        <option value="group_run">Group submersion run</option>
                                        <option value="ordeal">Ordeal (GM-defined)</option>
                                    </select>
                                </label>
                            </div>

                            <div className="sub-method-row">
                                <label style={{ width: '100%' }}>
                                    <span className="muted mono" style={{ fontSize: 11 }}>Notes (optional):</span>
                                    <input type="text"
                                           value={notes}
                                           onChange={e => setNotes(e.target.value)}
                                           disabled={!check.ok}
                                           placeholder="e.g. visions from the Resonance Realms…"
                                           style={{ width: '100%' }} />
                                </label>
                            </div>
                        </div>
                    </>
                )}

                {/* History */}
                {history.length > 0 && (
                    <div className="sub-history">
                        <div className="sub-history-head">Submersion History</div>
                        {history.map((h, i) => (
                            <div key={i} className="sub-history-row">
                                <span className="mono" style={{ color: 'var(--accent)' }}>Grade {h.grade}</span>
                                <span className="muted mono" style={{ fontSize: 11 }}>{h.date}</span>
                                <span className="muted" style={{ fontSize: 12 }}>
                                    via {h.method.replace(/_/g, ' ')} · {h.karmaCost} karma
                                </span>
                                {h.notes && <div className="sub-history-notes muted">{h.notes}</div>}
                            </div>
                        ))}
                    </div>
                )}
            </div>
        </div>
    );
};