/**
 * GameCompletion component displays success message when game is completed.
 * 
 * Shows statistics and provides option to play again.
 */

function GameCompletion({ clickCount, elapsedTime, path, onPlayAgain }) {
  // elapsedTime is the startTime, calculate final time from current time
  // Timer will stop when isActive is false
  const { formattedTime } = useTimer(elapsedTime, false);

  return React.createElement(
    'div',
    { className: 'game-completion' },
    React.createElement('h2', { className: 'completion-title' }, '🎉 Congratulations!'),
    React.createElement(
      'p',
      { className: 'completion-message' },
      'You reached the target page!'
    ),
    React.createElement(
      'div',
      { className: 'completion-stats' },
      React.createElement(
        'div',
        { className: 'stat-item' },
        React.createElement('span', { className: 'stat-label' }, 'Total Clicks: '),
        React.createElement('span', { className: 'stat-value' }, clickCount)
      ),
      React.createElement(
        'div',
        { className: 'stat-item' },
        React.createElement('span', { className: 'stat-label' }, 'Time: '),
        React.createElement('span', { className: 'stat-value' }, formattedTime)
      ),
      React.createElement(
        'div',
        { className: 'stat-item' },
        React.createElement('span', { className: 'stat-label' }, 'Path Length: '),
        React.createElement('span', { className: 'stat-value' }, path ? path.length : 0)
      )
    ),
    path && path.length > 0 && React.createElement(
      'div',
      { className: 'completion-path' },
      React.createElement('h3', { className: 'path-title' }, 'Complete Path:'),
      React.createElement(
        'div',
        { className: 'path-list' },
        path.map((page, index) => 
          React.createElement(
            'div',
            { key: index, className: 'path-item' },
            React.createElement('span', { className: 'path-number' }, `${index + 1}.`),
            React.createElement('span', { className: 'path-page' }, page)
          )
        )
      )
    ),
    React.createElement(
      'div',
      { className: 'completion-actions' },
      onPlayAgain && React.createElement(
        'button',
        {
          type: 'button',
          className: 'btn btn-primary',
          onClick: (e) => {
            e.preventDefault();
            e.stopPropagation();
            // Call the handler - it may or may not expect an event
            if (typeof onPlayAgain === 'function') {
              onPlayAgain(e);
            }
          },
        },
        'Play Again'
      )
    )
  );
}