// Paywall modal — shown in place of the tool body when the user lacks the
// required entitlement. For now, "Unlock" is a placeholder since real payment
// flow (Stripe) isn't wired up yet; admins can grant entitlements manually.

window.Paywall = function Paywall({ tool, tier, priceCents, signedIn, hasPriceId, onSignIn, onCheckout, onClose }) {
  const [, t] = window.useI18n();
  const cat = window.CATEGORIES.find((c) => c.id === tool.cat);
  const price = (priceCents / 100).toFixed(2);
  const badge = t('paywall.tier_premium');
  const accent = '#2563eb';
  const toolName = window.tTool(tool, 'name') || tool.name;
  const toolDesc = window.tTool(tool, 'desc') || tool.desc;

  React.useEffect(() => {
    const onKey = (e) => e.key === 'Escape' && onClose();
    document.addEventListener('keydown', onKey);
    document.body.style.overflow = 'hidden';
    return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; };
  }, [onClose]);

  return (
    <div className="modal-overlay" onClick={onClose}>
      <div className="modal paywall" onClick={(e) => e.stopPropagation()}>
        <button className="mh-close paywall-close" onClick={onClose} aria-label={t('paywall.close')}>
          <window.Icon name="x" size={18} />
        </button>

        <div className="paywall-hero" style={{ background: `linear-gradient(135deg, ${accent}22 0%, var(--id-surface) 70%)` }}>
          <div className="paywall-tier-chip" style={{ background: accent, color: '#fff' }}>
            <window.Icon name="bolt" size={12} strokeWidth={2.5} />
            {badge}
          </div>
          <div className="paywall-icon" style={{ background: cat.soft, color: cat.tint }}>
            <window.Icon name={tool.icon} size={36} strokeWidth={1.5} />
          </div>
          <h3 className="paywall-title">{t('paywall.title', { tool: toolName, tier: badge })}</h3>
          <p className="paywall-sub">{toolDesc}{t('paywall.desc_suffix')}</p>
        </div>

        <div className="paywall-body">
          <div className="paywall-price">
            <span className="paywall-amount">${price}</span>
            <span className="paywall-period">{t('paywall.price_period')}</span>
          </div>

          <div className="paywall-features">
            <div className="paywall-feature">
              <window.Icon name="check" size={14} strokeWidth={2.5} style={{ color: accent }} />
              <span>{t('paywall.feature_access', { tier: badge.toLowerCase() })}</span>
            </div>
            <div className="paywall-feature">
              <window.Icon name="check" size={14} strokeWidth={2.5} style={{ color: accent }} />
              <span>{t('paywall.feature_quota')}</span>
            </div>
            <div className="paywall-feature">
              <window.Icon name="check" size={14} strokeWidth={2.5} style={{ color: accent }} />
              <span>{t('paywall.feature_privacy')}</span>
            </div>
          </div>

          <div className="paywall-actions">
            {signedIn ? (
              <>
                <button className="btn btn-primary paywall-cta" style={{ background: accent, borderColor: accent }}
                        onClick={onCheckout} disabled={!hasPriceId}>
                  <window.Icon name="bolt" size={16} />
                  {hasPriceId ? t('paywall.unlock_cta', { tier: badge, price }) : t('paywall.not_configured_cta')}
                </button>
                <span className="cmp-meta" style={{ textAlign: 'center' }}>
                  {hasPriceId ? t('paywall.checkout_note') : t('paywall.not_configured_hint')}
                </span>
              </>
            ) : (
              <button className="btn btn-primary paywall-cta" onClick={onSignIn}>
                <window.Icon name="sparkle" size={16} /> {t('paywall.sign_in_cta')}
              </button>
            )}
            <button className="btn btn-secondary" onClick={onClose}>{t('paywall.maybe_later')}</button>
          </div>
        </div>
      </div>
    </div>
  );
};