/**
 * 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';

const WaitingOverlayContent = ({ shareUrl, currentGameAssoc }) => {
  const [dialogOpen, setDialogOpen] = useState(false);

  return (
    <Fragment>
      <div className="waiting-options">
        <div className="waiting-option">
          <div className="waiting-option-header">
            <i className="fa fa-link" />
            <span>Invite a Friend</span>
          </div>
          <p className="waiting-option-desc">Share this link with your opponent</p>
          <ShareLinkBox
            url={shareUrl}
          />
        </div>
        <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>
      </div>

      <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(() => {});
  };

  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;