import { useEffect, useRef } from 'react';
import { parseFenMeta } from '../engine/pgnFormat.js';
import { buildMoveListItems, buildVariation } from '../engine/moveLine.js';
import { scrollIntoViewWithin } from '../engine/scroll.js';
import Button from './ui/Button.jsx';
import Panel from './ui/Panel.jsx';

function MoveButton({ node, isCurrent, chip, onGoTo }) {
    const cls = `move-line__move${chip ? ' move-line__move--chip' : ''}${isCurrent ? ' is-current' : ''}`;
    return <button className={cls} onClick={onGoTo ? () => onGoTo(node.id) : undefined}>{node.san}</button>;
}

function renderItems(items, nodes, rootChildren, currentId, onGoTo, keyPrefix) {
    return items.flatMap((item, idx) => {
        const key = `${keyPrefix}-${idx}`;
        if (item.kind === 'row') {
            const whiteEmpty = !item.white || item.white.placeholder;
            return [
                <div className="move-line__row" key={key}>
                    <span className="move-line__num">{item.num}.</span>
                    <span
                        className={`move-line__cell move-line__cell--white${whiteEmpty ? ' move-line__cell--empty' : ''}${item.white?.placeholder ? ' move-line__cell--placeholder' : ''}${item.white?.isCurrent ? ' is-current' : ''}`}
                        onClick={item.white && !item.white.placeholder ? () => onGoTo(item.white.node.id) : undefined}
                    >
                        {item.white?.placeholder ? '...' : null}
                        {item.white && !item.white.placeholder && <MoveButton node={item.white.node} isCurrent={item.white.isCurrent} />}
                    </span>
                    <span
                        className={`move-line__cell move-line__cell--black${!item.black ? ' move-line__cell--empty' : ''}${item.black?.isCurrent ? ' is-current' : ''}`}
                        onClick={item.black ? () => onGoTo(item.black.node.id) : undefined}
                    >
                        {item.black && <MoveButton node={item.black.node} isCurrent={item.black.isCurrent} />}
                    </span>
                </div>,
            ];
        }
        if (item.kind === 'para') {
            return [
                <div className="move-line__variation" key={key} style={{ paddingLeft: `${1.5 * item.depth}rem` }}>
                    {item.chips.map((chip, ci) => chip.kind === 'num'
                        ? <span className="move-line__num move-line__num--inline" key={ci}>{chip.text}</span>
                        : <MoveButton key={ci} node={chip.node} isCurrent={chip.isCurrent} chip onGoTo={onGoTo} />)}
                </div>,
            ];
        }
        // 'variation' marker - expand lazily so nested forks don't need to
        // be walked until they're actually reached.
        const varItems = buildVariation(nodes, rootChildren, item.nodeIds, item.whiteToMove, item.moveNum, currentId, item.depth);
        return renderItems(varItems, nodes, rootChildren, currentId, onGoTo, `${key}-v`);
    });
}

export default function PgnPanel({ explorer }) {
    const { moveHistory, startFen, historyInitialized, actions } = explorer;
    const { nodes, rootChildren, currentId } = moveHistory;
    const scrollRef = useRef(null);

    useEffect(() => {
        const container = scrollRef.current;
        const current = container?.querySelector('.is-current');
        scrollIntoViewWithin(current, container);
    }, [currentId, nodes]);

    let content = null;
    if (!historyInitialized) {
        content = null;   // no render until Board reports its first move-tree change
    } else if (!rootChildren || rootChildren.length === 0) {
        content = <span className="move-line__empty">No moves yet</span>;
    } else {
        const { turn, fullmove } = parseFenMeta(startFen);
        const items = buildMoveListItems(nodes, rootChildren, currentId, turn, fullmove);
        content = renderItems(items, nodes, rootChildren, currentId, actions.goToNode, 'm');
    }

    return (
        <Panel
            className="pgn-panel" label="Game PGN" title="PGN"
            end={
                <>
                    <Button id="pgn-btn" compact icon="upload" title="Import PGN game" onClick={() => actions.openPgnDialog()}>Import</Button>
                    <Button id="pgn-export-btn" compact icon="download" title="Download game as PGN" onClick={() => actions.exportPgn()}>Export</Button>
                </>
            }
        >
            <div className="pgn-moves-scroll" role="region" aria-label="Move history" tabIndex={0} ref={scrollRef}>
                <div id="move-line" className="move-line" role="list" aria-label="Played moves">
                    {content}
                </div>
            </div>
        </Panel>
    );
}