/* ============================================================
   Priorities — Awakened Tier Picker
   Extracted from components.jsx via split.py.
   Each component reaches React hooks via window.React.
   ============================================================ */
const { useState, useEffect, useRef, useMemo, useCallback, Fragment } = React;


/* ------------------------------------------------------------
   AwakenedTierPicker — shows once a Magic priority is assigned,
   letting the user pick which tier (Magician, Adept, Mystic Adept,
   Technomancer, Aspected, or Mundane) within that priority.
   Hides itself when Priority E is Magic (only "Mundane" option) OR
   when no Magic priority is assigned yet.
   ------------------------------------------------------------ */
window.AwakenedTierPicker = function AwakenedTierPicker({ character, onChange }) {
    const C = SR5_CALC;
    const row = C.priorityRow(character, 'magic');
    if (!row || !row.options) return null;
    if (row.options.length <= 1) return null;

    const selected = row.selectedOption;
    const locked = C.isCareerMode(character);

    return (
        <div style={{ marginTop: 18, padding: 16,
                      background: 'var(--bg-surface)',
                      border: '1px solid var(--accent-dim)',
                      borderLeft: '2px solid var(--accent)',
                      borderRadius: 3 }}>
            <div style={{ display: 'flex', justifyContent: 'space-between',
                          alignItems: 'baseline', marginBottom: 12 }}>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11,
                               letterSpacing: '0.2em', color: 'var(--accent-bright)',
                               textTransform: 'uppercase' }}>
                    Awakened Tier {locked && '🔒'}
                </span>
                <span style={{ fontFamily: 'var(--font-mono)', fontSize: 11,
                               color: 'var(--text-muted)' }}>
                    {locked ? 'locked in career mode' : `${row.options.length} options at this priority`}
                </span>
            </div>
            <p className="muted" style={{ fontSize: 12, margin: '0 0 14px 0' }}>
                {locked
                    ? `This character was built as ${selected.label}. Switching magic type mid-career would orphan all spells, powers, complex forms, and bonded foci.`
                    : `The Magic priority row covers multiple character types. Pick which one you're building — this controls Magic/Resonance rating and enables the relevant sections (Magic tab, Adept Powers).`}
            </p>
            <div style={{ display: 'grid',
                          gridTemplateColumns: 'repeat(auto-fill, minmax(240px, 1fr))',
                          gap: 10 }}>
                {row.options.map(opt => {
                    const isSelected = selected.key === opt.key;
                    const statLabel = opt.type === 'technomancer'
                        ? `Resonance ${opt.resonance}`
                        : opt.type === 'mundane'
                            ? 'no rating'
                            : `Magic ${opt.magic}`;
                    return (
                        <div key={opt.key}
                             className={`tradition-tile ${locked && !isSelected ? 'locked-dim' : ''}`}
                             style={{ cursor: locked ? 'default' : 'pointer', opacity: locked && !isSelected ? 0.4 : 1 }}
                             onClick={() => !locked && onChange(C.setMagicOption(character, opt.key))}>
                            <div className="tt-name" style={{
                                color: isSelected ? 'var(--accent-bright)' : 'var(--text-primary)',
                            }}>
                                {opt.label}
                            </div>
                            <div className="tt-drain">{statLabel}</div>
                            <div className="tt-desc">{opt.hint}</div>
                            {isSelected && (
                                <div style={{ marginTop: 4, fontFamily: 'var(--font-mono)',
                                              fontSize: 10, letterSpacing: '0.1em',
                                              color: 'var(--accent)', textTransform: 'uppercase' }}>
                                    ✓ selected
                                </div>
                            )}
                        </div>
                    );
                })}
            </div>
        </div>
    );
};