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


/* ------------------------------------------------------------
   Priority grid. The signature SR5 character-creation control —
   assign A/B/C/D/E across five categories, each letter used once.
   ------------------------------------------------------------ */
window.PriorityGrid = function PriorityGrid({ priorities, onChange, locked }) {
    /* priorities shape: { A: 'metatype', B: 'attributes', ... }
       meaning "the A-row is assigned to the metatype column" etc.
       When `locked` is true, the grid is read-only (career mode). */

    const categoryForLetter = (letter) => priorities[letter] || null;
    const letterForCategory = (cat) => Object.keys(priorities).find(k => priorities[k] === cat) || null;

    function selectCell(letter, cat) {
        if (locked) return;
        const next = { ...priorities };
        for (const k of Object.keys(next)) {
            if (next[k] === cat) delete next[k];
        }
        delete next[letter];
        next[letter] = cat;
        onChange(next);
    }

    return (
        <div className={`priority-grid ${locked ? 'locked' : ''}`}>
            {/* Header row */}
            <div className="priority-cell header"></div>
            {SR5_DATA.PRIORITY_CATEGORIES.map(col => (
                <div className="priority-cell header" key={col.key}>{col.label}</div>
            ))}

            {/* Body rows */}
            {SR5_DATA.PRIORITY_LETTERS.map(letter => (
                <React.Fragment key={letter}>
                    <div className="priority-cell row-label">{letter}</div>
                    {SR5_DATA.PRIORITY_CATEGORIES.map(col => {
                        const cell = SR5_DATA.PRIORITY_TABLE[letter][col.key];
                        const isSelected = categoryForLetter(letter) === col.key;
                        const claimedLetter = letterForCategory(col.key);
                        const isDimmed = claimedLetter && claimedLetter !== letter;
                        const classes = ['priority-cell', 'option'];
                        if (isSelected) classes.push('selected');
                        else if (isDimmed) classes.push('selected-in-col');
                        if (locked) classes.push('locked');
                        return (
                            <div
                                key={col.key}
                                className={classes.join(' ')}
                                onClick={() => selectCell(letter, col.key)}
                                title={locked ? 'Locked — career mode' : cell.label}
                            >
                                <div className="opt-value">{shortLabel(col.key, cell)}</div>
                                <div className="opt-label">{subLabel(col.key, cell)}</div>
                            </div>
                        );
                    })}
                </React.Fragment>
            ))}
        </div>
    );
};


/* Helpers to render compact cell content. The full text is in the tooltip. */
window.shortLabel = function shortLabel(catKey, cell) {
    if (catKey === 'attributes') return `${cell.points} points`;
    if (catKey === 'skills') return `${cell.skillPoints} / ${cell.groupPoints}`;
    if (catKey === 'resources') return `${(cell.nuyen / 1000).toLocaleString()}k¥`;
    if (catKey === 'magic') return magicSummary(cell);
    if (catKey === 'metatype') return metatypeSummary(cell);
    return cell.label;
}


window.subLabel = function subLabel(catKey, cell) {
    if (catKey === 'skills') return 'active / group';
    if (catKey === 'attributes') return 'attribute points';
    if (catKey === 'magic') return 'awakened tier';
    if (catKey === 'metatype') return cell.available.length + ' options';
    return '';
}


window.magicSummary = function magicSummary(cell) {
    if (!cell) return '';
    if (cell.options) {
        /* New-style row with a list of options */
        if (cell.options.length === 1) {
            const o = cell.options[0];
            if (o.type === 'mundane') return 'Mundane';
            if (o.type === 'technomancer') return `Technomancer (${o.resonance})`;
            return `${o.label} (${o.magic})`;
        }
        /* Multiple options: show highest Magic/Resonance across them */
        const maxM = Math.max(...cell.options.map(o => Math.max(o.magic || 0, o.resonance || 0)));
        return `Awakened (${maxM})`;
    }
    /* Legacy single-type row (in case anything still has it) */
    if (cell.type === 'mundane') return 'Mundane';
    if (cell.type === 'full_magician') return 'Magician (6)';
    if (cell.type === 'magician') return `Magician (${cell.magic})`;
    if (cell.type === 'aspected') return `Aspected (${cell.magic})`;
    return cell.label;
}


window.metatypeSummary = function metatypeSummary(cell) {
    return cell.available.map(m => SR5_DATA.METATYPES[m].name[0]).join('/');
}