import React from 'react';
import './QRModal.css';

const QRModal = ({ isOpen, onClose, qrCode, roomCode }) => {
  if (!isOpen) return null;

  const handleBackdropClick = (e) => {
    if (e.target === e.currentTarget) {
      onClose();
    }
  };

  // Используем абсолютный URL для работы из любого приложения
  const origin = window.location.origin || 
    `${window.location.protocol}//${window.location.host}`;
  const joinUrl = `${origin}/join-room?code=${roomCode}`;

  return (
    <div className="qr-modal-backdrop" onClick={handleBackdropClick}>
      <div className="qr-modal-content">
        <div className="qr-modal-header">
          <h2 className="qr-modal-title">QR-код для присоединения</h2>
          <button className="qr-modal-close" onClick={onClose}>
            ×
          </button>
        </div>
        
        <div className="qr-modal-body">
          <p className="qr-modal-description">
            Отсканируйте этот QR-код, чтобы быстро присоединиться к комнате. 
            Игроки могут использовать камеру своего телефона для сканирования.
          </p>
          
          {qrCode && (
            <div className="qr-modal-image-container">
              <img src={qrCode} alt="QR Code" className="qr-modal-image" />
            </div>
          )}
          
          <div className="qr-modal-code-info">
            <p className="qr-modal-code-label">Код комнаты:</p>
            <p className="qr-modal-code-value">{roomCode}</p>
          </div>
          
          <div className="qr-modal-url-info">
            <p className="qr-modal-url-label">Или перейдите по ссылке:</p>
            <a 
              href={joinUrl} 
              className="qr-modal-url-link"
              target="_blank"
              rel="noopener noreferrer"
            >
              {joinUrl}
            </a>
          </div>
        </div>
      </div>
    </div>
  );
};

export default QRModal;