/**
 * This file is part of the SplendidBear Websites' projects.
 *
 * Copyright (c) 2026 @ www.splendidbear.org
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */
import { Fragment, useState } from 'react';
import { OnlinePlayersDialog } from '@mine-components';
import { bool, string } from 'prop-types';

const WaitingOverlayContent = ({ shareUrl, currentGameAssoc, opponentName = '', inviteOnly = false }) => {
  const [dialogOpen, setDialogOpen] = useState(false);
  const inviteHeader = inviteOnly && opponentName
    ? `Invite ${opponentName}`
    : 'Invite a Friend';

  return (
    <Fragment>
      <div className={`waiting-options${inviteOnly ? ' waiting-options--invite-only' : ''}`}>
        <div className="waiting-option">
          <div className="waiting-option-header">
            <i className="fa fa-link" />
            <span>{inviteHeader}</span>
          </div>
          <p className="waiting-option-desc">Share this link with your opponent</p>
          <ShareLinkBox
            url={shareUrl}
          />
        </div>
        {!inviteOnly && (
          <Fragment>
            <div className="waiting-divider">
              <span>OR</span>
            </div>
            <div className="waiting-option">
              <div className="waiting-option-header">
                <i className="fa fa-users" />
                <span>Challenge a Player</span>
              </div>
              <p className="waiting-option-desc">Browse online players and challenge them</p>
              <button
                className="browse-players-btn"
                onClick={() => setDialogOpen(true)}
              >
                <i className="fa fa-search" />
                Browse Players
              </button>
            </div>
          </Fragment>
        )}
      </div>

      {!inviteOnly && (
        <OnlinePlayersDialog
          open={dialogOpen}
          onClose={() => setDialogOpen(false)}
          currentGameAssoc={currentGameAssoc}
        />
      )}
    </Fragment>
  );
};

const ShareLinkBox = ({ url }) => {
  const [copied, setCopied] = useState(false);

  const handleCopy = () => {
    navigator.clipboard.writeText(url)
      .then(() => {
        setCopied(true);
        setTimeout(() => setCopied(false), 2500);
      })
      .catch(() => null);
  };

  return (
    <div className="share-invite">
      <div className="share-url-box" onClick={e => e.currentTarget.querySelector('input').select()}>
        <i className="fa fa-link share-url-icon" />
        <input
          className="share-url-input"
          readOnly
          value={url}
          onClick={e => e.target.select()}
        />
      </div>
      <button className={`share-copy-btn${copied ? ' copied' : ''}`} onClick={handleCopy}>
        <i className={`fa ${copied ? 'fa-check' : 'fa-clipboard'}`} />
        {copied ? 'Copied!' : 'Copy Link'}
      </button>
    </div>
  );
};

export default WaitingOverlayContent;

WaitingOverlayContent.propTypes = {
  shareUrl:         string.isRequired,
  currentGameAssoc: string,
  opponentName:     string,
  inviteOnly:       bool,
};