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


/* ------------------------------------------------------------
   SkillsView — active-skill table with points tracking and live dice pools.
   Phase 2.5 adds skill groups and specializations.
   ------------------------------------------------------------ */
window.SkillsView = function SkillsView({ character, onChange }) {
    const D = SR5_DATA;
    const C = SR5_CALC;

    const [search, setSearch] = useState('');
    const [category, setCategory] = useState('all');
    const [showOnlyTrained, setShowOnlyTrained] = useState(false);

    const inCareer = C.isCareerMode(character);
    const karmaAvailable = C.karmaCurrent(character);

    const total = C.skillPointsTotal(character);
    const spent = C.skillPointsSpent(character);
    const groupTotal = C.skillGroupPointsTotal(character);
    const groupSpent = C.skillGroupPointsSpent(character);

    if (total === 0 && groupTotal === 0 && !inCareer) {
        return (
            <>
                <ContentHeader title="04 / Skills" heading="Spend skill points" />
                <div className="card"><div className="card-body muted">
                    Assign a priority letter to the <strong className="accent">Skills</strong> category first.
                </div></div>
            </>
        );
    }

    /* Magic/Resonance availability */
    const magicType = C.priorityRow(character, 'magic')?.type;
    const hasMagic = magicType && magicType !== 'mundane';
    const isTechnomancer = magicType === 'technomancer';

    function skillIsAvailable(skill) {
        if (skill.requires === 'mag') {
            if (!hasMagic || isTechnomancer) return false;
            /* Aspected magicians: only skills in their chosen group. */
            if (!C.skillAllowedByAspected(character, skill.key)) return false;
            return true;
        }
        if (skill.requires === 'res') return isTechnomancer;
        return true;
    }
    function groupIsAvailable(group) {
        if (group.requires === 'mag') {
            if (!hasMagic || isTechnomancer) return false;
            if (!C.skillGroupAllowedByAspected(character, group.key)) return false;
            return true;
        }
        if (group.requires === 'res') return isTechnomancer;
        return true;
    }

    /* Filter skills */
    const lowerSearch = search.trim().toLowerCase();
    const visibleSkills = D.ACTIVE_SKILLS.filter(skill => {
        if (!skillIsAvailable(skill)) return false;
        if (category !== 'all' && skill.category !== category) return false;
        if (showOnlyTrained && C.effectiveSkillRating(character, skill.key) === 0) return false;
        if (lowerSearch && !skill.label.toLowerCase().includes(lowerSearch)) return false;
        return true;
    });

    const byCategory = {};
    visibleSkills.forEach(s => {
        (byCategory[s.category] ??= []).push(s);
    });

    /* Broken-group warning (should be rare; only possible from loaded files) */
    const broken = C.brokenGroups(character);

    /* Dialog state for the broken-group warning. When a career-mode user
       clicks +1 on a skill whose raise would break an intact group, we
       stash the intended action here until they confirm or cancel. */
    const [breakGroupPrompt, setBreakGroupPrompt] = useState(null);

    /* ---------- handlers ---------- */
    function handleSkillChange(skillKey, newRating) {
        if (inCareer) {
            /* Check if this raise would break an intact group. If so, pop
               the confirmation dialog rather than staging directly. */
            if (newRating > C.skillRatingProjected(character, skillKey)) {
                const wouldBreak = C.groupThatWouldBreak(character, skillKey);
                if (wouldBreak) {
                    setBreakGroupPrompt({
                        groupKey: wouldBreak,
                        skillKey,
                        newRating,
                    });
                    return;
                }
            }
            onChange(C.stagePendingSkillDelta(character, skillKey, newRating));
        } else {
            /* Phase 16 — Creation mode: if the skill is covered by a bought
               group AND we're raising, break the group first. Breaking is
               free; the raise uses karma. */
            const committedRating = C.skillRating(character, skillKey);
            if (newRating > committedRating) {
                const groupKey = D.SKILL_TO_GROUP[skillKey];
                const groupRating = character?.skillGroups?.[groupKey] || 0;
                if (groupRating > 0) {
                    /* Confirm before breaking; same UX as career mode. */
                    setBreakGroupPrompt({
                        groupKey,
                        skillKey,
                        newRating,
                    });
                    return;
                }
            }
            onChange(C.setSkillRating(character, skillKey, newRating));
        }
    }
    function handleGroupChange(groupKey, newRating) {
        if (inCareer) {
            onChange(C.stagePendingGroupDelta(character, groupKey, newRating));
        } else {
            onChange(C.setSkillGroupRating(character, groupKey, newRating));
        }
    }
    function handleSpecChange(skillKey, label) {
        if (inCareer) {
            onChange(C.stagePendingNewSpec(character, skillKey, label));
        } else {
            onChange(C.setSkillSpecialization(character, skillKey, label));
        }
    }

    /* Confirm a broken-group raise — career: stage the break + stage skill raise;
       creation: apply the break immediately then raise the skill. */
    function confirmBreakAndRaise() {
        if (!breakGroupPrompt) return;
        if (inCareer) {
            let c = C.stageBreakGroup(character, breakGroupPrompt.groupKey);
            c = C.stagePendingSkillDelta(c, breakGroupPrompt.skillKey, breakGroupPrompt.newRating);
            onChange(c);
        } else {
            let c = C.breakGroupAtCreation(character, breakGroupPrompt.groupKey);
            c = C.setSkillRating(c, breakGroupPrompt.skillKey, breakGroupPrompt.newRating);
            onChange(c);
        }
        setBreakGroupPrompt(null);
    }

    /* ---------- group row ---------- */
    function renderGroupRow(group) {
        const committedRating = C.skillGroupRating(character, group.key);
        const rating = inCareer ? C.skillGroupRatingProjected(character, group.key) : committedRating;
        const hasPending = inCareer && (rating !== committedRating);
        const active = rating > 0;
        const intact = inCareer ? C.groupIsIntact(character, group.key) : active;
        const memberLabels = group.skills.map(k => D.ACTIVE_SKILLS.find(s => s.key === k)?.label || k);

        let canInc, canDec, incTitle;
        if (inCareer) {
            /* Raising requires intact group OR committed==0 (new group path).
               Cost per step is new × 5 karma. Cap at 6. */
            const nextRating = rating + 1;
            let stepCumulative = 0;
            for (let r = committedRating + 1; r <= nextRating; r++) stepCumulative += C.karmaCostSkillGroupRaise(r);
            const p = C.pendingChanges(character);
            const alreadyStagedDelta = p.groupDeltas?.[group.key]?.karmaCost || 0;
            const alreadyStagedNew = (p.newGroups || []).find(a => a.groupKey === group.key)?.karmaCost || 0;
            const alreadyStaged = alreadyStagedDelta + alreadyStagedNew;
            const totalIfIncreased = (C.pendingKarmaDelta(character) - alreadyStaged) + stepCumulative;
            const affordable = totalIfIncreased <= karmaAvailable;
            /* Raising possible if: rating < 6 AND (committed group still intact OR it's a new group) AND affordable */
            canInc = rating < 6 && (intact || committedRating === 0) && affordable;
            /* Decrementing: only unwind pending raises. */
            canDec = rating > committedRating;
            if (!canInc && rating < 6 && !intact && committedRating > 0) incTitle = 'Group is broken — raise individual skills instead';
            else if (!canInc && rating < 6) incTitle = 'Not enough karma';
        } else {
            /* Creation: skill groups cap at 4 per RAW (CRB p. 62).
               Phase 16: allow karma spillover when group-points exhausted. */
            canInc = rating < 4 && (active || groupSpent < groupTotal);
            canDec = rating > 0;
            if (!canInc && rating >= 4) {
                incTitle = 'Group rating capped at 4 during creation';
            } else if (!canInc && rating < 4) {
                /* Group points exhausted — try karma */
                const kt = C.karmaTotals(character);
                const costOfNext = C.karmaCostSkillGroupRaise(rating + 1);
                if (kt.remaining >= costOfNext) {
                    canInc = true;
                    incTitle = `Will spend ${costOfNext} karma (group points exhausted)`;
                } else {
                    incTitle = `Group points exhausted; needs ${costOfNext} karma (have ${kt.remaining})`;
                }
            }
        }

        return (
            <div className={`skill-group-row ${active ? 'active' : ''} ${hasPending ? 'pending' : ''}`} key={group.key}>
                <div>
                    <span className="sg-name">{group.label}</span>
                    <span className="sg-members">{memberLabels.join(' · ')}</span>
                </div>
                <div className="sg-stepper">
                    <button className="stepper-btn" style={{ width: 24, height: 24, fontSize: 14 }}
                            onClick={() => handleGroupChange(group.key, rating - 1)}
                            disabled={!canDec} title="Decrease">−</button>
                    <span className={`skill-rating-value ${hasPending ? 'pending-value' : ''}`}>{rating}</span>
                    <button className="stepper-btn" style={{ width: 24, height: 24, fontSize: 14 }}
                            onClick={() => handleGroupChange(group.key, rating + 1)}
                            disabled={!canInc} title={incTitle || 'Increase'}>+</button>
                </div>
            </div>
        );
    }

    /* ---------- skill row ---------- */
    function renderSkillRow(skill) {
        const committedRating = C.skillRating(character, skill.key);
        const projectedRating = inCareer ? C.skillRatingProjected(character, skill.key) : committedRating;
        const individualRating = projectedRating;
        const hasPendingChange = inCareer && (projectedRating !== committedRating);
        const effective = C.effectiveSkillRating(character, skill.key);  /* effective still uses committed */
        const coveredByGroup = inCareer
            ? C.skillIsCoveredByGroupProjected(character, skill.key)
            : C.skillIsCoveredByGroup(character, skill.key);
        const trained = projectedRating > 0 || effective > 0;
        const dicePool = C.skillDicePool(character, skill);  /* still committed for dice */
        const defaulting = !trained && skill.defaultable;
        const cantUse = !trained && !skill.defaultable;
        const committedSpec = C.skillSpecialization(character, skill.key);
        const pendingSpec = inCareer
            ? ((C.pendingChanges(character).newSpecs || []).find(s => s.skillKey === skill.key)?.label || null)
            : null;
        const spec = pendingSpec !== null ? pendingSpec : committedSpec;
        const hasSpec = !!spec;
        const hasPendingSpec = inCareer && (pendingSpec !== null);
        const dicePoolWithSpec = C.skillDicePoolWithSpec(character, skill);

        const linkedAttrLabel = D.ATTRIBUTES.find(a => a.key === skill.attr)?.abbr
                              || D.SPECIAL_ATTRIBUTES.find(a => a.key === skill.attr)?.abbr
                              || skill.attr.toUpperCase();

        /* Can-inc / can-dec logic differs by mode.
           - Creation: bounded by skill-point budget; covered-by-group blocks.
           - Career: bounded by karma; covered-by-group does NOT block —
             clicking + triggers the break-group dialog via handleSkillChange.
             Can't decrement below committed yet (refund flow is later). */
        let canInc, canDec;
        if (inCareer) {
            const nextRating = projectedRating + 1;
            const p = C.pendingChanges(character);
            const alreadyStaged = p.skillDeltas?.[skill.key]?.karmaCost || 0;
            const totalIfIncreased = (C.pendingKarmaDelta(character) - alreadyStaged)
                + (function() {
                    let sum = 0;
                    for (let r = committedRating + 1; r <= nextRating; r++) sum += C.karmaCostSkillRaise(r);
                    return sum;
                })();
            canInc = projectedRating < C.skillMaxRating(character, skill.key) && totalIfIncreased <= karmaAvailable;
            canDec = !coveredByGroup && projectedRating > committedRating;
        } else {
            /* Phase 16 — creation mode:
               - If not covered by group: can raise with points OR karma
                 (points spent first, then karma for any excess).
               - If covered by group: clicking + will break the group and
                 promote each member skill to the group's prior rating,
                 then add +1 from that baseline. The break itself is free
                 (it's just a rearrangement); the +1 costs karma.
            */
            const kt = C.karmaTotals(character);
            const karmaRemaining = kt.remaining;
            const groupKey = D.SKILL_TO_GROUP[skill.key];
            const groupRating = groupKey ? (character?.skillGroups?.[groupKey] || 0) : 0;
            const baselineForRaise = coveredByGroup ? groupRating : individualRating;
            const nextRating = baselineForRaise + 1;
            const karmaCostOfNext = C.karmaCostSkillRaise(nextRating);
            const pointsAvailable = spent < total;
            const karmaAvailable_ = karmaRemaining >= karmaCostOfNext;
            /* Phase 19 — respect Aptitude (max = 7 for chosen skill). */
            const skillCap = C.skillMaxRating(character, skill.key);
            if (coveredByGroup) {
                /* Breaking the group creates the skill at groupRating, then we spend
                   karma for the +1 to (groupRating + 1). */
                canInc = individualRating < skillCap && groupRating < 6 && karmaAvailable_;
            } else {
                canInc = individualRating < skillCap && (pointsAvailable || karmaAvailable_);
            }
            canDec = !coveredByGroup && individualRating > 0;
        }
        /* Spec availability:
           - Creation: covered-by-group blocks it (RAW at creation).
           - Career: also blocked by intact group; karma-afford gate.
           - Always requires trained skill (effective >= 1). */
        let canSpec;
        if (inCareer) {
            const groupKey = D.SKILL_TO_GROUP[skill.key];
            const intact = groupKey ? C.groupIsIntact(character, groupKey) : false;
            /* Affordability: if there's already a pending spec on this skill, editing
               it doesn't add cost. Otherwise 2 karma. */
            const addCost = hasPendingSpec ? 0 : C.KARMA_COST_SPECIALIZATION;
            const affordable = (C.pendingKarmaDelta(character) + addCost) <= karmaAvailable;
            canSpec = !intact && projectedRating >= 1 && affordable;
        } else {
            /* Creation: specs cost 1 skill point (already counted in
               skillPointsSpent). Covered-by-group skills can't be spec'd
               without breaking the group. */
            canSpec = !coveredByGroup && effective >= 1;
        }

        let rowClass = 'skill-row-with-spec';
        if (trained) rowClass += ' trained';
        if (coveredByGroup) rowClass += ' via-group';
        if (hasPendingChange) rowClass += ' pending';

        return (
            <div className={rowClass} key={skill.key}>
                <div className="skill-name">
                    <span>{skill.label}</span>
                </div>
                <div className="skill-attr">{linkedAttrLabel}</div>
                {/* Show stepper in all cases except when there's truly nothing to do.
                   For covered-by-group skills in creation mode, the stepper still
                   shows — clicking + triggers the break-group confirm. */}
                <div className="skill-rating-stepper">
                    <button className="stepper-btn" style={{ width: 24, height: 24, fontSize: 14 }}
                            onClick={() => handleSkillChange(skill.key, individualRating - 1)}
                            disabled={!canDec}
                            title={coveredByGroup && !inCareer ? 'Skill is covered by a bought group — rank is set by the group' : 'Decrease'}>−</button>
                    <span className={`skill-rating-value ${hasPendingChange ? 'pending-value' : ''}`}>
                        {coveredByGroup ? effective : individualRating}
                        {coveredByGroup && (
                            <span className="via-label" style={{ marginLeft: 4, fontSize: 9 }}>grp</span>
                        )}
                    </span>
                    <button className="stepper-btn" style={{ width: 24, height: 24, fontSize: 14 }}
                            onClick={() => handleSkillChange(skill.key,
                                (coveredByGroup ? effective : individualRating) + 1)}
                            disabled={!canInc}
                            title={
                                coveredByGroup && canInc
                                    ? 'Raising will break the group (confirm dialog)'
                                : !inCareer && coveredByGroup && !canInc
                                    ? 'Not enough karma to break group and raise'
                                : inCareer && !canInc && projectedRating < 6
                                    ? 'Not enough karma'
                                : ''}>+</button>
                </div>
                <div>
                    {cantUse ? (
                        <div className="dice-pool zero">—</div>
                    ) : hasSpec && effective >= 1 ? (
                        <div className="dice-pool-with-spec">
                            <span className="base">{dicePool}</span>
                            <span className="with-spec">{dicePoolWithSpec}</span>
                        </div>
                    ) : (
                        <div className={`dice-pool ${defaulting ? 'defaulted' : ''}`}>
                            {dicePool}
                        </div>
                    )}
                </div>
                <div>
                    <input
                        className={`spec-input ${hasSpec ? 'has-value' : ''} ${hasPendingSpec ? 'pending-value' : ''}`}
                        type="text"
                        value={spec}
                        disabled={!canSpec}
                        onChange={e => handleSpecChange(skill.key, e.target.value)}
                        placeholder={canSpec ? (inCareer ? 'spec (2 karma)…' : 'spec +2…') : (coveredByGroup ? 'grp' : '—')}
                        list={`spec-suggestions-${skill.key}`}
                        title={canSpec
                            ? (inCareer ? 'Specialization costs 2 karma. Adds +2 dice when applicable.' : 'Optional specialization, costs 1 skill point, adds +2 dice when applicable')
                            : ''}
                    />
                    {skill.specSuggestions && canSpec && (
                        <datalist id={`spec-suggestions-${skill.key}`}>
                            {skill.specSuggestions.map(s => <option key={s} value={s} />)}
                        </datalist>
                    )}
                </div>
            </div>
        );
    }

    const categoryFilters = [{ key: 'all', label: 'All' }, ...D.SKILL_CATEGORIES];
    const availableGroups = D.SKILL_GROUPS.filter(groupIsAvailable);

    return (
        <>
            <ContentHeader title="04 / Skills" heading="Train active skills" />

            {/* Skill Groups card — show in career mode always; creation only if points allocated. */}
            {(inCareer || groupTotal > 0 || groupSpent > 0) && (
                <div className="card" style={{ marginBottom: 14 }}>
                    <div className="card-header">
                        <h3 className="card-title">Skill Groups</h3>
                        <div className="card-header-right">
                            {inCareer ? (
                                <span className="points-chip" title="Karma available for group raises">
                                    <span className="pc-label">karma</span>
                                    <span className="pc-value">
                                        {karmaAvailable - C.pendingKarmaDelta(character)} / {karmaAvailable}
                                    </span>
                                </span>
                            ) : (
                                <PointsChip label="group pts" spent={groupSpent} total={groupTotal} />
                            )}
                        </div>
                    </div>
                    <div className="skill-groups-grid">
                        {availableGroups.map(renderGroupRow)}
                    </div>
                    {broken.length > 0 && (
                        <div style={{ padding: '0 20px 14px' }}>
                            <div className="broken-group-warning">
                                Broken group{broken.length > 1 ? 's' : ''}: {broken.map(g => g.label).join(', ')}. A group with individual member ranks can't be used as a group in play. Either clear the individual ranks or set the group rating to 0.
                            </div>
                        </div>
                    )}
                </div>
            )}

            {/* Skill points summary (creation) / Karma indicator (career) */}
            <div className="card" style={{ marginBottom: 10 }}>
                <div className="card-header">
                    <h3 className="card-title">Individual Skills</h3>
                    <div className="card-header-right">
                        {inCareer ? (
                            <span className="points-chip" title="Karma available for spending on skill raises">
                                <span className="pc-label">karma</span>
                                <span className="pc-value">
                                    {karmaAvailable - C.pendingKarmaDelta(character)} / {karmaAvailable}
                                </span>
                            </span>
                        ) : (
                            <PointsChip label="skill pts" spent={spent} total={total} />
                        )}
                    </div>
                </div>
            </div>

            <div className="skills-toolbar">
                <input
                    className="skill-search"
                    type="text"
                    value={search}
                    onChange={e => setSearch(e.target.value)}
                    placeholder="Search skills..."
                />
                <div className="skill-filters">
                    {categoryFilters.map(c => (
                        <div key={c.key}
                             className={`filter-chip ${category === c.key ? 'active' : ''}`}
                             onClick={() => setCategory(c.key)}>
                            {c.label}
                        </div>
                    ))}
                    <div className={`filter-chip ${showOnlyTrained ? 'active' : ''}`}
                         onClick={() => setShowOnlyTrained(v => !v)}
                         title="Show only skills with an effective rating of at least 1">
                        Trained
                    </div>
                </div>
            </div>

            <div className="skills-table">
                <div className="skills-table-head-with-spec">
                    <div>Skill</div>
                    <div>Attr</div>
                    <div>Rating</div>
                    <div style={{ textAlign: 'right' }}>Dice Pool</div>
                    <div>Specialization</div>
                </div>
                {Object.keys(byCategory).length === 0 ? (
                    <div className="skills-empty-category">no skills match the current filter</div>
                ) : (
                    D.SKILL_CATEGORIES
                        .filter(cat => byCategory[cat.key])
                        .map(cat => (
                            <React.Fragment key={cat.key}>
                                <div className="skills-category-label">{cat.label}</div>
                                {byCategory[cat.key].map(renderSkillRow)}
                            </React.Fragment>
                        ))
                )}
            </div>

            {/* Phase 2.75: Knowledge & Language skills */}
            <KnowledgeSkillsCard character={character} onChange={onChange} />

            <div className="phase-note" style={{ marginTop: 20 }}>
                <strong>Phase 2.75.</strong> Active skills, skill groups, specializations, and now knowledge/language skills.
                Knowledge pool is free at (INT + LOG) × 2 and updates live when you change those attributes. Native language
                is free and counts as rating 6. Next up: <strong>Phase 3</strong> — Qualities (positive &amp; negative traits bought with karma)
                and the generic EntityPicker component that will power every gear tab that follows.
            </div>

            {breakGroupPrompt && (
                <BreakGroupDialog
                    groupKey={breakGroupPrompt.groupKey}
                    skillKey={breakGroupPrompt.skillKey}
                    newRating={breakGroupPrompt.newRating}
                    character={character}
                    onCancel={() => setBreakGroupPrompt(null)}
                    onConfirm={confirmBreakAndRaise}
                />
            )}
        </>
    );
};

/* ------------------------------------------------------------
   BreakGroupDialog — shown at stage time when raising a skill
   individually would break an intact group. Per SR5 RAW, this
   side-effect is permanent: the group drops to 0, each member
   is baked as an individual skill at the former group rating,
   and the group can never be raised as a group again.
   ------------------------------------------------------------ */
function BreakGroupDialog({ groupKey, skillKey, newRating, character, onCancel, onConfirm }) {
    const D = SR5_DATA;
    const C = SR5_CALC;
    const group = D.SKILL_GROUPS.find(g => g.key === groupKey);
    const skill = D.ACTIVE_SKILLS.find(s => s.key === skillKey);
    const groupRating = C.skillGroupRating(character, groupKey);
    const memberLabels = (group?.skills || []).map(k => D.ACTIVE_SKILLS.find(s => s.key === k)?.label || k);
    /* Karma for the raise itself. Break is free — the skill comes out of
       the break at groupRating, so we only charge karma for ranks ABOVE
       groupRating up to newRating. */
    const baselineAfterBreak = groupRating;
    let raiseCost = 0;
    for (let r = baselineAfterBreak + 1; r <= newRating; r++) raiseCost += C.karmaCostSkillRaise(r);

    const footer = (
        <div className="footer-actions" style={{ width: '100%', justifyContent: 'flex-end', gap: 8 }}>
            <button className="btn btn-ghost" onClick={onCancel}>Cancel</button>
            <button className="btn btn-primary" onClick={onConfirm}>
                Break group and raise {skill?.label || skillKey} ({raiseCost} karma)
            </button>
        </div>
    );

    return (
        <Modal title={`Break ${group?.label || groupKey} group?`} onClose={onCancel} footer={footer}>
            <div style={{ padding: '20px 24px', width: '100%' }}>
                <p style={{ marginTop: 0 }}>
                    The <strong>{group?.label || groupKey}</strong> group is currently at
                    rating <strong>{groupRating}</strong>. Raising <strong>{skill?.label || skillKey}</strong>
                    {' '}individually will permanently break the group.
                </p>
                <div style={{ padding: 12, background: 'rgba(191, 92, 80, 0.06)', borderLeft: '2px solid var(--bad)', borderRadius: 2, margin: '12px 0' }}>
                    <div style={{ fontSize: 12, lineHeight: 1.5 }}>
                        When committed, the following will happen:
                        <ul style={{ margin: '8px 0 0 18px', padding: 0, fontSize: 11 }}>
                            <li>The <strong>{group?.label || groupKey}</strong> group drops to 0.</li>
                            <li>Each member ({memberLabels.join(', ')}) gets set as an individual skill at rating {groupRating}.</li>
                            <li>The group cannot be raised as a group again — only the individual skills can be raised.</li>
                        </ul>
                    </div>
                </div>
                <p className="muted" style={{ fontSize: 12 }}>
                    The break itself costs no karma. Raising {skill?.label || skillKey}
                    {' '}from rating {groupRating} to {newRating} costs <strong>{raiseCost} karma</strong>.
                </p>
            </div>
        </Modal>
    );
}