import { useNavigate } from 'react-router-dom';
import useFocusTrap from '../hooks/useFocusTrap';
import './UpgradePrompt.css';

export default function UpgradePrompt({ onClose, feature = 'this feature' }) {
  const navigate = useNavigate();

  // Focus trap with escape key handling and auto-focus
  const modalRef = useFocusTrap(true, {
    onEscape: onClose,
    autoFocus: true,
    restoreFocus: true
  });

  const handleCreateAccount = () => {
    onClose();
    navigate('/register');
  };

  const benefits = [
    { icon: '💾', title: 'Save Your Progress', description: 'Keep track of your high scores and achievements' },
    { icon: '🎮', title: 'Create Games', description: 'Design your own games with our easy wizard' },
    { icon: '🏆', title: 'Earn Achievements', description: 'Unlock cool badges as you play and create' },
    { icon: '👥', title: 'Follow Creators', description: 'Get notified when your favorite creators make new games' }
  ];

  return (
    <div className="upgrade-overlay" onClick={onClose} role="dialog" aria-modal="true" aria-labelledby="upgrade-title">
      <div className="upgrade-modal" ref={modalRef} onClick={e => e.stopPropagation()}>
        <button className="upgrade-close" onClick={onClose} aria-label="Close upgrade prompt">&times;</button>

        <div className="upgrade-header">
          <span className="upgrade-icon" aria-hidden="true">🌟</span>
          <h2 id="upgrade-title">Create Your Free Account!</h2>
          <p className="upgrade-subtitle">
            You need an account to {feature}. It's free and only takes a minute!
          </p>
        </div>

        <div className="upgrade-benefits">
          <h3>With a free account, you can:</h3>
          <ul className="benefits-list">
            {benefits.map((benefit, index) => (
              <li key={index} className="benefit-item">
                <span className="benefit-icon">{benefit.icon}</span>
                <div className="benefit-text">
                  <strong>{benefit.title}</strong>
                  <span>{benefit.description}</span>
                </div>
              </li>
            ))}
          </ul>
        </div>

        <div className="upgrade-actions">
          <button className="btn btn-primary upgrade-btn" onClick={handleCreateAccount}>
            Create Account
          </button>
          <button className="btn btn-secondary maybe-later-btn" onClick={onClose}>
            Maybe Later
          </button>
        </div>

        <p className="upgrade-note">
          You can still play all games as a guest - no worries!
        </p>
      </div>
    </div>
  );
}